/* ============================================================================
   z6 — Feld 03 der Karriereseite: die Stellenangebote mit Filter.
   Gehoert zu vorlagen/standard.php, Zweig $bv_ist_karriere.

   Christopher, 03.10.2026: „es gibt Punkt 1, 2 und dann bitte auch einen
   Punkt 3, da machst du dann die aktuellen Stellenangebote. Da wuerde ich
   schon auch Dropdowns machen fuer die Standorte oder irgendeine
   Filtermoeglichkeit. Mach die in Spalten und platziere die Stellenangebote
   untereinander." Und zum Fehler, der den Anlass gab: „Hammelburg zeigt auch
   Stellenangebot von Optiker Geselle Wiesbaden, ist voellig falsch."

   Gemessen am 03.10.2026 an der laufenden Seite /karriere/ (1512 px): sieben
   veroeffentlichte Anzeigen — Bad Brueckenau 2, Bayreuth 1, Wiesbaden 4;
   nach Taetigkeit Hoerakustik 3, Augenoptik 2, Beratung & Verkauf 2. Sie
   standen in drei Gruppen, und nur die Gruppenueberschrift nannte den Ort.

   Die Datei laedt als letzte (teil-z6 nach teil-z5), deshalb kommt sie ohne
   !important aus. Wo sie eine vorhandene Regel schlaegt, steht die geschlagene
   Regel im Kommentar daneben.

   Was hier NICHT noch einmal steht, weil es schon traegt:
     grund.css        .karte (Glasflaeche, Rand, Schatten), .chip, .chips,
                      .knopf.geist, .bahn
     seiten.css       .std .std-kachel (Saeule, volle Hoehe), .std .std-pfeil
     teil-standard.css .std-feld, .std-gitter, .std-marke, .std-nr, .std-titel
     teil-bewegung.css Heben, Fokusring und Pfeilbewegung jeder .karte
   ========================================================================= */

/* ── Das Feld ───────────────────────────────────────────────────────────
   Nur die Sprungmarke; Abstand und Hintergrundwechsel kommen aus
   .std-feld in teil-standard.css. */
.std .std-feld-stellen{ scroll-margin-top:clamp(96px,12vh,134px) }

/* .std .einblenden (seiten.css Z. 888) setzt display:block — das ist die
   Ruecknahme des Laufbands der Startseite und wiegt 0,2,0. Derselbe Wert
   hier, aber spaeter in der Reihenfolge, gewinnt. */
.std .stf-werk{
  display:grid;
  gap:clamp(1.1rem,2.4vw,1.8rem);
  margin-top:clamp(.4rem,1.2vw,.9rem);
}

/* ── Die Filterleiste ───────────────────────────────────────────────────
   Steht im Text fertig da und bleibt verborgen, bis das Skript sie freigibt.
   [hidden] des Browsers (0,1,0) verliert gegen jede Klassenregel mit display
   — darum hier noch einmal mit 0,2,0. */
.std .stf{
  display:grid;
  gap:clamp(.7rem,1.6vw,1.05rem);
  padding:clamp(.95rem,2vw,1.35rem) clamp(1rem,2.2vw,1.5rem);
  border-radius:var(--r-m);
  background:var(--glas);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--glas-rand);
  box-shadow:var(--glas-schatten);
}
.std .stf[hidden]{ display:none }

/* Die beiden Dropdowns und der Zaehler in einer Zeile. */
.stf-wahlen{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:clamp(.7rem,1.6vw,1.1rem);
}
.stf-wahl{
  display:grid; gap:.34rem;
  flex:1 1 13rem; min-width:0;   /* min-width:0, sonst schiebt ein langer
                                    Eintragsname das Raster auf */
}
.stf-name{
  font-size:.66rem; font-weight:850; letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-leise);
}

/* Das Dropdown. Der Pfeil ist als Datenadresse eingebettet, damit keine
   Datei nachgeladen wird; eine Datenadresse kennt keine Variable, darum
   steht --blau (#13376D) darin ausgeschrieben. */
.stf-select{
  font:inherit; font-size:.95rem; font-weight:700; color:var(--text);
  width:100%; min-width:0; cursor:pointer;
  padding:.68em 2.4em .68em .9em;
  border:1.5px solid rgba(19,55,109,.16);
  border-radius:var(--r-rund);
  background-color:var(--weiss);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%2313376D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95em center;
  background-size:.72em auto;
  -webkit-appearance:none; appearance:none;
  transition:border-color .25s, box-shadow .25s;
}
.stf-select:hover{ border-color:var(--gold) }
.stf-select:focus-visible{
  outline:3px solid var(--blau-hell); outline-offset:2px;
  border-color:var(--blau);
}

/* „4 von 7 Stellenangeboten" — die Zahl, die er wirklich sieht. */
.stf-stand{
  margin:0 0 .18rem auto; padding-left:.4rem;
  font-size:.88rem; font-weight:750; color:var(--blau);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* Die Chipreihe: derselbe Standortfilter ohne Menue, fuer das Telefon.
   Vier Chips (gemessen: Alle, Bad Brueckenau, Bayreuth, Wiesbaden) brechen
   bei 375 px auf zwei Zeilen um — umbrechen statt querscrollen, damit nichts
   ausserhalb des Fensters liegt. */
.stf-chips{
  display:flex; flex-wrap:wrap; gap:.45rem;
  padding-top:clamp(.1rem,.6vw,.35rem);
  border-top:1px solid var(--linie);
  margin-top:.1rem;
}
.std .stf-chips .chip{
  background:color-mix(in oklab, var(--weiss) 88%, transparent);
  border-color:rgba(19,55,109,.14);
}
/* Schweben und „so steht es gerade" muessen sich unterscheiden — zart beim
   Schweben, voll bei der getroffenen Wahl. Dieselbe Trennung wie in
   teil-leistung.css. */
.std .stf-chips .chip:hover{
  background:var(--blau-zart); color:var(--blau);
  border-color:var(--gold); transform:none;
}
.std .stf-chips .chip[aria-pressed="true"]{
  background:var(--blau); border-color:var(--blau); color:var(--weiss);
  box-shadow:0 6px 16px color-mix(in oklab, var(--blau) 26%, transparent);
}
.std .stf-chips .chip:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:2px }
.std .stf-chips .chip[hidden]{ display:none }

/* ── Die Liste: Spalten, Anzeigen untereinander ─────────────────────────
   auto-fill und NICHT auto-fit: mit auto-fit zoege die letzte uebrig
   gebliebene Karte beim Filtern ueber die ganze Breite auf — genau das
   Springen, das nicht passieren soll. Die Spaltenbreite bleibt so, wie sie
   ist, und die Karten ruecken nur nach. */
.std .stf-liste{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
  grid-auto-rows:1fr;              /* gleiche Hoehe, auch ueber Zeilen hinweg */
  gap:clamp(.9rem,1.6vw,1.3rem);
  list-style:none; margin:0; padding:0;
}
.std .stf-zelle{ display:flex; min-width:0; margin:0 }
.std .stf-zelle[hidden]{ display:none }
.std .stf-karte{ flex:1 1 auto; min-width:0 }

/* Ort und Taetigkeit stehen AUF der Karte. Bis heute nannte nur die
   Gruppenueberschrift den Ort — daran ist die falsche Zuordnung aufgefallen. */
.stf-marke{
  display:flex; align-items:center; flex-wrap:wrap; gap:.3rem .5rem;
  margin-bottom:.1rem;
}
.stf-nadel{ width:.95em; height:.95em; flex:none; fill:var(--gold-tief) }
.stf-ort{
  font-size:.82rem; font-weight:850; letter-spacing:.04em;
  text-transform:uppercase; color:var(--blau);
}
/* Eine Anzeige ohne erkennbare Filiale bekommt keinen erfundenen Ort. */
.stf-ort-leise{ color:var(--text-leise); text-transform:none; letter-spacing:0; font-weight:700 }
.stf-taet{
  font-size:.72rem; font-weight:800; line-height:1;
  padding:.36em .72em; border-radius:var(--r-rund);
  background:var(--gold-zart); color:var(--gold-tief);
  border:1px solid rgba(203,176,130,.5);
}

/* grund.css gibt .karte h3 nur Farbe und Abstand (Z. 289). „Hoerakustik-
   meister/Hoerakustikmeisterin" ist 37 Zeichen in EINEM Wort und passt bei
   375 px in keine Spalte — ohne Umbruch stuende es ueber dem Kartenrand. */
.std .stf-karte h3{
  margin:0; line-height:1.24; color:var(--blau);
  font-size:clamp(1.04rem,1.3vw,1.2rem); letter-spacing:-.01em;
  overflow-wrap:break-word; hyphens:auto;
}

/* grund.css setzt .karte p auf .95 rem (Z. 290). Drei Zeilen Deckel: der
   Auszug kommt aus bv_std_auszug() mit 16 Woertern, das sind zwei bis drei
   Zeilen — der Deckel haelt eine lange Anzeige davon ab, die ganze Reihe
   hochzuziehen. */
.std .stf-karte .stf-text{
  margin:0; font-size:.92rem; line-height:1.6; color:var(--text-leise);
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden;
}

/* ── Zu enge Auswahl ────────────────────────────────────────────────────
   Ein ruhiger Satz und ein Weg zurueck statt einer leeren Flaeche. */
.std .stf-leer{
  display:grid; justify-items:center; gap:.9rem; text-align:center;
  padding:clamp(1.6rem,3.6vw,2.6rem) 1rem;
  border:1px dashed rgba(203,176,130,.6);
  border-radius:var(--r-m);
  background:var(--creme);
}
.std .stf-leer[hidden]{ display:none }
.std .stf-leer p{ margin:0; color:var(--text-leise); font-size:1rem }

/* ── Schmale Fenster ────────────────────────────────────────────────────
   Hausmasse: 1660, 940, 430. Ab 375 px darf nichts querscrollen. */
@media (max-width:940px){
  .stf-wahl{ flex:1 1 11rem }
  .stf-stand{ margin-left:0; flex:1 1 100%; text-align:right }
}
@media (max-width:430px){
  .stf-wahl{ flex:1 1 100% }
  .stf-stand{ text-align:left }
  .std .stf-liste{ grid-template-columns:1fr }
  .std .stf-karte h3{ font-size:1.02rem }
  /* Ein langer Verweis im Auszug darf die Spalte nicht aufschieben. */
  .std .stf-karte .stf-text{ overflow-wrap:anywhere }
}

/* ── Ruhe, wenn er sie eingestellt hat ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .stf-select,
  .std .stf-chips .chip{ transition:none }
  .std .stf-chips .chip:hover{ transform:none }
}