/* =========================================================
   Warme Haut für die Arbeitnehmerseite.
   Wird zusätzlich zu dark.css geladen und dreht dessen Farbmarken um.
   Farbwerte stammen aus assets/img/kandidaten-hand.jpg:
     #510100 Tiefrot · #AE0701 Rot · #E74602 Orange
     #F55906 Signal  · #F46F22 Bernstein · #F1B875 Sand
   ========================================================= */

:root{
  --bg:#FDF4E7;
  --bg-2:#F8E6CF;
  --surface:rgba(63,12,2,.05);
  --surface-2:rgba(63,12,2,.09);

  --white:#3F0C02;                 /* Haupttextfarbe */
  --dim:rgba(63,12,2,.8);
  --mute:rgba(63,12,2,.64);
  --faint:rgba(63,12,2,.52);
  --hair:rgba(63,12,2,.15);
  --hair-2:rgba(63,12,2,.26);

  --accent:#C23A08;
  --grad:linear-gradient(96deg,#C23A08 0%,#E74602 42%,#F4701F 78%,#C9601C 100%);

  --w-signal:#F5590A;
  --w-deep:#2A0C02;
  --w-cream:#FFF6EC;
}

/* ---------- Kopfleiste ---------- */
.top{
  background:rgba(255,255,255,.34);
  border-bottom:1px solid rgba(63,12,2,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:rgba(255,248,238,.94);}
}
.brand img{filter:none;}
.menu summary{border-color:rgba(63,12,2,.28);background:rgba(255,255,255,.55);}
.menu summary i{background:var(--white);}
.menu-panel{background:rgba(255,248,238,.98);border-color:rgba(63,12,2,.16);
  box-shadow:0 30px 70px -28px rgba(63,12,2,.42),inset 0 1px 0 rgba(255,255,255,.9);}
@media (hover:hover) and (pointer:fine){
  .menu-panel a:not(.btn):hover{background:rgba(63,12,2,.07);color:var(--white);}
}

/* ---------- Schaltflächen: Verlauf Orange nach Rot ---------- */
.btn--fill{
  background:linear-gradient(100deg,#F5590A 0%,#D62C08 62%,#A81104 100%);
  color:var(--w-cream);border-color:transparent;}
.btn--line{
  background:#FFFFFF;color:#A81104;border-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.btn--fill::after{background:linear-gradient(90deg,
  rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 42%, rgba(255,255,255,.22) 58%, rgba(255,255,255,0) 100%);}
.btn--line::after{background:linear-gradient(90deg,
  rgba(63,12,2,0) 0%, rgba(63,12,2,.05) 42%, rgba(63,12,2,.05) 58%, rgba(63,12,2,0) 100%);}
@media (hover:hover) and (pointer:fine){
  .btn--fill:hover{background:linear-gradient(100deg,#E24C06 0%,#BC2306 62%,#8E0D03 100%);}
  .btn--line:hover{background:#F6EADA;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  background:
    radial-gradient(92% 118% at 84% 46%,
      rgba(245,89,6,.96) 0%, rgba(231,70,2,.86) 30%,
      rgba(244,111,34,.5) 55%, rgba(241,184,117,.18) 72%, rgba(253,244,231,0) 86%),
    linear-gradient(158deg, #FEF7EC 0%, #FCEEDC 46%, #F8DFC0 78%, #F4CFA4 100%);}
.hero .eyebrow{color:var(--dim);}
.hero .eyebrow::before{background:#E74602;}
/* Dieselbe Größe wie die Überschrift auf der Arbeitgeberseite: dort gilt
   clamp(2rem, 1.1rem + 2.9vw, 3.4rem) bei 18ch Breite. Die Schriftart bleibt
   unterschiedlich, nur das Maß ist gleich. Vorher lief sie bis 3,95rem bei
   15ch — daher die vier Zeilen. */
.hero h1{color:var(--white);
  font-size:clamp(2rem,1.1rem + 2.9vw,3.4rem);
  max-width:18ch;}
.hero .sub{color:rgba(63,12,2,.78);}
.hero .trust{color:var(--mute);border-top-color:var(--hair);}
.hero .eyebrow,.hero h1,.hero .sub,.hero .trust{text-shadow:none;}

.hero .media{width:min(54vw,940px);
  -webkit-mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.38) 30%,
    rgba(0,0,0,.6) 40%, rgba(0,0,0,.79) 50%, rgba(0,0,0,.91) 60%,
    rgba(0,0,0,.97) 70%, rgba(0,0,0,1) 82%);
          mask-image:linear-gradient(to right,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 10%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.38) 30%,
    rgba(0,0,0,.6) 40%, rgba(0,0,0,.79) 50%, rgba(0,0,0,.91) 60%,
    rgba(0,0,0,.97) 70%, rgba(0,0,0,1) 82%);}
.hero .media img{width:100%;height:100%;display:block;object-fit:cover;object-position:55% 47%;}

/* Handy und Tablet: gleicher Aufbau, Höhe richtet sich nach dem Inhalt */
@media (max-width:1100px){
  .hero .media{top:0;bottom:0;height:100%;transform:none;}
  .hero .core{min-height:auto;padding-block:clamp(2.2rem,7vh,4rem);}
  .hero h1{font-size:clamp(1.55rem,.9rem + 2.8vw,2.3rem);max-width:11ch;}
  .hero .sub{max-width:20ch;font-size:.9rem;line-height:1.5;}
  .hero .trust{max-width:18ch;font-size:.56rem;gap:.3rem .9rem;}
  .hero .cta{flex-direction:column;align-items:flex-start;}
  .hero .btn{width:min(100%,14.5rem);min-height:48px;font-size:.87rem;padding:.6rem 1.1rem;}
}
@media (min-width:561px) and (max-width:1100px){
  .hero h1{font-size:clamp(2rem,1rem + 3.4vw,3rem);max-width:13ch;}
  .hero .sub{max-width:28ch;font-size:1rem;}
  .hero .trust{max-width:26ch;font-size:.6rem;}
  .hero .cta{flex-direction:row;}
  .hero .btn{width:auto;min-height:52px;font-size:.95rem;padding:.7rem 1.4rem;}
}

/* ---------- Flächen ---------- */
.sec{border-top:1px solid var(--hair);}
.hero + .sec{border-top:0;}
.card,.field,.stat,.end,.perk{background:rgba(255,255,255,.62);border-color:var(--hair);}
.card p,.field p,.stat span{color:var(--mute);}
.faq summary::after{border-color:var(--faint);}

/* ---------- Videobanner ---------- */
.promo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.8rem);align-items:center;
  background:rgba(255,255,255,.62);border:1px solid var(--hair);border-radius:24px;
  padding:clamp(1rem,2vw,1.5rem);}
@media (max-width:900px){.promo{grid-template-columns:minmax(0,1fr);}}
.promo .clip{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;
  background:#F3E2CB;box-shadow:0 30px 70px -34px rgba(63,12,2,.55);}
.promo video{width:100%;height:100%;object-fit:cover;display:block;}
.promo .txt h3{font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);font-weight:600;letter-spacing:-.025em;}
.promo .txt p{margin-top:.8rem;color:var(--mute);font-size:1rem;line-height:1.6;max-width:44ch;}
.promo .picks{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.2rem,2.6vh,1.8rem);}
.promo .picks .btn{min-height:54px;padding:.75rem 1.5rem;font-size:.98rem;}
.promo .hint{margin-top:.9rem;color:var(--faint);font-size:.82rem;line-height:1.5;}
@media (max-width:560px){.promo .picks{flex-direction:column;}.promo .picks .btn{width:100%;}}

/* ---------- Formulare als Überlagerung ---------- */
dialog.sheet{border:0;padding:0;background:transparent;max-width:min(46rem,92vw);width:100%;}
dialog.sheet::backdrop{background:rgba(45,10,2,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.sheet-in{background:#FFF9F0;border:1px solid rgba(63,12,2,.14);border-radius:22px;
  padding:clamp(1.3rem,3vw,2.2rem);color:var(--white);
  max-height:88dvh;overflow-y:auto;
  box-shadow:0 50px 120px -40px rgba(45,10,2,.5);}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;}
.sheet-head h3{font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);font-weight:600;letter-spacing:-.025em;}
.sheet-head p{margin-top:.5rem;color:var(--mute);font-size:.95rem;max-width:48ch;}
.x{flex:none;width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(63,12,2,.06);border:1px solid rgba(63,12,2,.2);color:var(--white);
  font-size:1.1rem;line-height:1;display:flex;align-items:center;justify-content:center;}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-top:1.4rem;}
.f{display:flex;flex-direction:column;gap:.35rem;}
.f.wide{grid-column:1 / -1;}
@media (max-width:560px){.fields{grid-template-columns:1fr;}}
.sheet label{font-size:.8rem;font-weight:500;color:var(--dim);}
.sheet label .req{color:#C23A08;}
.sheet input,.sheet select,.sheet textarea{
  font:400 .95rem/1.4 var(--ui);color:var(--white);background:#FFFFFF;
  border:1px solid rgba(63,12,2,.18);border-radius:10px;padding:.7rem .85rem;
  min-height:48px;width:100%;appearance:none;}
.sheet textarea{min-height:6.5rem;resize:vertical;}
.sheet input::placeholder,.sheet textarea::placeholder{color:rgba(63,12,2,.38);}
.sheet input:focus-visible,.sheet select:focus-visible,.sheet textarea:focus-visible{
  outline:none;border-color:#C23A08;box-shadow:0 0 0 3px rgba(194,58,8,.2);}
.sheet select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233F0C02' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:12px;padding-right:2.3rem;}
.sheet input[type=file]{padding:.6rem .7rem;line-height:1.9;}
.sheet input[type=file]::file-selector-button{
  margin-right:.8rem;padding:.5rem .9rem;border-radius:8px;cursor:pointer;
  border:1px solid rgba(63,12,2,.22);background:rgba(63,12,2,.05);color:var(--white);
  font:500 .85rem var(--ui);}

.agree{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;}
.agree input{width:19px;height:19px;min-height:0;flex:none;margin-top:.15rem;
  appearance:auto;accent-color:#C23A08;}
.agree label{font-size:.82rem;font-weight:400;color:var(--mute);line-height:1.55;}
.agree a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;}
.sheet .send{width:100%;margin-top:1.4rem;}
.sheet .note{margin-top:.9rem;text-align:center;color:var(--faint);font-size:.8rem;line-height:1.5;}
.placeholder{margin-top:1.2rem;padding:1rem 1.2rem;border-radius:12px;
  border:1px dashed rgba(63,12,2,.24);color:var(--faint);font-size:.86rem;line-height:1.55;}

/* Kurzer Austausch */
.feldtitel{margin-top:1.4rem;font-size:.8rem;font-weight:500;color:var(--dim);}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;}
.chip{background:rgba(63,12,2,.05);border:1px solid rgba(63,12,2,.18);
  border-radius:100px;color:var(--dim);padding:.5rem 1rem;cursor:pointer;
  font-family:var(--ui);font-size:.88rem;font-weight:500;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background .2s var(--e),border-color .2s var(--e),color .2s var(--e);}
.chip[aria-pressed="true"]{background:#F5590A;border-color:#F5590A;color:var(--w-deep);}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:rgba(63,12,2,.45);color:var(--white);}
  .chip[aria-pressed="true"]:hover{color:var(--w-deep);}
}
.msg{margin-top:.6rem;padding:.9rem 1.1rem;border-radius:12px;
  background:#FFFFFF;border:1px solid rgba(63,12,2,.16);
  color:var(--white);font-size:.95rem;line-height:1.55;}
.wege{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem;}
.wege .btn{flex:1 1 10rem;min-height:52px;font-size:.95rem;padding:.7rem 1.2rem;}
@media (max-width:520px){.wege{flex-direction:column;}.wege .btn{width:100%;}}

/* =========================================================
   Vier Schritte — schlicht, ohne Kartenrahmen.
   Die Bilder laufen weich in den Hintergrund aus, statt in einem
   Kasten zu sitzen. Drei Anordnungen stehen zur Wahl (data-s).
   ========================================================= */

/* Schwarzer Abschnitt mit orangen Verläufen.
   Die Verläufe sitzen dort, wo auch in den Fotos das Licht sitzt —
   dadurch wirken Bild und Fläche wie eine Aufnahme. */
/* ============================================================
   „Was dich erwartet“ — Checkliste auf hellem Verlauf
   Der Verlauf endet unten im Orange und übergibt damit an den
   schwarzen Schritt-Abschnitt darunter, statt dort eine Kante zu setzen.
   ============================================================ */
.sec--zusagen{border-top:0;margin-top:-1px;
  padding-bottom:clamp(2rem,5vh,3.5rem);
  background:
    radial-gradient(58% 40% at 84% 55%, rgba(245,140,60,.18) 0%, transparent 68%),
    linear-gradient(180deg,#FDF4E7 0%,#FFFDFA 32%,#FFF6EC 60%,#FDE7CF 88%,#FADCBD 100%);}

/* Mittig gesetzt: die Liste steht als Block in der Seitenmitte, der Text
   innerhalb einer Zeile bleibt linksbündig — mehrzeilig zentrierter Fließtext
   hat auf jeder Zeile einen anderen Anfang und liest sich schlecht.
   Die Überschrift wandert mit, sonst stünde sie allein am linken Rand. */
.sec--zusagen .sec-head{text-align:center;}
.sec--zusagen .sec-head .eyebrow{display:inline-flex;}
.sec--zusagen .sec-head h2{margin-inline:auto;}

.hakenliste{display:grid;gap:clamp(1.1rem,2.4vh,1.7rem);
  max-width:52rem;margin-inline:auto;}
.hz{display:flex;align-items:flex-start;gap:clamp(.8rem,1.6vw,1.15rem);
  padding-bottom:clamp(1.1rem,2.4vh,1.7rem);
  border-bottom:1px solid rgba(63,12,2,.1);}
.hz:last-child{border-bottom:0;padding-bottom:0;}
.hz h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);margin-bottom:.35rem;}
.hz p{color:rgba(63,12,2,.74);max-width:52ch;}

.hk{flex:none;width:1.9rem;height:1.9rem;margin-top:.1rem;overflow:visible;color:#C23A08;}
.hk path{fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.hk path.d{opacity:.34;stroke-width:1.4;}

@media (max-width:560px){
  .hk{width:1.55rem;height:1.55rem;}
}

.sec--schritte{
  position:relative;border-top:0;
  /* Die Abschnitte stoßen rechnerisch bündig aneinander, beim Zeichnen fällt
     die Kante aber auf einen halben Bildpunkt — dazwischen blitzt der
     Seitenhintergrund als heller Strich durch. Ein Bildpunkt Überlappung
     oben und unten schließt die Naht. */
  margin-block:-1px;
  --s-ink:#F7EFE6;
  --s-dim:rgba(247,239,230,.66);
  --s-faint:rgba(247,239,230,.6);   /* nicht heller nötig, nicht dunkler erlaubt: 4,5 : 1 */
  --s-accent:#F5731A;
  --s-font:"Sora",system-ui,sans-serif;

  /* Der Übergang steckt im Hintergrund selbst, nicht in einer zweiten Ebene
     darüber. Zwei deckende Flächen ineinander zu blenden erzeugt sonst einen
     grauen Streifen. Die Stufen laufen über Warmtöne von Creme nach Schwarz —
     nie über Grau. */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.05'/%3E%3C/svg%3E"),
    /* Übergangsbänder: von Creme über Warmtöne in die Durchsichtigkeit.
       Sie enden nicht in Schwarz, sondern lösen sich auf — dadurch gibt es
       keine Kante dort, wo das Band aufhört, und die Lichtkegel darunter
       kommen allmählich durch.
       Die Helligkeit fällt in der ersten Hälfte, danach folgt ein langer,
       fast unsichtbarer Ausklang: Genau dieser Ausklang lässt die Naht
       verschwinden, während der Text früh auf dunklem Grund steht. */
    /* Oben: startet bei #FADCBD — genau der Farbe, in der der Abschnitt
       darüber endet. Startete es bei Creme, entstünde dort ein heller Streifen. */
    linear-gradient(to bottom,
      rgba(250,220,189,1) 0%,    rgba(248,214,180,.99) 3%,  rgba(245,206,169,.97) 6%,
      rgba(240,196,155,.93) 9%,  rgba(233,181,138,.87) 13%, rgba(223,163,119,.79) 17%,
      rgba(211,144,101,.70) 21%, rgba(196,124,84,.60) 25%,  rgba(179,105,68,.50) 29%,
      rgba(160,88,54,.41) 33%,   rgba(140,72,43,.33) 37%,   rgba(121,59,34,.26) 41%,
      rgba(103,48,27,.205) 45%,  rgba(86,39,22,.158) 50%,   rgba(71,32,18,.12) 55%,
      rgba(58,26,14,.088) 61%,   rgba(47,21,12,.063) 67%,   rgba(38,17,10,.043) 73%,
      rgba(30,14,8,.028) 79%,    rgba(24,11,7,.017) 85%,    rgba(19,9,6,.0095) 90%,
      rgba(15,8,5,.004) 95%,     rgba(12,7,5,0) 100%),
    radial-gradient(64% 52% at 84% 16%, rgba(245,89,10,.34) 0%, rgba(214,44,8,.14) 44%, transparent 74%),
    radial-gradient(58% 46% at 6% 58%, rgba(244,111,34,.22) 0%, rgba(168,17,4,.09) 46%, transparent 76%),
    linear-gradient(180deg, #0C0705 0%, #090402 52%, #0C0705 100%);
  /* Fünf Ebenen: Korn, oberes Übergangsband, zwei Lichtkegel, Grundfläche.
     Das untere Band ist bewusst weg — unten steht jetzt eine harte Kante
     von Schwarz auf Weiß. */
  background-repeat:repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size:160px 160px, 100% 420px, auto, auto, auto;
  background-position:top left, top, center, center, center;
  color:var(--s-ink);}

/* Der folgende Abschnitt hat eine Trennlinie — genau die war der Strich
   unter dem Verlauf. */
/* Unten schließt das Band mit einer harten Kante ab. Der folgende Abschnitt
   bekommt deshalb weder Verlauf noch verkürzten Abstand — er beginnt
   einfach, wie jeder andere auch. */
.sec--schritte + .sec{border-top:0;background:#FFFFFF;}
/* Der Abstand oben und unten ist zugleich die Auslaufstrecke des Verlaufs:
   der Text beginnt erst, wenn die Fläche dunkel genug für weiße Schrift ist. */
.sec--schritte{padding-block:clamp(5rem,12vh,8rem);}
.sec--schritte > .in{position:relative;z-index:3;
  padding-block:clamp(1rem,2.6vh,2rem);}
.sec--schritte .sec-head{margin-bottom:clamp(1.6rem,3.6vh,2.4rem);}
.sec--schritte .sec-head .lead{max-width:52ch;}

/* Eigene Schrift: dünn, weit laufend, technisch */
.sec--schritte .eyebrow{color:var(--s-faint);}
.sec--schritte .eyebrow::before{background:var(--s-accent);}
.sec--schritte h2{font-family:var(--s-font);font-weight:200;
  letter-spacing:-.01em;color:var(--s-ink);}
/* entfällt: Überschriften laufen einfarbig, siehe .key in dark.css */
.sec--schritte .lead{font-family:var(--s-font);font-weight:200;
  color:var(--s-dim);letter-spacing:.005em;}
/* Die Fußnote sitzt im hellen Teil des unteren Verlaufs — dort reicht die
   normale Kleinschriftfarbe nicht (4,0 : 1). Deshalb heller. */
.sec--schritte .todo{color:rgba(247,239,230,.85);}
.sec--schritte .todo a{color:rgba(247,239,230,.95);border-bottom-color:rgba(247,239,230,.45);}

/* ============================================================
   Schritte als Karten — Zweierraster
   Text und Bild liegen in einem gemeinsamen Rechteck. Das Bild sitzt
   bündig an der Kartenkante und läuft nach links, oben und unten aus:
   dadurch bleibt keine Bildkante sichtbar, die Karte begrenzt es.
   ============================================================ */
/* Gleich hohe Zeilen: sonst wird die zweite Reihe niedriger als die erste,
   nur weil die Texte dort kürzer sind. */
.wsteps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;gap:clamp(.9rem,1.6vw,1.2rem);}

.wstep{display:grid;align-items:stretch;gap:0;padding:0;overflow:hidden;
  grid-template-columns:minmax(0,1fr) 12rem;
  border-radius:18px;
  border:1px solid rgba(247,239,230,.11);
  background:linear-gradient(180deg,rgba(247,239,230,.055),rgba(247,239,230,.018));}
.wstep.ohne-bild{grid-template-columns:minmax(0,1fr);}

.wstep .txt{grid-column:1;grid-row:1;align-self:center;
  padding:clamp(1.1rem,1.9vw,1.6rem);}

/* Mauszeiger: Karte hebt sich leicht, wird eine Spur größer und bekommt einen
   warmen Schein. Nur mit echter Maus — auf dem Handy bleibt alles ruhig.
   Die Kurve läuft schnell an und weich aus (ease-out-quart). */
@media (hover:hover) and (pointer:fine){
  /* Die zweite Zeile ist nötig, weil die Einblend-Regel (.js .rev.on) sonst
     gewinnt und die Karte mit ihrer Zeit statt mit dieser hier animiert. */
  .wstep,
  .js .wstep.rev.on{
    transition:transform .34s cubic-bezier(.25,1,.5,1),
               box-shadow .34s cubic-bezier(.25,1,.5,1),
               border-color .34s ease-out,
               opacity .7s cubic-bezier(.25,1,.5,1);}
  .wstep figure img{transition:filter .34s ease-out, transform .5s cubic-bezier(.25,1,.5,1);}
  .wstep:hover{
    transform:translateY(-3px) scale(1.012);
    border-color:rgba(245,115,26,.34);
    box-shadow:0 26px 60px -34px rgba(0,0,0,.9),
               0 0 44px -12px rgba(245,89,10,.28),
               inset 0 0 0 1px rgba(245,115,26,.1);}
  .wstep:hover figure img{filter:contrast(1.05) saturate(1.14) brightness(1.09);
    transform:scale(1.035);}
  .wstep:hover h3{color:#FFFFFF;}
  .wstep:hover .n{color:#FF8A3D;}
}
/* Wer Bewegung reduziert haben will, bekommt nur den Schein, keine Verschiebung */
@media (prefers-reduced-motion:reduce){
  .wstep,.wstep figure img{transition:none;}
  .wstep:hover{transform:none;}
  .wstep:hover figure img{transform:none;}
}

/* Die Zahlen laufen in derselben dünnen Schrift wie der Abschnitt, nur größer.
   Die Schreibmaschinenschrift stand quer zum Rest. */
.wstep .n{display:block;margin-bottom:.5rem;
  font-family:var(--s-font,var(--ui));font-weight:200;
  font-size:clamp(1.5rem,1.3rem + .7vw,1.95rem);line-height:1;
  letter-spacing:.01em;color:var(--s-accent,var(--accent));}
.wstep h3{font-family:var(--s-font,var(--ui));
  font-size:clamp(1.08rem,1rem + .4vw,1.3rem);font-weight:200;
  letter-spacing:-.015em;line-height:1.24;margin-bottom:.6rem;
  color:var(--s-ink,var(--white));}
.wstep p{font-family:var(--s-font,var(--ui));font-weight:200;
  color:var(--s-dim,var(--mute));
  font-size:clamp(.96rem,.93rem + .2vw,1.05rem);
  line-height:1.62;letter-spacing:.004em;}
.wstep .when{display:inline-block;margin-top:.75rem;
  font:500 .58rem/1.5 var(--m);letter-spacing:.24em;text-transform:uppercase;
  color:var(--s-faint,var(--faint));}

.wstep figure{grid-column:2;grid-row:1;margin:0;
  position:relative;overflow:hidden;min-height:12.5rem;}

/* Zwei Verläufe liegen übereinander; sichtbar bleibt nur, wo beide decken
   („intersect“). Links wie beim Hero-Video, oben und unten zusätzlich weich.
   „lighten“ ersetzt die dunklen Bildstellen durch den Kartengrund, dadurch
   sitzt das Foto in der Karte statt darauf. */
.wstep figure img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  mix-blend-mode:lighten;
  filter:contrast(1.03) saturate(1.06);
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 10%,rgba(0,0,0,.14) 20%,rgba(0,0,0,.3) 30%,
      rgba(0,0,0,.5) 40%,rgba(0,0,0,.68) 50%,rgba(0,0,0,.83) 60%,rgba(0,0,0,.93) 70%,
      rgba(0,0,0,.98) 80%,rgba(0,0,0,1) 90%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.7) 15%,rgba(0,0,0,.94) 24%,
      rgba(0,0,0,1) 34%,rgba(0,0,0,1) 66%,rgba(0,0,0,.94) 76%,rgba(0,0,0,.7) 85%,
      rgba(0,0,0,.3) 93%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.04) 10%,rgba(0,0,0,.14) 20%,rgba(0,0,0,.3) 30%,
      rgba(0,0,0,.5) 40%,rgba(0,0,0,.68) 50%,rgba(0,0,0,.83) 60%,rgba(0,0,0,.93) 70%,
      rgba(0,0,0,.98) 80%,rgba(0,0,0,1) 90%),
    linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 7%,rgba(0,0,0,.7) 15%,rgba(0,0,0,.94) 24%,
      rgba(0,0,0,1) 34%,rgba(0,0,0,1) 66%,rgba(0,0,0,.94) 76%,rgba(0,0,0,.7) 85%,
      rgba(0,0,0,.3) 93%,rgba(0,0,0,0) 100%);
  mask-composite:intersect;}

/* Schmaler: schmalere Bildspalte */
@media (max-width:1100px){
  .wstep{grid-template-columns:minmax(0,1fr) 10rem;}
}
/* Tablet: Karten untereinander, Aufbau bleibt gleich */
@media (max-width:900px){
  .wsteps{grid-template-columns:minmax(0,1fr);}
  .wstep{grid-template-columns:minmax(0,1fr) 13rem;}
}
/* Handy: Text oben, Bild darunter — dann läuft der Verlauf nach oben statt
   nach links, sonst würde er quer zur Leserichtung stehen. */
@media (max-width:560px){
  .wstep{grid-template-columns:minmax(0,1fr);}
  .wstep .txt{grid-column:1;grid-row:1;}
  .wstep figure{grid-column:1;grid-row:2;min-height:10.5rem;}
  .wstep figure img{
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.2) 20%,rgba(0,0,0,.42) 31%,
      rgba(0,0,0,.66) 42%,rgba(0,0,0,.85) 54%,rgba(0,0,0,.96) 66%,rgba(0,0,0,1) 78%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,rgba(0,0,0,.06) 10%,rgba(0,0,0,.2) 20%,rgba(0,0,0,.42) 31%,
      rgba(0,0,0,.66) 42%,rgba(0,0,0,.85) 54%,rgba(0,0,0,.96) 66%,rgba(0,0,0,1) 78%);
    mask-composite:add;}
}


/* ---------- Fuß ---------- */
/* Fuß in Weiß. Keine Trennlinie oben: der Abschnitt darüber läuft bereits
   nach Weiß aus, eine Linie würde den Verlauf zerschneiden. */
/* Der weiße Knopf hat sonst eine durchsichtige Kontur. Auf der Heropage und
   im Videobanner reicht das, weil der Grund dort dunkler ist — auf der fast
   weißen Abschlussfläche verschwindet er. Dort bekommt er eine Kontur (3,0 : 1). */
.end .btn--line,
.gcta .btn--line,
.wege .btn--line{border-color:rgba(168,17,4,.55);}

.foot{background:#FFFFFF;border-top:0;margin-top:-1px;}
.foot .fine{color:rgba(63,12,2,.66);}

/* =========================================================
   Bewerbungsseite: fünf Vorabfragen, danach das Formular
   ========================================================= */
.sec--bewerb{border-top:0;
  background:linear-gradient(180deg,#FDF4E7 0%,#FFF9F1 34%,#FFFDFA 68%,#FFFFFF 100%);}

.bkopf{max-width:52rem;}
.bkopf h1{font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);letter-spacing:-.03em;
  line-height:1.08;max-width:16ch;}
.bkopf .lead{margin-top:1.1rem;max-width:54ch;color:var(--dim);
  font-size:clamp(1rem,.97rem + .3vw,1.12rem);}

/* ---------- Fortschritt ---------- */
.fortschritt{margin-top:clamp(2rem,5vh,3.2rem);max-width:52rem;}
.balken{height:4px;border-radius:100px;background:rgba(63,12,2,.12);overflow:hidden;}
.balken span{display:block;height:100%;width:0;border-radius:100px;
  background:linear-gradient(90deg,#F5590A,#A81104);
  transition:width .45s cubic-bezier(.25,1,.5,1);}
.stand{margin-top:.6rem;font:500 .6rem/1.5 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);}

/* ---------- Eine Frage ---------- */
.frage{border:0;padding:0;margin:clamp(1.6rem,4vh,2.6rem) 0 0;max-width:52rem;}
.frage legend{padding:0;font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  font-weight:600;letter-spacing:-.025em;line-height:1.25;color:var(--white);}
.frage .klein{display:block;margin-top:.4rem;font-size:.82rem;font-weight:400;
  letter-spacing:0;color:var(--faint);}

.opts{display:grid;gap:.6rem;margin-top:clamp(1.1rem,2.6vh,1.6rem);}
.opt{text-align:left;cursor:pointer;
  font:400 1rem/1.4 var(--ui);color:var(--white);
  background:#FFFFFF;border:1px solid rgba(63,12,2,.16);border-radius:14px;
  padding:.95rem 3rem .95rem 1.1rem;min-height:56px;position:relative;
  box-shadow:0 1px 0 rgba(63,12,2,.03);}
/* Pfeil rechts, damit klar ist: ein Klick bringt dich weiter */
.opt::after{content:"";position:absolute;right:1.1rem;top:50%;
  width:8px;height:8px;margin-top:-4px;
  border-right:1.5px solid rgba(63,12,2,.32);
  border-bottom:1.5px solid rgba(63,12,2,.32);
  transform:rotate(-45deg);transition:transform .3s cubic-bezier(.25,1,.5,1),
    border-color .3s ease-out;}
@media (hover:hover) and (pointer:fine){
  .opt{transition:border-color .25s ease-out, background-color .25s ease-out,
       transform .25s cubic-bezier(.25,1,.5,1), box-shadow .25s ease-out;}
  .opt:hover{border-color:rgba(168,17,4,.5);transform:translateX(3px);
    box-shadow:0 10px 26px -18px rgba(63,12,2,.5);}
  .opt:hover::after{border-color:#A81104;transform:rotate(-45deg) translate(2px,2px);}
}
.opt:focus-visible{outline:2px solid #A81104;outline-offset:3px;}

.zurueck{margin-top:1.4rem;background:none;border:0;cursor:pointer;padding:.4rem 0;
  font:500 .85rem/1.4 var(--ui);color:var(--mute);}
.zurueck:hover{color:var(--white);}

/* ---------- Ergebnis ---------- */
.urteil{max-width:52rem;margin-top:clamp(1rem,2.5vh,1.6rem);
  border-radius:18px;padding:clamp(1.1rem,2.4vw,1.6rem);
  border:1px solid rgba(63,12,2,.14);background:rgba(255,255,255,.7);}
.urteil b{display:block;font-size:clamp(1.15rem,1.05rem + .5vw,1.45rem);
  font-weight:600;letter-spacing:-.02em;}
.urteil p{margin-top:.6rem;color:var(--mute);font-size:.98rem;line-height:1.6;
  max-width:56ch;}
.urteil.passt{border-color:rgba(168,17,4,.3);
  background:linear-gradient(180deg,rgba(255,242,230,.9),rgba(255,255,255,.7));}
.urteil.passt b{color:#A81104;}
.urteil.offen{border-color:rgba(63,12,2,.2);}

.antworten{max-width:52rem;margin-top:1.4rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:.45rem;}
.antworten .atitel{width:100%;margin-bottom:.2rem;
  font:500 .6rem/1.5 var(--m);letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);}
.achip{font-size:.82rem;line-height:1.4;padding:.38rem .75rem;border-radius:100px;
  background:rgba(63,12,2,.06);border:1px solid rgba(63,12,2,.12);color:var(--dim);}
.achip.ko{background:rgba(168,17,4,.09);border-color:rgba(168,17,4,.3);color:#8E0D03;}
.neu{margin-left:.3rem;background:none;border:0;cursor:pointer;padding:.38rem 0;
  font:500 .82rem/1.4 var(--ui);color:#A81104;text-decoration:underline;
  text-underline-offset:3px;}

/* ---------- Formular ---------- */
.bform{max-width:52rem;margin-top:clamp(1.8rem,4.5vh,2.8rem);
  background:#FFFFFF;border:1px solid rgba(63,12,2,.14);border-radius:22px;
  padding:clamp(1.3rem,3vw,2.2rem);
  box-shadow:0 30px 80px -50px rgba(63,12,2,.45);}
.bform h2{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);font-weight:600;
  letter-spacing:-.025em;}
.bform .fields{margin-top:1.3rem;}
.bform label .klein{font-weight:400;color:var(--faint);}
/* Ankreuzboxen ausnehmen — sonst zieht die Feldregel sie auf volle Breite
   und der Einwilligungstext wird in eine Restspalte gequetscht. */
.bform input:not([type="checkbox"]),.bform select,.bform textarea{
  font:400 .95rem/1.4 var(--ui);color:var(--white);background:#FFFDFA;
  border:1px solid rgba(63,12,2,.18);border-radius:10px;padding:.7rem .85rem;
  min-height:48px;width:100%;appearance:none;}
.bform textarea{min-height:6.5rem;resize:vertical;}
.bform input:focus-visible,.bform select:focus-visible,.bform textarea:focus-visible,
.bform .agree input:focus-visible{
  outline:2px solid #A81104;outline-offset:1px;border-color:#A81104;}
.bform .send{width:100%;margin-top:1.4rem;}
.bform .note{margin-top:.9rem;text-align:center;color:var(--faint);
  font-size:.8rem;line-height:1.5;}
.bform .note strong{color:var(--dim);}

.mehr{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.15rem;}
.mehr .chip{cursor:pointer;font:400 .85rem/1.4 var(--ui);color:var(--dim);
  background:#FFFDFA;border:1px solid rgba(63,12,2,.16);border-radius:100px;
  padding:.45rem .85rem;min-height:38px;}
.mehr .chip.an{background:#A81104;border-color:#A81104;color:#FFF6EC;}
.mehr .chip:focus-visible{outline:2px solid #A81104;outline-offset:2px;}

.fehler{margin-top:1rem;padding:.7rem .9rem;border-radius:10px;
  background:rgba(168,17,4,.08);border:1px solid rgba(168,17,4,.34);
  color:#8E0D03;font-size:.88rem;line-height:1.5;}

@media (min-width:700px){
  .opts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .frage[data-nr="5"] .opts{grid-template-columns:minmax(0,1fr);}
}

/* =========================================================
   Gehaltscheck
   ========================================================= */
.sec--check{border-top:0;
  background:linear-gradient(180deg,#FDF4E7 0%,#FFF9F1 34%,#FFFDFA 68%,#FFFFFF 100%);}

.gform{max-width:52rem;margin-top:clamp(1.8rem,4.5vh,2.8rem);
  background:#FFFFFF;border:1px solid rgba(63,12,2,.14);border-radius:22px;
  padding:clamp(1.3rem,3vw,2.2rem);
  box-shadow:0 30px 80px -50px rgba(63,12,2,.45);}
.gfelder{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;}
.gfelder .f{display:flex;flex-direction:column;gap:.35rem;}
.gform label{font-size:.8rem;font-weight:500;color:var(--dim);}
.gform label .klein{font-weight:400;color:var(--faint);}
.gform select,.gform input{
  font:400 .95rem/1.4 var(--ui);color:var(--white);background:#FFFDFA;
  border:1px solid rgba(63,12,2,.18);border-radius:10px;padding:.7rem .85rem;
  min-height:48px;width:100%;appearance:none;}
.gform select{background-image:
  linear-gradient(45deg,transparent 50%,rgba(63,12,2,.5) 50%),
  linear-gradient(135deg,rgba(63,12,2,.5) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 55%, calc(100% - .75rem) 55%;
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat;padding-right:2.2rem;}
.gform select:focus-visible,.gform input:focus-visible{
  outline:2px solid #A81104;outline-offset:1px;border-color:#A81104;}
/* Eurozeichen sitzt im Feld, nicht daneben */
.geld{position:relative;}
.geld span{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);
  color:var(--faint);font-size:.95rem;pointer-events:none;}
.geld input{padding-right:2.2rem;}
.gform .send{width:100%;margin-top:1.3rem;}
@media (max-width:560px){.gfelder{grid-template-columns:1fr;}}

/* ---------- Ergebnis ---------- */
.gerg{max-width:52rem;margin-top:clamp(1.4rem,3.5vh,2.2rem);
  background:#FFFFFF;border:1px solid rgba(63,12,2,.14);border-radius:22px;
  padding:clamp(1.3rem,3vw,2.2rem);
  box-shadow:0 30px 80px -50px rgba(63,12,2,.45);}
.gurteil{font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.2;}
.gurteil.tief{color:#A81104;}
.gurteil.mitte{color:#3F0C02;}
.gurteil.hoch{color:#1F6B45;}

.skala{margin-top:clamp(1.4rem,3vh,2rem);}
.skala-bahn{position:relative;height:14px;border-radius:100px;overflow:visible;
  display:flex;isolation:isolate;}
.zone{height:100%;}
.zone-tief{flex:0 0 26%;border-radius:100px 0 0 100px;
  background:linear-gradient(90deg,#F3D9CE,#EEC3B2);}
.zone-mitte{flex:1 1 auto;background:linear-gradient(90deg,#F5A15E,#E2622A);}
.zone-hoch{flex:0 0 26%;border-radius:0 100px 100px 0;
  background:linear-gradient(90deg,#BBD8C6,#8FC2A6);}
/* Die Nadel wandert nach dem Einblenden an ihre Stelle */
.nadel{position:absolute;top:50%;left:50%;width:3px;height:30px;
  margin-left:-1.5px;border-radius:3px;background:#3F0C02;
  transform:translateY(-50%);
  box-shadow:0 0 0 3px #FFFFFF, 0 6px 16px -6px rgba(63,12,2,.7);
  transition:left .7s cubic-bezier(.25,1,.5,1);}
.nadel i{position:absolute;left:50%;top:-9px;width:9px;height:9px;
  margin-left:-4.5px;border-radius:50%;background:#3F0C02;}
@media (prefers-reduced-motion:reduce){.nadel{transition:none;}}

.skala-marken{display:flex;justify-content:space-between;margin-top:1.1rem;
  font:500 .68rem/1.4 var(--m);letter-spacing:.06em;color:var(--mute);}
.skala-marken span:nth-child(2){color:var(--white);font-weight:500;}
.skala-legende{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.9rem;
  font-size:.8rem;color:var(--faint);}
.skala-legende span{display:inline-flex;align-items:center;gap:.4rem;}
.skala-legende .p{width:10px;height:10px;border-radius:50%;flex:none;}
.skala-legende .p.tief{background:#EEC3B2;}
.skala-legende .p.mitte{background:#E2622A;}
.skala-legende .p.hoch{background:#8FC2A6;}

.gtext{margin-top:clamp(1.2rem,2.6vh,1.7rem);color:var(--dim);
  font-size:1rem;line-height:1.7;max-width:56ch;}
.gtext strong{color:var(--white);font-weight:600;}
.gcta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.3rem,3vh,1.9rem);}
@media (max-width:560px){.gcta{flex-direction:column;}.gcta .btn{width:100%;}}

.quelle{max-width:52rem;margin-top:clamp(1.6rem,4vh,2.4rem);
  color:var(--mute);font-size:.88rem;line-height:1.65;}
.quelle b{color:var(--white);}
.quelle a{color:#A81104;border-bottom:1px solid rgba(168,17,4,.4);}

/* ---------- Knopf in der Heropage ---------- */
/* Die Heropage ist eine senkrechte Flexspalte — ohne diese Zeile würde die
   Pille auf die volle Spaltenbreite gezogen. */
.werkzeug{display:inline-flex;align-items:center;gap:.6rem;
  align-self:flex-start;width:fit-content;
  margin-top:clamp(1rem,2.2vh,1.4rem);
  padding:.6rem 1.1rem .6rem .75rem;border-radius:100px;
  background:rgba(255,255,255,.72);border:1px solid rgba(63,12,2,.16);
  color:var(--white);font-size:.92rem;font-weight:500;
  box-shadow:0 10px 26px -18px rgba(63,12,2,.5);}
.werkzeug svg{flex:none;width:20px;height:20px;fill:none;
  stroke:#C23A08;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.werkzeug em{font-style:normal;color:var(--mute);font-weight:400;}
@media (hover:hover) and (pointer:fine){
  .werkzeug{transition:transform .3s var(--e),box-shadow .3s var(--e),
    border-color .3s ease-out;}
  .werkzeug:hover{transform:translateY(-2px);border-color:rgba(168,17,4,.45);
    box-shadow:0 16px 34px -18px rgba(63,12,2,.6);}
}
@media (max-width:560px){.werkzeug em{display:none;}}

.sec--check .zurueck-link{display:block;width:fit-content;
  margin-bottom:clamp(1rem,2.4vh,1.6rem);color:var(--mute);font-size:.9rem;}
@media (hover:hover) and (pointer:fine){
  .sec--check .zurueck-link:hover{color:var(--white);}
}
.sec--check .bkopf .lead{max-width:54ch;}
.sec--check .fehler{margin-top:1rem;padding:.7rem .9rem;border-radius:10px;
  background:rgba(168,17,4,.08);border:1px solid rgba(168,17,4,.34);
  color:#8E0D03;font-size:.88rem;line-height:1.5;}
.wege{display:flex;flex-wrap:wrap;gap:.7rem;}
@media (max-width:560px){.wege{flex-direction:column;}.wege .btn{width:100%;}}

/* =========================================================
   Offene Stellen
   Weiß, nicht creme: Die Liste ist der Arbeitsteil der Seite. Sie soll sich
   lesen wie eine Stellenbörse und nicht wie ein Werbeabschnitt, deshalb
   eigene Farbmarken statt der warmen Haut ringsum.

   Jede Stelle ist eine breite Zeile: links die Sache, rechts Gehaltsband
   und Knopf. Dadurch stehen alle Knöpfe zwangsläufig untereinander auf
   einer Linie — bei Kacheln nebeneinander hing das an der Textlänge.
   ========================================================= */
/* Zwei Klassen, weil der Abschnitt davor mit `.sec--schritte + .sec` einen
   cremefarbenen Verlauf setzt — das ist spezifischer als eine einzelne
   Klasse und hätte gewonnen. */
.sec.sec--stellen{
  --bg:#FFFFFF;
  --white:#161616;
  --dim:rgba(22,22,22,.76);
  --mute:rgba(22,22,22,.66);
  --faint:rgba(22,22,22,.58);
  --hair:rgba(22,22,22,.11);
  --hair-2:rgba(22,22,22,.2);
  background:#FFFFFF;color:var(--white);
  scroll-margin-top:clamp(5rem,12vh,7rem);}
.sec--stellen .lead{color:var(--dim);}
.hinweis-beispiel{margin-top:.9rem;font-size:.86rem;color:var(--faint);
  padding-left:.9rem;border-left:2px solid var(--hair-2);}

.stellen{list-style:none;margin:clamp(1.6rem,4vh,2.4rem) 0 0;padding:0;
  border-top:1px solid var(--hair);}
.stelle{display:grid;gap:clamp(1rem,3vw,2.4rem);
  grid-template-columns:minmax(0,1fr);
  padding:clamp(1.4rem,3vh,2rem) 0;
  border-bottom:1px solid var(--hair);}
@media (min-width:760px){
  .stelle{grid-template-columns:minmax(0,1fr) clamp(13rem,20vw,17rem);
    align-items:start;}
}

.stelle h3{font-size:1.14rem;font-weight:500;letter-spacing:-.015em;
  line-height:1.3;color:var(--white);}
.stelle-meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.5rem;
  font-size:.88rem;color:var(--mute);}
.stelle-meta span{display:flex;align-items:center;gap:.45rem;}
.stelle-meta span + span::before{content:"";width:3px;height:3px;
  border-radius:50%;background:var(--hair-2);margin-right:.45rem;}
.stelle-meta .feld{color:var(--accent);font-weight:500;}

.stelle-quali{list-style:none;margin:.85rem 0 0;padding:0;display:grid;gap:.3rem;}
.stelle-quali li{position:relative;padding-left:1rem;
  font-size:.9rem;line-height:1.5;color:var(--mute);}
.stelle-quali li::before{content:"";position:absolute;left:0;top:.56rem;
  width:5px;height:5px;background:var(--accent);opacity:.5;}

.stelle-seite{display:grid;gap:.7rem;justify-items:start;}
@media (min-width:760px){.stelle-seite{justify-items:stretch;}}
.stelle-geld span{display:block;font:500 .62rem/1 var(--m);letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);}
.stelle-geld b{display:block;margin-top:.35rem;font-size:1.02rem;
  font-weight:500;letter-spacing:-.01em;color:var(--white);}
.stelle-seite .btn{width:100%;justify-content:center;padding-block:.72rem;}
.stelle-nr{font:500 .62rem/1 var(--m);letter-spacing:.2em;color:var(--faint);}

.sec--stellen .btn--fill{background:#161616;color:#FFFFFF;border-color:transparent;}
@media (hover:hover) and (pointer:fine){
  .sec--stellen .btn--fill:hover{background:#2E2E2E;}
  .stelle:hover h3{color:var(--accent);}
}
.stelle{transition:background .2s var(--e);}
@media (hover:hover) and (pointer:fine){
  .stelle:hover{background:rgba(22,22,22,.018);}
}

.stf-fuss{margin-top:clamp(1.6rem,4vh,2.4rem);display:grid;gap:.9rem;
  justify-items:center;text-align:center;}
.stf-fuss p{color:var(--mute);font-size:.92rem;}
.stf-fuss a{border-bottom:1px solid var(--hair-2);}
.stf-fuss .btn--line{background:#FFFFFF;color:var(--white);
  border-color:var(--hair-2);}
.stelle[hidden],.stf-mehr[hidden]{display:none;}


/* Dritte Stufe der Schaltflächen auf hellem Grund: vorhanden, aber leiser
   als die beiden davor. So liest sich die Dreierreihe als Reihenfolge und
   nicht als drei gleichwertige Angebote. */
.btn--leise{background:transparent;color:var(--mute);
  border-color:var(--hair);}
@media (hover:hover) and (pointer:fine){
  .btn--leise:hover{color:var(--white);border-color:var(--hair-2);
    background:rgba(23,16,18,.035);}
}

/* Hinweis auf die konkrete Stelle, wenn jemand aus der Liste kommt. */
.bstelle{margin-top:1.1rem;display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .85rem;border:1px solid var(--hair-2);border-radius:100px;
  font-size:.88rem;color:var(--dim);}
.bstelle b{font:500 .78rem/1 var(--m);letter-spacing:.12em;color:var(--accent);}
/* Ohne diese Zeile bliebe eine leere Kapsel stehen: Eine gesetzte Anzeigeart
   schlägt das eingebaute display:none des hidden-Merkmals. */
.bstelle[hidden]{display:none;}


/* =========================================================
   Abschlussbereich der Arbeitnehmerseite
   Weiß statt Creme. Die Stellenliste darüber steht bereits auf Weiß —
   danach wieder auf Creme zurückzufallen sieht aus wie ein Fehler.
   Zwei Klassen, weil `.sec--schritte + .sec` und andere Nachbarregeln
   mit zwei Bestandteilen spezifischer sind als eine einzelne Klasse.
   ========================================================= */
/* „~" statt „+": alles nach der Stellenliste bleibt weiß, nicht nur der
   unmittelbar folgende Abschnitt. Mit dem Nachbarzeichen brach die Regel
   in dem Moment, als zwischen Liste und Abschluss ein weiterer Abschnitt
   dazukam — die Fragen. Der allgemeine Geschwister-Selektor überlebt
   solche Einschübe. */
.sec--stellen ~ .sec{
  --bg:#FFFFFF;
  background:#FFFFFF;}
/* Umgedreht: Der Abschnitt liegt jetzt auf Weiß, der Kasten darin trägt
   den Verlauf. Vorher war es andersherum — cremefarbener Grund, weißer
   Kasten —, dadurch hob sich der Kasten kaum ab.

   Der Verlauf läuft von warmem Greige nach kühlerem Grau. Die Überschrift
   steht darauf bei 11,9:1 an der dunkelsten Stelle. Der Fließtext lief
   in der gedämpften Farbe (64 % Deckung) nur auf 3,75:1 — auf Weiß hatte
   er noch gereicht, auf dem Verlauf nicht mehr. Eine Stufe kräftiger
   (80 %) bringt ihn auf 7,4:1. */
.sec.sec--abschluss .end{
  background:linear-gradient(138deg,#F2EDE5 0%,#E9E4DC 46%,#DEDAD3 100%);
  border-color:rgba(63,12,2,.10);
  box-shadow:0 22px 48px -34px rgba(63,12,2,.20);}
/* Der helle Nebenknopf braucht auf dem Verlauf eine eigene Fläche,
   sonst verschwimmt sein Rand darin. */
.sec.sec--abschluss .end p{color:var(--dim);}
.sec.sec--abschluss .end .btn--line{background:rgba(255,255,255,.72);}
.sec.sec--abschluss .end .werkzeug{background:rgba(255,255,255,.6);
  border-color:rgba(63,12,2,.12);}


/* Das Aufklappfeld trägt dieselbe milchige Fläche wie die Kopfleiste. */
/* Näher an der Deckung der Leiste, damit Feld und Leiste als ein
   Material lesbar sind. */
body{--glas:rgba(255,255,255,.55); --glas-fest:rgba(255,255,255,.97);}

/* ---------- Lebenslauf-Feld ----------
   Der eingebaute Dateiknopf der Browser sieht überall anders aus. Statt
   ihn zu verstecken und nachzubauen — was Tastatur und Vorlesehilfen
   Ärger macht — bekommt er nur eine passende Fläche und denselben Rahmen
   wie die übrigen Felder. */
.bform input[type="file"]{
  width:100%;font:400 .95rem/1.4 var(--s);color:var(--dim);
  background:#FFFFFF;border:1px dashed rgba(63,12,2,.28);border-radius:12px;
  padding:.8rem .95rem;cursor:pointer;
  transition:border-color .25s var(--e),background .25s var(--e);}
.bform input[type="file"]::file-selector-button{
  margin-right:.9rem;padding:.45rem .9rem;border:0;border-radius:100px;
  font:600 .88rem/1 var(--s);color:#FFFFFF;background:#161616;cursor:pointer;}
@media (hover:hover) and (pointer:fine){
  .bform input[type="file"]:hover{border-color:rgba(63,12,2,.5);background:#FFFDFA;}
}
.bform input[type="file"]:focus-visible{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(194,58,8,.18);}
.f-hinweis{margin-top:.5rem;color:var(--mute);font-size:.85rem;line-height:1.5;}