/* seite-bewerber.css – nur /bewerber, nach site.css geladen. Eigene Klassen mit Praefix bw-. Keine Rahmenlinien. */

/* ---------- Clip-Enthuellung: CSS-Vorabzustand hier aus ----------
   site.css setzt [data-clip] vorab auf inset(12% 6%); main.js raeumt nach der Animation das Inline-clip-path
   per clearProps weg -> der CSS-Vorabzustand greift wieder und die Bilder bleiben beschnitten.
   GSAP setzt den Startzustand ohnehin selbst (fromTo, immediateRender) – deshalb auf dieser Seite kein CSS-Vorabzustand.
   Spezifitaet (0,3,1) schlaegt .js:not(.js-ohne) [data-clip] (0,3,0). */
html.js:not(.js-ohne) [data-clip] { clip-path: none; }

/* ---------- Hero: zweiter Chip ---------- */
.bw-chip { left: 30%; top: auto; bottom: 1.5%; gap: .55rem; padding: .4rem 1.05rem .4rem .4rem; font-family: var(--schrift); font-size: .8125rem; font-weight: 600; letter-spacing: .01em; text-transform: none; color: var(--ivory); }
.bw-chip__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--navy-950); background-image: var(--goldfolie); box-shadow: 0 6px 18px -6px rgba(239, 192, 143, .7); }
.bw-chip__icon .icon { width: 1rem; height: 1rem; stroke-width: 2.2; }
@media (max-width: 767px) { .bw-chip { display: none; } }

/* ---------- Drei Schritte (Bogenfotos, Goldfaden) ---------- */
.bw-schritte { padding-block: var(--abschnitt); overflow: clip; }
.bw-schritte__buehne { position: relative; }
.bw-schritte__liste { position: relative; z-index: 1; display: grid; gap: 2.75rem; }
.bw-schritte__linie { display: none; }
.bw-schritte__linie path { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.bw-schritte__spur { stroke: rgba(231, 200, 135, .16); }
.bw-schritte__gold { stroke: var(--gold-400); stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px rgba(239, 192, 143, .65)); }
@media (min-width: 768px) {
  .bw-schritte__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.6vw, 2.75rem); }
  .bw-schritte__linie { display: block; position: absolute; z-index: 0; top: 0; left: calc(var(--rand) * -1); width: calc(100% + var(--rand) * 2); height: 55%; overflow: visible; pointer-events: none; }
}
@media (min-width: 1024px) {
  .bw-schritte__linie { height: 100%; }
  .bw-schritt:nth-child(2) { margin-top: clamp(2.5rem, 5vw, 5rem); }
  .bw-schritt:nth-child(3) { margin-top: clamp(5rem, 10vw, 10rem); }
}

.bw-schritt { position: relative; min-width: 0; }
.bw-schritt__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% var(--radius-l) var(--radius-l) / 40% 40% var(--radius-l) var(--radius-l); box-shadow: var(--schatten-tief), 0 0 80px -34px rgba(220, 170, 120, .4); transition: translate .9s var(--ease-aus), box-shadow .9s var(--ease-aus); }
@media (max-width: 767px) { .bw-schritt__foto { aspect-ratio: 4 / 3; border-radius: 50% 50% var(--radius-l) var(--radius-l) / 34% 34% var(--radius-l) var(--radius-l); } }
.bw-schritt__foto .foto::after { background: linear-gradient(180deg, rgba(0, 1, 24, 0) 42%, rgba(0, 1, 24, .82) 100%), radial-gradient(80% 50% at 50% 0%, rgba(239, 192, 143, .22), rgba(239, 192, 143, 0) 70%); }
.bw-schritt__nr { position: absolute; z-index: 3; left: clamp(1rem, 2.2vw, 1.75rem); bottom: clamp(.25rem, 1vw, .75rem); font-size: clamp(4rem, 2.6rem + 4.4vw, 7.5rem); font-weight: 200; line-height: 1; letter-spacing: -.07em; font-variant-numeric: tabular-nums; color: var(--gold-300); background-image: var(--goldtext); background-size: 200% 100%; background-position: 0% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: transform .9s var(--ease-aus), background-position 1.4s var(--ease-weich); }
.bw-schritt__inhalt { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.4rem .25rem 0; }
@media (min-width: 768px) and (max-width: 1023px) { .bw-schritt__inhalt { grid-template-columns: minmax(0, 1fr); gap: .75rem; } }
.bw-schritt__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--gold-300); background: rgba(220, 170, 120, .12); transition: background .5s, color .4s, transform .7s var(--ease-aus); }
.bw-schritt__icon .icon { width: 1.3rem; height: 1.3rem; }
.bw-schritt__titel { padding-top: .5rem; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--ivory); text-wrap: balance; }
.bw-schritt__text { margin-top: .35rem; max-width: 26rem; color: var(--text-2); }
.bw-schritt:hover .bw-schritt__foto { translate: 0 -8px; box-shadow: var(--schatten-tief), 0 0 100px -30px rgba(239, 192, 143, .55); }
.bw-schritt:hover .foto__img { transform: scale(1.07); filter: saturate(1) contrast(1.04) brightness(1); }
.bw-schritt:hover .foto::before { opacity: 0; }
.bw-schritt:hover .bw-schritt__nr { transform: translateY(-.4rem); background-position: 100% 50%; }
.bw-schritt:hover .bw-schritt__icon { color: var(--navy-950); background: var(--goldfolie); transform: rotate(-10deg) scale(1.05); }

/* ---------- Visitenkarte (statt Personenfoto neben dem Namen) ---------- */
.bw-karte { display: grid; place-items: center; aspect-ratio: auto; min-height: clamp(23rem, 88vw, 32rem); padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem); text-align: center; transition: box-shadow .9s var(--ease-aus); }
@media (min-width: 1024px) { .bw-karte { aspect-ratio: 1 / 1; min-height: 0; } }
.bw-karte:hover { box-shadow: var(--schatten-tief), 0 0 120px -30px rgba(239, 192, 143, .55); }
.bw-karte__inhalt { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; width: 100%; max-width: 27rem; }
.bw-karte__mono { width: clamp(124px, 24vw, 196px); height: auto; filter: drop-shadow(0 14px 40px rgba(220, 170, 120, .35)); transition: filter .8s var(--ease-weich), transform 1s var(--ease-aus); }
.bw-karte:hover .bw-karte__mono { filter: drop-shadow(0 18px 60px rgba(239, 192, 143, .6)); transform: scale(1.04); }
.bw-karte__marke { align-items: center; margin-bottom: 0; text-align: center; }
.bw-karte .marke-zeile__name { font-size: clamp(1.05rem, .9rem + .7vw, 1.5rem); }
.bw-karte__kontakt { display: grid; gap: .3rem; width: 100%; margin-top: .4rem; }
.bw-karte__link { display: flex; align-items: center; justify-content: center; gap: .7rem; min-height: 48px; padding: .35rem .9rem .35rem .4rem; border-radius: 999px; color: var(--text); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: color .4s, background-color .5s; }
.bw-karte__wert { min-width: 0; overflow-wrap: anywhere; }
.bw-karte__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: var(--gold-300); background: rgba(220, 170, 120, .14); transition: background .5s, color .4s, transform .6s var(--ease-aus); }
.bw-karte__icon .icon { width: 1.05rem; height: 1.05rem; }
.bw-karte__link:is(:hover, :focus-visible) { color: var(--champagner-glanz); background-color: rgba(10, 22, 96, .6); }
.bw-karte__link:is(:hover, :focus-visible) .bw-karte__icon { color: var(--navy-950); background: var(--goldfolie); transform: rotate(-10deg); }
.bw-karte__link:focus-visible { border-radius: 999px; }
@media (max-width: 419px) { .bw-karte__link { font-size: .875rem; } }