/* ==========================================================================
   Baustein: Jobs-Teaser (Sektion 9)
   Datei: css/bausteine/jobs-teaser.css
   Gebraucht auf: index.html
   Bauvorschrift: DESIGN.md, Sektion 9 der Soll-Sektionsfolge. Umgesetzt als dunkles Panel
   nach dem Muster der Case-Karte (--ink, --r-lg), links Copy, rechts eine Bühne mit drei
   freigestellten Chrom-Objekten aus assets/jobs/ (D12, Stil nach D11), darunter die vier
   Benefit-Karten als dunkle Glasflächen (Muster: invertierte Felder des ROI-Rechners).
   Abweichung von der Vorgabe "Prozess-Raster für die vier Karten", Grund im PR
   (Vorgabe GF 2026-09-07: mehr Bewegung, Referenz mit dunkler Fläche und Objekten).
   Bewegung: Schweben per CSS (6 s wie die Hero-Bühne), Buchstaben-Reveal der H2 und
   Parallax der Objekte per js/bausteine/jobs-teaser.js. Ohne Skript steht alles, bei
   prefers-reduced-motion bewegt sich nichts.
   Regeln: docs/entwicklung.md. Klassen-Präfix dieser Datei siehe unten,
   Tokens und Rollen kommen aus css/style.css und werden hier nicht neu definiert.
   ========================================================================== */

/* Präfix: .jobs-* */
.jobs { padding-top: var(--sec-top); padding-bottom: calc(var(--sec-bottom) + var(--r-section)); }

/* Seit D20 (2026-09-14) trägt die Sektion das Ink (surface--ink, Kante und Versatz aus
   style.css). Das Panel ist nur noch der 1240-px-Inhaltscontainer, ohne eigene Fläche,
   Radius, Polster und Beschnitt. Zwei Spalten oben (Copy, Bühne), Kartenzeile darunter */
.jobs-panel {
  max-width: var(--container); margin: 0 auto;
  color: #fff;
  display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto auto;
  grid-template-areas: "copy stage" "cards cards";
  column-gap: 50px; row-gap: 56px;
  align-items: center;
}

/* Copy links */
.jobs-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; }
.jobs-title { max-width: 560px; }
.jobs-lead { color: var(--body-dark); font-size: var(--fs-body); line-height: 1.6; max-width: 480px; margin-top: 28px; }
.jobs-openings { margin-top: 36px; }
.jobs-openings-title { color: var(--muted-dark); margin-bottom: 14px; }

/* Buchstaben-Reveal: das Skript zerlegt die H2 in Wörter und Buchstaben. Wörter bleiben
   unteilbar, damit der Umbruch stimmt. Ohne Skript gibt es keine Spans, die H2 steht. */
.jobs-title .jobs-w { display: inline-block; white-space: nowrap; }
.jobs-title .jobs-l {
  display: inline-block;
  opacity: 0; transform: translateY(.4em) rotate(3deg);
  transition: opacity .55s var(--ease-reveal), transform .7s var(--ease-reveal);
  transition-delay: calc(var(--i) * 26ms);
}
.jobs-title.is-in .jobs-l { opacity: 1; transform: none; }
.jobs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* Stellen als Pillen nach der Anker-Tagleiste, auf dunkler Fläche mit weißem Rahmen
   (rgba(255,255,255,.46) statt --line-strong, das auf --ink unsichtbar wäre) */
.jobs-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.jobs-tag {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.46); border-radius: var(--r-pill);
  line-height: 1.2; color: #fff;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.jobs-tag:hover { background: #fff; color: var(--ink); border-color: #fff; }
/* Drücken wie .button (2026-10-13, Skill apple-design) */
.jobs-tag:active {
  transform: scale(var(--press));
  transition-duration: var(--t-press);
  transition-timing-function: ease-out;
}

/* CTAs: weißer Button, daneben Textlink mit Unterstrich wie in der Case-Karte */
.jobs-actions { margin-top: 36px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.jobs-cta:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.jobs-link {
  display: inline-flex; align-items: center; gap: 20px;
  font-size: var(--fs-label-cta); letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 6px;
  transition: border-color var(--t);
}
.jobs-link:hover { border-color: #fff; }

/* Bühne rechts: drei Objekte, ein blauer Lichtschein dahinter (Verlaufsfarben nach D11) */
.jobs-stage { grid-area: stage; position: relative; min-height: 560px; align-self: stretch; }
.jobs-glow {
  position: absolute; left: 12%; top: 8%; width: 76%; height: 84%; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(91,108,192,.55), rgba(56,70,150,.25) 45%, rgba(16,17,19,0) 72%);
  filter: blur(30px);
}
.jobs-obj { position: absolute; will-change: transform; }
.jobs-obj img { width: 100%; height: auto; display: block; filter: drop-shadow(0 40px 60px rgba(4,26,116,.45)); animation: jobs-float 6s ease-in-out infinite; }
.jobs-obj-marke   { right: 2%;  top: 4%;   width: 52%; }
.jobs-obj-flieger { left: 4%;   top: 6%;   width: 34%; transform: rotate(-6deg); }
.jobs-obj-flieger img { animation-delay: -2s; }
.jobs-obj-becher  { left: 12%;  bottom: 2%; width: 30%; }
.jobs-obj-becher img { animation-delay: -4s; }
@keyframes jobs-float { 50% { transform: translateY(-12px) rotate(2deg); } }

/* Vier Karten als dunkle Glasflächen (Muster aus dem ROI-Rechner: Fläche rgba(255,255,255,.06),
   Rahmen rgba(255,255,255,.22)), Titel weiß, Text --body-dark (8.09 auf --ink).
   Je Karte ein kleines Chrom-Objekt aus assets/jobs/icon-*.webp, oben eine Haarlinie im
   Verlauf --blue zu --blue-light (D11, D17). Hover hebt 2 px über translate, damit der
   Reveal-Transform aus style.css unberührt bleibt. */
.jobs-cards {
  grid-area: cards; position: relative; z-index: 2;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
}
.jobs-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-md); padding: 26px 24px 26px; min-height: 240px;
  transition: background var(--t), border-color var(--t), translate var(--t);
}
.jobs-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light) 55%, rgba(91,108,192,0));
}
.jobs-card:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.34); translate: 0 -2px; }
.jobs-card-icon {
  width: auto; height: 72px; display: block; margin-bottom: 22px;
  filter: drop-shadow(0 14px 22px rgba(4,26,116,.5));
  transition: translate var(--t);
}
.jobs-card:hover .jobs-card-icon { translate: 0 -3px; }
.jobs-card h3 { color: #fff; margin-bottom: 12px; }
.jobs-card p { color: var(--body-dark); max-width: 300px; }

@media (max-width: 980px) {
  .jobs-panel { grid-template-columns: 1fr; grid-template-areas: "copy" "stage" "cards"; row-gap: 40px; }
  .jobs-title { max-width: 620px; }
  .jobs-stage { min-height: 460px; }
  .jobs-obj-marke { width: 44%; right: 4%; }
  .jobs-obj-flieger { width: 28%; }
  .jobs-obj-becher { width: 24%; }
  .jobs-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .jobs-lead { margin-top: 22px; }
  .jobs-openings, .jobs-actions { margin-top: 28px; }
  /* align-self, nicht nur align-items: .jobs-copy ist eine Spalte mit
     align-items: flex-start, ihre Kinder bekommen damit ihre Inhaltsbreite, gedeckelt
     auf die Spaltenbreite. Ueberschrift, Lead und Stellen-Pillen sind von Haus aus
     breiter als die Spalte (620, 480 und 602 px gegen 319 px bei 375 px Breite) und
     laufen deshalb bis an die Kante. Der Aktionsblock misst von Haus aus nur 264 px,
     also die Breite, die er fuer die Reihe auf den grossen Stufen braucht, und stand
     als einziges Kind 55 px vom rechten Rand eingerueckt (Weisung 2026-11-09, DEV-1669:
     "Ich finde die Buttons wirken hier etwas verloren").
     align-items: stretch darunter wirkt nur innerhalb des Blocks, es dehnt Knopf und
     Link auf dessen Breite. Erst align-self dehnt den Block selbst auf die Spalte. */
  .jobs-actions { flex-direction: column; align-items: stretch; align-self: stretch; gap: 20px; }
  .jobs-actions .button { justify-content: space-between; }
  .jobs-link { justify-content: space-between; padding: 12px 0; }
  .jobs-stage { min-height: 300px; }
  .jobs-obj-marke { width: 50%; right: 2%; top: 0; }
  .jobs-obj-flieger { width: 32%; left: 2%; top: 4%; }
  .jobs-obj-becher { width: 28%; left: 8%; bottom: 0; }
  .jobs-cards { grid-template-columns: 1fr; }
  .jobs-card { min-height: 0; padding: 22px 20px; }
  .jobs-card-icon { height: 56px; margin-bottom: 16px; }
}