/* ==========================================================================
   OXOMI-Universalsuche im MERZ-Layout.

   Grundlage ist nicht Raten, sondern das ausgelieferte Original-Stylesheet
   (oxomi.com/assets/dynamic/…/frontend/v2/oxomi.css, ~480 KB). Daraus die drei
   Dinge, die man wissen muss:

   1. OXOMI benutzt ZWEI Präfixe. `oxomi-*` sind die fachlichen Bausteine,
      `sci-*` ist das darunterliegende Design-System (Buttons, Karten, Icons,
      Dialoge). Buttons heißen `.sci-btn-primary`, nicht `.oxomi-btn`.
   2. Die Button-Farben stehen mit `!important` drin
      (`.sci-btn-primary { background-color:#3171d5 !important }`). Ohne eigenes
      `!important` kommt hier nichts an — deshalb stehen sie unten auch dran.
      Gegen ein `!important` gewinnt nur ein `!important` mit höherer
      Spezifität, und die haben wir durch den `.ehnes-oxomi`-Vorfahren.
   3. Größen, Radien und Abstände hängen an CSS-Variablen, die OXOMI auf
      `:root` setzt (`--sci-base-unit`, `--sci-border-radius`, `--sci-margin-*`).
      Die lassen sich auf unserem Wrapper neu belegen und wirken dann auf alles
      darunter — der weitaus sauberere Hebel als Regel für Regel dagegenhalten.

   Die Schriftart braucht ebenfalls `!important`: OXOMI hängt sein Stylesheet
   zur Laufzeit per JavaScript ein, landet also NACH unserem im Dokument. Bei
   gleicher Spezifität würde es dadurch gewinnen.
   ========================================================================== */

.ehnes-oxomi {
	/* --- eigene Stellschrauben (die Elementor-Stil-Regler schreiben hierauf) --- */
	--ehnes-oxomi-akzent: var( --merz-rot, #b51b26 );
	--ehnes-oxomi-akzent-text: var( --merz-weiss, #fff );
	--ehnes-oxomi-text: var( --text-body, #484847 );
	--ehnes-oxomi-flaeche: var( --surface-card, #fff );
	--ehnes-oxomi-flaeche-still: var( --surface-section, #f3f3f3 );
	--ehnes-oxomi-rahmen: var( --border-card, #afafaf );
	--ehnes-oxomi-radius: var( --radius, 8px );
	--ehnes-oxomi-schrift: var( --font-sans, -apple-system, "Segoe UI", Arial, sans-serif );

	/* --- OXOMIs eigene Variablen umbiegen (siehe Punkt 3 oben) --- */
	--sci-base-unit: 16px;
	--sci-border-radius: var( --ehnes-oxomi-radius );

	width: 100%;
	color: var( --ehnes-oxomi-text );
	font-family: var( --ehnes-oxomi-schrift );
}

/* --- Schrift ------------------------------------------------------------- */

.ehnes-oxomi,
.ehnes-oxomi [class*="oxomi-"],
.ehnes-oxomi [class*="sci-"],
.ehnes-oxomi input,
.ehnes-oxomi select,
.ehnes-oxomi textarea,
.ehnes-oxomi button {
	font-family: var( --ehnes-oxomi-schrift ) !important;
}

/* Überschriften der Abschnitte auf die Theme-Typografie ziehen. */
.ehnes-oxomi h1,
.ehnes-oxomi h2,
.ehnes-oxomi h3,
.ehnes-oxomi h4,
.ehnes-oxomi .sci-text-larger,
.ehnes-oxomi .oxomi-universal-search-section-heading {
	color: var( --text-heading, var( --ehnes-oxomi-text ) );
	font-weight: 600;
}

/* --- Schaltflächen ------------------------------------------------------
   Maße und Hover-Verhalten sind aus dem Theme übernommen
   (.ehnes-hero__cta: padding 11px 22px, radius var(--radius), 600/16px,
   Hover = filter brightness(0.92)) — damit „Anschauen" und „Herunterladen"
   genauso aussehen wie die Buttons der übrigen Seite. */

.ehnes-oxomi .sci-btn,
.ehnes-oxomi .sci-btn-small,
.ehnes-oxomi .sci-btn-outline,
.ehnes-oxomi .sci-btn-primary,
.ehnes-oxomi .sci-btn-secondary,
.ehnes-oxomi .sci-btn-white,
.ehnes-oxomi .sci-btn-primary-outline,
.ehnes-oxomi .sci-btn-secondary-outline,
.ehnes-oxomi .sci-btn-white-outline {
	padding: 11px 22px;
	border-radius: var( --ehnes-oxomi-radius );
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ehnes-oxomi .sci-btn-small {
	padding: 7px 14px;
	font-size: 14px;
}

/* Vollflächige Buttons: MERZ-Rot statt OXOMI-Blau. */
.ehnes-oxomi .sci-btn-primary,
.ehnes-oxomi .sci-btn-primary.active {
	background-color: var( --ehnes-oxomi-akzent ) !important;
	color: var( --ehnes-oxomi-akzent-text ) !important;
}

/* Umrandete Buttons: gleiche Farbe, aber als Kontur. */
.ehnes-oxomi .sci-btn-primary-outline {
	border-color: var( --ehnes-oxomi-akzent ) !important;
	color: var( --ehnes-oxomi-akzent ) !important;
	background-color: transparent !important;
}

.ehnes-oxomi .sci-btn-primary-outline:hover {
	background-color: var( --ehnes-oxomi-akzent ) !important;
	color: var( --ehnes-oxomi-akzent-text ) !important;
}

/* Zweitrangige Buttons: neutral, aber in der Theme-Grauskala. */
.ehnes-oxomi .sci-btn-secondary,
.ehnes-oxomi .sci-btn-secondary.active {
	background-color: var( --ehnes-oxomi-text ) !important;
	color: var( --ehnes-oxomi-akzent-text ) !important;
}

.ehnes-oxomi .sci-btn-secondary-outline {
	border-color: var( --ehnes-oxomi-rahmen ) !important;
	color: var( --ehnes-oxomi-text ) !important;
	background-color: transparent !important;
}

.ehnes-oxomi .sci-btn-secondary-outline:hover {
	background-color: var( --ehnes-oxomi-flaeche-still ) !important;
	color: var( --ehnes-oxomi-text ) !important;
}

/* Hover für die vollflächigen Buttons — OXOMI selbst definiert dafür KEINE
   Regel (nur .active und Icon-Tausch), das Original wirkt deshalb beim
   Überfahren tot. Hier dieselbe Aufhellung wie überall sonst auf der Seite. */
.ehnes-oxomi .sci-btn:hover,
.ehnes-oxomi .sci-btn-small:hover,
.ehnes-oxomi .sci-btn-primary:hover,
.ehnes-oxomi .sci-btn-secondary:hover,
.ehnes-oxomi .sci-btn-white:hover {
	filter: brightness( 0.92 );
}

/* hello-elementor stylt in reset.css globale button-Regeln inklusive eines
   magentafarbenen Hover-Hintergrunds (#c36). Fremdes Markup läuft da voll
   hinein — siehe notes.md.
   Die `.sci-btn-*` sind davon nicht betroffen, weil OXOMI ihre Farbe mit
   `!important` setzt; ausgenommen sind sie hier trotzdem, damit diese Regel
   ihnen nicht irgendwann in die Quere kommt. Betroffen sind die schlichten
   Knöpfe ohne eigene Farbe — die sollen unverändert bleiben, nicht magenta. */
.ehnes-oxomi button:not( [class*="sci-btn"] ):hover,
.ehnes-oxomi button:not( [class*="sci-btn"] ):focus {
	background-color: inherit;
	color: inherit;
}

/* --- Links und Akzenttexte ----------------------------------------------
   OXOMI färbt Links und Hervorhebungen in seinem Blau (#3171d5). */

.ehnes-oxomi a {
	color: var( --link-color, var( --ehnes-oxomi-akzent ) );
	text-decoration: none;
	transition: color 0.15s ease;
}

.ehnes-oxomi a:hover {
	color: var( --ehnes-oxomi-akzent );
	text-decoration: underline;
}

/* Buttons sind Links — die dürfen keine Unterstreichung bekommen. */
.ehnes-oxomi a.sci-btn,
.ehnes-oxomi a.sci-btn-small,
.ehnes-oxomi a.sci-btn-outline,
.ehnes-oxomi a.sci-btn-primary,
.ehnes-oxomi a.sci-btn-secondary,
.ehnes-oxomi a.sci-btn-white,
.ehnes-oxomi a.sci-btn-primary-outline,
.ehnes-oxomi a.sci-btn-secondary-outline {
	text-decoration: none;
}

.ehnes-oxomi a.sci-btn:hover,
.ehnes-oxomi a.sci-btn-primary:hover,
.ehnes-oxomi a.sci-btn-secondary:hover,
.ehnes-oxomi a.sci-btn-primary-outline:hover,
.ehnes-oxomi a.sci-btn-secondary-outline:hover {
	text-decoration: none;
}

.ehnes-oxomi .oxomi-universal-search-text-blue,
.ehnes-oxomi .oxomi-navigator-text-blue,
.ehnes-oxomi .oxomi-link {
	color: var( --ehnes-oxomi-akzent ) !important;
}

/* --- Karten und Kacheln -------------------------------------------------- */

.ehnes-oxomi .sci-card,
.ehnes-oxomi .oxomi-universal-search-tag-card,
.ehnes-oxomi .oxomi-universal-search-series-card {
	background: var( --ehnes-oxomi-flaeche );
	border: 1px solid var( --ehnes-oxomi-rahmen );
	border-radius: var( --ehnes-oxomi-radius );
	overflow: hidden;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ehnes-oxomi .sci-card:hover,
.ehnes-oxomi .oxomi-universal-search-tag-card:hover,
.ehnes-oxomi .oxomi-universal-search-series-card:hover {
	border-color: var( --ehnes-oxomi-akzent );
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 );
}

.ehnes-oxomi .sci-card img,
.ehnes-oxomi img {
	max-width: 100%;
	height: auto;
}

/* --- Eingabefeld und Filter ---------------------------------------------- */

.ehnes-oxomi input[type="text"],
.ehnes-oxomi input[type="search"],
.ehnes-oxomi select,
.ehnes-oxomi #oxomi-universal-search-input {
	font-size: var( --fs-input, 16px );
	color: inherit;
	background: var( --ehnes-oxomi-flaeche );
	border: 1px solid var( --border-input, var( --ehnes-oxomi-rahmen ) );
	border-radius: var( --radius-input, var( --ehnes-oxomi-radius ) );
}

.ehnes-oxomi input[type="text"]:focus,
.ehnes-oxomi input[type="search"]:focus,
.ehnes-oxomi select:focus {
	outline: 2px solid var( --ehnes-oxomi-akzent );
	outline-offset: 1px;
	border-color: var( --ehnes-oxomi-akzent );
}

/* --- Ausblendungen, per Modul-Einstellung geschaltet ---------------------
   Dieselbe Technik, die auch die Mutterfirma auf pcelectric.at einsetzt:
   das Suchfeld wird nicht abgeschaltet, sondern ausgeblendet — die Bibliothek
   kennt dafür keinen Parameter. */

.ehnes-oxomi--ohne-suche #oxomi-universal-search-input,
.ehnes-oxomi--ohne-suche #oxomi-universal-search-mobile-filters-wrapper #oxomi-universal-search-input,
.ehnes-oxomi--ohne-suche #oxomi-universal-search-mobile-filters-toggle-wrapper {
	display: none !important;
}

/* Markenzeile und „vor x Tagen"-Angabe über den Treffern. */
.ehnes-oxomi--ohne-marken .oxomi-universal-search-brand,
.ehnes-oxomi--ohne-marken .oxomi-universal-search-brand-cust {
	display: none !important;
}

.ehnes-oxomi--ohne-zeitangabe .oxomi-universal-search-timing-cust {
	display: none !important;
}

/* Einzelne Filtergruppen. OXOMI vergibt je Gruppe eine eigene Klasse
   (brand · series · category · tag · contentType · contentLanguage), einen
   Parameter zum Abschalten gibt es nicht. */
.ehnes-oxomi--ohne-kategorie .oxomi-universal-search-tag-category,
.ehnes-oxomi--ohne-kategorie .oxomi-token-category {
	display: none !important;
}

.ehnes-oxomi--ohne-sprache .oxomi-universal-search-tag-contentLanguage,
.ehnes-oxomi--ohne-sprache .oxomi-token-contentLanguage {
	display: none !important;
}

/* --- Filterspalte --------------------------------------------------------
   Aufbau laut Mustache-Vorlage der Bibliothek:

     .oxomi-universal-search-filter-label-cust      ← Überschrift („Typ")
     └ .oxomi-universal-search-filter-group          ← Spalte mit Symbol + Trennstrich
     └ .oxomi-universal-search-filter-value-cust     ← anklickbare Zeile
        ├ …-filter-value-label-cust                  ← Text („Katalog")
        └ …-filter-value-count-cust                  ← Zähler-Pille („2")

   Das Original setzt Kästchenfarbe, Label und Pille mit `!important`; die
   Wertzeilen dagegen tragen gar keine Regeln — dort ist freie Bahn. */

.ehnes-oxomi #oxomi-universal-search-wrapper .oxomi-universal-search-filters,
.ehnes-oxomi #oxomi-universal-search-mobile-filters-wrapper .oxomi-universal-search-filters {
	padding: 24px 20px;
	background-color: var( --ehnes-oxomi-flaeche-still );
	border: 1px solid var( --ehnes-oxomi-rahmen );
	border-radius: var( --ehnes-oxomi-radius );
	color: var( --ehnes-oxomi-text );
}

/* Überschrift der Gruppe. */
.ehnes-oxomi .oxomi-universal-search-filter-label-cust {
	margin-bottom: 10px;
	color: var( --text-heading, var( --ehnes-oxomi-text ) ) !important;
	font-weight: 600;
	font-size: var( --fs-eyebrow, 14px );
	letter-spacing: 0.02em;
}

/* Symbolspalte samt senkrechtem Trennstrich. Ausgeblendet wird der Container,
   nicht nur das Symbol — sonst bliebe der Strich mit seinem Rand stehen. */
.ehnes-oxomi--ohne-filter-symbole #oxomi-universal-search-wrapper .oxomi-universal-search-filters .oxomi-universal-search-filter-group,
.ehnes-oxomi--ohne-filter-symbole #oxomi-universal-search-mobile-filters-wrapper .oxomi-universal-search-filters .oxomi-universal-search-filter-group {
	display: none !important;
}

/* Anklickbare Zeile: Luft nach innen, abgerundet, mit sichtbarem Hover.
   Das Original hat hier weder Polster noch Hover — die Zeilen klebten
   aneinander und gaben beim Überfahren keine Rückmeldung. */
.ehnes-oxomi .oxomi-universal-search-filter-value-cust {
	padding: 8px 10px;
	border-radius: var( --radius-input, 6px );
	transition: background-color 0.15s ease, color 0.15s ease;
	gap: 10px;
}

.ehnes-oxomi .oxomi-universal-search-filter-value-cust:hover {
	background-color: var( --ehnes-oxomi-flaeche );
	color: var( --ehnes-oxomi-akzent );
}

/* Ausgewählter Filter: OXOMI vergibt dafür `active` zusammen mit
   `oxomi-universal-search-text-blue` — das Blau wird weiter oben schon auf den
   Akzent gezogen, hier kommt nur die Fläche dazu. */
.ehnes-oxomi .oxomi-universal-search-filter-value-cust.active {
	background-color: var( --ehnes-oxomi-flaeche );
}

.ehnes-oxomi .oxomi-universal-search-filter-value-label-cust {
	font-size: var( --fs-body, 16px );
	line-height: 1.35;
}

/* Zähler-Pille — im Original dunkelgrau mit `!important`. */
.ehnes-oxomi .oxomi-universal-search-filter-value-count-cust {
	min-width: 26px;
	padding: 2px 8px;
	background-color: var( --ehnes-oxomi-rahmen ) !important;
	color: var( --ehnes-oxomi-text ) !important;
	border-radius: 999px;
	font-size: var( --fs-small, 12px );
	font-weight: 600;
	line-height: 1.6;
}

.ehnes-oxomi .oxomi-universal-search-filter-value-cust:hover .oxomi-universal-search-filter-value-count-cust,
.ehnes-oxomi .oxomi-universal-search-filter-value-cust.active .oxomi-universal-search-filter-value-count-cust {
	background-color: var( --ehnes-oxomi-akzent ) !important;
	color: var( --ehnes-oxomi-akzent-text ) !important;
}

/* --- Ladehinweis und Platzhalter ----------------------------------------- */

.ehnes-oxomi__laedt,
.ehnes-oxomi__noscript {
	margin: 0;
	padding: 32px 0;
	color: var( --ehnes-oxomi-text );
	opacity: 0.7;
	text-align: center;
}

.ehnes-oxomi--hinweis {
	padding: 16px 20px;
	border: 1px dashed var( --ehnes-oxomi-rahmen );
	border-radius: var( --ehnes-oxomi-radius );
	background: var( --ehnes-oxomi-flaeche-still );
	text-align: center;
}

/* --- Kein Querscrollen der Seite ---------------------------------------- */

.ehnes-oxomi table {
	width: 100%;
	max-width: 100%;
}

.ehnes-oxomi iframe {
	max-width: 100%;
}