/* ═══════════════════════════════════════════════════════════════════════════
   MOBIL — Gruppe „Karriere und Stellen"
   Geladen als LETZTES Stylesheet von karriere.html, kontakt.html, ihren
   englischen Fassungen unter en/ und allen Stellenseiten (stellen/, en/stellen/
   — der Kopf kommt aus karriere.html, s. _werkzeug/stellen-pflegen.py).
   Hier steht NUR, was Handy (≤ 600 px) und Tablet (≤ 1024 px) betrifft.
   Umbruchpunkte wie in site.css: 560/600 Handy, 900/1024 Tablet.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tablet: das animierte Objekt (.ok) steht NEBEN dem Text ──────────────
   site.css klappt .ok ab 900 px auf eine Spalte — dann liegt ein 400 px
   großes Objekt über dem Text. Marcus: am Tablet lieber daneben. */
@media (min-width:601px) and (max-width:1024px){
  .ok{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(1.5rem,4vw,3rem); align-items:center}
  .ok-bild{max-width:22rem; margin:0 auto}
}

/* ── Handy + Tablet: Krümelpfad mit 44 px Tippfläche, Zeile bleibt gleich hoch ── */
@media (max-width:1024px){
  .krumen a{display:inline-block; padding:.9rem .25rem; margin:-.9rem -.25rem}
}

/* ── Handy: Objekt ÜBER dem Text, eigener Platz, feste Größe, Abstand ──── */
@media (max-width:600px){
  .ok{gap:1.25rem}
  .ok-bild{width:min(15rem,72%); margin:0 auto .5rem}
  .ok-bild .grafik-feld{aspect-ratio:1/1}
  .ok-txt h2{margin-bottom:.9rem}

  /* Knopfpaare (Inline-Abstand „margin-left:.5rem"): beim Umbruch nicht einrücken,
     sondern als Reihe mit Lücke — „Alle Stellen anzeigen · In English",
     „Initiativ bewerben · Telefon". */
  p:has(> .btn + .btn){display:flex; flex-wrap:wrap; gap:.6rem}
  p > .btn + .btn{margin-left:0!important}

  /* Stellenbörse: Zahlzeile und Leer-Hinweis nicht am Rand kleben */
  .stellen-zahlzeile{line-height:1.5}
  .stelle-zeile2{font-size:.88rem}

  /* Kontakt: Datenblatt-Tabelle darf lange Mailadressen umbrechen */
  .datenblatt td,.datenblatt th{overflow-wrap:anywhere}

  /* Bewerbungsformular: Dateifeld nicht abschneiden, Knopf unter den Text */
  .k-formular .k-anhang{font-size:.9rem}
  .k-formular .k-anhang::file-selector-button{margin-right:.5rem}
}
