/* ---------- Hero-Automat (Startseite) ----------
   Die Szene steckt als Inline-SVG in index.html; hier nur Bewegung und Maße.
   Jede Animation hängt an .im-bild: illu.js setzt die Klasse, solange die
   Szene im Sichtbereich ist – außerhalb läuft nichts und der Akku bleibt in
   Ruhe. Die Grundstellung (ohne Klasse, ohne JS, bei reduzierter Bewegung)
   ist ein fertiges Standbild: Karte auf dem linken Band, geprüfte Karte vor
   dem Betrieb, erstes Wort im Display.
   Eingebunden NACH styles.css, damit .reveal-Regeln nicht überschreiben.

   Takt der Schleife (8 s): Bewerberkarte fährt links ein (0–46 %), die
   Leuchten laufen Gelb → Blau → Grün (46–64 %), die geprüfte Karte kommt
   aus dem Ausgabefach und hält vor dem Betrieb (52–78 %), dessen Fenster
   nacheinander aufleuchten (84–94 %), dann blendet sie aus. */

.automat-szene { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.automat-szene text { font-family: inherit; font-weight: 800; }
.automat-szene .auge, .automat-szene .antenne, .automat-szene .automat,
.automat-szene .rolle, .automat-szene .blob, .automat-szene .symbol { transform-box: fill-box; transform-origin: center; }

/* Pupillen folgen dem Zeiger (illu.js schreibt --bx/--by in Einheiten der
   Szene). Der Kopf ist das Logo auf 1,5-fach – deshalb durch 1,5 teilen,
   damit „max. 4 Einheiten" auch 4 Einheiten der Szene bleiben. */
.automat-szene .auge-pupille { transform: translate(calc(var(--bx, 0) * 1px / 1.5), calc(var(--by, 0) * 1px / 1.5)); }

/* Standbild: erstes Wort, Leuchten gedimmt, geprüfte Karte vor dem Betrieb */
.automat-szene .display-wort { opacity: 0; }
.automat-szene .display-wort:first-of-type { opacity: 1; }
.automat-szene .lampe { opacity: .3; }
.automat-szene .karte-aus { transform: translateX(144px); }

.automat-szene.im-bild .antenne { animation: illu-antenne 2.4s ease-in-out infinite; }
.automat-szene.im-bild .auge { animation: illu-blinzeln 4.2s linear infinite; }
.automat-szene.im-bild .automat { animation: illu-schweben 6s ease-in-out infinite; }
.automat-szene.im-bild .band-strich { animation: illu-band 1s linear infinite; }
.automat-szene.im-bild .rolle { animation: illu-rolle 2s linear infinite; }
.automat-szene.im-bild .karte-ein { animation: illu-karte-ein 8s ease-in-out infinite; }
.automat-szene.im-bild .karte-aus { animation: illu-karte-aus 8s ease-in-out infinite; }
.automat-szene.im-bild .lampe { animation: illu-lampe 8s ease-in-out infinite; }
/* Wörter schalten hart um (steps): ein Überblenden ließe das Display grau
   und leer wirken wie einen Platzhalter */
.automat-szene.im-bild .display-wort { animation: illu-wort 8s steps(1, end) infinite; }
.automat-szene.im-bild .fenster { animation: illu-fenster 8s ease-in-out infinite; }
.automat-szene.im-bild .blob { animation: illu-blob 24s ease-in-out infinite; }
.automat-szene.im-bild .symbol { animation: illu-symbol 7s ease-in-out infinite; }
.automat-szene.im-bild .lampe:nth-of-type(2) { animation-delay: .5s; }
.automat-szene.im-bild .lampe:nth-of-type(3) { animation-delay: 1s; }
.automat-szene.im-bild .display-wort:nth-of-type(2) { animation-delay: 2.667s; }
.automat-szene.im-bild .display-wort:nth-of-type(3) { animation-delay: 5.333s; }
.automat-szene.im-bild .fenster:nth-of-type(2) { animation-delay: .16s; }
.automat-szene.im-bild .fenster:nth-of-type(3) { animation-delay: .32s; }
.automat-szene.im-bild .fenster:nth-of-type(4) { animation-delay: .48s; }
.automat-szene.im-bild .fenster:nth-of-type(5) { animation-delay: .64s; }
.automat-szene.im-bild .fenster:nth-of-type(6) { animation-delay: .8s; }
.automat-szene.im-bild .blob:nth-of-type(2) { animation-duration: 30s; animation-delay: -8s; }
.automat-szene.im-bild .blob:nth-of-type(3) { animation-duration: 26s; animation-delay: -15s; animation-direction: reverse; }
.automat-szene.im-bild .blob:nth-of-type(4) { animation-duration: 22s; animation-delay: -4s; }
.automat-szene.im-bild .symbol:nth-of-type(2) { animation-duration: 9s; animation-delay: -3s; }

@keyframes illu-antenne { 50% { transform: scale(1.3); opacity: .75; } }
@keyframes illu-blinzeln { 0%, 92%, 97%, 100% { transform: scaleY(1); } 94.5% { transform: scaleY(.08); } }
@keyframes illu-schweben { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-4px); } }
@keyframes illu-band { to { stroke-dashoffset: -22; } }
@keyframes illu-rolle { to { transform: rotate(360deg); } }
@keyframes illu-blob { 50% { transform: translate(12px, -10px); } }
@keyframes illu-symbol { 50% { transform: translateY(-7px); } }
/* Bewerberkarte: fährt ein, verschwindet im Gerät (bei 170 px liegt sie ganz
   hinter dem Korpus) und kehrt unsichtbar an den Bandanfang zurück, wo sie
   schon wieder wartet – so ist sie den größten Teil der Schleife zu sehen. */
@keyframes illu-karte-ein {
  0% { transform: translateX(40px); opacity: 1; }
  46%, 58% { transform: translateX(170px); opacity: 1; }
  59% { transform: translateX(170px); opacity: 0; }
  60% { transform: translateX(0); opacity: 0; }
  66% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(40px); opacity: 1; }
}
/* Geprüfte Karte: aus dem Ausgabefach (Clip ab x=308) aufs rechte Band,
   hält vor dem Betrieb, blendet aus */
@keyframes illu-karte-aus {
  0%, 52% { transform: translateX(0); opacity: 1; }
  78%, 90% { transform: translateX(144px); opacity: 1; }
  97%, 100% { transform: translateX(144px); opacity: 0; }
}
@keyframes illu-lampe { 0%, 44%, 54%, 100% { opacity: .3; } 46%, 52% { opacity: 1; } }
@keyframes illu-wort { 0% { opacity: 1; } 33.3%, 100% { opacity: 0; } }
@keyframes illu-fenster { 0%, 80%, 97%, 100% { fill: #fff; } 84%, 94% { fill: #FFC531; } }

/* Einspaltig (Umbruch wie .hero-grid in styles.css): Szene unter dem Text, schmaler */
@media (max-width: 980px) {
  .automat-szene { max-width: 420px; }
}

/* ---------- Illustrationen (assets/img/illu/*.svg) ----------
   Eingebettet als <object>: Jede Datei ist ein eigenes Dokument mit eigener
   Bewegung und eigenem reduced-motion-Schalter – hier stehen nur Maße.
   pointer-events: none, damit ein Klick aufs Bild in einer Kachel beim Link
   ankommt, statt im eingebetteten Dokument zu versickern.
   Bei Höhenbegrenzung immer auch max-width = Höhe × 4/3 setzen: Sonst bliebe
   das Objekt volle Breite, und das Bild säße mit Leerraum links und rechts
   darin – zentriert sähe es gleich aus, linksbündig nicht. */
.illu { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; pointer-events: none; }
.illu > img { display: block; width: 100%; height: 100%; }

/* Startseite: Branchen-Kacheln */
/* Auch schmal zweispaltig: einspaltig wurden neun Kacheln über 2.400 px lang */
.branchen-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.branche-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px; color: var(--tinte); text-align: center; text-decoration: none;
}
.branche-kachel:hover { text-decoration: none; }
.branche-kachel:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
.branche-kachel .illu { max-width: 200px; max-height: 150px; margin: 0 auto; }
.branche-name { font-weight: 800; max-width: 100%; overflow-wrap: break-word; hyphens: auto; }

/* Startseite: Schritt-Karten in #so-funktionierts (ersetzen die Nummern) */
.schritt .illu-schritt { max-width: 160px; max-height: 120px; margin: 0 0 14px; }

/* arbeitgeber.html: Hero rechts und Vorteils-Karten */
.illu-arbeitgeber-hero { max-width: 480px; margin: 0 auto; }
.karte .illu-vorteil { max-width: 147px; max-height: 110px; margin: 0 0 12px; }

/* Leerzustände (jobs.html, Berufsseiten), 404 und Danke-Seite */
.illu-leer { max-width: 220px; margin: 0 auto 6px; }
.illu-404 { max-width: 260px; margin: 0 0 12px; }
.illu-danke { max-width: 220px; margin: 0 auto 10px; }

/* Berufsseiten (kategorie.php): Bild rechts neben Überschrift und Einleitung */
.kat-kopf { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 40px; align-items: center; }
.illu-kat-kopf { max-width: 240px; }

@media (min-width: 760px) {
  .branchen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Schmal: kleinere Kacheln, damit zwei Spalten auch auf 320 px tragen */
@media (max-width: 759.98px) {
  .branche-kachel { padding: 12px; gap: 8px; }
  .branche-kachel .illu { max-width: 128px; max-height: 96px; }
  .branche-name { font-size: .9rem; }
}
/* Einspaltig wie .hero-grid: Hero-Bild unter dem Text, schmaler */
@media (max-width: 980px) {
  .illu-arbeitgeber-hero { max-width: 400px; }
}
/* Schmal: Berufsbild unter die Einleitung (Umbruch wie .karten-3 in styles.css) */
@media (max-width: 760px) {
  .kat-kopf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .illu-kat-kopf { max-width: 180px; margin: 0 auto; }
}

/* Reduzierte Bewegung: Standbild, Pupillen mittig – muss das letzte @media bleiben */
@media (prefers-reduced-motion: reduce) {
  .automat-szene, .automat-szene * { animation: none !important; }
  .automat-szene .auge-pupille { transform: none !important; }
}