/* n8nk-ai.de · Hairline-Figuren für die ganze Seite. Nach den übrigen Stylesheets laden. */

/* ── Header: der Arbeitsplatz ── */
.hero-abstract { display: grid; place-items: center; background: #e6edf5; }
.hero-abstract::after { display: none; }
.hero-figure { position: relative; width: min(100%, 700px); padding: 36px 0 44px; box-sizing: border-box; }
.hero-figure .hl-stage {
  /* der Rahmen der Figur hat leeren Rand: die Bühne ragt darüber hinaus, die Szene bleibt in der Spalte */
  width: 128%;
  margin: -6% -14% -4%;
  cursor: pointer;
}
.hero-visual .hero-figure-read {
  position: absolute; left: 24px; top: 22px; right: auto; bottom: auto;
  background: none; padding: 0;
  font-size: 0.62rem; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; color: #1c2b40;
  opacity: 0; transform: translateY(4px); transition: opacity 0.26s ease, transform 0.26s ease; pointer-events: none;
}
.hero-visual .hero-figure-read::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #0049ff; vertical-align: 1px;
}
.hero-visual .hero-figure.is-reading .hero-figure-read { opacity: 1; transform: none; }

/* ── Leiste der fünf Stärken: die Kette als Band unter den Punkten ── */
.hl-band-wrap { aspect-ratio: 10 / 1; overflow: hidden; margin-top: 4px; }
/* die Leiste gibt ihren Spalten Innenabstand und Trennlinien: das Band als volle Zeile nimmt nichts davon an */
.proof-strip .proof-strip-grid > .hl-band-wrap { padding: 0; border: 0; background: none; }
.hl-band-wrap .hl-stage { width: 100%; margin-top: -34.5%; }

/* ── Kompetenzen: Nahaufnahmen statt Icons ── */
#felder .hl-card { width: 240px; max-width: 100%; margin: -18px 0 -8px -12px; cursor: crosshair; }

/* ── Erfahrung: der Weg über der Zeitleiste, Stufe für Stufe über den Stationen ── */
.hl-weg-wrap { aspect-ratio: 3.15 / 1; overflow: hidden; margin: -8px 0 6px; }
.hl-weg-wrap .hl-stage { width: 100%; margin-top: -26.25%; cursor: pointer; }
#weg .career-step summary { transition: color 0.26s ease; }
#weg .career-step.hl-on summary strong { color: #0049ff; }

/* ── Nachweise: der Ablagekorb neben der Überschrift ── */
#nachweise .has-hl-proof { position: relative; }
#nachweise .hl-proof { position: absolute; top: -48px; right: -20px; width: 440px; cursor: crosshair; }
#nachweise article { transition: box-shadow 0.26s ease, transform 0.26s ease; }
#nachweise article.hl-match {
  box-shadow: 0 0 0 1.5px #0049ff, 0 16px 32px -20px rgba(0, 73, 255, 0.45);
  transform: translateY(-3px);
}

/* ── AI & Agenten: der Lauf einer Aufgabe als Band ── */
.hl-orch-wrap { position: relative; aspect-ratio: 3.125 / 1; overflow: hidden; margin: 8px 0 4px; border-top: 1px solid rgba(159, 178, 203, 0.18); }
.hl-orch-wrap .hl-stage { width: 100%; margin-top: -26%; cursor: crosshair; }
.hl-orch-read {
  position: absolute; left: 0; top: 18px;
  font-size: 0.62rem; letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; color: #9fb2cb;
  pointer-events: none;
}
.hl-orch-read::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: #7da2ff; vertical-align: 1px; }

/* ── Projekte: dieselbe Linien-Optik wie die Kompetenz-Karten ── */
#arbeiten .work-card { transition: box-shadow 0.26s ease; }
#arbeiten .work-card:hover { box-shadow: inset 0 2px 0 #0049ff; }

/* ── Kontakt: die Kette endet beim Umschlag ── */
#kontakt .hl-contact { width: 420px; max-width: 92%; margin: -24px auto 18px; aspect-ratio: 2.65 / 1; overflow: hidden; }
#kontakt .hl-contact .hl-stage { width: 151%; margin: -42.3% 0 0 -26.4%; cursor: crosshair; }

/* ── kleinere Bildschirme ── */
@media (max-width: 1099px) {
  #nachweise .hl-proof { display: none; }
}
@media (max-width: 900px) {
  .hero-figure { width: min(100%, 400px); padding: 0; }
  .hero-abstract figcaption { top: 14px; bottom: auto; }
  .hl-band-wrap, .hl-weg-wrap { display: none; }
}
@media (max-width: 640px) {
  .hero-figure { width: min(100%, 290px); padding: 0; }
  .hero-abstract figcaption { top: 10px; right: 10px; font-size: 0.5rem; }
  .hero-visual .hero-figure-read { display: none; }
  #felder .hl-card { width: 210px; }
  .hl-orch-wrap { aspect-ratio: 2.4 / 1; }
  .hl-orch-wrap .hl-stage { width: 130%; margin-left: -15%; margin-top: -33.8%; }
  #kontakt .hl-contact { width: 300px; margin-top: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-visual .hero-figure-read, #nachweise article, #weg .career-step summary { transition: none; }
  #nachweise article.hl-match { transform: none; }
}