/* Einsatzbereich-Seiten (industrieboden.html usw.), erzeugt mit
   werkzeuge/einsatzseiten.py. Text-Bild-Reihe und Galerie-Mechanik kommen
   aus infoseite.css, die Fragen aus textseite.css. Hier stehen der Kopf
   mit Galerie, die Systemkarten, die Fragensektion und der Block
   "Weitere Einsatzbereiche". */

/* ---------- Kopf mit Galerie ----------
   Seit dem 10.09. (Wunsch der Kundin) traegt der Kopf keine einzelne
   Fotoflaeche mehr, sondern eine Galerie aus ihren Einsatzfotos: ein
   dunkles Band, links Kruemelpfad, Titel und Untertitel, rechts die Leiste.
   Kein Text auf Bild, also kein Kontrast, der je Bild zu messen waere. */
.einsatz-kopf{background:var(--stage);color:var(--on-dark);
  padding-top:calc(var(--header-h) + var(--s8));padding-bottom:var(--s8)}
.einsatz-kopf .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);
  gap:var(--s8);align-items:end}
.einsatz-kopf h1{max-width:14ch}
.kopf-text>p:not(.krumel){margin-top:var(--s4);max-width:36ch;color:var(--on-dark-2)}
.einsatz-kopf .pg-spur img{background:var(--tief-2)}
.einsatz-kopf .pg-pfeil{color:var(--on-dark-2)}
.einsatz-kopf .pg-pfeil:hover,.einsatz-kopf .pg-pfeil:focus-visible{color:var(--on-dark)}
.einsatz-kopf .pg-pfeil[disabled]{color:var(--on-dark-2)}
.einsatz-kopf .pg-stand{color:var(--on-dark-2)}
.einsatz-kopf :focus-visible{outline-color:var(--on-dark)}

/* ---------- Passende Systeme ----------
   Dieselbe Karte wie auf der Startseite, aber ohne deren Stylesheet. Die
   Spaltenzahl folgt der Kartenzahl (data-n), damit keine Reihe mit einem
   Rest endet: zwei Karten lassen rechts Luft (gewollt), drei stehen ab
   761 px nebeneinander, vier ab 1280 px, darunter zwei mal zwei. */
.passende{padding-block:var(--pad-section);background:var(--surface)}
.passende h2{max-width:20ch}
.sys-paar{margin-top:var(--s7);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,420px));gap:var(--s6) var(--s5)}
.sys-paar[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.sys-paar[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.sys-karte{display:flex;flex-direction:column;gap:var(--s3)}
.sys-rahmen{border-radius:var(--radius);border:1px solid var(--line);
  overflow:hidden;background:var(--foto-grund)}
.sys-bild{aspect-ratio:4/3;width:100%;height:auto;object-fit:cover;display:block;
  transform-origin:center;transition:transform var(--dur-slow) var(--ease-out)}
.sys-rahmen:hover .sys-bild{transform:scale(1.04)}
.sys-karte h3{margin-top:var(--s2)}
.sys-karte>p{color:var(--ink-2);font-weight:500;font-size:var(--text-small);
  line-height:var(--text-small--line-height);max-width:34ch}
.sys-karte .btn{align-self:flex-start;margin-top:auto}
.passende .r-aktionen{margin-top:var(--s7)}

.fragen{padding-block:var(--pad-section)}
.fragen h2{max-width:20ch}
.fragen .faq-liste{margin-top:var(--s6)}

/* ---------- Weitere Einsatzbereiche ----------
   Kundenwunsch 09.09.: am Ende direkt zum naechsten Bereich wechseln, ohne
   nach oben zu scrollen. Pillen aus infoseite.css (.bereich-liste), auf
   der Surface-Flaeche mit dem helleren Seitengrund als Fuellung. */
.weitere{padding-block:var(--pad-section);background:var(--surface)}
.weitere h2{max-width:20ch}
.weitere .bereich-liste{margin-top:var(--s6)}
.weitere .bereich-liste a{background:var(--bg)}

@media (max-width:1279px){
  .sys-paar[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1023px){
  .einsatz-kopf .shell{grid-template-columns:1fr;gap:var(--s6);align-items:start}
  .einsatz-kopf .pg-spur img{aspect-ratio:16/10}
}
@media (max-width:760px){
  .einsatz-kopf{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:var(--s6)}
  /* "Gesundheitseinrichtungen" ist bei 375 px breiter als die Spalte,
     Sichtung 10.09.: 23 px Ueberlauf. Silbentrennung nur hier. */
  .einsatz-kopf h1{hyphens:auto;overflow-wrap:anywhere}
  .einsatz-kopf .pg-spur img{aspect-ratio:4/3}
  .sys-paar,.sys-paar[data-n="3"],.sys-paar[data-n="4"]{grid-template-columns:1fr;gap:var(--s6)}
  .passende,.fragen,.weitere{padding-block:var(--s8)}
  .sys-bild{transition:none}
}
@media (prefers-reduced-motion:reduce){
  .sys-bild{transition:none}
  .sys-rahmen:hover .sys-bild{transform:none}
}