/* ============================================================================
   teil-stelle.css — Stellenanzeigen (Slug „stellenangebot-…").
   Gehoert zu vorlagen/stelle.php. Eigene Datei, weil mehrere Sitzungen
   gleichzeitig am Theme arbeiten; functions.php bindet assets/css/teil-*.css
   automatisch nach seiten.css ein — spaeter, also gewinnt bei gleichem Gewicht
   diese Datei. Sie ist vollstaendig und steht auch ohne den Block „stelle" in
   seiten.css.

   Nur Token aus dem Vertrag. Heller Grund, Blau und Gold als Akzent.
   Kein !important, keine neue Schrift, keine CDN-Einbindung.
   ========================================================================= */

/* ── Damit die Karte wirklich klebt ─────────────────────────────────────────
   position:sticky traegt nur, wenn kein Vorfahr ein Scrollbehaelter ist.
   bau.css gibt jedem Seitenblatt overflow:hidden — und genau das macht es zu
   einem. overflow:clip schneidet an der runden Ecke genauso ab, bildet aber
   keinen Behaelter. Nur fuer diesen Seitentyp, damit keine andere Seite sich
   daran aendert. Browser ohne „clip" zeigen die Karte einfach mitlaufend
   statt klebend — nichts bricht. */
.bv-typ-stelle{ overflow-x:clip }
.bv-typ-stelle .seitenblatt{ overflow:clip }

.stelle .bahn{ max-width:1180px }

/* ── Buehne ───────────────────────────────────────────────────────────────── */
/* Der Abstand nach oben kommt schon von .blattrahmen (Platz fuer die feste
   Kopfleiste). Hier nur noch der Abstand innerhalb des Blattes — sonst steht
   die Berufsbezeichnung in einem leeren Drittel. */
.stelle-buehne{
  padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.5rem,3vw,2.4rem);
  background:
    radial-gradient(72% 130% at 8% -25%, var(--blau-zart) 0%, transparent 62%),
    radial-gradient(58% 120% at 96% -15%, var(--gold-zart) 0%, transparent 58%),
    linear-gradient(180deg, var(--weiss), var(--grund) 72%);
  border-bottom:1px solid var(--linie);
}
.stelle-buehne-innen{
  display:flex; flex-direction:column-reverse; align-items:flex-start;
  gap:clamp(1rem,2.4vw,1.6rem);
}
@media (min-width:720px){
  .stelle-buehne-innen{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:clamp(1.4rem,3.4vw,3rem);
  }
}
.stelle-kopf{ flex:1 1 auto; min-width:0 }
.stelle-kopf .marke{ margin-bottom:.9rem }

.stelle-titel{
  margin:0; max-width:17ch;
  font-size:clamp(2.05rem,5.6vw,4.1rem); line-height:1.03; letter-spacing:-.028em;
  overflow-wrap:break-word; hyphens:auto;
}
.stelle-zeile{ display:block }

.stelle-zusatz{
  margin:.6rem 0 0; font-size:clamp(.95rem,1.4vw,1.12rem);
  font-weight:700; letter-spacing:.02em; color:var(--text-leise);
}

/* Die Chips sagen nur, was im Text steht — sie sind keine Schalter. */
.stelle-chips{ margin-top:clamp(1rem,2vw,1.5rem) }
.stelle-chips .chip{
  cursor:default; background:rgba(255,255,255,.78);
  border-color:rgba(19,55,109,.12); color:var(--text);
}
.stelle-chips .chip:first-child{
  background:var(--blau-zart); border-color:rgba(19,55,109,.18); color:var(--blau);
}
.stelle-chips .chip:hover{ transform:none; border-color:rgba(19,55,109,.12) }
.stelle-chips .chip:first-child:hover{ border-color:rgba(19,55,109,.18) }

/* Das Vorschaubild der Filiale, rund — dieselbe Optik wie .termin-rund auf der
   Terminseite, hier mit eigenen Regeln, weil seiten.css einer anderen Arbeit
   gehoert. */
.stelle-rund{
  flex:none; width:clamp(104px,15vw,176px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  background:var(--sand); display:grid; place-items:center;
  border:3px solid var(--weiss);
  box-shadow:0 14px 38px rgba(19,55,109,.16), 0 0 0 1px rgba(203,176,130,.45);
}
.stelle-rund img{ width:100%; height:100%; object-fit:cover; display:block }
.stelle-initial{
  font-size:clamp(2rem,4vw,2.9rem); font-weight:900; line-height:1; color:var(--gold-tief);
}

/* ── Zwei Spalten ab 900 px ───────────────────────────────────────────────── */
.stelle-raster{
  display:grid;
  gap:clamp(1rem,2.4vw,2.2rem);
  padding-block:clamp(1.6rem,3.6vw,3rem);
  /* stretch, nicht start: die Karte laeuft nur mit, solange ihre Spalte so hoch
     ist wie der Text. Bei align-items:start waere die Spalte nur so hoch wie
     die Karte selbst — dann klebt nichts. */
  align-items:stretch;
}
@media (min-width:900px){
  .stelle-raster{ grid-template-columns:minmax(0,1fr) minmax(0,336px) }
  .stelle-raster.einspaltig{ grid-template-columns:minmax(0,1fr) }
}

/* ── Textspalte: jeder Abschnitt ein eigenes Blatt ────────────────────────── */
/* Bewusst NICHT .blatt: diese Klasse ist im Entwurf das weisse Blatt der ganzen
   Seite und traegt dort einen Weichzeichner. */
.stelle-text{ min-width:0; max-width:none; padding:0; overflow-wrap:break-word }

.stelle-vorspann{
  max-width:62ch; margin-bottom:clamp(.9rem,1.8vw,1.3rem);
  font-size:1.03rem; color:var(--text-leise);
}
.stelle-vorspann p{ margin:0 0 .8em; line-height:1.72 }
.stelle-vorspann > :last-child{ margin-bottom:0 }

.stelle-feld{
  position:relative;
  padding:clamp(1.15rem,2.4vw,1.9rem);
  border-radius:var(--r-l);
  background:linear-gradient(168deg, rgba(255,255,255,.94), rgba(255,255,255,.6));
  border:1px solid var(--glas-rand);
  box-shadow:0 8px 28px rgba(19,55,109,.06);
}
.stelle-feld + .stelle-feld{ margin-top:clamp(.9rem,1.8vw,1.3rem) }
/* Goldene Kante links — der Akzent, nicht die Flaeche. */
.stelle-feld::before{
  content:""; position:absolute; left:0;
  top:clamp(1.3rem,2.6vw,2.1rem); bottom:clamp(1.3rem,2.6vw,2.1rem);
  width:3px; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--gold), rgba(203,176,130,0));
}

.stelle-feld-kopf{ display:flex; align-items:center; gap:.75rem; margin-bottom:.9rem }
.stelle-feld-kopf h2{
  margin:0; min-width:0;
  font-size:clamp(1.14rem,2vw,1.5rem); line-height:1.16; letter-spacing:-.02em;
  color:var(--blau); overflow-wrap:break-word;
}
.stelle-zeichen{
  width:40px; height:40px; flex:none; padding:8px;
  border-radius:50%; background:var(--gold-zart); color:var(--gold-tief);
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}

.stelle-feld p{ margin:0 0 .85em; line-height:1.72; max-width:62ch }
.stelle-feld h3{ margin:1.25rem 0 .45rem; font-size:1.06rem; color:var(--blau) }
.stelle-feld ul{ list-style:none; margin:0 0 .9em; padding:0; max-width:62ch }
.stelle-feld ul li{ position:relative; padding-left:1.45em; margin:.34em 0; line-height:1.62 }
.stelle-feld ul li::before{
  content:"◆"; position:absolute; left:0; top:.1em;
  font-size:.6em; color:var(--gold-tief);
}
.stelle-feld ol{ margin:0 0 .9em; padding-left:1.3em; max-width:62ch }
.stelle-feld ol li{ margin:.34em 0; line-height:1.62 }
.stelle-feld a{ color:var(--blau-hell); text-underline-offset:.2em; overflow-wrap:anywhere }
.stelle-feld img{ max-width:100%; height:auto; border-radius:var(--r-m) }
/* Eine breite Tabelle darf die Seite nicht seitlich aufziehen. */
.stelle-feld table{ display:block; width:100%; overflow-x:auto; border-collapse:collapse }
.stelle-feld > :last-child{ margin-bottom:0 }

/* ── Die klebende Karte ───────────────────────────────────────────────────── */
.stelle-seite{ min-width:0 }
.stelle-karte{
  display:flex; flex-direction:column; align-items:flex-start; gap:.72rem;
  padding:clamp(1.2rem,2.3vw,1.65rem);
}
@media (min-width:900px){
  /* Kopfleiste: fest bei top 22 px, Hoehe 64 px — Unterkante 86 px. */
  .stelle-karte{ position:sticky; top:clamp(86px,9vw,112px) }
  body.admin-bar .stelle-karte{ top:clamp(118px,9vw,144px) }
}
.stelle-karte-kopf{
  margin:0; font-size:.68rem; font-weight:850; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-tief);
}
.stelle-karte-ort{
  margin:0; font-size:clamp(1.15rem,1.7vw,1.38rem); font-weight:800;
  letter-spacing:-.02em; color:var(--blau); overflow-wrap:break-word;
}
.stelle-anschrift{
  font-style:normal; display:flex; flex-direction:column;
  font-size:.92rem; line-height:1.62; color:var(--text-leise);
}
.stelle-knopf{ align-self:stretch; margin-top:.4rem }
.stelle-mail{
  font-size:.88rem; font-weight:700; color:var(--blau);
  text-decoration:none; overflow-wrap:anywhere;
}
.stelle-mail:hover{ text-decoration:underline }
.stelle-tel{ margin:0; font-size:.9rem; color:var(--text-leise) }
.stelle-tel a{ color:var(--blau); font-weight:700; text-decoration:none }
.stelle-tel a:hover{ text-decoration:underline }
.stelle-filiallink{
  align-self:stretch; margin-top:.25rem; padding-top:.8rem;
  border-top:1px solid var(--linie);
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.88rem; font-weight:800; color:var(--blau); text-decoration:none;
}
.stelle-filiallink span{ transition:transform .3s var(--weich) }
.stelle-filiallink:hover span{ transform:translateX(5px) }

/* ── Weitere Stellen derselben Filiale ────────────────────────────────────── */
.stelle-weitere{
  padding:clamp(2rem,4.5vw,3.6rem) 0 clamp(2.4rem,5vw,4rem);
  background:linear-gradient(180deg, transparent, var(--creme) 46%);
  border-top:1px solid var(--linie);
}
.stelle-weitere-kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1rem,2vw,1.5rem);
}
.stelle-weitere-kopf h2{
  margin:0; font-size:clamp(1.3rem,2.6vw,2rem);
  letter-spacing:-.025em; color:var(--blau); overflow-wrap:break-word;
}
.stelle-weitere-kopf .leise{ font-size:.88rem }
.stelle-andere{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.7rem,1.4vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
}
.stelle-andere > li{ min-width:0 }
.stelle-kachel{
  display:flex; flex-direction:column; gap:.28rem; height:100%;
  padding:1.1rem 1.2rem; border-radius:var(--r-l);
  text-decoration:none; color:inherit;
  background:rgba(255,255,255,.8); border:1px solid var(--glas-rand);
  box-shadow:0 8px 24px rgba(19,55,109,.06);
  transition:transform .45s var(--weich), box-shadow .45s var(--weich), border-color .3s;
}
.stelle-kachel:hover{
  transform:translateY(-5px); border-color:var(--gold);
  box-shadow:0 18px 40px rgba(19,55,109,.12);
}
.stelle-kachel strong{
  font-size:1.02rem; font-weight:800; line-height:1.26;
  color:var(--blau); overflow-wrap:break-word;
}
.stelle-kachel .ort{ font-size:.85rem; color:var(--text-leise) }
.stelle-kachel .pfeil{
  margin-top:.6rem; font-size:.84rem; font-weight:800; color:var(--blau);
  display:inline-flex; align-items:center; gap:.35em;
}
.stelle-kachel .pfeil span{ transition:transform .3s var(--weich) }
.stelle-kachel:hover .pfeil span{ transform:translateX(5px) }

/* ── Unter „weniger Bewegung" steht alles still ───────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .stelle-kachel:hover,
  .stelle-kachel:hover .pfeil span,
  .stelle-filiallink:hover span,
  .stelle .knopf:hover,
  .stelle .chip:hover{ transform:none }
}