/* Erste Hero-Folie (Nutzer 14.10.2026): Tags-Karte mit Cockpit nach dem Vorbild des Iron-Man-HUD, vierte Fassung.
   Die Karte ist rund 20 % niedriger und durchscheinend wie die Kopfzeile (Glas). Hinter ihr (.hp-cockpit-under) drehen
   der äußere Ring (33 s je Umdrehung) und gegenläufig die zweite Reihe (50 s), beide mit Tags, die unter dem Glas
   verschwommen durchschimmern und vor der Schrift ausblenden; unter jedem Tag läuft ein Puls in seiner Farbe. In der
   Karte (.hp-cockpit) drehen die inneren Ringe mit Rückschnappern um das #. Die Scheibe ragt oben, rechts und unten über
   die Karte (Lage setzt hero-cockpit.js). Keine Reaktion auf Maus, Scrollen oder Klick.
   Handy: nur Ringe. Reduzierte Bewegung: stehendes Cockpit. Löst die CIN-Next-Karte (hero-jtl.*) ab. */

.hp-cockpit-slide { position: relative; }
/* Die Tags-Karte ist niedriger als die Modul-Folien; sie steht mittig in deren Höhe, damit der Hero-Text bei jeder Folie
   mittig steht (Nutzer 15.10.2026, gewählt „Tags-Karte mittig“). Nur mit Text daneben, nicht auf dem Handy. */
@media (min-width: 900.02px) {
  .hp-cockpit-slide { align-self: center; }
}

/* Karte: niedriger, Glas wie die Kopfzeile */
.hp-tags-card.hp-cockpit-card {
  position: relative;
  z-index: 1;
  overflow: visible;
  min-height: min(22.4rem, calc(100vh - 13.6rem));
  background: rgba(255, 255, 255, .38);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: none;
}
.hp-cockpit-card::before { content: none; }
.hp-cockpit-card > :not(.hp-cockpit) {
  position: relative;
  z-index: 1;
}

/* Ebene hinter der Karte: äußerer Ring und zweite Reihe samt Tags */
.hp-cockpit-under {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Scheiben: ohne Skript rechts in der Karte, mit Skript (.is-placed) an der berechneten Stelle über den Rand */
.hp-cockpit-disc {
  position: absolute;
  top: 50%;
  right: 3%;
  width: min(54%, 26rem);
  aspect-ratio: 1;
  transform: translateY(-50%);
  container-type: inline-size;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.hp-cockpit-disc.is-placed { right: auto; transform: none; }
.hp-cockpit-disc.is-live { opacity: 1; }
.hp-cockpit { z-index: 0; }

.hp-cockpit-rings,
.hp-cockpit-accents {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hp-cockpit-rings {
  color: #1b3661;
  opacity: .2;
}
.hp-cockpit-rings circle,
.hp-cockpit-rings path,
.hp-cockpit-accents circle,
.hp-cockpit-accents line {
  fill: none;
  stroke: currentColor;
}
/* Bogenstücke: 1 s auf, 1 s stehen, 1 s ab, 1 s aus */
.hp-cockpit-arc { opacity: 0; animation: hp-cockpit-blink 4s ease-in-out infinite; }
.hp-cockpit-arc--b { animation-delay: -1.4s; }
.hp-cockpit-arc--c { animation-delay: -2.7s; }
@keyframes hp-cockpit-blink {
  0%, 100% { opacity: 0; }
  25%, 50% { opacity: 1; }
  75% { opacity: 0; }
}
.hp-slide:not(.is-on) .hp-cockpit-rings * { animation-play-state: paused; }

.hp-cockpit-hash {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26cqi;
  font-weight: 700;
  line-height: 1;
  color: rgb(27 54 97 / .2);
}

/* Linien der Kette: dezent, rund 1 px */
.hp-cockpit-accents .hp-cockpit-link {
  color: #2f6fdb;
  stroke-width: .65;
  stroke-opacity: .4;
  filter: drop-shadow(0 0 2px rgb(47 111 219 / .35));
}
.hp-cockpit-accents .hp-cockpit-dot { fill: #2f6fdb; stroke: none; }

/* Tags: in der Ebene hinter der Karte, auf dem äußeren Ring und der zweiten Reihe */
.hp-cockpit-orbit {
  position: absolute;
  width: 0;
  height: 0;
}
.hp-cockpit-tag {
  position: absolute;
  top: 0;
  translate: -50% -50%;
  opacity: 0;
  white-space: nowrap;
  font-weight: 600;
  font-size: 1.1rem;
  padding: .45rem .95rem;
  /* deckend, damit Ringe nicht durchscheinen; Farbe des Tags aus dem Inline-Stil */
  background-color: color-mix(in srgb, currentColor 14%, #fff) !important;
  box-shadow: 0 8px 22px rgb(27 54 97 / .14);
}
.hp-cockpit-tag[data-row="second"] { font-size: .95rem; padding: .38rem .8rem; }

/* Praxis-Tags unter dem Text: Info beim Überfahren, Tastaturfokus oder Antippen (Nutzer 14.10.2026) */
.hp-tag-tipwrap {
  position: relative;
  display: inline-flex;
}
.hp-tag-tipwrap > .tag-badge { cursor: help; }
.hp-tag-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: 16rem;
  padding: .55rem .7rem;
  border: 1px solid rgb(27 54 97 / .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgb(27 54 97 / .16);
  color: #1b3661;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  translate: -50% 4px;
  transition: opacity .18s ease, translate .18s ease, visibility .18s;
}
.hp-tag-tip strong {
  display: block;
  margin-bottom: .15rem;
  color: var(--tag);
  font-weight: 700;
}
.hp-tag-tipwrap:hover .hp-tag-tip,
.hp-tag-tipwrap:focus-within .hp-tag-tip {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

html[data-bs-theme="dark"] .hp-tags-card.hp-cockpit-card {
  background: rgb(13 17 23 / .38);
  border-color: #30363d;
}
html[data-bs-theme="dark"] .hp-cockpit-rings {
  color: #8cbaf2;
  opacity: .3;
  filter: drop-shadow(0 0 3px rgb(140 186 242 / .7));
}
html[data-bs-theme="dark"] .hp-tag-tip {
  border-color: #30363d;
  background: rgb(22 27 34 / .95);
  color: #e6edf3;
  box-shadow: 0 10px 28px rgb(0 0 0 / .4);
}
html[data-bs-theme="dark"] .hp-tag-tip strong { color: color-mix(in srgb, var(--tag) 55%, #fff); }
html[data-bs-theme="dark"] .hp-cockpit-hash { color: rgb(140 186 242 / .22); }
html[data-bs-theme="dark"] .hp-cockpit-accents .hp-cockpit-link {
  color: #8cbaf2;
  stroke-opacity: .45;
  filter: drop-shadow(0 0 2px rgb(140 186 242 / .45));
}
html[data-bs-theme="dark"] .hp-cockpit-accents .hp-cockpit-dot { fill: #8cbaf2; }
html[data-bs-theme="dark"] .hp-cockpit-tag {
  /* --tag setzt hero-cockpit.js aus data-tag-color; aufgehellt, damit dunkle Farben auf dunklem Grund lesbar bleiben */
  color: color-mix(in srgb, var(--tag) 55%, #fff) !important;
  background-color: color-mix(in srgb, var(--tag) 24%, #161b22) !important;
  border-color: color-mix(in srgb, var(--tag) 50%, transparent) !important;
  box-shadow: 0 8px 22px rgb(0 0 0 / .35);
}

@media (max-width: 767.98px) {
  .hp-cockpit-disc,
  .hp-cockpit-disc.is-placed {
    top: auto;
    bottom: -18%;
    right: -18%;
    width: 72%;
    transform: none;
  }
  .hp-cockpit-under .hp-cockpit-orbit,
  .hp-cockpit-accents { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-cockpit-disc { opacity: 1; transition: none; }
  .hp-cockpit-rings * { animation: none !important; }
  .hp-cockpit-arc { opacity: 1; }
  .hp-cockpit-under .hp-cockpit-orbit,
  .hp-cockpit-accents { display: none; }
}