/* =========================================================================
   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;
}

/* Die Ziffer trägt dieselbe Zuordnung wie die Farbe — und zwar auch für
   alle, die die Farben nicht unterscheiden können (WCAG 1.4.1). Welche
   Ziffer zu welchem Bauteil gehört, sagt die Bildunterschrift.

   --marker statt currentColor für den Scheibengrund: currentColor löst
   auf der Scheibe selbst auf, und die trägt bereits die helle Textfarbe.
   Grund und Ziffer wären damit identisch — die Zahl unsichtbar. */
.part__no {
  flex: none;
  display: grid; place-items: center;
  width: 1.35em; height: 1.35em;
  border-radius: 50%;
  background: var(--marker, var(--ink));
  color: var(--bg);
  font-size: .8em;
  font-weight: 600;
  line-height: 1;
}

.explosion__caption {
  margin-top: 1rem;
  font-size: clamp(.85rem, .8rem + .2vw, .95rem);
  color: var(--deep);
  max-width: 46ch;
}

/* The drawing runs diagonally from top left to bottom right. Each flag sits
   in the free space beside its part: Aufsatz, Lautsprecher and
   Drehmechanismus to the right of the axis, Schiebemechanismus to the
   left. Left of the Lautsprecher there is no room inside the drawing — a
   flag there would reach into the text column.                          */
.flag--top     { top: -3%; left: 25%;  color: var(--blue-ink); }
.flag--speaker { top: 13%; left: 36%;  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; }

  /* Nur über die Zeichnung legen, nicht über die Bildunterschrift darunter:
     die Höhe folgt dem Seitenverhältnis des Bildes (1080 × 1207). */
  .parts {
    position: absolute; top: 0; left: 0; right: 0;
    aspect-ratio: 1080 / 1207;
    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);
  }
  /* Der farbige Punkt ist zur nummerierten Scheibe geworden: gleiche Optik,
     aber die Zuordnung zur Zeichnung hängt nicht mehr allein an der Farbe. */
  .part__no { font-size: .78em; }

  .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 { --marker: var(--pink-ink);   color: var(--marker); }
  .part--top     { --marker: var(--blue-ink);   color: var(--marker); }
  .part--rotate  { --marker: var(--yellow-ink); color: var(--marker); }
  .part--slide   { --marker: var(--green-ink);  color: var(--marker); }
}