/* ==========================================================================
   /bewerbungen/ (P3) · nur Bausteine dieser Seite, Präfix bw-. Lädt nach css/lpx.css.
   Mobile first. Endzustände gelten ohne JS und bei reduzierter Bewegung; Startzustände nur unter html.lpx-anim.
   Gegenstände (Dienstplan, Bewerbungs-Karte, Handy-Bilder, Übersicht): Rahmen nur um gezeigte Dinge, keine Textkästen.
   ========================================================================== */

/* ---------- Hero: Zweizeiler der Anzeige, dazu der Dienstplan mit DU und „Dein Team“ (die Bilder aus Karins Anzeige) ----------
   DOM-Reihenfolge = Handy: Dachzeile, H1, Knopf, Mikro, Dienstplan (Ring-Bühne dahinter), Unterzeile, Gesichter, Punkte.
   Desktop (lpx-hero Standard): Dachzeile und H1 über die ganze Breite, links Unterzeile, Knöpfe, Mikro, Punkte, Gesichter,
   rechts die Ringe, davor der Dienstplan. */
.bw-hero { gap: 0.95rem; }
.bw-hero .eyebrow { line-height: 1.45; }
@media (max-width: 640px) {
  .bw-hero .hero__title { font-size: clamp(1.7rem, 8.25vw, 2.5rem); line-height: 1; }
}
@media (min-width: 360px) { .bw-hero .hero__title .line__inner { white-space: nowrap; } }
.bw-hero__lead { font-size: 1.0625rem; }
/* Handy und Tablet: die Ring-Bühne liegt hinter der Dienstplan-Karte. Die Ringe stehen oben und unten aus der Karte heraus
   und scheinen durch die halb durchsichtige Karte (Szene als Lichtsaum um den Gegenstand der Anzeige). */
@media (max-width: 900px) {
  .bw-hero { padding-top: 5.75rem; }
  .bw-hero > .lpx-mikro { margin-top: -0.35rem; }
  .bw-hero__bild { position: relative; isolation: isolate; margin: 0.7rem 0 0.55rem; }
  .bw-hero__bild > .lpx-hero__buehne { position: absolute; top: -2.2rem; bottom: -2.2rem; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); min-height: 0; z-index: -1; }
  .bw-hero__bild .bw-standbild { width: min(64%, 300px); max-height: none; opacity: 0.35; }
  .bw-hero .bw-plan--hero { background: color-mix(in srgb, var(--bg) 62%, transparent); }
}
/* Tablet: Bühne schmaler als die breite Karte, damit der Ring (Radius als Anteil der Bühnenbreite) nicht über die Texte ragt */
@media (min-width: 701px) and (max-width: 900px) { .bw-hero__bild > .lpx-hero__buehne { left: calc(50% - 18rem); right: calc(50% - 18rem); } }
@media (max-width: 700px) {
  .lpx .bw-hero { padding-top: 5.75rem; }
  .bw-hero > .bw-vertrauen { margin-top: -0.1rem; }
}
@media (min-width: 901px) {
  .bw-hero > .eyebrow { order: -3; }
  .bw-hero > .hero__title { order: -2; }
  .bw-hero > .bw-hero__lead { order: -1; }
  .bw-hero > .bw-vertrauen { order: 1; }
  /* links fünf Zeilen dicht untereinander, die letzte Zeile (1fr) nimmt den Rest der hohen rechten Spalte auf */
  .bw-hero { grid-template-rows: auto auto repeat(5, auto) 1fr; }
  .bw-hero > .bw-hero__bild { grid-column: 2; grid-row: 3 / 9; align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; }
  .bw-hero__bild > .lpx-hero__buehne { min-height: clamp(260px, 33vh, 360px); }
  .bw-hero .bw-plan--hero .bw-feld { aspect-ratio: 1.45 / 1; }
  .bw-hero__bild > .bw-plan { position: relative; z-index: 1; margin-top: -4.5rem; }
}
.bw-hero__punkte { margin-top: 0.2rem; }
.bw-hero__punkte li { font-weight: 500; }
html[data-contrast="high"] .bw-hero__punkte li { text-shadow: 0 0 12px var(--bg), 0 0 3px var(--bg); }

/* Standbild der Szene: Ringe, Karten auf dem Ablauf-Ring, eine beantwortete Karte mit Haken */
.bw-standbild { width: min(88%, 460px); max-height: 92%; filter: drop-shadow(0 0 2px color-mix(in srgb, var(--c-accent) 70%, transparent)); }
.bw-standbild ellipse, .bw-standbild rect { fill: none; stroke-linecap: round; }
.bw-standbild__p ellipse { stroke: var(--c-accent); stroke-width: 1.5; stroke-dasharray: 0.01 2.6; }
.bw-standbild__w ellipse { stroke: var(--c-ring2); stroke-width: 1.5; stroke-dasharray: 0.01 2.6; }
.bw-standbild__karten rect, .bw-standbild__antwort { stroke: var(--c-light); stroke-width: 0.9; stroke-dasharray: 0.01 1.6; opacity: 0.85; }
.bw-standbild__neu { stroke: var(--c-ring2); stroke-width: 0.9; stroke-dasharray: 0.01 1.6; }
.bw-standbild__haken { fill: none; stroke: var(--c-accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bw-standbild__wartet { stroke: var(--c-ring2); stroke-width: 1.2; stroke-dasharray: 0.01 1.4; }
.bw-standbild--leise { opacity: 0.35; }
.bw-standbild__fall rect, .bw-standbild__fall line { fill: none; stroke: color-mix(in srgb, var(--c-light) 45%, var(--c-dark)); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 0.01 2.2; }

/* ---------- Gemeinsames: Mono-Labels, Textlinks mit WhatsApp-Symbol ---------- */
.bw-label { margin: 0 0 1.4rem; max-width: 40rem; font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--fg); }
.bw-label--unten { margin: 2rem 0 0; font-family: var(--font-display); font-size: clamp(1.25rem, 4.6vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--accent-ink); }
.bw-klein { margin: 1.2rem 0 0; font-size: 1.0625rem; color: var(--fg-muted); }
.bw-textlink { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--wa); text-underline-offset: 0.3em; }
.bw-textlink .ico-wa { width: 1.15em; height: 1.15em; flex: none; color: var(--wa); }
.bw-textlink:hover { text-decoration-thickness: 2px; }
.bw-notiz { margin: 1.6rem 0 0; max-width: 34rem; font-family: var(--font-body); font-size: 1.125rem; font-weight: 500; line-height: 1.5; letter-spacing: normal; color: var(--fg); }

/* Kapitel-Titel ab 901 px: Kopf über die ganze Breite (Titel, darunter die Einleitung), Größe so gewählt,
   dass auch die längste Zeile („Wer schnell antwortet, hat die besseren Karten.“, rund 21.3em) bei 901 bis 1440 px
   und breiter einzeilig bleibt. Jeder Titel hat damit genau zwei Zeilen. H1 bleibt größer (4.5vw). */
@media (min-width: 901px) {
  .lp--bewerbungen .chapter__head { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; align-items: start; }
  .lp--bewerbungen .chapter__title { font-size: clamp(2.2rem, 4.1vw, 4.4rem); line-height: 1; }
  .lp--bewerbungen .chapter__intro { max-width: 36rem; }
}
/* 641 bis 900 px: Kopf ist einspaltig, Titel nach Breite (Zeilen bis 14em), die zwei langen Titel kleiner, damit es zwei Zeilen bleiben */
@media (min-width: 641px) and (max-width: 900px) {
  .lp--bewerbungen .chapter__title { font-size: 6.1vw; }
  .lp--bewerbungen #warten .chapter__title { font-size: 4.1vw; }
  .lp--bewerbungen #beweis .chapter__title { font-size: 4.9vw; }
}

/* Kleine Bühne neben einer Überschrift (nur Desktop) */
.bw-kopf-buehne { display: none; }
@media (min-width: 901px) {
  .bw-kopf-buehne { display: block; position: absolute; right: var(--pad); top: clamp(2.5rem, 6vh, 4.5rem); width: min(22vw, 320px); aspect-ratio: 1; min-height: 0; }
}

/* Handy: in „Kennst du das?“ und „Deine Entscheidung“ sitzt die Szene leise hinter dem Kapitelkopf (kein eigener Block,
   die Seite bleibt kurz). Desktop: die Spur rechts (lpx-mit-spur aus css/lpx.css). */
.bw-kopf-rel { position: relative; }
@media (max-width: 900px) { .bw-kopf-rel { overflow-x: clip; } }   /* die Bühne ragt rechts aus dem Bild, die Seite scrollt trotzdem nie waagrecht */
.lpx-buehne.bw-kopf-handy { position: absolute; z-index: 0; right: calc(-1 * var(--pad) - 12vw); top: clamp(1.2rem, 3.5vh, 2rem); width: min(56vw, 250px); height: min(46vw, 210px); min-height: 0; }
.bw-kopf-rel > .chapter__head { position: relative; z-index: 1; }

/* ---------- A · Dienstplan (Bild aus der Anzeige) ---------- */
.bw-plan { position: relative; margin: 0; padding: 1rem 0.85rem 1.1rem; border: 1px solid var(--line-strong); border-radius: 1.2rem; background: var(--bg); max-width: 60rem; }
.bw-plan__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.bw-plan__kopf > span + span { color: var(--fg-muted); }
/* „Dein Team“: drei besetzte Plätze, zwei leere mit Fragezeichen (bleiben leer, wie in der Anzeige) */
.bw-team-zeile { display: inline-flex; align-items: center; gap: 0.3rem; }
.bw-team-zeile > span:first-child { margin-right: 0.35rem; }
.bw-platz { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: radial-gradient(circle at 50% 37%, var(--fg-muted) 0 19%, transparent 21%), radial-gradient(ellipse 56% 34% at 50% 98%, var(--fg-muted) 0 70%, transparent 73%), color-mix(in srgb, var(--fg) 14%, var(--bg)); }
.bw-platz--leer { display: grid; place-items: center; background: transparent; border: 1px dashed var(--c-accent); color: var(--accent-ink); font: 700 0.7rem/1 var(--font-display); letter-spacing: 0; }
@media (min-width: 901px) { .bw-platz { width: 1.45rem; height: 1.45rem; } }
.bw-plan__raster { display: grid; grid-template-columns: 2.4rem repeat(7, minmax(0, 1fr)); gap: 5px; align-items: center; }
.bw-plan__tag { text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); padding-bottom: 0.2rem; }
.bw-plan__tag--we { color: var(--accent-ink); }
.bw-plan__zeile { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.bw-feld { position: relative; display: grid; place-items: center; aspect-ratio: 1.05 / 1; border-radius: 0.6rem; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.bw-feld--besetzt i { width: 42%; height: 3px; border-radius: 2px; background: var(--line-strong); }
.bw-feld--du { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.bw-feld__roll { position: absolute; inset: 0; display: grid; grid-template-rows: 100% 100%; transform: translateY(-100%); }
.bw-feld__roll b { display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: clamp(0.85rem, 4vw, 1.7rem); letter-spacing: -0.02em; }
.bw-feld__roll b:first-child { font-family: var(--font-mono); font-weight: 400; font-size: clamp(0.5rem, 2.3vw, 0.8rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.bw-plan__satz { margin: 1rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 5.4vw, 2.4rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--fg); }
@media (min-width: 701px) {
  .bw-plan { padding: 1.6rem 1.6rem 1.7rem; }
  .bw-plan__raster { grid-template-columns: 3.6rem repeat(7, minmax(0, 1fr)); gap: 10px; }
  .bw-plan__zeile { font-size: 0.75rem; }
  .bw-plan__tag { font-size: 0.78rem; }
}
/* Im Hero kompakt: Handy rund 190 px hoch, Desktop in der rechten Spalte */
.bw-plan--hero { padding: 0.85rem 0.8rem 0.95rem; max-width: none; }
.bw-plan--hero .bw-plan__kopf { margin-bottom: 0.6rem; }
.bw-plan--hero .bw-plan__satz { margin-top: 0.7rem; font-size: clamp(1.15rem, 4.6vw, 1.6rem); }
@media (min-width: 701px) {
  .bw-plan--hero { padding: 1.1rem 1.1rem 1.2rem; }
  .bw-plan--hero .bw-plan__raster { grid-template-columns: 2.8rem repeat(7, minmax(0, 1fr)); gap: 7px; }
}
@media (min-width: 901px) {
  .bw-plan--hero .bw-feld__roll b { font-size: clamp(0.9rem, 1.7vw, 1.5rem); }
  .bw-plan--hero .bw-feld__roll b:first-child { font-size: clamp(0.5rem, 0.75vw, 0.75rem); }
  .bw-plan--hero .bw-plan__satz { font-size: clamp(1.2rem, 1.7vw, 1.7rem); }
}
/* Abspielen: offen rollt zu DU, nacheinander wie im Video */
html.lpx-anim .bw-plan .bw-feld--du { transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(0.3s + var(--i) * 0.28s); }
html.lpx-anim .bw-plan .bw-feld__roll { transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(0.3s + var(--i) * 0.28s); }
html.lpx-anim .bw-plan .bw-plan__satz { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: 2.3s; }
html.lpx-anim .bw-plan:not(.is-spiel) .bw-feld--du { background: var(--card); border-color: var(--line); box-shadow: none; transform: scale(0.96); }
html.lpx-anim .bw-plan:not(.is-spiel) .bw-feld__roll { transform: translateY(0); }
html.lpx-anim .bw-plan:not(.is-spiel) .bw-plan__satz { opacity: 0; transform: translateY(10px); }

/* ---------- B · Bewerbungs-Karte (wiederkehrender Gegenstand) ---------- */
.bw-karte { position: relative; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 0.8rem 2rem 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--bg); text-align: left; color: var(--fg); font: inherit; }
.lpx .bw-karte { background: var(--bg); }
.bw-karte__bild { width: 2.4rem; height: 2.4rem; fill: none; stroke: var(--fg-muted); stroke-width: 1.4; stroke-linecap: round; }
.bw-karte__titel { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; }
.bw-karte__meta { display: block; margin-top: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.bw-karte__punkt { position: absolute; right: 0.9rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--c-ring2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-ring2) 22%, transparent); }
.bw-karte--neu { border-color: var(--c-ring2); }
.bw-karte--wartet .bw-karte__punkt { background: var(--fg-muted); box-shadow: none; }
.bw-karte--weg { opacity: 0.45; filter: grayscale(1); }
.bw-karte--weg .bw-karte__titel { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--fg-muted); }

/* ---------- Verlauf Montag, Dienstag, Donnerstag ---------- */
.bw-verlauf { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 34rem; }
.bw-verlauf::before { content: ""; position: absolute; left: 0.3rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--line); }
.bw-verlauf__tag { position: relative; display: grid; gap: 0.45rem; padding-left: 1.6rem; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.bw-verlauf__tag::before { content: ""; position: absolute; left: 0; top: 0.35rem; width: 0.65rem; height: 0.65rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--bg); }
.bw-verlauf__name { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.bw-verlauf .bw-karte { transition: opacity 0.7s var(--ease), filter 0.7s var(--ease), transform 0.7s var(--ease), border-color 0.5s; }
@keyframes bw-warten { 50% { opacity: 0.3; } }
.bw-verlauf[data-stufe="2"] .bw-karte--wartet .bw-karte__punkt { animation: bw-warten 1.25s ease-in-out infinite; }
html.lpx-anim .bw-verlauf[data-stufe="0"] .bw-verlauf__tag,
html.lpx-anim .bw-verlauf[data-stufe="1"] .bw-verlauf__tag:nth-child(n + 2),
html.lpx-anim .bw-verlauf[data-stufe="2"] .bw-verlauf__tag:nth-child(3) { opacity: 0.22; transform: translateY(6px); }
html.lpx-anim .bw-verlauf[data-stufe]:not([data-stufe="3"]) .bw-karte--weg { opacity: 1; filter: none; }
html.lpx-anim .bw-verlauf[data-stufe]:not([data-stufe="3"]) .bw-karte--weg .bw-karte__titel { text-decoration-color: transparent; color: var(--fg); }
@media (min-width: 901px) { html.lpx-anim .bw-verlauf[data-stufe="3"] .bw-karte--weg { transform: translateX(12px); } }
.bw-karte--weg .bw-karte__titel { transition: color 0.6s, text-decoration-color 0.6s; }
@media (min-width: 901px) { .bw-verlauf { gap: 1.3rem; } .bw-karte__titel { font-size: 1.1rem; } }

/* ---------- Kennst du das? Antippbare Karten ---------- */
.bw-tipp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.lpx .bw-tipp__k { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); align-items: center; gap: 0.85rem; width: 100%; min-height: 56px; padding: 0.85rem 1rem; border: 1px solid var(--line-strong); border-radius: 0.9rem; background: var(--bg); color: var(--fg); font: 500 1.0625rem/1.35 var(--font-body); text-align: left; cursor: pointer; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease), transform 0.25s var(--ease); -webkit-tap-highlight-color: transparent; }
.bw-tipp__box { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 0.45rem; border: 1.5px solid var(--line-strong); transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease); }
.bw-tipp__box svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--c-on-accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.35s var(--ease); }
.lpx .bw-tipp__k[aria-pressed="true"] { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 14%, var(--bg)); }
.bw-tipp__k[aria-pressed="true"] .bw-tipp__box { background: var(--c-accent); border-color: var(--c-accent); }
.bw-tipp__k[aria-pressed="true"] .bw-tipp__box svg { stroke-dashoffset: 0; }
.bw-tipp__k:active { transform: scale(0.98); }
.bw-tipp__k:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lpx .bw-tipp__k:hover { border-color: var(--fg); } }
.bw-tipp__zaehler { margin: 1rem 0 0; min-height: 1.5em; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.015em; color: var(--accent-ink); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.bw-tipp__zaehler:empty { opacity: 0; transform: translateY(8px); }
.bw-tipp + .bw-tipp__zaehler + .lpx-cta { margin-top: 1rem; }
@media (min-width: 701px) { .bw-tipp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- So läuft's: Handy-Bilder ---------- */
.bw-sogehts .chapter__head { padding-right: 0; }
.bw-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6rem; }
.bw-schritt { display: grid; gap: 1.1rem; align-content: start; }
.bw-schritt__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.bw-schritt h3, .bw-blick h3 { margin: 0.4rem 0 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.12; letter-spacing: -0.02em; }
.bw-schritt p, .bw-blick p { margin: 0; color: var(--fg-muted); max-width: 30rem; }
.bw-handy { position: relative; width: min(100%, 18rem); padding: 0.55rem 0.55rem 1.9rem; border: 1px solid var(--line-strong); border-radius: 2rem; background: var(--bg); box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--c-accent) 60%, transparent); }
.bw-handy::before { content: ""; position: absolute; left: 50%; top: 0.95rem; width: 3.4rem; height: 0.32rem; margin-left: -1.7rem; border-radius: 1rem; background: var(--line-strong); z-index: 1; }
.bw-handy__screen { position: relative; display: grid; align-content: start; gap: 0.5rem; height: 22rem; padding: 1.7rem 0.85rem 0.9rem; border-radius: 1.55rem; background: color-mix(in srgb, var(--c-dark) 86%, var(--c-light)); overflow: hidden; }
.bw-tag { position: absolute; right: 1.2rem; bottom: 0.6rem; z-index: 2; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.bw-balken { display: block; border-radius: 0.5rem; background: color-mix(in srgb, var(--fg) 10%, transparent); }
.bw-balken--post { height: 2.6rem; }
.bw-knopf { display: grid; place-items: center; grid-auto-flow: column; gap: 0.4rem; min-height: 2.3rem; padding: 0 0.9rem; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; font-size: 0.85rem; position: relative; }
.bw-knopf__haken { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 0; }
/* 1 Stellen-Karte im Feed */
.bw-post { display: grid; gap: 0.55rem; padding: 0.7rem; border-radius: 0.9rem; border: 1px solid var(--line); background: var(--bg); }
.bw-post__kopf { display: flex; align-items: center; gap: 0.5rem; }
.bw-post__kopf b { display: block; font-size: 0.8rem; }
.bw-post__kopf small { display: block; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); }
.bw-post__logo { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid var(--c-accent); }
.bw-post__bild { display: grid; gap: 0.2rem; padding: 0.9rem 0.8rem; border-radius: 0.6rem; background: linear-gradient(140deg, color-mix(in srgb, var(--c-accent) 30%, var(--bg)), var(--bg)); }
.bw-post__bild span { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg); }
.bw-post__bild b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -0.02em; }
.bw-post__entgelt { margin: 0 !important; font-size: 0.72rem !important; line-height: 1.35; color: var(--fg-muted); }
/* 2 Kurzformular */
.bw-s__titel { font-family: var(--font-display); font-size: 1.1rem; }
.bw-feld2 { display: grid; gap: 0.25rem; }
.bw-feld2 small { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.bw-feld2 > i { display: block; height: 1.75rem; border-radius: 0.5rem; border: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--fg) 22%, transparent) 0 55%, transparent 55%) 0.6rem 50% / calc(100% - 1.2rem) 0.32rem no-repeat; }
.bw-wahl2 { display: flex; gap: 0.4rem; }
.bw-wahl2 em { font-style: normal; display: grid; place-items: center; min-width: 3.2rem; height: 1.9rem; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 0.78rem; }
.bw-wahl2__ja { background: var(--c-accent); border-color: var(--c-accent) !important; color: var(--c-on-accent); font-weight: 700; }
.bw-knopf--voll { margin-top: 0.3rem; }
/* 3 Automatische Mail an den Bewerber, darin der Termin */
.bw-mail { display: grid; gap: 0.4rem; padding: 0.75rem 0.75rem 0.8rem; border-radius: 0.9rem; border: 1px solid var(--line); background: var(--bg); }
.bw-mail__zeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.35rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); font-size: 0.8rem; line-height: 1.3; }
.bw-mail__zeile small { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.bw-mail__zeile b { font-weight: 700; }
.bw-mail__betreff b { font-family: var(--font-display); font-size: 0.92rem; letter-spacing: -0.01em; }
.bw-mail__haken { width: 1.25rem; height: 1.25rem; margin-left: auto; align-self: center; fill: none; stroke: var(--c-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bw-mail__haken path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.bw-schritt .bw-mail__text { margin: 0.1rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--fg); }
.bw-termine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.bw-termine span { display: grid; place-items: center; height: 2.1rem; border-radius: 999px; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.66rem; white-space: nowrap; }
.bw-termine__wahl { background: var(--c-accent); border-color: var(--c-accent) !important; color: var(--c-on-accent); font-weight: 600; }
.bw-s3__fix { margin: 0.2rem 0 0 !important; padding: 0.55rem 0.7rem; border-radius: 0.6rem; background: var(--accent-soft); font-size: 0.78rem !important; color: var(--fg) !important; }

/* Abspielen der Handy-Bilder (einmal, wenn sichtbar) */
@keyframes bw-druck { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.93); } }
@keyframes bw-kreis { from { transform: scale(0); opacity: 0.55; } to { transform: scale(2.2); opacity: 0; } }
.bw-knopf--druck::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%; background: var(--c-light); opacity: 0; pointer-events: none; }
html.lpx-anim .bw-handy.is-spiel .bw-knopf--druck { animation: bw-druck 0.35s var(--ease) 1.4s 1 both; }
html.lpx-anim .bw-handy.is-spiel .bw-knopf--druck::after { animation: bw-kreis 0.7s var(--ease) 1.45s 1 both; }
html.lpx-anim .bw-handy .bw-post, html.lpx-anim .bw-handy .bw-balken--post { transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-post { transform: translateY(40px) scale(0.96); opacity: 0; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-balken--post { transform: translateY(40px); }
html.lpx-anim .bw-handy .bw-feld2 > i { transition: background-size 0.45s var(--ease); }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-feld2 > i { background-size: 0 0.32rem; }
html.lpx-anim .bw-handy .bw-feld2:nth-of-type(1) > i { transition-delay: 0.1s; }
html.lpx-anim .bw-handy .bw-feld2:nth-of-type(2) > i { transition-delay: 0.45s; }
html.lpx-anim .bw-handy .bw-feld2:nth-of-type(3) > i { transition-delay: 0.8s; }
html.lpx-anim .bw-handy .bw-wahl2__ja { transition: background-color 0.25s, color 0.25s, border-color 0.25s; transition-delay: 1.3s; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-wahl2__ja { background: transparent; color: var(--fg); border-color: var(--line-strong) !important; font-weight: 400; }
html.lpx-anim .bw-handy.is-spiel .bw-knopf--voll { animation: bw-druck 0.35s var(--ease) 1.8s 1 both; }
html.lpx-anim .bw-handy .bw-knopf__haken { transition: stroke-dashoffset 0.35s var(--ease) 2.1s; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-knopf__haken { stroke-dashoffset: 22; }
html.lpx-anim .bw-handy .bw-mail { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s var(--ease); transform-origin: 50% 0; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-mail { transform: translateY(-14px) scale(0.94); opacity: 0; }
html.lpx-anim .bw-handy .bw-mail__haken path { transition: stroke-dashoffset 0.4s var(--ease) 0.4s; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-mail__haken path { stroke-dashoffset: 22; }
html.lpx-anim .bw-handy .bw-termine span, html.lpx-anim .bw-handy .bw-s3__fix { transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s; }
html.lpx-anim .bw-handy .bw-termine span:nth-child(1) { transition-delay: 0.55s; }
html.lpx-anim .bw-handy .bw-termine span:nth-child(2) { transition-delay: 0.67s, 0.67s, 1.4s, 1.4s, 1.4s; }
html.lpx-anim .bw-handy .bw-termine span:nth-child(3) { transition-delay: 0.79s; }
html.lpx-anim .bw-handy .bw-s3__fix { transition-delay: 1.05s; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-termine span, html.lpx-anim .bw-handy:not(.is-spiel) .bw-s3__fix { transform: translateY(10px); opacity: 0; }
html.lpx-anim .bw-handy:not(.is-spiel) .bw-termine__wahl { background: transparent; color: var(--fg); border-color: var(--line-strong) !important; font-weight: 400; }

@media (min-width: 701px) and (max-width: 900px) { .bw-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .bw-handy__screen.bw-s3 { height: auto; padding-bottom: 1.4rem; } }
@media (min-width: 901px) {
  .bw-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--lpx-gap); }
  .bw-handy { width: min(100%, 20rem); }
  .bw-handy__screen { height: 23.5rem; }
}

/* ---------- Schritt 04: Übersicht zum Ausprobieren ---------- */
.bw-blick { display: grid; gap: 1.4rem; margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1.6rem; border-top: 1px solid var(--line); }
.bw-hilfe { margin-top: 0.8rem !important; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--accent-ink) !important; }
.bw-blick .bw-textlink { margin-top: 0.6rem; }
.bw-board { position: relative; display: grid; gap: 0.9rem; padding: 1rem 0.85rem 2.4rem; border: 1px solid var(--line-strong); border-radius: 1.2rem; background: var(--bg); }
.bw-board__spalte { display: grid; align-content: start; gap: 0.55rem; padding-top: 0.7rem; border-top: 1px solid var(--line); transition: border-color 0.4s var(--ease); }
.bw-board__spalte.is-ziel { border-top-color: var(--c-accent); }
.bw-board__kopf { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.bw-board__zahl { display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--line-strong); font-weight: 500; color: var(--fg); transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease); }
.bw-board__zahl.is-neu { background: var(--c-accent); color: var(--c-on-accent); transform: scale(1.15); }
.bw-board__liste { display: grid; gap: 0.5rem; min-height: 3.6rem; }
.bw-karte--board { width: 100%; min-height: 56px; cursor: pointer; transition: border-color 0.3s var(--ease), transform 0.25s var(--ease); -webkit-tap-highlight-color: transparent; }
.bw-karte--board:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.bw-karte--board:disabled { cursor: default; opacity: 0.6; }
@media (hover: hover) and (pointer: fine) { .bw-karte--board:not(:disabled):hover { border-color: var(--c-accent); transform: translateY(-2px); } }
.bw-karte--erinnerung { border-color: var(--c-accent); }
.bw-karte--erinnerung .bw-karte__meta { color: var(--accent-ink); }
.bw-karte--erinnerung .bw-karte__punkt { background: var(--c-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.bw-meldung { position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.7rem; display: flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; line-height: 1.3; color: var(--accent-ink); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.bw-meldung i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
@keyframes bw-zweimal { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.3; } }
.bw-board.is-meldung .bw-meldung i { animation: bw-zweimal 1.2s ease-in-out 1; }
html.lpx-anim .bw-board:not(.is-meldung) .bw-meldung { opacity: 0; transform: translateY(10px); }
.bw-board .bw-tag { right: 0.9rem; bottom: auto; top: -0.55rem; padding: 0 0.4rem; background: var(--bg); }
@media (min-width: 701px) {
  .bw-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; padding: 1.3rem 1.1rem 2.8rem; }
  .bw-board__liste { min-height: 14rem; align-content: start; }
}
@media (min-width: 901px) {
  .bw-blick { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--lpx-gap); align-items: start; }
  .bw-blick h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
}

/* ---------- Entscheidung: zwei Spalten ---------- */
.bw-wahl { display: grid; gap: 1.8rem; }
.bw-wahl__titel { margin: 0 0 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.bw-wahl__spalte--du .bw-wahl__titel { color: var(--accent-ink); border-color: var(--c-accent); }
.bw-du { list-style: none; margin: 0; padding: 0; display: grid; }
.bw-du li { position: relative; padding: 0.62rem 0 0.62rem 1.5rem; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--fg); }
.bw-du li:first-child { padding-top: 0.1rem; }
.bw-du li::before { content: ""; position: absolute; left: 0.1rem; top: calc(50% - 0.3rem); width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--c-accent); }
.bw-du li:first-child::before { top: calc(50% - 0.55rem); }
.bw-du li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--c-accent); transform-origin: left; transform: scaleX(1); }
html.lpx-anim .bw-du li::after { transition: transform 0.5s var(--ease); }
html.lpx-anim .bw-du li:nth-child(1)::after { transition-delay: 1.2s; } html.lpx-anim .bw-du li:nth-child(2)::after { transition-delay: 1.45s; }
html.lpx-anim .bw-du li:nth-child(3)::after { transition-delay: 1.7s; } html.lpx-anim .bw-du li:nth-child(4)::after { transition-delay: 1.95s; }
html.lpx-anim .bw-du:not(.is-spiel) li::after { transform: scaleX(0); }
.bw-wahl__saetze { margin-top: 1.8rem; max-width: 36rem; }
.bw-wahl__saetze p { margin: 0 0 0.6rem; color: var(--fg-muted); }
.bw-wahl__saetze p:first-child { color: var(--fg); font-weight: 600; font-size: 1.15rem; }
@media (min-width: 701px) { .bw-wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; } .bw-wahl__spalte + .bw-wahl__spalte { padding-left: 1.6rem; border-left: 1px solid var(--line); } .bw-wahl__spalte:first-child { padding-right: 1.6rem; } }

/* ---------- Beweis: NABBA mit echten Bildschirmaufnahmen ---------- */
.bw-ref--haupt { gap: 1.4rem 2rem; }
.bw-ref__text { display: grid; gap: 0.7rem; align-content: start; }
.bw-ref__text .lpx-ref__art { margin-top: 0; }
.bw-screens { position: relative; padding-bottom: 12%; margin-right: 6%; }
.bw-screens__laptop { width: 100%; }
.bw-screens__handy { position: absolute; right: -6%; bottom: 0; width: 30%; margin: 0; aspect-ratio: 390 / 844; border: 5px solid var(--c-panel); outline: 1px solid var(--line-strong); border-radius: 1.4rem; overflow: hidden; background: #000; box-shadow: 0 24px 48px -24px rgb(0 0 0 / 0.8); }
.bw-screens__handy img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bw-ref__klein { width: 100%; max-width: 28rem; }
/* Beleg im Fuß der Referenz: ganzer Satz, darum normal lesbar statt Mono-Versalien */
.lp--bewerbungen .lpx-ref__beleg { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.45; letter-spacing: normal; text-transform: none; color: var(--fg-muted); }
@media (min-width: 901px) {
  .lpx-ref.bw-ref--haupt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: 2.4rem 0; }
  .bw-refs .lpx-ref:has(.bw-ref__klein) { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 4fr); align-items: center; }
  .bw-refs .lpx-ref:not(.bw-ref--haupt):not(:has(.bw-ref__klein)) { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
  .bw-ref__klein { justify-self: end; }
}

/* ---------- Team, Zusammenarbeit ---------- */
.bw-zusammen { display: grid; gap: 1rem; margin-top: clamp(2.6rem, 7vh, 4.5rem); }
.bw-zusammen__text { margin: 0; max-width: 34rem; color: var(--fg-muted); }
@media (min-width: 901px) { .bw-zusammen { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--lpx-gap); } .bw-zusammen .chapter__num { grid-column: 1 / -1; } }

/* ---------- Ablauf: Textlink im ersten Schritt; Nummer 01 auf gefülltem Kreis lesbar (lpx.css färbt .is-an Eisblau) ---------- */
.lp--bewerbungen .lpx-schritt--eins .lpx-schritt__num { color: var(--on-accent); }
.lpx-schritt .bw-textlink { margin-top: 0.4rem; }

/* ---------- Schluss: Branchen als WhatsApp-Links über den Knöpfen (der Bereich steht dann schon in der Nachricht) ---------- */
.bw-branchen__frage { margin: 0.2rem 0 0; font-size: 1.0625rem; color: var(--fg-muted); }
.bw-branchen { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 62rem; }
@media (max-width: 700px) {
  .bw-branchen { gap: 0.4rem; }
  .bw-branchen .bw-branche { min-height: 44px; gap: 0.4rem; padding: 0.35rem 0.8rem 0.35rem 0.7rem; font-size: 0.95rem; }
  .bw-branchen .bw-branche .ico-wa { width: 1rem; height: 1rem; }
}
.bw-branche { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.5rem 1.15rem 0.5rem 0.95rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg); font-weight: 600; font-size: 1rem; text-decoration: none !important; transition: border-color 0.3s var(--ease), transform 0.25s var(--ease), background-color 0.3s var(--ease); }
.bw-branche .ico-wa { width: 1.1rem; height: 1.1rem; color: var(--wa); }
.bw-branche:active { transform: scale(0.96); }
.bw-branche:focus-visible { outline: 2px solid var(--wa); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bw-branche:hover { border-color: var(--wa); transform: translateY(-2px); } }

/* ---------- Fair und sauber (Kurzblock in der Entscheidung), Fragen, Schluss, Panel ---------- */
.bw-fair { margin-top: 2rem; max-width: 40rem; }
.bw-fair .bw-wahl__titel { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; color: var(--fg); }
.bw-fair .lpx-haken li { font-size: 1.0625rem; }
/* WhatsApp-Symbol und Text auf einer Höhe (Textlink ist 44 px hoch) */
.bw-frage-karte { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.6rem; margin: 1.4rem 0 0; color: var(--fg-muted); }
.bw-frage-karte__t { margin: 0; }
@media (min-width: 901px) {
  .bw-fragen { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--lpx-gap); align-items: start; }
  .lp--bewerbungen .bw-fragen .lpx-faq { padding-right: 0; max-width: 52rem; }
  .bw-frage-karte { position: sticky; top: 7rem; display: grid; justify-items: start; gap: 0.3rem; margin: 0; padding: 1.3rem 1.4rem 1rem; border: 1px solid var(--line-strong); border-radius: 1.1rem; }
  .bw-frage-karte__t { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
}

/* ---------- Video aus der Werbung: am Handy ein Vorschaubild mit Text daneben, beim Tippen groß (seite.js) ---------- */
.bw-video { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: 1rem 1.2rem; }
.bw-video .lpx-video.bw-video__spieler { width: 100%; max-width: none; margin: 0; aspect-ratio: 4 / 5; border-color: var(--line); border-radius: 0.9rem; }
.bw-video__titel { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--fg); }
.bw-video__meta { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--fg-muted); }
.bw-video__text .bw-textlink { margin-top: 0.3rem; }
.bw-video.is-offen { grid-template-columns: minmax(0, 1fr); justify-items: start; }
.bw-video.is-offen .bw-video__spieler { width: min(100%, 340px); }
@media (max-width: 900px) {
  .bw-video:not(.is-offen) .lpx-video__start::before { width: 44px; background: transparent; border: 2px solid var(--c-accent); box-shadow: none; }
  .bw-video:not(.is-offen) .lpx-video__start::after { width: 0.85rem; background: var(--c-accent); transform: translate(-38%, -50%); }
  .bw-video:not(.is-offen) .lpx-video__start span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 901px) {
  .bw-video, .bw-video.is-offen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--lpx-gap); align-items: end; justify-items: stretch; }
  .bw-video, .bw-video.is-offen { align-items: center; }
  .bw-video .lpx-video.bw-video__spieler, .bw-video.is-offen .bw-video__spieler { width: min(100%, 44svh); }
  .bw-video__titel { font-size: clamp(1.4rem, 2vw, 1.9rem); }
}
.bw-meta { opacity: 0.85; }
.bw-panel-hinweis { margin: 0.6rem 0 0; font-size: 0.8rem; }

/* ---------- Handy: Kopfzeile und Dock voll deckend, nichts scheint durch ---------- */
@media (max-width: 700px) {
  .lp--bewerbungen.lpx .nav::before { background: var(--bg); }
  .lp--bewerbungen.lpx .dock { background: var(--c-panel); }
  .lp--bewerbungen.lpx .dock__form { background: color-mix(in srgb, var(--c-light) 8%, var(--c-panel)); }
}
/* ---------- Handy: H1 bleibt die größte Zeile (Kapitel- und Schluss-Titel etwas kleiner) ---------- */
@media (max-width: 640px) {
  .lp--bewerbungen .chapter__title { font-size: clamp(1.5rem, 6.8vw, 1.9rem); }
  .lp--bewerbungen .contact__title { max-width: none; font-size: clamp(1.55rem, 7vw, 2rem); }
}
/* Schluss-Titel ab 641 px: volle Breite statt 16ch, Größe nach der längeren Zeile (rund 14em), damit es zwei Zeilen bleiben */
@media (min-width: 641px) {
  .lp--bewerbungen .contact__title { max-width: none; font-size: min(clamp(2.6rem, 6vw, 6.4rem), calc((100vw - 2 * var(--pad)) / 15)); }
}

/* ---------- Handy: Kapitel enger, damit die Seite für Werbeverkehr kurz bleibt (Ziel höchstens 11.500 px bei 390 px) ---------- */
@media (max-width: 900px) {
  .lp--bewerbungen .chapter { padding: 2rem var(--pad) 1rem; }
  .lp--bewerbungen .chapter__head { gap: 1.1rem; padding-top: 1.5rem; }
  .lp--bewerbungen .lpx-inhalt { margin-top: 1.4rem; }
  .lp--bewerbungen .lpx-schluss__buehne { height: clamp(130px, 18svh, 170px); }
  .lp--bewerbungen .lpx-schluss .contact__text { margin-bottom: 1.4rem; }
}
@media (max-width: 700px) {
  /* Handy-Bilder in „So läuft's“: Schritt 01 bis 03 nebeneinander zum Wischen (wie am Desktop nebeneinander), der
     nächste schaut rechts herein. Höhe nach Inhalt, ohne Füll-Balken. Die Seite selbst scrollt nie waagrecht. */
  .bw-schritte { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(80%, 17.5rem); gap: 1rem; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--pad)); padding: 0.2rem var(--pad) 0.6rem; scroll-padding-inline: var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .bw-schritte::-webkit-scrollbar { display: none; }
  .bw-schritte:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
  .bw-schritt { gap: 0.9rem; scroll-snap-align: start; }
  .bw-handy { width: 100%; padding-bottom: 1.7rem; }
  .bw-wisch { display: flex; align-items: center; gap: 0.7rem; margin: 0.3rem 0 0; font-size: 0.9375rem; color: var(--fg-muted); }
  .bw-wisch__punkte { display: inline-flex; gap: 0.35rem; }
  .bw-wisch__punkte i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line-strong); transition: background-color 0.3s var(--ease), transform 0.3s var(--ease); }
  .bw-wisch__punkte i.is-an { background: var(--c-accent); transform: scale(1.25); }
  .bw-handy__screen { height: auto; padding: 1.6rem 0.75rem 0.85rem; }
  .bw-balken--post { display: none; }
  .bw-blick { margin-top: 2.2rem; gap: 1.1rem; }
  .lp--bewerbungen .bw-hero { padding-bottom: 1.6rem; }
  .lp--bewerbungen .contact.lpx-schluss { padding-top: 2.4rem; padding-bottom: 4rem; }
  /* Abstände in Entscheidung, Beweis, Team und Übersicht etwas knapper */
  .bw-wahl { gap: 1.4rem; }
  .bw-wahl__saetze { margin-top: 1.4rem; }
  .bw-fair { margin-top: 1.5rem; }
  .lp--bewerbungen .bw-refs .lpx-ref { padding: 1.25rem 0; }
  .lp--bewerbungen #beweis .bw-label { margin-bottom: 1rem; }
  .bw-zusammen { margin-top: 2rem; gap: 0.8rem; }
  .bw-board { gap: 0.75rem; padding-bottom: 2.2rem; }
  .bw-karte--board { padding-block: 0.65rem; }
  /* Passion Bowls: kompakte Zeile, Bildschirm links, Text rechts */
  .bw-refs .lpx-ref:has(.bw-ref__klein) { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); column-gap: 1rem; align-items: start; }
  .bw-refs .lpx-ref:has(.bw-ref__klein) > .bw-ref__klein { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin: 0.3rem 0 0; }
  .bw-refs .lpx-ref:has(.bw-ref__klein) > div { grid-column: 2; }
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .bw-verlauf[data-stufe="2"] .bw-karte--wartet .bw-karte__punkt, .bw-board.is-meldung .bw-meldung i { animation: none; }
  .bw-tipp__box svg { transition: none; }
}