/* ==========================================================================
   career.css — Stellenangebot (Route "stellenangebot", views/career.php)

   Ergaenzt base.css, layout.css und components.css. Alle Klassen dieser
   Datei tragen das Seitenpraefix "career"; gemeinsame Bausteine (.card,
   .form, .listCheck, .tag, .note, .hr) bleiben unveraendert.
   Keine festen Farben, keine festen Textbreiten in px, kein !important.
   ========================================================================== */


/* ==========================================================================
   1. FLAECHENUEBERGAENGE
   Die Welle traegt die Farbe der folgenden Flaeche (fill:currentColor);
   ihr eigener Hintergrund ist die Farbe der vorangehenden Flaeche.
   ========================================================================== */
.careerWave--sand2{
  color:var(--sand-2);
}

.careerWave--sand{
  color:var(--sand);
  background-color:var(--sand-2);
}


/* ==========================================================================
   2. KOPFBEREICH
   ========================================================================== */
.careerHero{
  overflow:hidden;                 /* haelt die Deko-Blobs im Abschnitt */
  padding-top:clamp(2.25rem,5vw,4.5rem);
}

.careerHero__grid{
  display:grid;
  gap:clamp(2rem,5vw,3.75rem);
  align-items:center;
}

@media (min-width:900px){
  .careerHero__grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  }
}

.careerHero__text{
  display:grid;
  justify-items:start;
  gap:var(--s4);
  min-width:0;
}

.careerHero__text > *{
  margin:0;
}

.careerHero h1{
  max-width:17ch;
}

/* Das Motto steht zwischen Titel und Lead: ruhig gesetzt, in Praxisrot. */
.careerHero__motto{
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--fs-lg);
  line-height:var(--lh-snug);
  color:var(--clay-800);
  max-width:28ch;
  text-wrap:balance;
}

.careerHero__scope{
  margin-top:var(--s1);
}

.careerHero__cta{
  margin-top:var(--s2);
}

.careerHero__visual{
  display:grid;
  justify-items:center;
  gap:var(--s3);
  margin:0;
  min-width:0;
}

/* Bildblob: atmet in der Form, das Bild selbst bleibt ruhig. */
.careerHero__frame{
  width:100%;
  max-width:26rem;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:var(--blob-a);
  box-shadow:var(--sh-lg);
  animation:blobMorph 18s linear infinite alternate;
}

.careerHero__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);           /* verhindert helle Raender im Blob */
}

.careerHero__caption{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  max-width:34ch;
  font-size:var(--fs-xs);
  line-height:1.45;
  color:var(--ink-soft);
  text-align:center;
}

.careerHero__caption svg{
  flex:0 0 auto;
  color:var(--clay-700);
}


/* ==========================================================================
   3. DIE STELLE — was ich biete, was Sie mitbringen
   ========================================================================== */
.careerOffer__intro{
  margin-bottom:clamp(2rem,4vw,3rem);
}

.careerOffer__grid{
  align-items:stretch;
}

.careerOffer__card{
  display:grid;
  align-content:start;
  gap:var(--s4);
}

.careerOffer__card .card__title{
  margin:0;
}

.careerOffer__card .listCheck{
  max-width:none;
}

.careerOffer__more{
  margin-top:clamp(1.75rem,4vw,2.5rem);
  margin-bottom:0;
}


/* ==========================================================================
   4. BEWERBUNG — Formular und Randspalte
   ========================================================================== */
.careerApply__grid{
  align-items:start;
}

.careerApply__main{
  min-width:0;
}

.careerApply__aside{
  display:grid;
  align-content:start;
  gap:var(--s3);
}

.careerApply__aside .card__title{
  margin:0;
}

.careerApply__aside .listDot{
  max-width:none;
  margin:0;
}

.careerApply__aside .hr{
  margin-block:var(--s4);
}

.careerApply__aside .card__text{
  margin:0;
}

.careerApply__phone{
  margin:0;
}

/* Die Telefonnummer ist der eine Ruf dieser Spalte — darum gross gesetzt. */
.careerApply__phone .linkHeart{
  gap:.55rem;
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  line-height:var(--lh-tight);
  color:var(--clay-800);
}

.careerApply__aside .card__meta{
  align-items:flex-start;
  margin:0;
}

/* Die Randspalte laeuft erst mit, wenn sie neben dem Formular steht. */
@media (min-width:1024px){
  .careerApply__aside{
    position:sticky;
    top:calc(var(--header-h) + var(--s5));
  }
}


/* ==========================================================================
   5. BEWERBUNGSFORMULAR
   ========================================================================== */
.careerForm{
  max-width:none;
}

/* Das Auswahlfeld sitzt als <fieldset> in einer Formularzeile. */
.careerForm fieldset{
  min-width:0;
  align-content:start;
  margin:0;
  padding:0;
  border:0;
}

.careerForm__scope legend{
  padding:0;
}

.careerForm__note{
  margin:var(--s2) 0 0;
  max-width:none;
}

.careerForm .formProgress{
  margin-top:var(--s2);
}

.careerForm__legal{
  margin:0;
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--ink-soft);
}

.careerForm__legal abbr{
  color:var(--clay-700);
  text-decoration:none;
}

/* Auf schmalen Schirmen nimmt der Absendeknopf die volle Breite. */
@media (max-width:519.98px){
  .careerForm .btn--submit{
    justify-self:stretch;
    width:100%;
  }
}


/* ==========================================================================
   6. PERSOENLICHER ABSCHLUSS
   ========================================================================== */
.careerClose .hr{
  margin-top:0;
}

.careerClose__grid{
  display:grid;
  gap:clamp(1.5rem,4vw,2.75rem);
  align-items:center;
}

@media (min-width:720px){
  .careerClose__grid{
    grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  }
}

.careerClose__portrait{
  justify-self:center;
  width:100%;
  max-width:13rem;
  aspect-ratio:1;
  margin:0;
  overflow:hidden;
  border-radius:var(--blob-c);
  box-shadow:var(--sh-md);
  animation:blobMorph 21s linear infinite alternate;
}

.careerClose__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.careerClose__text{
  display:grid;
  gap:var(--s2);
  min-width:0;
}

.careerClose__title{
  margin:0 0 var(--s2);
  font-size:var(--fs-h3);
}

.careerClose__text .prose{
  margin-bottom:var(--s3);
}

/* Unterschrift-Schriftzug: wie auf der Startseite. */
.careerClose__signature{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.55rem,1.1rem + 1.6vw,2.3rem);
  line-height:1.15;
  letter-spacing:var(--ls-tight);
  color:var(--clay-700);
}

.careerClose__role{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--ink-soft);
}


/* ==========================================================================
   7. DRUCK — die Anzeige soll sich sauber ausdrucken lassen
   ========================================================================== */
@media print{
  .careerWave,
  .careerHero__visual,
  .careerClose__portrait{
    display:none;
  }

  .careerApply__aside{
    position:static;
  }

  .careerHero,
  .careerOffer,
  .careerApply,
  .careerClose{
    padding-block:1rem;
  }
}