/*
  Komponenten Marlin – v1.7 (04.11.2026)
  Regel: Bordmittel zuerst. Farben, Hintergründe, Überschriftfarben, Button-Radius und Menügröße
  stehen in den Enfold-Optionen (Allgemeines + Erweitertes Styling, DE und EN). Hier nur, was Enfold
  nicht kann: Schrift-Datei, fließende Größen (clamp), Fokus, Unterstreichung, Breadcrumb, Karten, Woo-Feinheiten.
  Nur Tokens aus tokens.css verwenden, keine festen Einzelwerte.
  Präfix "html body#top #wrap_all" schlägt Enfolds dynamisches CSS (Theme-Optionen / Erweitertes Styling)
  ohne !important.
  Enfold-Umbrüche zur Orientierung: 989px (Tablet), 767px (Smartphone), 479px (kleine Smartphones)
*/

/* ---------- 1. Schrift Inter (lokal, OFL) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------- 2. Grundtext ---------- */
html body#top,
html body#top #wrap_all,
html body#top #wrap_all input,
html body#top #wrap_all select,
html body#top #wrap_all textarea,
html body#top #wrap_all button,
html body#top #wrap_all .avia-button,
html body#top #wrap_all .main_menu .menu > li > a,
html body#top #wrap_all .av-subheading,
html body#top #wrap_all .av-subheading p,
html body#top #wrap_all .widgettitle,
html body#top #wrap_all .breadcrumb {
	font-family: var(--m-font-body);
}

html body#top {
	font-size: var(--m-fs-body);
	line-height: var(--m-lh-body);
}

html body#top #wrap_all .main_color,
html body#top #wrap_all .main_color p,
html body#top #wrap_all .main_color li,
html body#top #wrap_all .main_color .avia_textblock,
html body#top #wrap_all .alternate_color,
html body#top #wrap_all .alternate_color p,
html body#top #wrap_all .alternate_color li {
	font-size: var(--m-fs-body);
	line-height: var(--m-lh-body);
}

/* Unterzeilen (bisher Droid Serif kursiv) */
html body#top #wrap_all .av-subheading,
html body#top #wrap_all .av-subheading p {
	font-style: normal;
	font-size: var(--m-fs-lead);
	color: var(--m-color-text-muted);
}

/* ---------- 3. Überschriften: Hierarchie über Größe, eine Farbe ---------- */
html body#top #wrap_all .all_colors h1,
html body#top #wrap_all .all_colors h2,
html body#top #wrap_all .all_colors h3,
html body#top #wrap_all .all_colors h4,
html body#top #wrap_all .all_colors h5,
html body#top #wrap_all .all_colors h6 {
	font-family: var(--m-font-heading);
	line-height: var(--m-lh-heading);
	font-style: normal;
	text-transform: none;
	letter-spacing: 0;
	text-wrap: balance;
}
html body#top #wrap_all .all_colors h1 { font-size: var(--m-fs-h1); font-weight: var(--m-fw-bold); }
html body#top #wrap_all .all_colors h2 { font-size: var(--m-fs-h2); font-weight: var(--m-fw-bold); }
html body#top #wrap_all .all_colors h3 { font-size: var(--m-fs-h3); font-weight: var(--m-fw-semibold); }
html body#top #wrap_all .all_colors h4,
html body#top #wrap_all .all_colors h5,
html body#top #wrap_all .all_colors h6 { font-size: var(--m-fs-h4); font-weight: var(--m-fw-semibold); }

/* Layout-Builder-Element "Spezial-Überschrift" setzt pro Element eigene Größen – auf die Staffel zurückführen */
html body#top #wrap_all .av-special-heading.av-special-heading-h1 .av-special-heading-tag { font-size: var(--m-fs-h1); }
html body#top #wrap_all .av-special-heading.av-special-heading-h2 .av-special-heading-tag { font-size: var(--m-fs-h2); }
html body#top #wrap_all .av-special-heading.av-special-heading-h3 .av-special-heading-tag { font-size: var(--m-fs-h3); }
html body#top #wrap_all .av-special-heading.av-special-heading-h4 .av-special-heading-tag,
html body#top #wrap_all .av-special-heading.av-special-heading-h5 .av-special-heading-tag,
html body#top #wrap_all .av-special-heading.av-special-heading-h6 .av-special-heading-tag { font-size: var(--m-fs-h4); }
html body#top #wrap_all .av-special-heading .av-special-heading-tag {
	font-style: normal;
}

/* Titelleiste: H1 kompakter, damit die Leiste nicht dominiert */
html body#top #wrap_all .title_container .main-title,
html body#top #wrap_all .title_container .main-title a {
	font-size: var(--m-fs-h3);
	font-weight: var(--m-fw-bold);
}
/* Brotkrumen-Navigation: siehe Abschnitt 13 */

/* ---------- 4. Links (Farbe aus Enfold: Primär/Sekundär) ---------- */
html body#top #wrap_all .main_color .avia_textblock a,
html body#top #wrap_all .main_color .entry-content a:not(.avia-button):not(.button),
html body#top #wrap_all .alternate_color .avia_textblock a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}
html body#top #wrap_all .main_color .avia_textblock a:hover,
html body#top #wrap_all .main_color .entry-content a:not(.avia-button):not(.button):hover {
	text-decoration-thickness: 2px;
}

/* ---------- 5. Fokus sichtbar (Tastatur) ---------- */
html body#top a:focus-visible,
html body#top button:focus-visible,
html body#top input:focus-visible,
html body#top select:focus-visible,
html body#top textarea:focus-visible,
html body#top [tabindex]:focus-visible {
	outline: var(--m-focus-ring);
	outline-offset: 2px;
}
html body#top #footer a:focus-visible,
html body#top #socket a:focus-visible,
html body#top #footer input:focus-visible,
html body#top #footer select:focus-visible {
	outline: var(--m-focus-ring-on-dark);
}

/* ---------- 6. Buttons (Radius, Stärke, Themenfarbe aus Enfold) ---------- */
html body#top #wrap_all .avia-button {
	min-height: var(--m-tap-min);
}
/* Einzelfarben aus dem Layout Builder auf die Markenfarbe ziehen */
html body#top #wrap_all .avia-button.avia-color-custom,
html body#top #wrap_all .avia-button.avia-color-blue,
html body#top #wrap_all .avia-button.avia-color-teal {
	background-color: var(--m-color-primary);
	border-color: var(--m-color-primary);
	color: #fff;
}
html body#top #wrap_all .avia-button.avia-color-custom:hover,
html body#top #wrap_all .avia-button.avia-color-blue:hover,
html body#top #wrap_all .avia-button.avia-color-teal:hover {
	background-color: var(--m-color-primary-dark);
	border-color: var(--m-color-primary-dark);
	color: #fff;
}

/* ---------- 7. Inhaltsboxen ---------- */
/* Wiederverwendbare Klasse: im Layout Builder unter Spalte → Erweitert → "Custom CSS Class" = m-box.
   Übergang: die bestehende graue Box mit rotem Rahmen auf der Startseite (Element-ID av-juph196j)
   wird direkt angesprochen, bis sie die Klasse m-box trägt. */
html body#top #wrap_all .main_color .flex_column.m-box,
html body#top #wrap_all .main_color .flex_column[class*="av-juph196j"] {
	background-color: var(--m-color-bg);
	border: 1px solid var(--m-color-border);
	border-radius: var(--m-radius-m);
	box-shadow: var(--m-shadow);
	padding: var(--m-space-m);
}

/* ---------- 8. Formulare ---------- */
html body#top #wrap_all input[type="text"],
html body#top #wrap_all input[type="email"],
html body#top #wrap_all input[type="search"],
html body#top #wrap_all input[type="tel"],
html body#top #wrap_all input[type="number"],
html body#top #wrap_all input[type="password"],
html body#top #wrap_all select,
html body#top #wrap_all textarea {
	border-color: var(--m-color-border-ui);
	border-radius: var(--m-radius-s);
	min-height: var(--m-tap-min);
}
html body#top #wrap_all #footer input[type="search"],
html body#top #wrap_all #footer input[type="text"],
html body#top #wrap_all #footer select {
	border-color: var(--m-color-border-ui);
}

/* ---------- 9. Footer & Socket (Farben aus Enfold) ---------- */
html body#top #wrap_all #footer .widgettitle {
	font-size: var(--m-fs-h4);
	font-weight: var(--m-fw-semibold);
}
html body#top #wrap_all #footer,
html body#top #wrap_all #footer p,
html body#top #wrap_all #footer li {
	font-size: var(--m-fs-body);
}
html body#top #wrap_all #footer a:hover,
html body#top #wrap_all #socket a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
html body#top #wrap_all #socket,
html body#top #wrap_all #socket a,
html body#top #wrap_all #socket .copyright {
	font-size: var(--m-fs-small);
}

/* ---------- 10. Kopfzeile: komplett über Enfold (Kopfbereich-Farben, Menügröße, Burger-Farbe) ---------- */

/* ---------- 12. WooCommerce Produktseite & Sidebar ---------- */
html body#top #wrap_all .sidebar .widgettitle {
	font-size: var(--m-fs-h4);
	font-weight: var(--m-fw-semibold);
}
html body#top #wrap_all .main_color .product_meta,
html body#top #wrap_all .main_color .product_meta span,
html body#top #wrap_all .main_color .product_meta a {
	font-size: var(--m-fs-small);
}
html body#top #wrap_all .main_color .single_add_to_cart_button,
html body#top #wrap_all .main_color .checkout-button,
html body#top #wrap_all .main_color .woocommerce-mini-cart__buttons .button {
	font-size: var(--m-fs-body);
	min-height: var(--m-tap-min);
}

/* ---------- 13. Brotkrumen-Navigation ("Du bist hier") ---------- */
/* Über dem Seitentitel statt klein am rechten Rand; Fließtextgröße, Links erkennbar, aktuelle Seite hervorgehoben */
html body#top #wrap_all .title_container .container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--m-space-xs);
	padding-top: var(--m-space-s);
	padding-bottom: var(--m-space-s);
	min-height: 0;
}
html body#top #wrap_all .title_container .breadcrumb {
	position: static;
	order: -1;
	width: 100%;
	margin: 0;
	top: auto;
	right: auto;
	left: auto;
	transform: none;
}
html body#top #wrap_all .title_container .breadcrumb .breadcrumb-trail {
	font-size: var(--m-fs-body);
	line-height: var(--m-lh-body);
	color: var(--m-color-text);
	padding: 0;
}
html body#top #wrap_all .title_container .breadcrumb .breadcrumb-trail * {
	font-size: inherit;
	line-height: inherit;
}
html body#top #wrap_all .title_container .breadcrumb .breadcrumb-title {
	color: var(--m-color-text-muted);
}
html body#top #wrap_all .title_container .breadcrumb a {
	color: var(--m-color-primary);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
html body#top #wrap_all .title_container .breadcrumb a:hover {
	color: var(--m-color-primary-dark);
	text-decoration-thickness: 2px;
}
html body#top #wrap_all .title_container .breadcrumb .sep {
	color: var(--m-color-text-muted);
	padding: 0 0.4em 0 0.1em;
}
html body#top #wrap_all .title_container .breadcrumb .trail-end {
	color: var(--m-color-deep);
	font-weight: var(--m-fw-semibold);
}

/* ---------- 14. Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	html body#top *,
	html body#top *::before,
	html body#top *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* =========================================================
   15. Weiße Karten auf dem Eisgrau-Hintergrund (Hintergrund selbst: Enfold „Hauptinhalt“)
   ========================================================= */
html body#top #wrap_all #main .slide-entry,
html body#top #wrap_all #main ul.products li.product,
html body#top #wrap_all #main aside.sidebar .widget,
html body#top #wrap_all #main div.product .woocommerce-tabs,
html body#top #wrap_all #main .woocommerce-cart-form,
html body#top #wrap_all #main .cart-collaterals,
html body#top #wrap_all #main .woocommerce-checkout,
html body#top #wrap_all #main .woocommerce-MyAccount-content {
  background-color: var(--m-color-bg);
  border: 1px solid var(--m-color-border);
  border-radius: var(--m-radius-m);
  box-shadow: var(--m-shadow);
  padding: 1.25rem;
  box-sizing: border-box;
}
html body#top #wrap_all #main ul.products li.product .inner_product,
html body#top #wrap_all #main ul.products li.product .inner_product_header { background: transparent; border: 0; }
html body#top #wrap_all #main div.product div.images img { background: var(--m-color-bg); border-radius: var(--m-radius-m); }
html body#top #wrap_all #main div.product .woocommerce-tabs .tabcontainer,
html body#top #wrap_all #main div.product .woocommerce-tabs .tab_content,
html body#top #wrap_all #main div.product .woocommerce-tabs .tab.active_tab { background-color: var(--m-color-bg); }
html body#top #wrap_all #main ul.products li.product .woocommerce-loop-product__title,
html body#top #wrap_all #main ul.products li.product h2 { font-size: var(--m-fs-h4); line-height: 1.3; }

/* ---------- 16. Tippflächen mind. 44 px (Projektregel/WCAG) – dafür hat Enfold keine Option ---------- */
html body#top #wrap_all #socket .menu a,
html body#top #wrap_all .social_bookmarks a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--m-tap-min);
	min-width: var(--m-tap-min);
}
html body#top #wrap_all .social_bookmarks,
html body#top #wrap_all .social_bookmarks li {
	height: auto;
	line-height: 1;
}
html body#top #wrap_all .woocommerce-product-search button {
	min-height: var(--m-tap-min);
	padding: 0 var(--m-space-s);
	border-radius: var(--m-radius-s);
	background-color: var(--m-color-primary);
	border: 1px solid var(--m-color-primary);
	color: #fff;
	font-weight: var(--m-fw-semibold);
	cursor: pointer;
}

/* ---------- 17. Produktraster Tablet + Silbentrennung – Enfold kennt keine Spaltenzahl je Gerät ---------- */
html body#top #wrap_all #main ul.products li.product .woocommerce-loop-product__title,
html body#top #wrap_all #main ul.products li.product h2 {
	hyphens: auto;
	overflow-wrap: break-word;
}
@media only screen and (min-width: 768px) and (max-width: 989px) {
	html body#top #wrap_all #main ul.products li.product {
		width: 48%;
		margin-left: 4%;
		margin-right: 0;
		clear: none;
	}
	html body#top #wrap_all #main ul.products li.product:nth-child(2n+1) {
		margin-left: 0;
		clear: both;
	}
}

/* ---------- 18. Cookie-Hinweis: Link im Text (Enfold lässt ihn ungestylt, Browser-Blau 2:1) ---------- */
html body#top .avia-cookie-consent .avia_cookie_text a {
	color: var(--m-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------- 19. Schwebender Warenkorb neben dem Menü-Symbol (Tablet/Smartphone) – Enfold setzt beide an denselben Rand ---------- */
@media only screen and (max-width: 989px) {
	html body#top #header .av-burger-menu-main {
		margin-right: var(--m-space-m);
	}
}