/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL/TABLET — Personal-Seiten (personal, arbeitnehmerueberlassung,
   personalvermittlung, werkvertrag + en/). Wird als LETZTES Stylesheet geladen.
   Nur Handy (≤600 px) und Tablet (601–900 px, Umbruchpunkt von .ok/.tueren/
   .split in site.css) — der Desktop bleibt unberührt.
   Kopf- und Fußzeile sind NICHT Thema dieser Datei.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Handy + Tablet gemeinsam ─────────────────────────────────────────── */
@media (max-width:900px){
  /* Seitenkopf: eine Grid-Spalte darf nicht breiter werden als der Wortlaut
     (z. B. „Arbeitnehmerüberlassung" als h1) — sonst ragt die ganze Text-
     spalte über den Rand und wird vom overflow:hidden des Kopfes abgeschnitten. */
  .kopf-grid > *{min-width:0}
  /* Trennen nur bei langen Wörtern (≥ 14 Zeichen, je 6 vor/nach dem Strich):
     „Arbeitnehmer-überlassung" ja, „Fachper-sonal" nein. */
  .kopf-txt h1{overflow-wrap:anywhere; hyphens:auto; hyphenate-limit-chars:14 6 6;
    -webkit-hyphenate-limit-before:6; -webkit-hyphenate-limit-after:6}
  .kopf-txt .hero-lead,.kopf-txt p{overflow-wrap:anywhere}

  /* Foto im Seitenkopf: am Tablet/Handy nicht 4:3-hoch, sondern breiter,
     damit der Text nicht erst nach einem Bildschirm Foto beginnt. */
  .kopf-bild img{aspect-ratio:16/10}

  /* Listen-Überschrift direkt nach einer Liste klebt am Vorgänger
     („Was bei Ihnen bleibt", „Typische Dienstverträge", „Technisch bis Ingenieur"). */
  .liste + h3,.zwei > * + *{margin-top:1.5rem}

  /* Objekt-Grafik neben Text (.ok): das Objekt bekommt festen Platz,
     nie mehr als 240 px breit, mittig. */
  .ok-bild .grafik-feld .ob{width:min(100%,240px); margin-inline:auto}
  .ok-bild figure.bogen{max-width:32rem; margin-inline:auto}

  /* Türen (Drei Vertragswege): die absolut gesetzte Grafik saß über der
     Überschrift. Grafik jetzt im Fluss, Karte wächst mit dem Inhalt. */
  .tuer{min-height:0; justify-content:flex-start}
  .tuer .grafik-feld{position:static; transform:none}
  .tuer-nr{position:static}
  .tuer:hover{transform:none}

  /* Zwei Knöpfe im Aufruf-Block: der zweite hatte per Inline-Stil einen
     Linksabstand, der beim Umbruch als Einzug stehen blieb. */
  .split .btn{margin-bottom:.6rem}
  .split .btn + .btn{margin-left:0 !important}

  /* Tippflächen: Brotkrumen und Fließtext-Links bekommen unsichtbar mehr
     Höhe (Padding an Inline-Elementen verschiebt keine Zeile). */
  .krumen a,.fliess a,.faq .antwort a,.hinweis a,.sek p a:not(.btn){padding-block:.7rem}
  .krumen a{padding-block:.9rem}
}

/* ── Tablet: 601–900 px ───────────────────────────────────────────────── */
@media (min-width:601px) and (max-width:900px){
  /* Objekt neben dem Text statt darüber (Wunsch: am Tablet nebeneinander). */
  .ok{grid-template-columns:minmax(190px,.65fr) 1.35fr; gap:2rem; align-items:center}
  .ok-bild .grafik-feld .ob{width:min(100%,260px)}
  /* Mit Foto statt Objekt: halbe/halbe, sonst wird das Foto zur Briefmarke. */
  .ok:has(figure.bogen){grid-template-columns:1fr 1fr}
  .ok-bild figure.bogen{max-width:none}

  /* Türen als liegende Karte: Grafik links, Nummer/Titel/Text/Link rechts. */
  .tuer{display:grid; grid-template-columns:150px 1fr; column-gap:1.6rem;
    align-items:center; text-align:left; padding:1.6rem 1.9rem 1.6rem 1.6rem}
  .tuer .grafik-feld{grid-column:1; grid-row:1 / span 4; width:100%}
  .tuer-nr,.tuer h3,.tuer p,.tuer .mehr{grid-column:2}
  .tuer-nr{margin-bottom:.6rem}
  .tuer p{margin-bottom:.9rem}
  .tuer .mehr{justify-content:flex-start}
  .tuer h2{grid-column:2}
}

/* ── Handy: ≤600 px ───────────────────────────────────────────────────── */
@media (max-width:600px){
  .kopf-bild img{aspect-ratio:4/3}

  /* Türen gestapelt: Nummer, Grafik (fester Platz), dann Text. */
  .tuer{padding:1.5rem 1.4rem 1.8rem}
  .tuer-nr{display:block; text-align:left; margin-bottom:.4rem}
  .tuer .grafik-feld{width:min(58%,190px); margin:0 auto 1.1rem}
  .tuer h3{font-size:1.2rem}

  /* Objekt über dem Text: kompakt, mit Abstand. */
  .ok{gap:1.5rem}
  .ok-bild .grafik-feld .ob{width:min(100%,210px)}

  /* Verteiler-Zeichnung (personal.html) mit etwas Luft nach unten. */
  .szene-feld{margin-bottom:1.6rem}

  /* Merkmal-Liste: Icon etwas kleiner, Text darf die Breite nutzen. */
  .merkmale .ico{width:2.2rem; height:2.2rem}
  .merkmale li > div{min-width:0}
}

/* ── Übergang 901–1080 px: drei Türen nebeneinander, Grafik knapp über dem
      Titel (bei 1024 px überschnitten sich 9 px). Ab 1081 px gilt site.css. ── */
@media (min-width:901px) and (max-width:1080px){
  .tuer .grafik-feld{width:54%; top:6%}
}

/* ── Dunkelmodus, Handy + Tablet: die Personal-Tür hat in site.css keine
      dunkle Variante (Chemie/Nuklear/Industrie schon) — weiße Karte, weißer
      Titel, unlesbar. Hier nur bis 1080 px; der Desktop braucht dieselbe
      Zeile in site.css (Rahmen). ── */
@media (max-width:1080px){
  html.dark .tuer--personal{background:linear-gradient(180deg,#1F2A30 0%,var(--surface) 60%)}
}