/* =========================================================================
   technology.css — Sektion „Technik": Explosionszeichnung mit Beschriftung
   ========================================================================= */

@media (min-width: 61rem) {
  .grid--tech { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.explosion__image { position: relative; margin: 0; }
.explosion__image img { width: 100%; }

.flag {
  position: absolute;
  font-weight: 500;
  font-size: clamp(.9rem, .8rem + .5vw, 1.2rem);
  white-space: nowrap;
  pointer-events: none;
}

/* The drawing runs diagonally from top left to bottom right. Each flag sits
   in the free space beside its part: Aufsatz and Drehmechanismus to the
   right of the axis, Lautsprecher and Schiebemechanismus to the left.    */
.flag--top     { top: -3%; left: 25%;  color: var(--blue-ink); }
.flag--speaker { top: 26%; right: 94%; color: var(--pink-ink); }
.flag--rotate  { top: 37%; left: 62%;  color: var(--yellow-ink); }
.flag--slide   { top: 80%; left: 28%;  color: var(--green-ink); }

/* From 61rem up, the labels sit freely on the drawing. The list stays in the
   DOM for screen readers but is visually hidden.                         */
@media (min-width: 61rem) {
  .parts {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; white-space: nowrap;
    clip-path: inset(50%);
  }
}

/* Below 61rem: no more free-floating flags. The legend sits in the free
   corners of the diagonal drawing: upper parts top right, lower parts
   bottom left. */
@media (max-width: 60.9375rem) {
  .flag { display: none; }

  .explosion { position: relative; }

  .parts {
    position: absolute; inset: 0;
    list-style: none;
    margin: 0; padding: 0;
    pointer-events: none;
  }
  .part {
    position: absolute;
    display: flex; align-items: center; gap: .6rem;
    font-weight: 500;
    font-size: clamp(.85rem, .75rem + .5vw, 1rem);
  }
  .part::before {
    content: ""; flex: none;
    width: .85rem; height: .85rem; border-radius: 50%;
    background: currentColor;
  }

  .part--top     { top: 1%; right: 0; }
  .part--speaker { top: calc(1% + 1.9rem); right: 0; }
  .part--rotate  { bottom: calc(2% + 1.9rem); left: 0; }
  .part--slide   { bottom: 2%; left: 0; }
  .part--speaker { color: var(--pink-ink); }
  .part--top     { color: var(--blue-ink); }
  .part--rotate  { color: var(--yellow-ink); }
  .part--slide   { color: var(--green-ink); }
}