@charset "UTF-8";
/* ===== Basislayout ===== */
.h2d-container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* links Info, rechts Grafik */
  gap: 0;
}

.h2d-info {
  padding: 30px;
  background-color: var(--light-color);
}

.h2d-grafikBox {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--border-radius) solid var(--light-color);
  position: relative; /* für Rand-Controls */
}

.h2d-stage {
  position: relative;
  width: 100%;
}

/* Bild/SVG responsiv */
.h2d-stage img,
.h2d-stage svg.h2d-svg,
.h2d-svg {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Ein-/Ausblenden – eigene Klasse nur für 2D */
.h2d-hidden {
  display: none !important;
}

/* ===== Desktop (>= 992px) ===== */
@media (min-width: 992px) {
  .h2d-info {
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .h2d-grafikBox {
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/* ===== Mobile (<= 991px) ===== */
@media (max-width: 991px) {
  .h2d-container {
    grid-template-columns: 1fr;
  }
  .h2d-info {
    grid-row: 2;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
  }
  .h2d-grafikBox {
    grid-row: 1;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/* ===== Quadranten-Zoom ===== */
.h2d-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.h2d-stage {
  position: relative;
  width: 100%;
  height: auto;
  will-change: transform;
  transform-origin: 0 0;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Quadranten-Overlay */
.h2d-quadGrid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.h2d-quadGrid .h2d-quad {
  pointer-events: auto;
  position: absolute;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: zoom-in;
  transition: background-color 0.15s ease;
}

.h2d-quadGrid .h2d-quad:hover {
  background-color: color-mix(in srgb, var(--first-color) 30%, transparent);
}

.h2d-quad.tl {
  left: 0;
  top: 0;
  width: 50%;
  height: 50%;
}

.h2d-quad.tr {
  left: 50%;
  top: 0;
  width: 50%;
  height: 50%;
}

.h2d-quad.bl {
  left: 0;
  top: 50%;
  width: 50%;
  height: 50%;
}

.h2d-quad.br {
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
}

/* ===== Rand-Steuerung + Reset ===== */
.h2d-navControls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.h2d-ctrl {
  pointer-events: auto;
  border: none;
  background-color: rgb(from var(--first-color) r g b/0.7);
  color: var(--brightest);
  border-radius: var(--btn-border-radius);
  padding: 0.6rem 0.9rem;
  min-width: 3rem;
  min-height: 3rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  transition: background-color 0.15s ease;
}

.h2d-ctrl:hover {
  background: var(--first-color--hover);
}

.h2d-ctrl i {
  font-size: 26px;
  line-height: 1;
  display: inline-block;
}

.h2d-ctrl-reset {
  background-color: var(--first-color);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.h2d-ctrl-reset:hover {
  cursor: zoom-out;
}

.h2d-ctrl-left, .h2d-ctrl-right, .h2d-ctrl-up, .h2d-ctrl-down {
  position: absolute;
}

.h2d-ctrl-left {
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.h2d-ctrl-right {
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}

.h2d-ctrl-up {
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.h2d-ctrl-down {
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Gezoomt-Zustände */
.h2d-grafikBox.is-zoomed .h2d-quad {
  cursor: default;
}

.h2d-grafikBox.is-zoomed .h2d-quadGrid .h2d-quad:hover {
  background-color: transparent;
}

.h2d-grafikBox.is-zoomed .h2d-quadGrid .h2d-quad {
  pointer-events: none;
  cursor: default;
}

/* ===== Produkte im Infokasten ===== */
.h2d-infoList {
  display: grid;
  gap: 14px;
}

/* Vertikale Karte: Bild oben, Text/Link unten */
.h2d-infoCard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--brightest);
  border-radius: var(--border-radius);
  padding: 10px;
}

/* Media-Wrapper begrenzt die Bildhöhe, ohne zu croppen */
.h2d-infoCard__media {
  width: 100%;
  max-height: clamp(120px, 30vw, 220px); /* anpassbar */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* falls SVG größer ist, aber wir croppen nicht das Bild selbst */
}

/* Bild: immer vollständig sichtbar (kein Zuschnitt) */
.h2d-infoCard__img {
  width: 50%;
  height: auto;
  aspect-ratio: 2/1;
  object-fit: contain; /* zeigt immer komplett */
  border-radius: 8px;
}

/* Textbereich */
.h2d-infoCard__body {
  display: grid;
  gap: 6px;
}

.h2d-infoCard__title {
  text-align: center;
  margin: 0;
  color: var(--first-color);
  font-size: 1.05rem;
}

.h2d-infoCard__desc {
  margin: 0;
}

.h2d-infoCard__link {
  display: inline-block;
  align-self: start;
  text-align: center;
  padding: 0.45rem 0.8rem;
  border-radius: var(--btn-border-radius);
  background: var(--first-color);
  color: var(--brightest);
  text-decoration: none;
}

.h2d-infoCard__link:hover {
  background: var(--first-color--hover);
  color: var(--brightest);
}

@media (max-width: 767px) {
  /* Label ausblenden */
  .h2d-ctrl-reset .h2d-reset-label {
    display: none;
  }
  /* Icon-Only, echte Quadratfläche wie die Pfeile */
  .h2d-ctrl-reset {
    min-width: 0;
    width: 3rem; /* gleiche Kante wie die Pfeil-Buttons */
    height: 3rem;
    padding: 0; /* kein asymmetrisches Padding */
    display: inline-grid; /* sauber zentrieren */
    place-items: center;
    gap: 0; /* kein Abstand, wir zeigen ja nur das Icon */
  }
  /* Icon ggf. minimal kleiner, damit Luft bleibt */
  .h2d-ctrl-reset i {
    line-height: 1;
  }
}
/* Nur 2D: klickbare Hotspots (per JS markiert) */
.h2d-grafikBox svg .h2d-hotspot,
.h2d-grafikBox svg .h2d-hotspot * {
  cursor: pointer;
}

/* Optional: Grundfarbe für den ersten Kreis im Hotspot (dein Punkt) */
.h2d-grafikBox svg .h2d-hotspot > circle:first-of-type {
  fill: var(--first-color);
  stroke: #fff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: fill 0.15s ease, transform 0.15s ease;
}

/* Hover: ALLE Kinder des Hotspots einfärben (path/circle/rect/ellipse/polygon/polyline) */
.h2d-grafikBox svg .h2d-hotspot:hover path,
.h2d-grafikBox svg .h2d-hotspot:hover circle,
.h2d-grafikBox svg .h2d-hotspot:hover rect,
.h2d-grafikBox svg .h2d-hotspot:hover ellipse,
.h2d-grafikBox svg .h2d-hotspot:hover polygon,
.h2d-grafikBox svg .h2d-hotspot:hover polyline {
  fill: var(--first-color) !important;
}

/* Scope NUR für die 2D-Grafik */
.h2d-grafikBox svg {
  /* Animation für sanften Wechsel */
}

.h2d-grafikBox svg .text * {
  transition: fill 0.15s ease;
}

.h2d-grafikBox svg g:hover .text * {
  fill: #fff !important;
}

/* Persistenter aktiver Zustand: identisch zu :hover */
.h2d-grafikBox svg .h2d-hotspot.h2d-active path,
.h2d-grafikBox svg .h2d-hotspot.h2d-active circle,
.h2d-grafikBox svg .h2d-hotspot.h2d-active rect,
.h2d-grafikBox svg .h2d-hotspot.h2d-active ellipse,
.h2d-grafikBox svg .h2d-hotspot.h2d-active polygon,
.h2d-grafikBox svg .h2d-hotspot.h2d-active polyline {
  fill: var(--first-color) !important;
}

.h2d-grafikBox svg .h2d-hotspot.h2d-active .text * {
  fill: #fff !important;
}

/* Für saubere Skalierung: um Mittelpunkt der Gruppe */
.h2d-grafikBox svg .h2d-hotspot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), fill 0.15s ease, stroke 0.15s ease;
}

/* Aktiver Hotspot größer */
.h2d-grafikBox svg .h2d-hotspot.h2d-active {
  transform: scale(1.15);
}

#h2d-infoBox {
  overflow-y: auto;
}

/* ≤ 767px: Pfeile aus, Reset bleibt (als Icon, quadratisch) */
@media (max-width: 767px) {
  .h2d-ctrl-left,
  .h2d-ctrl-right,
  .h2d-ctrl-up,
  .h2d-ctrl-down {
    display: none !important;
  }
  /* Icon-only Reset, quadratisch */
  .h2d-ctrl-reset .h2d-reset-label {
    display: none;
  }
  .h2d-ctrl-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0;
    gap: 0;
  }
}