/*
 * CATRO Hero – Layout und Animation für den mit Elementor-Atomic-Elementen gebauten Hero.
 * Die Elemente werden über das Attribut data-ch angesprochen (in Elementor: Element → Attribute):
 *
 *   data-ch="hero"        äußerer Bereich (Div-Block, Tag section)
 *   data-ch="stage"       innere Bühne 1240 × 800 (wird per JS skaliert)
 *   data-ch="text"        Textspalte (Überschrift, Text, Jobsuche)
 *   data-ch="titel"       Überschrift (rote Zeile: <span>…</span>, z. B. per Textfarbe/Markierung im Editor)
 *   data-ch="lead"        Einleitungstext
 *   data-ch="bilder"      Bilderbereich
 *   data-ch="karte-1..4"  Bildkarte (1 oben links, 2 oben rechts, 3 unten links, 4 unten rechts) mit Bild darin
 *   data-ch="label"       Glas-Label in einer Karte
 *   data-ch="ki-hinweis"  KI-Kennzeichnung in Karte 4: Bild (rundes EU-Symbol) oder Text („AI generated“)
 *
 * Werte und Timings 1:1 aus dem bisherigen Slider-Revolution-Modul (Grid 1240 × 800).
 */

/* Doppelter Attribut-Selektor überall: schlägt Elementors später geladene Regeln wie .e-con (Höhe/Überlauf über Variablen)
   und .elementor .e-paragraph-base / .e-heading-base (Abstände), ohne !important. */
[data-ch="hero"][data-ch][data-ch] {
  --ch-red: #d51030;
  --ch-bg: #eceded;
  --power1-out: cubic-bezier(0.5, 1, 0.89, 1);
  --power4-out: cubic-bezier(0.22, 1, 0.36, 1);
  --power3-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --power4-inout: cubic-bezier(0.83, 0, 0.17, 1);
  /* Skalierung: schon vor dem Skript richtig (--ch-vw setzt ein Mini-Skript im <head>), danach per JS genau */
  --s: min(1, calc(var(--ch-vw, 1420) / 1420));

  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: calc(800px * var(--s));
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--ch-bg);
  overflow: hidden;
  font-family: "Lato", Arial, sans-serif;
  color: #000;
}
[data-ch="hero"][data-ch] *, [data-ch="hero"][data-ch] *::before, [data-ch="hero"][data-ch] *::after { box-sizing: border-box; }

/* Exakte GSAP-Kurven (power1 = quad, power3 = quart, power4 = quint) */
@supports (animation-timing-function: linear(0, 1)) {
  [data-ch="hero"][data-ch] {
    --power1-out: linear(0, 0.0494, 0.0975, 0.1444, 0.19, 0.2344, 0.2775, 0.3194, 0.36, 0.3994, 0.4375, 0.4744, 0.51, 0.5444, 0.5775, 0.6094, 0.64, 0.6694, 0.6975, 0.7244, 0.75, 0.7744, 0.7975, 0.8194, 0.84, 0.8594, 0.8775, 0.8944, 0.91, 0.9244, 0.9375, 0.9494, 0.96, 0.9694, 0.9775, 0.9844, 0.99, 0.9944, 0.9975, 0.9994, 1);
    --power3-inout: linear(0, 0, 0.0001, 0.0003, 0.0008, 0.002, 0.004, 0.0075, 0.0128, 0.0205, 0.0313, 0.0458, 0.0648, 0.0893, 0.12, 0.1582, 0.2048, 0.261, 0.3281, 0.4073, 0.5, 0.5927, 0.672, 0.739, 0.7952, 0.8418, 0.88, 0.9107, 0.9352, 0.9542, 0.9688, 0.9795, 0.9872, 0.9925, 0.996, 0.998, 0.9992, 0.9997, 1, 1, 1);
    --power4-out: linear(0, 0.1189, 0.2262, 0.3228, 0.4095, 0.4871, 0.5563, 0.6178, 0.6723, 0.7204, 0.7627, 0.7997, 0.8319, 0.8599, 0.884, 0.9046, 0.9222, 0.9371, 0.9497, 0.9601, 0.9688, 0.9758, 0.9815, 0.9861, 0.9898, 0.9926, 0.9947, 0.9964, 0.9976, 0.9984, 0.999, 0.9994, 0.9997, 0.9998, 0.9999, 1, 1, 1, 1, 1, 1);
    --power4-inout: linear(0, 0, 0, 0, 0.0002, 0.0005, 0.0012, 0.0026, 0.0051, 0.0092, 0.0156, 0.0252, 0.0389, 0.058, 0.084, 0.1187, 0.1638, 0.2219, 0.2952, 0.3869, 0.5, 0.6131, 0.7048, 0.7781, 0.8362, 0.8813, 0.916, 0.942, 0.9611, 0.9748, 0.9844, 0.9908, 0.9949, 0.9974, 0.9988, 0.9995, 0.9998, 1, 1, 1, 1);
  }
}

/* ---------- Bühne & Textspalte ---------- */
[data-ch="hero"][data-ch] [data-ch="stage"] {
  position: absolute;
  top: 0;
  /* Bühnen-Versatz: per CSS sofort richtig (kein Springen von links in die Mitte), per JS bestätigt */
  left: var(--left, max(0px, min(calc((100% - 1240px) / 2), calc(100% - 1420px))));
  display: block;
  width: 1240px;
  height: 800px;
  margin: 0;
  padding: 0;
  transform: scale(var(--s));
  transform-origin: 0 0;
}
[data-ch="hero"][data-ch] [data-ch="text"] {
  position: absolute;
  left: 30px;
  top: 100px;
  z-index: 20;
  display: block;
  width: 643px;
  margin: 0;
  padding: 0;
}
[data-ch="hero"][data-ch] [data-ch="titel"] {
  margin: 0;
  padding: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 48px;
  line-height: 70px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #000;
}
/* rote Zeile: jeder <span> in der Überschrift (Elementor entfernt Klassen aus dem Text) */
[data-ch="hero"][data-ch] [data-ch="titel"] span { color: var(--ch-red); }
[data-ch="hero"][data-ch] [data-ch="lead"] {
  width: 591px;
  margin: 50px 0 0;
  padding: 0;
  font-family: "Lato", Arial, sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #000;
}
[data-ch="hero"][data-ch] .ch-jobsuche { margin-top: 50px; }

/* ---------- Bilder ---------- */
[data-ch="hero"][data-ch] [data-ch="bilder"] { position: static; display: block; margin: 0; padding: 0; }

[data-ch="hero"][data-ch] [data-ch^="karte-"] {
  position: absolute;
  display: block;
  width: 300px;
  height: 300px;
  min-height: 0;
  margin: 0;
  padding: 0;
  transition: translate .5s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-ch="hero"][data-ch] [data-ch^="karte-"] img:not([data-ch="ki-hinweis"]) {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  background: #959696;
  box-shadow: 0 30px 60px -25px rgba(0, 0, 0, 0.35);
  transition: box-shadow .5s;
}
[data-ch="hero"][data-ch] [data-ch^="karte-"]:hover { translate: 0 -6px; }
[data-ch="hero"][data-ch] [data-ch^="karte-"]:hover img:not([data-ch="ki-hinweis"]) { box-shadow: 0 40px 70px -25px rgba(0, 0, 0, 0.42); }
[data-ch="hero"][data-ch] [data-ch="karte-1"] img:not([data-ch="ki-hinweis"]), [data-ch="hero"][data-ch] [data-ch="karte-2"] img:not([data-ch="ki-hinweis"]) { border-radius: 75px 75px 0 0; }
[data-ch="hero"][data-ch] [data-ch="karte-3"] img:not([data-ch="ki-hinweis"]), [data-ch="hero"][data-ch] [data-ch="karte-4"] img:not([data-ch="ki-hinweis"]) { border-radius: 0 0 75px 75px; }

/* Positionen wie im Slider: left = (1240 - 300) / 2 + x */
[data-ch="hero"][data-ch] [data-ch="karte-1"] { left: 740px;  top: 123px; z-index: 12; }
[data-ch="hero"][data-ch] [data-ch="karte-2"] { left: 1090px; top: 41px;  z-index: 10; }
[data-ch="hero"][data-ch] [data-ch="karte-3"] { left: 739px;  top: 458px; z-index: 11; }
[data-ch="hero"][data-ch] [data-ch="karte-4"] { left: 1088px; top: 360px; z-index: 9;  }

/* Im Elementor-Editor stecken Widgets in Hüllen-Divs: Bild füllt die Karte, Label/Hinweis richten sich an der Karte aus */
.elementor-editor-active [data-ch="hero"][data-ch] [data-ch^="karte-"] > .elementor-element { position: static; }
.elementor-editor-active [data-ch="hero"][data-ch] [data-ch^="karte-"] > .elementor-element:has(img:not([data-ch="ki-hinweis"])) { width: 100%; height: 100%; }

/* ---------- Glas-Labels (alle auf gleicher Höhe unten im Bild) ---------- */
[data-ch="hero"][data-ch] [data-ch="label"] {
  position: absolute;
  left: 50%;
  top: 230px;
  z-index: 2;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0 20px;
  white-space: nowrap;
  text-align: center;
  font-family: "Lato", Arial, sans-serif;
  font-size: 18px;
  line-height: 40px;
  font-weight: 400;
  color: #fff;
  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 5px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  transform: translateX(-50%);
}
/* längstes Label: etwas kleiner, damit es in die runden Ecken passt */
[data-ch="hero"][data-ch] [data-ch="karte-3"] [data-ch="label"] { font-size: 15px; padding: 0 14px; }

/* ---------- KI-Hinweis (kleiner als bisher) ---------- */
[data-ch="hero"][data-ch] [data-ch="ki-hinweis"] {
  position: absolute;
  top: 308px;
  right: 0;
  z-index: 3;
  margin: 0;
  padding: 2px 7px;
  font-family: "Lato", Arial, sans-serif;
  font-size: 9px;
  line-height: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 999px;
  opacity: .85;
  cursor: help;
}
[data-ch="hero"][data-ch] [data-ch="ki-hinweis"] strong, [data-ch="hero"][data-ch] [data-ch="ki-hinweis"] b { font-weight: 700; }
/* Variante: rundes EU-Symbol als Bild (klein, ohne Hintergrund, voll deckend wie von der EU empfohlen) */
[data-ch="hero"][data-ch][data-ch] img[data-ch="ki-hinweis"] {
  width: 22px;
  height: 22px;
  max-width: none;
  padding: 0;
  background: none;
  border-radius: 50%;
  box-shadow: none;
  opacity: 1;
  object-fit: contain;
  top: 307px;
  right: 2px;
}

.ch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Animation (Timeline aus dem Slider) ---------- */
@keyframes ch-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-pop {
  from { opacity: 0; transform: translate(-50%, var(--pop-y, 50px)) scale(.5); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Text, Bilder und KI-Hinweis stehen sofort (keine Einblend-Animation). Nur die Glas-Labels in den Bildern
   behalten ihre Slider-Animation (Aufpoppen + Tipp-Effekt). Bis zum Start sind sie unsichtbar – auch bevor
   das Skript geladen ist, damit nichts flackert. Ohne JavaScript erscheinen sie nach 3 s. */
[data-ch="hero"][data-ch]:not(.is-playing):not(.is-static) [data-ch="label"] { opacity: 0; }
[data-ch="hero"][data-ch]:not(.ch-js) [data-ch="label"] { animation: ch-pop 600ms ease 3s both; }

/* Labels gestaffelt in Lesereihenfolge 1 → 3 → 2 → 4 */
[data-ch="hero"][data-ch].is-playing [data-ch="label"] { animation: ch-pop 1000ms var(--power4-inout) both; }
[data-ch="hero"][data-ch].is-playing [data-ch="karte-1"] [data-ch="label"] { animation-delay: 1000ms; animation-timing-function: var(--power1-out); }
[data-ch="hero"][data-ch].is-playing [data-ch="karte-3"] [data-ch="label"] { animation-delay: 1500ms; --pop-y: 47px; }
[data-ch="hero"][data-ch].is-playing [data-ch="karte-2"] [data-ch="label"] { animation-delay: 2000ms; }
[data-ch="hero"][data-ch].is-playing [data-ch="karte-4"] [data-ch="label"] { animation-delay: 2500ms; }

@media (prefers-reduced-motion: reduce) {
  [data-ch="hero"][data-ch].is-playing * { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

/* ---------- Handy: gestapeltes Layout ---------- */
@media (max-width: 899px) {
  /* dreifacher Attribut-Selektor: schlägt Elementors .elementor .e-div-block-base (Innenabstand 10 px) */
  [data-ch="hero"][data-ch][data-ch] { height: auto; padding: 56px 16px 64px; }
  [data-ch="hero"][data-ch] [data-ch="stage"] { position: static; width: auto; height: auto; transform: none; }
  [data-ch="hero"][data-ch] [data-ch="text"] { position: static; width: auto; }
  [data-ch="hero"][data-ch] [data-ch="titel"] { font-size: 34px; line-height: 46px; }
  [data-ch="hero"][data-ch] [data-ch="lead"] { width: auto; margin-top: 28px; font-size: 18px; line-height: 28px; }
  [data-ch="hero"][data-ch] .ch-jobsuche { margin-top: 32px; }
  [data-ch="hero"][data-ch] [data-ch="bilder"] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 560px;
    margin: 72px auto 0;
  }
  [data-ch="hero"][data-ch] [data-ch^="karte-"] {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
  }
  [data-ch="hero"][data-ch] [data-ch="karte-2"], [data-ch="hero"][data-ch] [data-ch="karte-4"] { transform: translateY(-40px); }
  [data-ch="hero"][data-ch] [data-ch="karte-1"] img:not([data-ch="ki-hinweis"]), [data-ch="hero"][data-ch] [data-ch="karte-2"] img:not([data-ch="ki-hinweis"]) { border-radius: 40px 40px 0 0; }
  [data-ch="hero"][data-ch] [data-ch="karte-3"] img:not([data-ch="ki-hinweis"]), [data-ch="hero"][data-ch] [data-ch="karte-4"] img:not([data-ch="ki-hinweis"]) { border-radius: 0 0 40px 40px; }
  [data-ch="hero"][data-ch] [data-ch="label"],
  [data-ch="hero"][data-ch] [data-ch="karte-3"] [data-ch="label"] {
    top: auto;
    bottom: 8%;
    width: max-content;
    max-width: 92%;
    font-size: 13px;
    line-height: 1.3;
    padding: 6px 12px;
    white-space: normal;
  }
  [data-ch="hero"][data-ch] [data-ch="ki-hinweis"],
  [data-ch="hero"][data-ch][data-ch] img[data-ch="ki-hinweis"] { top: calc(100% + 6px); }
  [data-ch="hero"][data-ch][data-ch] img[data-ch="ki-hinweis"] { width: 20px; height: 20px; }
}