/* Ergänzungen der Kugeldreh-, Winkelgelenk- und Gelenkkopf-Auswahl zur gemeinsamen Gestaltung (ivm-gabelkopf-auswahl/auswahl.css) */
:is(#ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-verzahnung, #ivm-wg .gk-optionen.gk-bauform { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
:is(#ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-groesse { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
#ivm-wg .gk-optionen.gk-groesse { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
:is(#ivm-kdv, #ivm-wg, #ivm-gkk) .gk-stueck { width: 140px; min-height: 46px; padding: 10px 12px; border: 1px solid var(--gk-rand-stark); border-radius: 6px; font-size: 16px; background: #fff; }
:is(#ivm-kdv, #ivm-wg, #ivm-gkk) :is(.gk-stueck, input, select):focus { border-color: var(--gk-blau); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); outline: none; }

/* Einbauraum eingrenzen (Größe) */
:is(#ivm-kdv, #ivm-gkk) .kdv-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: -4px 0 14px; padding: 10px 14px; border-radius: 8px; background: #f3f6f9; font-size: 14px; color: var(--gk-fliess); }
:is(#ivm-kdv, #ivm-gkk) .kdv-filter > span:first-child { font-weight: 600; color: var(--gk-dunkel); }
:is(#ivm-kdv, #ivm-gkk) .kdv-feld { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
:is(#ivm-kdv, #ivm-gkk) .kdv-feld input { width: 100px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--gk-rand-stark); border-radius: 6px; font-size: 15px; background: #fff; }

/* Ergebnis: Maße mit Gruppenzeilen, Bilder, Lastvergleich */
#ivm-kdv table.kdv-masse tr.kdv-gruppe th { background: #eef2f6; color: var(--gk-dunkel); font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; width: auto; }
#ivm-kdv table.kdv-masse th small { margin-left: 4px; }
#ivm-kdv .kdv-bilder { display: grid; gap: 16px; }
#ivm-kdv .kdv-diagramm { margin: 0; }
#ivm-kdv .kdv-diagramm figcaption { margin-top: 8px; font-size: 13px; color: var(--gk-leise); }
#ivm-kdv .kdv-last { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--gk-rand); border-radius: 10px; background: #f7f9fb; }
#ivm-kdv .kdv-last h4 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--gk-dunkel); }
#ivm-kdv .kdv-last-felder { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
#ivm-kdv .kdv-last label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; color: var(--gk-dunkel); }
#ivm-kdv .kdv-last select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--gk-rand-stark); border-radius: 6px; font-size: 15px; background: #fff; max-width: 100%; }
#ivm-kdv .kdv-vergleich, #ivm-kdv .kdv-klein { margin: 14px 0 0; font-size: 14px; color: var(--gk-fliess); }
#ivm-kdv .kdv-klein { color: var(--gk-leise); font-size: 13px; }
@media (max-width: 767px) {
  :is(#ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-verzahnung, #ivm-wg .gk-optionen.gk-bauform { grid-template-columns: 1fr 1fr; }
  :is(#ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-groesse { grid-template-columns: 1fr 1fr; }
  #ivm-wg .gk-optionen.gk-groesse { grid-template-columns: repeat(3, 1fr); }
  :is(#ivm-kdv, #ivm-wg, #ivm-gkk) .gk-stueck { width: 100%; }
  #ivm-kdv .kdv-last-felder > label { flex: 1 1 100%; }
  :is(#ivm-kdv, #ivm-gkk) .kdv-feld input { width: 100%; }
  :is(#ivm-kdv, #ivm-gkk) .kdv-filter .kdv-feld { flex: 1 1 40%; }
}

/* Gelenkkopf-Auswahl: Bauart mit Bild, Gewinde-Filter, Hinweis Hydraulik-Gelenkköpfe */
#ivm-gkk .gk-optionen.gk-art, #ivm-gkk .gk-optionen.gk-typ { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
#ivm-gkk .gk-optionen.gk-d { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
#ivm-gkk .gk-optionen.gk-gewinde { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
#ivm-gkk .kdv-filter select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--gk-rand-stark); border-radius: 6px; font-size: 15px; background: #fff; }
#ivm-gkk .kdv-filter + .kdv-filter { margin-top: 0; }
#ivm-gkk .gkk-hydraulik { margin: -6px 0 14px; font-size: 13px; color: var(--gk-leise); }
#ivm-gkk .gkk-bild img { max-height: 260px; }
@media (max-width: 767px) {
  #ivm-gkk .gk-optionen.gk-art, #ivm-gkk .gk-optionen.gk-typ { grid-template-columns: 1fr; }
  #ivm-gkk .gk-optionen.gk-d { grid-template-columns: repeat(3, 1fr); }
  #ivm-gkk .gk-optionen.gk-gewinde { grid-template-columns: 1fr 1fr; }
  #ivm-gkk .kdv-filter .kdv-feld { flex: 1 1 40%; }
  #ivm-gkk .kdv-feld input { width: 100%; }
}