/* ══════════════════════════════════════════════════════════════════════════
   MOBIL / TABLET — die drei Bereichsseiten
   chemie-services · nuklear-services · industrie-services (DE + EN)
   Wird als LETZTES Stylesheet geladen und überschreibt nur, was Handy und
   Tablet betrifft. Umbruchpunkte wie in site.css: 900 px (Tablet) · 560 px
   (Handy). Kopf- und Fußzeile bleiben unberührt (site.css).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TABLET 561–900 px: Hero-Szene NEBEN dem Text ───────────────────────
   site.css stapelt ab 900 px alles untereinander und legt die Szene mit
   order:-1 über den Text. Am Tablet ist Platz für zwei Spalten: Text links,
   Szene rechts — so wie am Desktop, nur enger. */
@media (min-width:561px) and (max-width:900px){
  .kopf-seite--hero .kopf-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(1.25rem,3vw,2rem); align-items:center}
  .kopf-seite--hero .kopf-buehne{order:0}
  .kopf-seite--hero .kopf-buehne > .werk,
  .kopf-seite--hero .kopf-buehne .werk--bereich{min-height:clamp(300px,46vw,380px); height:100%}
  .kopf-seite--hero .kopf-buehne .werk--bereich .werk-ersatz .ob{width:min(100%,22rem)}
  .kopf-seite--hero .kopf-txt h1{font-size:clamp(1.9rem,4.4vw,2.4rem)}
  .kopf-seite--hero .kopf-txt .hero-lead{font-size:1.02rem}
  .kopf-seite--hero .kopf-kennwerte dl{gap:.8rem 1.2rem}
  .kopf-seite--hero .kopf-kennwerte .kw{flex-basis:7rem; min-width:7rem}
}

/* ── HANDY ≤ 560 px: Hero-Szene ÜBER dem Text, eigene feste Höhe ──────── */
@media (max-width:560px){
  .kopf-seite--hero .kopf-grid{gap:1.4rem}
  .kopf-seite--hero .kopf-buehne > .werk,
  .kopf-seite--hero .kopf-buehne .werk--bereich{min-height:280px; height:auto}
  .kopf-seite--hero .kopf-buehne .werk--bereich .werk-ersatz .ob{width:min(100%,22rem)}
}

/* ── DREI SCHWERPUNKTE (.tueren) ─────────────────────────────────────────
   site.css legt die Grafik absolut in die obere Kartenhälfte (top:8 %, 74 %
   breit) und schiebt den Text mit justify-content:flex-end nach unten. Ab
   900 px steht jede Karte allein in der Zeile, die Grafik wird ~500 px hoch
   und liegt ÜBER dem Text (Marcus: „Animationen liegen über dem Text").
   Hier bekommt die Grafik ihren eigenen Platz im Fluss:
   Tablet = Grafik links NEBEN dem Text · Handy = Grafik ÜBER dem Text. */
@media (max-width:900px){
  .tueren{gap:1rem}
  .tuer{min-height:0; display:grid; grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);
    grid-template-rows:auto auto auto; column-gap:1.6rem; row-gap:0; align-items:center;
    justify-content:normal; text-align:left; padding:1.35rem 1.6rem 1.5rem 1.4rem}
  .tuer:hover{transform:none}
  .tuer-nr{position:static; grid-column:1 / -1; grid-row:1; margin-bottom:.9rem}
  .tuer .grafik-feld{position:relative; top:auto; left:auto; transform:none; width:100%;
    grid-column:1; grid-row:2 / 4; align-self:center}
  .tuer h3{grid-column:2; grid-row:2; align-self:end; margin:0 0 .45rem}
  .tuer p{grid-column:2; grid-row:3; align-self:start; margin:0}
  .tuer .kb{width:100%; max-width:10.5rem; margin-inline:auto}
}
@media (max-width:560px){
  .tuer{grid-template-columns:minmax(0,1fr); text-align:center;
    padding:1.25rem 1.25rem 1.6rem; row-gap:0}
  .tuer-nr{grid-column:1; text-align:left; margin-bottom:.6rem}
  .tuer .grafik-feld{grid-column:1; grid-row:2; width:min(60%,12rem); margin:0 auto .9rem}
  .tuer h3{grid-column:1; grid-row:3; align-self:auto}
  .tuer p{grid-column:1; grid-row:4; align-self:auto}
}

/* ── FAKTOR-/FELD-KARTEN (.karten--3) am Tablet ─────────────────────────
   site.css schaltet ab 760 px auf drei Spalten; bei 768 px bleiben je Karte
   ~190 px Textbreite — ein Wort je Zeile. Sechs Karten gehen sauber in zwei
   Spalten (keine Waise); drei Karten bleiben dreispaltig. */
@media (min-width:561px) and (max-width:900px){
  .karten--3:has(> .karte:nth-child(4)){grid-template-columns:repeat(2,1fr)}
}

/* ── KNOPFPAARE ─────────────────────────────────────────────────────────
   „Alle Stellen" + „Zum Karrierebereich" und „Anfrage stellen" + Telefon
   stehen in einem <p> nebeneinander, der zweite Knopf mit margin-left:.5rem
   im Inline-Style. Am Handy brechen sie um und der zweite hängt eingerückt
   unter dem ersten. Hier: untereinander, volle Breite, gleicher Abstand. */
@media (max-width:560px){
  .sek .wrap > p > .btn,.sek .split p > .btn{display:flex; width:100%; justify-content:center;
    margin-left:0 !important}
  .sek .wrap > p > .btn + .btn,.sek .split p > .btn + .btn{margin-top:.6rem}
}

/* ── FILM (Nuklear) ─────────────────────────────────────────────────────
   Der Abspielknopf ist 5 rem + Welle; in der 16:9-Fläche eines Handys
   (≈ 197 px hoch) bleibt für zwei Textzeilen darunter zu wenig Luft. */
@media (max-width:560px){
  .film-play{width:4rem; height:4rem}
  .film-play svg{width:1.7rem; height:1.7rem}
  .film-start{gap:.7rem}
  .film-txt b{font-size:.94rem}
  .film-txt small{font-size:.78rem}
}