/* ══════════════════════════════════════════════════════════════════════════
   3D-KARUSSELL („Einsatzbereiche aus der Luft") — Bühne & Maße.
   Ersetzt die Kachelspur .hl/.hl-spur auf der Drohnenseite. Die Karten sind
   exakt so groß wie eine alte Kachel: Breite clamp(340px,44vw,980px),
   Seitenverhältnis 1.42/1. Auch die Gesamthöhe des Blocks bleibt gleich,
   damit sich der Seitenrhythmus nicht verschiebt.
   Pfeile: bewusst dieselben .hl-pfeile/.hl-pfeil aus karussell.css.
   17.08.2026
   ══════════════════════════════════════════════════════════════════════════ */
.hl3d{
  --k3-breite:clamp(340px,44vw,980px);          /* = .hl-kachel Breite      */
  --k3-hoehe:calc(var(--k3-breite) / 1.42);     /* = .hl-kachel Verhältnis  */
  --k3-luft-oben:54px;                          /* = .hl-spur padding-top   */
  --k3-luft-unten:60px;                         /* = .hl-spur padding-bottom*/
  position:relative;
  /* 17.08.2026: deutlich mehr Luft nach oben und unten — die Sektion stand
     vorher direkt an Titel und Folgeabschnitt und wirkte dadurch überladen.
     Die alte Kachelspur zog den Folgeabschnitt sogar mit -18px heran. */
  margin-top:clamp(28px,4.4vw,64px);
  margin-bottom:clamp(24px,4vw,56px);
}

/* ── Ruhigerer Rhythmus auf der Drohnenseite ───────────────────────────────
   Diese Datei wird ausschließlich von /drohnenaufnahmen/ geladen, die Regeln
   wirken also nur dort und lassen die anderen Säulenseiten unberührt. */
.zahlen-band{margin-bottom:clamp(18px,3vw,44px)}
.sektion-titel{padding-top:clamp(64px,9vh,128px)}   /* vorher clamp(48px,7vh,96px) */
.stage > .grid{margin-bottom:clamp(8px,1.6vw,24px)}

/* Bühne blutet über die Inhaltsspalte hinaus bis an den Fensterrand,
   genau wie die alte Kachelspur — die Randkarten laufen dadurch sauber
   aus dem Bild statt an der Spaltenkante abgeschnitten zu werden. */
.hl3d-buehne{
  --rand:calc((100vw - 100%) / 2);
  margin:0 calc(-1 * var(--rand));
  height:calc(var(--k3-luft-oben) + var(--k3-hoehe) + var(--k3-luft-unten));
  position:relative;
}

/* Maß-Fühler: liefert dem Skript die in CSS berechneten Kartenmaße in px,
   damit CSS und JS nie auseinanderlaufen. */
.hl3d-mass{
  position:absolute;top:0;left:0;
  width:var(--k3-breite);height:var(--k3-hoehe);
  visibility:hidden;pointer-events:none;z-index:-1
}

.hl3d .hl-pfeile{margin-top:-8px}

/* Hinweis-Knopf auf der Karte — dieselbe Form wie die alte .pille,
   nur für dunklen Grund: Acid-Kontur statt schwarzer. */
.k3-pille{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:18px;padding:9px 18px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);
  background:color-mix(in srgb,var(--acc) 8%,transparent);
  color:var(--acc);
  font-family:var(--fft);font-size:var(--t7);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1
}

/* Tastatur-Fokus sichtbar machen (die Bühne ist per tabindex fokussierbar) */
.hl3d-buehne > div:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:20px}

@media(max-width:680px){
  .hl3d{
    --k3-breite:86vw;
    --k3-hoehe:calc(var(--k3-breite) / 1.25);   /* = Kachel-Verhältnis mobil */
    --k3-luft-oben:34px;
    --k3-luft-unten:40px;
  }
  .hl3d .hl-pfeile{justify-content:center}
}