/* ============================================================================
   Bewerbung in 2 Minuten — die versteckte Seite /jobs-wiesbaden/.
   Christopher, 15.10.2026: versteckte Landingpage, Bewerbungsfunnel mit wenigen
   Klicks, Benefits, in den Hausfarben. Bauplan SPEC.md §4/§5.

   Diese Datei laedt wie jede teil-*.css auf JEDER Seite (functions.php,
   alphabetisch nach teil-zzz-shop.css). Darum steht jede Regel unter
   .bv-bewerbung — der Koerperklasse, die nur bewerbung.php setzt — und greift
   sonst nirgends. Nur Token aus grund.css und teil-z1/z2; Schatten blau
   getoent wie im ganzen Theme; Gold nie als Lesetext; keine Serifen.

   Fluid: clamp(), min()/max() und zwei Container-Abfragen (Buehne, Ort).
   Einzige Medienabfrage mit Breite: der Fragebogen wechselt vom Vollbild
   (Telefon) zum Blatt (Schreibtisch) — das ist ein Moduswechsel, kein Sprung
   in Schrift oder Abstand.

   Einblenden: .einblenden (wirkung.js setzt .auf, Netze dort und in
   teil-ze-schwung.css). Nie .auf allein (design.md 1.9). Das Wachsen der
   Bilder ist eine eigene Klasse mit eigenen drei Netzen, siehe unten.
   ========================================================================= */

.bv-bewerbung{ background:var(--grund) }
.bv-bewerbung [hidden]{ display:none !important }

/* ── Grundzustand ohne Skript ────────────────────────────────────────────
   bewerbung.php setzt .bvb-js im head, bevor gemalt wird. Fehlt sie (kein
   JavaScript, oder bewerbung.js kam binnen 10 s nicht), stehen statt der
   Kacheln der Satz mit E-Mail und Telefon und alle Abschnitte ohne Bewegung. */
html:not(.bvb-js) .bv-bewerbung .bvb-nur-js{ display:none !important }
.bvb-js .bv-bewerbung .bvb-ohne-js{ display:none !important }
/* Auch das Einblenden hängt an einem Skript (wirkung.js). Kommt keins an,
   bleibt nichts auf opacity 0 — das Netz in teil-ze-schwung.css greift nur
   bei abgeschaltetem JavaScript, dieses auch bei blockiertem Skript. */
html:not(.bvb-js) .bv-bewerbung .einblenden{ opacity:1; transform:none }

.bv-bewerbung .bvb-unsichtbar{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ── Kopf: Logo links, ein kleiner Textknopf rechts ──────────────────────── */
.bv-bewerbung .bvb-kopf{
  position:sticky; top:0; z-index:60;
  padding:clamp(8px,1.4vw,16px) var(--gasse) 0; pointer-events:none;
}
.bv-bewerbung.admin-bar .bvb-kopf{ top:32px }
@media screen and (max-width:782px){ .bv-bewerbung.admin-bar .bvb-kopf{ top:46px } }
/* Was der Browser per Tab oder Anker ins Bild holt, landet unter der klebenden
   Kopf-Pille statt dahinter (gemessen 15.10.2026, 375 px: Shift+Tab legte
   „Geht auch Teilzeit?" auf y 0…56, die Pille deckt y 8…71). Nur diese Seite —
   gleiches Muster wie die Scroll-Sperre unten. */
html:has(body.bv-bewerbung){ scroll-padding-top:6rem }
html:has(body.bv-bewerbung.admin-bar){ scroll-padding-top:calc(6rem + 32px) }
@media screen and (max-width:782px){ html:has(body.bv-bewerbung.admin-bar){ scroll-padding-top:calc(6rem + 46px) } }
.bv-bewerbung .bvb-kopf-innen{
  pointer-events:auto; max-width:min(var(--breite),100%); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.4rem .45rem .4rem clamp(.9rem,2.2vw,1.4rem); border-radius:var(--r-rund);
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--glas-rand); box-shadow:0 6px 26px rgba(19,55,109,.08);
}
.bv-bewerbung .bvb-logo{ display:block; height:clamp(34px,1.1vw + 30px,46px); width:auto; max-width:none; flex:none }
.bv-bewerbung .bvb-kopf-knopf{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:0 clamp(1rem,2vw,1.35rem); border-radius:var(--r-rund);
  background:var(--blau-zart); color:var(--blau); font-weight:800; font-size:.92rem;
  text-decoration:none; white-space:nowrap; transition:background .25s, color .25s;
}
.bv-bewerbung .bvb-kopf-knopf:hover{ background:var(--blau); color:var(--weiss) }
.bv-bewerbung .bvb-kopf-knopf:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:3px }

/* ── Gemeinsames ─────────────────────────────────────────────────────────── */
.bv-bewerbung .bvb-abschnitt{ padding-block:clamp(2.6rem,6vw,5.5rem) }
.bv-bewerbung .bvb-titel{
  font-size:clamp(1.9rem,2.6vw + 1rem,3.2rem); line-height:1.08; color:var(--text);
  margin:0 0 clamp(1.4rem,3vw,2.4rem); max-width:24ch;
}
.bv-bewerbung .knopf{ min-height:48px; white-space:normal; text-align:center }
.bv-bewerbung .bvb-knopfzeile{
  margin:clamp(1.4rem,3vw,2.2rem) 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem;
}
.bv-bewerbung .bvb-klein{ font-size:.875rem; line-height:1.5; color:var(--text-leise); margin:.9rem 0 0 }
.bv-bewerbung .bvb a:focus-visible,
.bv-bewerbung .bvb-fuss a:focus-visible,
.bv-bewerbung .bvb-dialog a:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:3px; border-radius:4px }

/* ── Bühne ───────────────────────────────────────────────────────────────
   Telefon: Foto oben, das helle Textfeld legt sich über seine Unterkante.
   Ab 900 px Bahnbreite: Text links, Foto rechts. */
.bv-bewerbung .bvb-buehne{ padding-block:clamp(1rem,3vw,2.5rem) clamp(1.6rem,4vw,3.5rem) }
.bv-bewerbung .bvb-buehne-bahn{ container-type:inline-size; container-name:bvb-buehne }
.bv-bewerbung .bvb-buehne-raster{ display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:0 }
.bv-bewerbung .bvb-buehne-bild{
  margin:0; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:3/2; background:var(--sand);
  border:1px solid rgba(255,255,255,.8); box-shadow:0 26px 60px rgba(19,55,109,.14);
}
/* Foto fast quadratisch (Nr. 17, 2400 × 2436): auf dem Telefon (3:2) zählt nur
   die Höhe — Brillenwände bis Stuhlbeine —, am Schreibtisch (4:5) nur die Breite,
   die Stühle bleiben ganz im Bild. */
.bv-bewerbung .bvb-buehne-bild img{ width:100%; height:100%; object-fit:cover; object-position:25% 66%; display:block }
.bv-bewerbung .bvb-buehne-text{
  position:relative; z-index:1;
  margin:calc(-1 * clamp(2.5rem,10vw,4.5rem)) clamp(.5rem,2.5vw,1.5rem) 0;
  padding:clamp(1.3rem,4.5vw,2.75rem); border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--weiss),var(--grund) 55%,var(--gold-zart));
  border:1px solid rgba(203,176,130,.3); box-shadow:0 18px 50px rgba(19,55,109,.1);
}
@container bvb-buehne (min-width:900px){
  .bv-bewerbung .bvb-buehne-raster{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(1.5rem,3vw,3rem); align-items:start }
  .bv-bewerbung .bvb-buehne-text{ order:-1; margin:0 }
  /* Ist das Textfeld höher als das Foto (schmale Schreibtische: Kacheln
     einspaltig), bleibt das Foto beim Scrollen unter dem Kopf stehen. */
  .bv-bewerbung .bvb-buehne-bild{ aspect-ratio:4/5; position:sticky; top:calc(clamp(8px,1.4vw,16px) + 4.75rem) }
}
.bv-bewerbung .bvb-buehne h1{
  font-size:clamp(2.3rem,3.6vw + 1.2rem,4.6rem); line-height:1.02; letter-spacing:-.025em;
  margin:0 0 1rem; color:var(--text);
}
.bv-bewerbung .bvb-vorspann{
  font-size:var(--vorspann); line-height:1.6; color:var(--text-leise); max-width:46ch; margin:0 0 1.2rem;
}
.bv-bewerbung .bvb-fakten{ list-style:none; margin:0 0 clamp(1.4rem,3vw,2rem); padding:0; display:flex; flex-wrap:wrap; gap:.45rem }
.bv-bewerbung .bvb-fakten li{
  display:inline-flex; align-items:center; gap:.45em; padding:.42em .9em; border-radius:var(--r-rund);
  background:var(--weiss); border:1px solid rgba(19,55,109,.12);
  color:var(--blau); font-size:.875rem; font-weight:750; line-height:1.3;
}
.bv-bewerbung .bvb-fakten li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none }

.bv-bewerbung .bvb-einstieg-frage{
  font-size:clamp(1.15rem,.8vw + 1rem,1.45rem); font-weight:800; letter-spacing:-.015em; line-height:1.25;
  margin:0 0 .9rem; color:var(--text);
}
.bv-bewerbung .bvb-ohne-js{ font-size:var(--vorspann); line-height:1.6; margin:0; color:var(--text) }
.bv-bewerbung .bvb-ohne-js a{ color:var(--blau); font-weight:800; padding-block:.75em; text-underline-offset:.2em }

/* ── Antwortkacheln (Bühne und Fragebogen) ───────────────────────────────
   Volle Breite auf dem Telefon, mindestens 56 px hoch, Auswahl über
   aria-pressed: blaue Fläche, weiße Schrift, goldener Haken. */
.bv-bewerbung .bvb-antworten{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr)); gap:.6rem }
.bv-bewerbung .bvb-einstieg-antworten > :last-child:nth-child(odd){ grid-column:1 / -1 }
.bv-bewerbung .bvb-dialog .bvb-antworten{ grid-template-columns:minmax(0,1fr) }
.bv-bewerbung .bvb-antwort{
  display:flex; align-items:center; justify-content:space-between; gap:.9rem;
  width:100%; min-height:56px; padding:.8rem 1rem .8rem 1.1rem;
  border-radius:var(--r-m); border:1.5px solid rgba(19,55,109,.16); background:var(--weiss);
  color:var(--text); font:inherit; font-size:1rem; font-weight:750; line-height:1.3; text-align:left;
  cursor:pointer; box-shadow:0 4px 14px rgba(19,55,109,.05);
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:background .25s, border-color .25s, color .25s, transform .3s var(--weich), box-shadow .3s var(--weich);
}
@media (hover:hover) and (pointer:fine){
  .bv-bewerbung .bvb-antwort:hover{ border-color:var(--gold); transform:translateY(-1px); box-shadow:0 10px 24px rgba(19,55,109,.09) }
}
.bv-bewerbung .bvb-antwort:active{ transform:scale(.985) }
.bv-bewerbung .bvb-antwort:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:2px }
.bv-bewerbung .bvb-antwort[aria-pressed="true"]{
  background:var(--blau); border-color:var(--blau); color:var(--weiss); box-shadow:0 10px 26px rgba(19,55,109,.22);
}
.bv-bewerbung .bvb-zeichen{
  flex:none; width:24px; height:24px; border-radius:50%; border:2px solid rgba(19,55,109,.28);
  display:grid; place-items:center; transition:background .25s, border-color .25s;
}
.bv-bewerbung .ist-mehrfach .bvb-zeichen{ border-radius:7px }
.bv-bewerbung .bvb-antwort[aria-pressed="true"] .bvb-zeichen{ border-color:var(--gold); background:var(--gold) }
.bv-bewerbung .bvb-antwort[aria-pressed="true"] .bvb-zeichen::after{
  content:""; width:10px; height:6px; border:solid var(--blau); border-width:0 0 2.4px 2.4px;
  transform:translateY(-1px) rotate(-45deg);
}

/* ── Das bieten wir dir ──────────────────────────────────────────────────
   Höchstens vier Spalten: max() hält die Mindestbreite je Spalte bei einem
   Viertel der Bahn, min() lässt auf dem Telefon eine Spalte zu. */
.bv-bewerbung .bvb-vorteil-raster{
  list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(15rem,calc((100% - 3rem) / 4))),1fr));
}
.bv-bewerbung .bvb-vorteil{
  display:flex; align-items:center; gap:.9rem;
  padding:clamp(.85rem,1.6vw,1.2rem) clamp(.95rem,1.8vw,1.3rem); border-radius:var(--r-l);
  background:var(--weiss); border:1px solid rgba(19,55,109,.08); box-shadow:0 8px 26px rgba(19,55,109,.06);
  font-weight:750; line-height:1.35; color:var(--text);
}
.bv-bewerbung .bvb-vorteil-text{ min-width:0; overflow-wrap:break-word }
.bv-bewerbung .bvb-icon-rund{
  flex:none; width:clamp(44px,1vw + 40px,56px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; background:var(--blau-zart); color:var(--blau);
}
.bv-bewerbung .bvb-icon{ width:62%; height:62%; display:block; overflow:visible }
.bv-bewerbung .bvb-icon .bvb-akzent{ stroke:var(--gold-tief) }

/* ── Wen wir suchen ──────────────────────────────────────────────────────── */
.bv-bewerbung .bvb-rollen-raster{
  list-style:none; margin:0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,max(16rem,calc((100% - 3rem) / 4))),1fr));
}
.bv-bewerbung .bvb-rolle{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.7rem;
  padding:clamp(1.3rem,2.2vw,1.7rem); border-radius:var(--r-l);
  background:var(--weiss); border:1px solid rgba(19,55,109,.08); box-shadow:0 8px 26px rgba(19,55,109,.06);
}
.bv-bewerbung .bvb-rolle::before{
  content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--gold),var(--blau));
}
.bv-bewerbung .bvb-rolle h3{ margin:0; color:var(--blau); font-size:clamp(1.12rem,.6vw + 1rem,1.35rem); line-height:1.2 }
.bv-bewerbung .bvb-rolle p{ margin:0; color:var(--text-leise); font-size:var(--flies); line-height:1.6 }
.bv-bewerbung .bvb-rolle-knopf{ margin-top:auto; align-self:flex-start }

/* ── Hier arbeitest du ───────────────────────────────────────────────────
   Telefon: Text, Ladenfront, Theke untereinander. Ab 900 px: Text und Theke
   links, die Ladenfront rechts über beide Zeilen. */
.bv-bewerbung .bvb-ort-bahn{ container-type:inline-size; container-name:bvb-ort }
.bv-bewerbung .bvb-ort-raster{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1rem,2.4vw,1.6rem) }
.bv-bewerbung .bvb-ort-text .bvb-titel{ margin-bottom:1rem }
.bv-bewerbung .bvb-ort-text p:not(.marke){ font-size:var(--vorspann); line-height:1.65; color:var(--text-leise); max-width:52ch; margin:0 }
.bv-bewerbung .bvb-ort-bild{ margin:0; min-width:0 }
.bv-bewerbung .bvb-wachsen{
  border-radius:var(--r-xl); overflow:hidden; background:var(--sand);
  border:1px solid rgba(255,255,255,.8); box-shadow:0 22px 56px rgba(19,55,109,.14);
}
.bv-bewerbung .bvb-ort-front .bvb-wachsen{ aspect-ratio:3/2 }
.bv-bewerbung .bvb-ort-theke .bvb-wachsen{ aspect-ratio:4/3 }
.bv-bewerbung .bvb-wachsen img{ width:100%; height:100%; object-fit:cover; display:block }
@container bvb-ort (min-width:900px){
  .bv-bewerbung .bvb-ort-raster{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:"text front" "theke front"; align-items:start;
  }
  .bv-bewerbung .bvb-ort-text{ grid-area:text; align-self:center; padding-block:clamp(0rem,2vw,2rem) }
  .bv-bewerbung .bvb-ort-theke{ grid-area:theke }
  .bv-bewerbung .bvb-ort-front{ grid-area:front; align-self:stretch }
  .bv-bewerbung .bvb-ort-front .bvb-wachsen{ aspect-ratio:auto; height:100%; min-height:26rem }
  .bv-bewerbung .bvb-ort-front img{ object-position:50% 45% }
}

/* Das Bild wächst beim Hereinscrollen leicht (HEAROS-Idee) — nur transform.
   Netz 1: ohne Skript fehlt .bvb-js, nichts ist verkleinert.
   Netz 2: reduzierte Bewegung, sofort in voller Größe.
   Netz 3: bewerbung.js gibt nach 0,9 s (im Fenster) bzw. 12 s (alles) frei. */
.bvb-js .bv-bewerbung .bvb-wachsen{ transform:scale(.93); transition:transform 1.2s var(--weich) }
.bvb-js .bv-bewerbung .bvb-wachsen.ist-da{ transform:none }
@media (prefers-reduced-motion:reduce){
  .bvb-js .bv-bewerbung .bvb-wachsen{ transform:none; transition:none }
}

/* ── So einfach geht's (Stil von .schritte, Ziffern in Nunito) ──────────── */
.bv-bewerbung .bvb-schritte{ list-style:none; margin:0; padding:0; max-width:52rem }
.bv-bewerbung .bvb-schritte .schritt{ grid-template-columns:auto minmax(0,1fr) }
.bv-bewerbung .bvb-schritte .nr{
  font-family:inherit; font-weight:850; font-size:1.15rem; line-height:1;
  width:clamp(44px,1vw + 40px,52px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; background:var(--gold-zart); color:var(--blau);
  border:1px solid rgba(203,176,130,.45);
}
.bv-bewerbung .bvb-schritte .schritt p{ margin:0; color:var(--text); font-size:var(--vorspann); font-weight:650; line-height:1.45 }

/* ── Kurz-FAQ ────────────────────────────────────────────────────────────── */
/* Die FAQ hat keine eigene Überschrift — oben kein zweiter Abschnittsabstand. */
.bv-bewerbung .bvb-faq{ padding-top:0 }
.bv-bewerbung .bvb-faq-liste{ max-width:52rem; display:grid; gap:.6rem }
.bv-bewerbung .bvb-faq details{
  border-radius:var(--r-m); background:var(--weiss);
  border:1px solid rgba(19,55,109,.1); box-shadow:0 6px 20px rgba(19,55,109,.05);
}
.bv-bewerbung .bvb-faq summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:56px; padding:.8rem 1.1rem .8rem 1.3rem; border-radius:inherit;
  font-weight:800; font-size:1.02rem; line-height:1.35; color:var(--text);
}
.bv-bewerbung .bvb-faq summary::-webkit-details-marker{ display:none }
.bv-bewerbung .bvb-faq summary:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:2px }
.bv-bewerbung .bvb-plus{ flex:none; position:relative; width:28px; height:28px; border-radius:50%; background:var(--blau-zart) }
.bv-bewerbung .bvb-plus::before,
.bv-bewerbung .bvb-plus::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; border-radius:2px;
  background:var(--blau); transform:translate(-50%,-50%); transition:transform .3s var(--weich);
}
.bv-bewerbung .bvb-plus::after{ transform:translate(-50%,-50%) rotate(90deg) }
.bv-bewerbung .bvb-faq details[open] .bvb-plus::after{ transform:translate(-50%,-50%) rotate(0deg) }
.bv-bewerbung .bvb-faq details p{ margin:0; padding:0 1.3rem 1.1rem; color:var(--text-leise); font-size:var(--flies); line-height:1.65 }
.bv-bewerbung .bvb-faq details a{ color:var(--blau); font-weight:750; padding-block:.75em; text-underline-offset:.2em }

/* ── Schluss-Aufruf (Stil .aufruf aus grund.css) ─────────────────────────── */
.bv-bewerbung .bvb-aufruf h2{ font-size:clamp(1.8rem,2.4vw + 1rem,3rem); line-height:1.1 }
.bv-bewerbung .bvb-aufruf .bvb-knopfzeile{ justify-content:center; margin:1.4rem auto 1rem; max-width:none }
.bv-bewerbung .bvb-direkt{ margin:0 auto; font-size:.92rem; line-height:1.6; color:var(--text-leise) }
.bv-bewerbung .bvb-direkt a{ color:var(--blau); font-weight:800; padding-block:.85em; text-underline-offset:.2em; white-space:nowrap }

/* ── Fuß: Firma, Rechtslinks, die Blume genau einmal ─────────────────────── */
.bv-bewerbung .bvb-fuss{
  margin-top:clamp(1rem,3vw,2rem); padding:clamp(2rem,4vw,3rem) 0 clamp(1.5rem,3vw,2.2rem);
  background:linear-gradient(180deg,var(--creme),var(--creme-2)); color:var(--text-leise); text-align:center;
  border-top:1px solid rgba(203,176,130,.3); border-radius:clamp(22px,3vw,38px) clamp(22px,3vw,38px) 0 0;
}
.bv-bewerbung .bvb-fuss-innen{ display:flex; flex-direction:column; align-items:center; gap:.6rem }
.bv-bewerbung .bvb-fuss .signet{ display:block; width:44px; height:44px; margin:0; color:var(--gold); opacity:.75 }
.bv-bewerbung .bvb-fuss p{ margin:0; font-size:.9rem }
.bv-bewerbung .bvb-fuss-wege{ display:flex; flex-wrap:wrap; justify-content:center; gap:0 .4rem }
.bv-bewerbung .bvb-fuss-wege a{
  display:inline-flex; align-items:center; min-height:48px; padding:0 .8rem;
  color:var(--text-leise); text-decoration:none; font-size:.9rem; font-weight:650;
}
.bv-bewerbung .bvb-fuss-wege a:hover{ color:var(--blau) }

/* ── Der Fragebogen ──────────────────────────────────────────────────────
   Telefon: Vollbild. Schreibtisch: ein Blatt bis 720 px, mittig. Ohne
   <dialog>-Unterstützung setzt bewerbung.js .ist-vollbild. */
html.bvb-offen:has(body.bv-bewerbung){ overflow:hidden }
.bv-bewerbung .bvb-dialog{
  margin:auto; padding:0; border:0; color:var(--text); background:var(--grund);
  width:100%; height:100%; max-width:100%; max-height:100%; overflow:hidden; overscroll-behavior:contain;
}
.bv-bewerbung .bvb-dialog:not([open]){ display:none }
.bv-bewerbung .bvb-dialog[open]{ display:flex; flex-direction:column }
.bv-bewerbung .bvb-dialog::backdrop{
  background:rgba(19,55,109,.34); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.bv-bewerbung .bvb-dialog.ist-vollbild{ position:fixed; inset:0; z-index:1000 }
@media (min-width:760px) and (min-height:600px){
  .bv-bewerbung .bvb-dialog{
    /* fit-content, nicht auto: ein modaler Dialog steht mit inset 0 im Fenster,
       height:auto zog ihn auf volle Höhe (gemessen 828 px bei 900 px Fenster). */
    width:min(720px, 100% - 2 * var(--gasse)); height:fit-content; max-height:min(92vh, 900px);
    border-radius:var(--r-l); box-shadow:0 30px 90px rgba(19,55,109,.28);
  }
  .bv-bewerbung .bvb-dialog.ist-vollbild{ inset:4vh 0 auto; margin-inline:auto }
}

.bv-bewerbung .bvb-leiste{
  flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.5rem;
  padding:max(.5rem, env(safe-area-inset-top)) clamp(.5rem,2vw,1rem) .5rem;
}
.bv-bewerbung .bvb-zurueck,
.bv-bewerbung .bvb-zu{
  min-height:48px; min-width:48px; border:0; border-radius:var(--r-rund); cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem;
  background:transparent; color:var(--blau); font:inherit; font-weight:750; font-size:.95rem;
  -webkit-tap-highlight-color:transparent; transition:background .25s;
}
.bv-bewerbung .bvb-zurueck{ justify-self:start; padding:0 .9rem }
.bv-bewerbung .bvb-zurueck:hover{ background:var(--blau-zart) }
.bv-bewerbung .bvb-zurueck.ist-weg{ visibility:hidden }
.bv-bewerbung .bvb-zu{ justify-self:end; justify-content:center; padding:0; font-size:1.1rem; background:var(--blau-zart) }
.bv-bewerbung .bvb-zu:hover{ background:var(--blau); color:var(--weiss) }
.bv-bewerbung .bvb-zurueck:focus-visible,
.bv-bewerbung .bvb-zu:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:2px }
.bv-bewerbung .bvb-stand{
  margin:0; text-align:center; white-space:nowrap;
  font-size:.875rem; font-weight:800; letter-spacing:.02em; color:var(--text-leise);
}
.bv-bewerbung .bvb-balken{
  flex:none; height:6px; margin:0 clamp(1rem,4vw,2.5rem); border-radius:var(--r-rund);
  background:var(--blau-zart); overflow:hidden;
}
.bv-bewerbung .bvb-balken span{
  display:block; width:100%; height:100%; border-radius:inherit; transform-origin:left center;
  transform:scaleX(.125); background:linear-gradient(90deg,var(--gold),var(--blau));
  transition:transform .5s var(--weich);
}
.bv-bewerbung .bvb-inhalt{
  flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(1.4rem,4vw,2.4rem) clamp(1.1rem,4.5vw,2.6rem) max(clamp(1.6rem,4vw,2.4rem), env(safe-area-inset-bottom));
}
.bv-bewerbung .bvb-schritt-titel{
  font-size:clamp(1.45rem,1.6vw + 1rem,2.05rem); line-height:1.18; letter-spacing:-.02em;
  margin:0 0 clamp(1.1rem,2.5vw,1.6rem); color:var(--text);
}
.bv-bewerbung .bvb-schritt-titel:focus{ outline:none }
.bv-bewerbung .bvb-schritt.ist-neu{ animation:bvb-rein .38s var(--weich) both }
@keyframes bvb-rein{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.bv-bewerbung .bvb-weiter-zeile{ margin:1.2rem 0 0 }
.bv-bewerbung .bvb-weiter{ width:100% }

/* Kontakt: Beschriftung über dem Feld, 16 px Schrift (kein Zoom auf iOS).
   Fehler ohne Rot (vom Shop verworfen): Goldrand, warme Fläche, Satz am Feld. */
.bv-bewerbung .bvb-kontakt{ display:grid; gap:1rem }
.bv-bewerbung .bvb-kontakt .bvb-schritt-titel{ margin-bottom:.3rem }
.bv-bewerbung .bvb-feld{ display:grid; gap:.4rem }
.bv-bewerbung .bvb-feld label{ font-weight:800; font-size:.95rem; line-height:1.35; color:var(--text) }
.bv-bewerbung .bvb-feld input,
.bv-bewerbung .bvb-feld textarea{
  width:100%; min-height:52px; padding:.8rem 1rem; border-radius:var(--r-s);
  border:1.5px solid rgba(19,55,109,.22); background:var(--weiss); color:var(--text);
  font:inherit; font-size:max(16px,1rem); line-height:1.4;
  -webkit-appearance:none; appearance:none; transition:border-color .2s, box-shadow .2s, background .2s;
}
.bv-bewerbung .bvb-feld textarea{ min-height:6.5rem; resize:vertical }
.bv-bewerbung .bvb-feld input:focus,
.bv-bewerbung .bvb-feld textarea:focus{ outline:none; border-color:var(--blau); box-shadow:0 0 0 4px rgba(46,99,168,.22) }
.bv-bewerbung .bvb-feld [aria-invalid="true"]{ border-width:2px; border-color:var(--gold-tief); background:var(--gold-zart) }
.bv-bewerbung .bvb-feldfehler{
  margin:0; display:flex; align-items:flex-start; gap:.5rem;
  font-size:.92rem; font-weight:750; line-height:1.4; color:var(--text);
}
.bv-bewerbung .bvb-feldfehler::before{
  content:"!"; flex:none; width:1.35em; height:1.35em; margin-top:.05em; border-radius:50%;
  display:grid; place-items:center; background:var(--blau); color:var(--weiss); font-size:.82em; font-weight:900;
}
.bv-bewerbung .bvb-hinweis{ margin:-.2rem 0 0; font-size:.92rem; color:var(--text-leise) }
.bv-bewerbung .bvb-fang{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.bv-bewerbung .bvb-meldung,
.bv-bewerbung .bvb-netzfehler{
  margin:0; padding:.85rem 1rem; border-radius:var(--r-s);
  background:var(--gold-zart); border:1px solid rgba(169,143,95,.45);
  font-weight:700; line-height:1.5; color:var(--text);
}
.bv-bewerbung .bvb-netzfehler a,
.bv-bewerbung .bvb-datenschutz a{ color:var(--blau); font-weight:800; text-underline-offset:.2em }
.bv-bewerbung .bvb-absenden{ width:100%; min-height:54px; font-size:1.02rem }
.bv-bewerbung .bvb-absenden[aria-disabled="true"]{ opacity:.7; cursor:progress }
.bv-bewerbung .bvb-datenschutz{ margin:0 }

/* Danke */
.bv-bewerbung .bvb-danke-zeichen{ display:block; width:clamp(56px,2vw + 48px,72px); height:auto; margin:0 0 1rem; color:var(--blau) }
.bv-bewerbung .bvb-danke-zeichen circle{ stroke:var(--gold) }
.bv-bewerbung .bvb-danke .bvb-schritt-titel{ margin-bottom:.4rem }
.bv-bewerbung .bvb-danke-satz{ margin:0 0 1.4rem; font-size:var(--vorspann); font-weight:700; color:var(--text) }
.bv-bewerbung .bvb-danke-weiter{ margin:0 0 .6rem; font-weight:800; color:var(--blau) }
.bv-bewerbung .bvb-danke-liste{ list-style:none; margin:0; padding:0; counter-reset:bvb-danke; display:grid; gap:.55rem }
.bv-bewerbung .bvb-danke-liste li{
  counter-increment:bvb-danke; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.75rem; align-items:center;
  padding:.75rem .9rem; border-radius:var(--r-m); background:var(--weiss); border:1px solid rgba(19,55,109,.08);
  line-height:1.45;
}
.bv-bewerbung .bvb-danke-liste li::before{
  content:counter(bvb-danke); width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold-zart); color:var(--blau); font-weight:850; font-size:.9rem; border:1px solid rgba(203,176,130,.45);
}
.bv-bewerbung .bvb-zweitlink{
  display:inline-flex; align-items:center; min-height:48px; padding:0 .6rem;
  color:var(--blau); font-weight:750; text-underline-offset:.2em;
}
.bv-bewerbung .bvb-countdown{
  margin:1.4rem 0 0; padding:.8rem 1rem; border-radius:var(--r-m);
  background:var(--blau-zart); color:var(--text); font-size:.94rem; line-height:1.5;
}
.bv-bewerbung .bvb-bleiben{
  display:inline-flex; align-items:center; min-height:48px; margin:.45rem 0 0; padding:0 1.1rem;
  border-radius:var(--r-rund); border:1.5px solid var(--blau); background:var(--weiss);
  color:var(--blau); font:inherit; font-weight:800; cursor:pointer;
}
.bv-bewerbung .bvb-bleiben:hover{ background:var(--blau); color:var(--weiss) }
.bv-bewerbung .bvb-bleiben:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:2px }