/* Umschlüsselung auf den Baureihen-Seiten – Farben nach IVM-Branding (Primär #2b3540, Akzent #0066cc) */
#umschluesselung { --u-rand: #d8dee6; --u-zeile: #eef1f4; --u-alt: #f7f9fb; --u-text: #1a1a1a; --u-leise: #5b6672; --u-marke: #2b3540;
  --u-akzent: #0066cc; --u-akzent-hover: #0052a3; --u-akzent-hell: #e6f0fa;
  --u-ok: #1e6b3a; --u-ok-hell: #e8f5ec; --u-warn: #8a4b00; --u-warn-hell: #fff1e0; --u-grau: #4a5560; --u-grau-hell: #eef1f4;
  scroll-margin-top: 100px; color: var(--u-text); font-size: 16px; line-height: 1.5; }
#umschluesselung.ums-vergleich { background: #f0f2f5; padding: 56px 24px; }
/* Einstieg auf der Gruppenseite: Kasten im Abschnitt „Baureihen und Ausführungen“ */
#umschluesselung.ums-einstieg { background: #fff; border: 1px solid var(--u-rand); border-radius: 14px; padding: 24px 26px; width: 100%; }
#umschluesselung.ums-einstieg h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--u-marke); }
#umschluesselung.ums-einstieg .ums-intro { margin-bottom: 16px; }
#umschluesselung.ums-einstieg .ums-suche { border: 0; padding: 0; background: none; }
#umschluesselung .ums-zurueck { margin: 18px 0 0; }
#umschluesselung .ums-zurueck a { color: var(--u-akzent); font-weight: 600; text-decoration: none; }
#umschluesselung .ums-zurueck a:hover { text-decoration: underline; }
#umschluesselung *, #umschluesselung *::before, #umschluesselung *::after { box-sizing: border-box; }
#umschluesselung .ums-innen { max-width: 1140px; margin: 0 auto; }
#umschluesselung .ums-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--u-akzent); }
#umschluesselung h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--u-marke); }
#umschluesselung .ums-intro { margin: 0 0 22px; max-width: 760px; color: #32373c; }
#umschluesselung .ums-suche { display: flex; gap: 10px; background: #fff; border: 1px solid var(--u-rand); border-radius: 14px; padding: 14px; }
#umschluesselung .ums-suche input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 12px 14px; min-height: 48px; border: 1px solid #c5ced8; border-radius: 8px; background: #fff; color: var(--u-text); box-shadow: none; }
#umschluesselung .ums-suche input:focus { border-color: var(--u-akzent); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); outline: none; }
#umschluesselung .ums-suche button { font: inherit; font-size: 16px; font-weight: 600; padding: 0 24px; min-height: 48px; border: 0; border-radius: 8px; background: var(--u-akzent); color: #fff; cursor: pointer; white-space: nowrap; text-transform: none; letter-spacing: 0; }
#umschluesselung .ums-suche button:hover, #umschluesselung .ums-suche button:focus { background: var(--u-akzent-hover); color: #fff; }
#umschluesselung .ums-erkannt { min-height: 22px; margin: 10px 2px 0; font-size: 14px; color: var(--u-leise); }
#umschluesselung .ums-beispiele { margin: 8px 2px 0; font-size: 14px; color: var(--u-leise); }
#umschluesselung .ums-chips, #umschluesselung .ums-beispiele { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#umschluesselung button.ums-chip { font: inherit; font-size: 14px; padding: 6px 12px; border: 1px solid #c5ced8; border-radius: 999px; background: #fff; color: var(--u-marke); cursor: pointer; line-height: 1.3; text-transform: none; letter-spacing: 0; white-space: normal; text-align: left; }
#umschluesselung button.ums-chip:hover, #umschluesselung button.ums-chip:focus { border-color: var(--u-akzent); background: var(--u-akzent-hell); color: var(--u-marke); }
#umschluesselung button.ums-chip span { color: var(--u-leise); }
#umschluesselung #ums-ergebnis { margin-top: 18px; scroll-margin-top: 110px; }
#umschluesselung .ums-titel-klein { margin: 0 0 8px; font-weight: 600; }
#umschluesselung .ums-karte { background: #fff; border: 1px solid var(--u-rand); border-radius: 14px; margin-bottom: 16px; overflow: hidden; }
#umschluesselung .ums-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 20px; background: var(--u-marke); color: #fff; font-size: 18px; }
#umschluesselung .ums-karte-kopf b { font-weight: 700; }
#umschluesselung .ums-von small { color: #c9d2db; font-size: 13px; }
#umschluesselung .ums-pfeil { color: #7fb2e5; font-weight: 700; }
#umschluesselung .ums-badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #e6edf3; }
#umschluesselung .ums-inhalt { padding: 18px 20px 20px; }
#umschluesselung .ums-inhalt > p { margin: 0 0 12px; }
#umschluesselung .ums-leise { color: var(--u-leise); }
#umschluesselung .ums-v { font-size: 15px; padding: 10px 14px; border-radius: 8px; background: var(--u-alt); border: 1px solid var(--u-rand); margin: 0 0 12px; }
#umschluesselung .ums-v.warnung { background: var(--u-warn-hell); border-color: #f0c98c; color: var(--u-warn); }
#umschluesselung .ums-v.fehler { background: #fdeeee; border-color: #f1b9b9; color: #a12a2a; }
#umschluesselung .ums-fazit { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
#umschluesselung .ums-fazit li { padding: 8px 12px 8px 36px; border-radius: 8px; position: relative; font-size: 15px; }
#umschluesselung .ums-fazit li::before { position: absolute; left: 12px; top: 8px; font-weight: 700; }
#umschluesselung .ums-fazit li.besser, #umschluesselung .ums-fazit li.gleich { background: var(--u-ok-hell); color: var(--u-ok); }
#umschluesselung .ums-fazit li.besser::before, #umschluesselung .ums-fazit li.gleich::before { content: '✓'; }
#umschluesselung .ums-fazit li.achtung { background: var(--u-warn-hell); color: var(--u-warn); }
#umschluesselung .ums-fazit li.achtung::before { content: '!'; left: 15px; }
#umschluesselung .ums-fazit li.hinweis { background: var(--u-grau-hell); color: var(--u-grau); }
#umschluesselung .ums-fazit li.hinweis::before { content: 'i'; left: 15px; font-style: italic; }
#umschluesselung .ums-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; }
#umschluesselung .ums-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
#umschluesselung .ums-bild img { display: block; max-width: 280px; width: 100%; height: auto; background: #fff; border: 1px solid var(--u-zeile); border-radius: 8px; }
#umschluesselung a.ums-knopf { display: inline-block; font-size: 16px; font-weight: 600; padding: 13px 22px; border-radius: 8px; background: var(--u-akzent); color: #fff; text-decoration: none; line-height: 1.3; }
#umschluesselung a.ums-knopf:hover, #umschluesselung a.ums-knopf:focus { background: var(--u-akzent-hover); color: #fff; }
#umschluesselung a.ums-knopf.ums-zweit { background: #fff; color: var(--u-akzent); box-shadow: inset 0 0 0 2px var(--u-akzent); }
#umschluesselung a.ums-knopf.ums-zweit:hover, #umschluesselung a.ums-knopf.ums-zweit:focus { background: var(--u-akzent-hell); color: var(--u-akzent); }
#umschluesselung .ums-quelle { margin: 14px 0 0; font-size: 13px; color: var(--u-leise); }
@media (max-width: 767px) {
  #umschluesselung.ums-vergleich { padding: 36px 16px; }
  #umschluesselung.ums-einstieg { padding: 18px 16px; }
  #umschluesselung h2 { font-size: 26px; }
  #umschluesselung .ums-suche { flex-direction: column; padding: 12px; }
  #umschluesselung .ums-karte-kopf { font-size: 16px; padding: 14px 16px; }
  #umschluesselung .ums-inhalt { padding: 14px 14px 16px; }
  #umschluesselung a.ums-knopf { display: block; text-align: center; }
  #umschluesselung .ums-knoepfe, #umschluesselung .ums-knoepfe > a { flex: 1 1 100%; }
  #umschluesselung .ums-bild img { max-width: 100%; }
}
/* Schaltfläche „Fremdfabrikat umschlüsseln“ im Kopf: Kopie der weißen Schaltfläche daneben (gleicher Stil, keine eigene Gestaltung).
   Abstand wie bei den anderen Zusatz-Schaltflächen (ivm-welle-nabe, ivm-verbindungselemente, ivm-gabelkopf-auswahl): der Behälter
   wird eine umbrechende Flex-Zeile mit 12 px Abstand in beide Richtungen – auch in der zweiten Zeile bündig; Smartphone: volle Breite */
.elementor-button-wrapper:has(> a.ivm-ums-cta) { display: flex; flex-wrap: wrap; gap: 12px; }
.elementor-button-wrapper > a.ivm-ums-cta { margin: 0; }
@media (max-width: 767px) { .elementor-button-wrapper:has(> a.ivm-ums-cta) > a { flex: 1 1 100%; } }
/* Smartphone: Gegenüberstellung ohne Querscrollen – Merkmal nur als Kürzel, Kopf mit Umbruch */
@media (max-width: 767px) {
  #umschluesselung .ums-gegenueber { font-size: 13px; table-layout: auto; }
  #umschluesselung .ums-gegenueber th { white-space: normal; font-size: 12px; padding: 6px 5px; }
  #umschluesselung .ums-gegenueber td { padding: 6px 5px; }
  #umschluesselung .ums-gegenueber .ums-merkmal-text { display: none; }
  #umschluesselung .ums-gegenueber .ums-hinweiszeile td { font-size: 12px; }
}
/* Einstieg auf der Kategorieseite Welle-Nabe-Verbindungen: eigener Abschnitt nach „Produktgruppen im Überblick“ */
#umschluesselung.ums-bereich { background: #fff; padding: 72px 24px; }
#umschluesselung.ums-bereich .ums-suche { background: #f7f9fb; }
@media (max-width: 767px) { #umschluesselung.ums-bereich { padding: 44px 16px; } }