/* Gabelkopf-, Kugeldreh-, Winkelgelenk- und Gelenkkopf-Auswahl (#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk; Ergänzungen in ivm-bk-auswahl/zusatz.css) – Farben wie Kupplungskonfigurator und Landingpage (Primär #2b3540, Akzent #0066cc) */
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) { --gk-rand: #d8dee6; --gk-rand-stark: #c5ced8; --gk-dunkel: #2b3540; --gk-blau: #0066cc; --gk-blau-hover: #0052a3; --gk-blau-hell: #e6f0fa;
  --gk-text: #1a1a1a; --gk-fliess: #32373c; --gk-leise: #5b6672; --gk-zeile: #eef1f4; --gk-ok: #1e8e4a;
  font-size: 15px; line-height: 1.5; color: var(--gk-text); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-schritt { background: #fff; border: 1px solid var(--gk-rand); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; scroll-margin-top: 110px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-schritt.offen { border-color: #9cc3ea; box-shadow: 0 2px 10px rgba(43, 53, 64, .06); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-schritt h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; font-size: 17px; font-weight: 700; color: var(--gk-dunkel); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-nr { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 14px; background: var(--gk-blau); color: #fff; flex: none; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-schritt.fertig .gk-nr { background: var(--gk-ok); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-wahl { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--gk-blau); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-bauform { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-groesse { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) button.gk-option { display: block; width: 100%; margin: 0; padding: 12px; border: 1px solid var(--gk-rand-stark); border-radius: 8px; background: #fff; color: var(--gk-text);
  font: inherit; text-align: left; text-transform: none; letter-spacing: 0; line-height: 1.4; white-space: normal; cursor: pointer; transition: border-color .15s, background .15s; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) button.gk-option:hover, :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) button.gk-option:focus { border-color: var(--gk-blau); background: #f3f7fb; color: var(--gk-text); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) button.gk-option:focus-visible { outline: 2px solid var(--gk-blau); outline-offset: 1px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) button.gk-option.aktiv { border-color: var(--gk-blau); background: var(--gk-blau-hell); box-shadow: inset 0 0 0 1px var(--gk-blau); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-option img { display: block; width: 100%; height: 110px; object-fit: contain; margin: 0 0 10px; background: #fff; border-radius: 6px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-option b { display: block; font-size: 15px; color: var(--gk-dunkel); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-option small { display: block; margin-top: 2px; font-size: 13px; color: var(--gk-leise); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-schritt.fertig:not(:focus-within) .gk-optionen { opacity: .92; }

/* Ergebnis */
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-ergebnis { margin-top: 20px; padding: 28px; background: #fff; border: 2px solid var(--gk-blau); border-radius: 14px; scroll-margin-top: 110px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gk-blau); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-ergebnis h3 { margin: 0 0 6px; font-size: 28px; font-weight: 700; color: var(--gk-dunkel); line-height: 1.2; overflow-wrap: anywhere; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-unter { margin: 0 0 16px; color: var(--gk-fliess); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-warn { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: #fff6e0; color: #7a5000; border: 1px solid #f0d58c; font-size: 14px; }
/* Hinweis, wenn es keinen Schritt „Montage und Bolzen“ gibt (GR, GKE, GI, G ohne Katalogbolzen) */
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-hinweis { margin: 0 0 16px; padding: 10px 14px; border-radius: 8px; background: var(--gk-blau-hell); color: var(--gk-dunkel); border: 1px solid #c9dcf1; font-size: 14px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-ergebnis-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) table.gk-masse { width: 100%; margin: 0; border: 1px solid var(--gk-rand); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 14px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse caption { caption-side: top; text-align: left; font-weight: 700; color: var(--gk-dunkel); padding: 0 0 8px; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse th, :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse td { padding: 6px 12px; border: 0; border-top: 1px solid var(--gk-zeile); background: #fff; text-align: left; font-variant-numeric: tabular-nums; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse tr:first-child th, :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse tr:first-child td { border-top: 0; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse tr:nth-child(even) th, :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse tr:nth-child(even) td { background: #f7f9fb; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse th { font-weight: 600; color: var(--gk-dunkel); width: 55%; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-masse th small { font-weight: 400; color: var(--gk-leise); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-teile { margin: 14px 0 0; font-size: 14px; color: var(--gk-fliess); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-zeichnung { display: block; padding: 16px; border: 1px solid var(--gk-rand); border-radius: 10px; background: #fff; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-zeichnung img { display: block; max-width: 100%; height: auto; max-height: 360px; margin: 0 auto; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-anfrage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gk-zeile); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-anfrage label { font-weight: 600; color: var(--gk-dunkel); }
:is(#ivm-gk, #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-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) #gk-stueck:focus { border-color: var(--gk-blau); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); outline: none; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) a.gk-knopf, :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) a.gk-knopf2 { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 22px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) a.gk-knopf { background: var(--gk-blau); color: #fff; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) a.gk-knopf:hover { background: var(--gk-blau-hover); color: #fff; }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) a.gk-knopf2 { background: #fff; color: var(--gk-dunkel); box-shadow: inset 0 0 0 1px var(--gk-rand-stark); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) a.gk-knopf2:hover { background: var(--gk-blau-hell); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-quelle { margin: 16px 0 0; font-size: 13px; color: var(--gk-leise); }
:is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-leer { color: var(--gk-leise); }
@media (max-width: 767px) {
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-schritt { padding: 14px; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-wahl { margin-left: 0; width: 100%; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen, :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-bauform { grid-template-columns: 1fr 1fr; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-optionen.gk-groesse { grid-template-columns: repeat(3, 1fr); }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-option img { height: 80px; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-ergebnis { padding: 18px; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-ergebnis h3 { font-size: 22px; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-ergebnis-raster { grid-template-columns: 1fr; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) .gk-anfrage > * { flex: 1 1 100%; }
  :is(#ivm-gk, #ivm-kdv, #ivm-wg, #ivm-gkk) #gk-stueck { width: 100%; }
}

/* Gabelkopf-Auswahl: Zubehörbilder im Schritt „Montage und Bolzen“, Gabelkopf mit Zubehör unter der Zeichnung (Wunsch Frank 15.10.2026) */
#ivm-gk .gk-optionen.gk-montage img { object-fit: contain; padding: 4px; }
#ivm-gk .gk-bilder { display: grid; gap: 16px; min-width: 0; }
#ivm-gk figure.gk-montage { margin: 0; padding: 16px; border: 1px solid var(--gk-rand); border-radius: 10px; background: #fff; text-align: center; }
#ivm-gk figure.gk-montage img { display: block; max-width: 100%; height: auto; max-height: 300px; margin: 0 auto; }
#ivm-gk .gk-montage-paar { display: flex; align-items: center; justify-content: center; gap: 12px; }
#ivm-gk .gk-montage-paar img { flex: 0 1 auto; min-width: 0; max-width: 44%; max-height: 220px; margin: 0; object-fit: contain; }
#ivm-gk .gk-plus { flex: none; font-size: 30px; font-weight: 700; line-height: 1; color: var(--gk-blau); }
#ivm-gk figure.gk-montage figcaption { margin-top: 10px; font-size: 13px; color: var(--gk-leise); }