/* ===========================================================================
   STELLEN-UNTERSEITE
   Zweispaltig: links die Anzeige, rechts der Ansprechpartner, die Eckdaten und
   die Bewertung. Die rechte Spalte läuft beim Scrollen mit, solange sie kürzer
   ist als das Fenster. Ab 900 px rutscht sie unter den Text.
   Wiederverwendbar für jede Karriereseite der AO Consulting GmbH.
   =========================================================================== */

/* --- Brotkrume --- */
/* Der Kopfbereich steht fest ueber der Seite. Auf der Startseite schiebt ihn
   die dunkle Buehne weg, hier muss der Abstand von Hand kommen. */
.krume{padding:clamp(7rem,11vw,8.5rem) 0 0}
.krume ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;font-size:.875rem;color:var(--text-2)}
.krume li+li::before{content:"›";margin-right:.4rem;color:var(--text-2)}
.krume a{color:var(--text-2);text-decoration:none;border-bottom:1px solid transparent}
.krume a:hover,.krume a:focus-visible{color:var(--blau);border-bottom-color:currentColor}
.krume [aria-current]{color:var(--kopf);font-weight:500}

/* --- Breite ---
   Die Startseite nutzt 1560 px. Eine Stellenanzeige ist eine Leseseite: bei
   der Breite lief die Textspalte auf ueber 1000 px, Absaetze waren deshalb
   auf 62 Zeichen begrenzt, Listen aber nicht, und die Kante sprang. Hier gilt
   fuer den Inhalt 1240 px, Kopf und Fuss bleiben wie auf der Startseite. */
main{--breite:1240px}

/* --- Raster --- */
.stelle-seite{padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem)}
.stelle-seite__raster{display:grid;gap:clamp(1.75rem,3.5vw,3rem);grid-template-columns:minmax(0,1fr) 20.5rem;align-items:start}
/* Ohne min-width:0 nimmt ein Rasterkind die Breite seines breitesten Inhalts
   an und schiebt die ganze Seite auf. Auf dem Handy waren das 8 px. */
.stelle-seite__inhalt,.stelle-seite__spalte{min-width:0}
@media (max-width:980px){.stelle-seite__raster{grid-template-columns:1fr}}

.stelle-seite__bild{display:block;border-radius:var(--radius-k);overflow:hidden;margin-bottom:clamp(1.25rem,2.5vw,1.75rem);box-shadow:var(--schatten-k)}
.stelle-seite__bild img{width:100%;height:auto;display:block;aspect-ratio:12/5;object-fit:cover;object-position:50% 30%}
/* Flaches Band statt 3 zu 2: vorher war das Bild fast so hoch wie der Bildschirm. */

.stelle-seite__marken{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0 0 .85rem}
.stelle-seite__marken .marker{display:inline-block;padding:.25rem .65rem;border-radius:999px;background:var(--nebel-2);color:var(--text);font-size:.8125rem;line-height:1.3;white-space:nowrap}
/* Stellentitel sind lang und enthalten lange Woerter ("Vertriebsmitarbeiter",
   "Weiterbildungsmoeglichkeiten"). Auf dem Handy schiebt so ein Wort sonst die
   ganze Seite auf. Silbentrennung zuerst, hartes Umbrechen nur als Notbremse. */
.stelle-seite__inhalt h1,
.stelle-seite__inhalt h2,
.stelle__kopf h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.stelle-seite__inhalt h1{margin:0 0 .75rem;font-size:clamp(1.75rem,2.6vw,2.35rem);line-height:1.15;letter-spacing:-.02em}
.stelle-seite__auch{color:var(--text-2);font-size:.9375rem;margin:.25rem 0 1.5rem}
.stelle-seite__inhalt>.knopf{margin-bottom:clamp(2rem,4vw,3rem)}
.stelle-seite__inhalt h2{font-family:var(--schrift-kopf);font-weight:600;font-size:clamp(1.25rem,2.2vw,1.5rem);color:var(--kopf);margin:clamp(2rem,3.5vw,2.75rem) 0 .9rem}
/* Eine Kante, eine Schrift: Absaetze und Listen laufen gleich breit und
   sehen gleich aus. Vorher waren Absaetze schmal und dunkel, Listen breit,
   kleiner und grau. */
.stelle-seite__inhalt p{color:var(--text)}
.stelle-seite__inhalt .stelle__punkte li{color:var(--text);font-size:inherit;line-height:inherit}
.stelle-seite__inhalt .stelle__punkte svg{margin-top:.38rem}
.stelle-seite__inhalt h2 .hl{white-space:normal}
.stelle-seite__inhalt .stelle__punkte{margin-bottom:0}

/* --- Rechte Spalte --- */
.stelle-seite__spalte{display:grid;gap:1rem;position:sticky;top:6.5rem}
@media (max-width:980px){.stelle-seite__spalte{position:static}}

.ap{background:linear-gradient(165deg,var(--blau) 0,var(--blau-dunkel) 100%);color:#fff;border-radius:var(--radius-k);padding:clamp(1.25rem,2.5vw,1.75rem);text-align:center;box-shadow:var(--schatten-k)}
.ap__titel{font-family:var(--schrift-kopf);font-weight:600;font-size:1rem;margin:0 0 1rem;color:#fff}
.ap__bild{width:8.5rem;height:8.5rem;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.35);margin:0 auto .9rem;display:block}
.ap__name{font-family:var(--schrift-kopf);font-weight:600;font-size:1.125rem;margin:0;color:#fff}
.ap__rolle{margin:.1rem 0 1.1rem;color:rgba(255,255,255,.82);font-size:.9375rem}
.ap__wege{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ap__wege a{display:flex;align-items:center;justify-content:center;gap:.55rem;min-height:2.75rem;padding:.5rem .9rem;border-radius:var(--radius);background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:.9375rem;transition:background .25s var(--ease),color .25s var(--ease)}
.ap__wege a svg{width:1.125rem;height:1.125rem;fill:currentColor;flex:0 0 auto}
.ap__wege a:hover,.ap__wege a:focus-visible{background:#fff;color:var(--blau-dunkel)}
.ap__wege a.ist-wa:hover,.ap__wege a.ist-wa:focus-visible{background:var(--wa);color:#fff}
/* Das Icon ist sonst WhatsApp-grün (stil.css) und verschwindet beim Hover
   auf dem ebenso grünen Knopf. Beim Hover wird es deshalb weiß. */
.ap__wege a.ist-wa:hover svg,.ap__wege a.ist-wa:focus-visible svg{color:#fff}

.eckdaten{margin:0;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-k);padding:clamp(1.1rem,2.2vw,1.5rem);display:grid;gap:.9rem;box-shadow:var(--schatten-k)}
.eckdaten>div{display:grid;gap:.15rem}
.eckdaten dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--text-2)}
.eckdaten dd{margin:0;color:var(--kopf);font-weight:500;line-height:1.45}

.kununu{display:flex;align-items:center;gap:.9rem;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-k);padding:1rem 1.1rem;text-decoration:none;box-shadow:var(--schatten-k);transition:border-color .25s var(--ease),transform .25s var(--ease)}
.kununu:hover,.kununu:focus-visible{border-color:var(--blau);transform:translateY(-2px)}
.kununu__note{flex:0 0 auto;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--blau-tint);color:var(--blau);line-height:1}
.kununu__note b{font-family:var(--schrift-kopf);font-size:1.25rem;font-weight:700}
.kununu__note span{font-size:.625rem;color:var(--text-2)}
.kununu__text{display:grid;gap:.1rem}
.kununu__text b{font-family:var(--schrift-kopf);font-size:.9375rem;color:var(--kopf)}
.kununu__text span{font-size:.8125rem;color:var(--text-2);line-height:1.4}

/* Eine besetzte Stelle: der Knopf oben fuehrt ins Leere, also stillstellen. */
.stelle-seite[data-status="besetzt"] .stelle-seite__inhalt>.knopf{pointer-events:none;opacity:.5}

/* --- Stellenliste auf der Startseite: der Titel ist jetzt ein Verweis --- */
.stelle__kopf h3 a{color:inherit;text-decoration:none;border-bottom:2px solid transparent}
.stelle__kopf h3 a:hover,.stelle__kopf h3 a:focus-visible{color:var(--blau);border-bottom-color:currentColor}

/* --- kununu-Siegel: erst nach Einwilligung, vorher der eigene Baustein --- */
.kununu{display:grid;gap:.75rem;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--radius-k);padding:1rem 1.1rem;box-shadow:var(--schatten-k)}
.kununu__kern{display:flex;align-items:center;gap:.9rem;text-decoration:none;
  transition:transform .25s var(--ease)}
.kununu__kern:hover,.kununu__kern:focus-visible{transform:translateY(-2px)}
/* Gleiche Falle wie auf der Startseite: display:flex schlaegt hidden, dann
   stuende der eigene Baustein nach dem Laden weiter ueber dem Siegel. */
.kununu [hidden]{display:none}
.kununu__siegel{max-width:100%;height:auto;display:block;margin:0 auto}
.kununu__hinweis{display:grid;gap:.4rem;margin:0;font-size:.75rem;color:var(--text-2);line-height:1.4}
.kununu__laden{justify-self:start;font:inherit;font-size:.8125rem;font-weight:600;
  padding:.4rem .8rem;border:1px solid var(--linie);border-radius:var(--radius);
  background:var(--nebel);color:var(--kopf);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.kununu__laden:hover,.kununu__laden:focus-visible{background:var(--blau);color:#fff;border-color:var(--blau)}

/* Das Formular gehoert zur Stelle der Seite. Die Stelle steht als feste Zeile
   unter der Formularueberschrift statt als Auswahlfeld. */
.formular__stelle{margin:-.35rem 0 1rem;color:var(--text-2);font-size:.9688rem}
.formular__stelle b{color:var(--kopf);font-weight:600}

/* Die Formularueberschrift war groesser als der Stellentitel darueber. Auf der
   Stellenseite bekommt sie dieselbe Groesse wie der Titel. */
#bewerben h2{font-size:clamp(1.75rem,2.6vw,2.35rem);line-height:1.15;letter-spacing:-.02em}

/* Route planen: ein Verweis auf Google Maps. Es wird nichts eingebettet, beim
   Laden der Seite geht deshalb keine Anfrage an Google. */
.route{display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;font-weight:600;color:var(--blau);text-decoration:none;font-size:.9375rem}
.route svg{width:1.05rem;height:1.05rem;fill:currentColor}
.route:hover,.route:focus-visible{text-decoration:underline}