/* ==========================================================================
   09 – KARRIERE-SEITEN (Arbeiten bei BEUTTER, Offene Stellen,
   Ausbildungsplätze, Bewerbungsformular)
   ========================================================================== */

/* --------------------------------------------------------------------
   HERO – Bewerbungsformular (dunkler Verlauf mit Akzent-Glow, eigene
   Original-Klassen .bw-hero/.bw-crumb/.bw-pos – NICHT mit den Karten-Hero
   der anderen Karriere-Seiten teilen, siehe KORREKTUREN.md Nr. 60)
   -------------------------------------------------------------------- */
.bw-hero { background: linear-gradient(135deg, var(--gray) 0%, #3a4045 100%); color: #fff; padding: 60px 40px 48px; position: relative; overflow: hidden; }
.bw-hero::after { content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: radial-gradient(circle at 70% 40%, rgba(0,150,255,.22), transparent 60%); pointer-events: none; }
.bw-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.bw-crumb { font-size: 13px; color: rgba(255,255,255,.7); margin-bottom: 20px; }
.bw-crumb a { color: rgba(255,255,255,.7); text-decoration: none; }
.bw-crumb a:hover { color: #fff; }
.bw-crumb span { color: #fff; font-weight: 700; }
.bw-hero .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #7cc4ff; margin-bottom: 14px; }
.bw-hero .eyebrow::before { content: ''; width: 20px; height: 2px; background: #7cc4ff; }
.bw-hero h1 { font-size: clamp(2rem,4vw,2.8rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin-bottom: 14px; }
.bw-hero p { font-size: 1.06rem; line-height: 1.65; color: rgba(255,255,255,.85); max-width: 60ch; }
.bw-pos { display: none; align-items: center; gap: 10px; margin-top: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 10px 20px; font-size: .95rem; font-weight: 600; }
.bw-pos.show { display: inline-flex; }
.bw-pos svg { width: 18px; height: 18px; stroke: #7cc4ff; fill: none; stroke-width: 2; }
.bw-pos strong { color: #fff; }
@media (max-width: 900px) {
	.bw-hero { padding: 48px 22px 40px; }
}

/* --------------------------------------------------------------------
   KENNZAHLEN-/FAKTEN-LEISTE (schmales Band direkt unter dem Hero)
   -------------------------------------------------------------------- */
.kar-fakten-leiste { background: var(--blue); padding: 18px 40px; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.kar-fakten-leiste span { font-size: 13.5px; font-weight: 700; color: #fff; }

/* --------------------------------------------------------------------
   HERO – "Arbeiten bei BEUTTER" (eigene Klassen .ab-hero*, 1:1 aus der
   Vorschau; bewusst kein Bild – reiner CSS-Verlauf, genau wie im Original)
   -------------------------------------------------------------------- */
.ab-hero { position: relative; min-height: 480px; display: flex; align-items: center; padding: 96px 40px; background: #182030; overflow: hidden; }
.ab-hero-bg { position: absolute; inset: 0; background:
	radial-gradient(circle at 78% 30%,rgba(0,150,255,.22),transparent 55%),
	linear-gradient(120deg,rgba(18,28,44,.96) 0%,rgba(18,28,44,.85) 55%,rgba(18,28,44,.65) 100%),
	repeating-linear-gradient(45deg,rgba(0,150,255,.03) 0,rgba(0,150,255,.03) 1px,transparent 1px,transparent 46px); }
.ab-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; width: 100%; }
.ab-hero-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5cb8ff; margin-bottom: 26px; }
.ab-hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: blink 2.4s ease-in-out infinite; }
.ab-hero-h1 { font-size: clamp(2.2rem,5.2vw,3.7rem); font-weight: 700; line-height: 1.06; letter-spacing: -.02em; color: #fff; margin-bottom: 24px; animation: fadeUp .8s cubic-bezier(.22,1,.36,1) both; }
.ab-hero-h1 span { color: var(--blue); }
.ab-hero-sub { font-size: clamp(1rem,1.6vw,1.18rem); line-height: 1.65; color: rgba(255,255,255,.82); max-width: 620px; margin-bottom: 36px; animation: fadeUp .8s .12s cubic-bezier(.22,1,.36,1) both; }
.ab-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; animation: fadeUp .8s .22s cubic-bezier(.22,1,.36,1) both; }
@media (max-width: 600px) { .ab-hero { padding: 38px 20px; } }

/* --------------------------------------------------------------------
   WERTE – "Was uns ausmacht" (eigene Klassen .ab-value*, NICHT .werte-*
   – .werte-grid/.werte-card wird auch auf der Seite "Über uns" verwendet
   und hat dort ein anderes Kartendesign, siehe page-ueber-uns.php)
   -------------------------------------------------------------------- */
.ab-values { display: grid; grid-template-columns: repeat(2,1fr); gap: 26px; }
.ab-value { position: relative; padding: 26px 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); transition: box-shadow .2s, transform .2s; }
.ab-value:hover { box-shadow: 0 14px 34px rgba(0,0,0,.08); transform: translateY(-3px); }
.ab-value-num { font-size: 1.9rem; font-weight: 700; color: var(--blue); opacity: .4; line-height: 1; margin-bottom: 12px; }
.ab-value h3 { font-size: 1.18rem; font-weight: 700; color: var(--black); margin-bottom: 9px; letter-spacing: -.01em; }
.ab-value p { font-size: 14.5px; line-height: 1.65; color: var(--gray); }
@media (max-width: 700px) { .ab-values { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   SCHLUSS-CTA – "Arbeiten bei BEUTTER" (eigene Klassen .ab-cta-band*,
   NICHT .cta-band – diese Klasse ist bereits für die Branchen-/
   Kompetenzen-Seiten mit einem anderen Layout belegt, siehe
   assets/css/03-buttons-komponenten.css)
   -------------------------------------------------------------------- */
.ab-cta-band { background: var(--gray); padding: 76px 40px; }
.ab-cta-band-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.ab-cta-band-inner h2 { font-size: clamp(1.7rem,3.2vw,2.4rem); font-weight: 700; color: #fff; letter-spacing: -.01em; margin-bottom: 16px; }
.ab-cta-band-inner p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.8); margin-bottom: 30px; }
.ab-cta-band-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* --------------------------------------------------------------------
   BENEFITS (ab-card) – Klassennamen 1:1 aus der Vorschau übernommen
   (vorher abweichend .benefit-grid/.benefit-card/.ke-icon, siehe KORREKTUREN.md)
   -------------------------------------------------------------------- */
.ab-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 44px; }
.ab-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px 26px; overflow: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, border-color .25s; }
.ab-card::before { content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg,var(--blue),var(--blue-dk)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.ab-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,.12); border-color: rgba(0,150,255,.3); }
.ab-card:hover::before { transform: scaleX(1); }
.ab-card-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--blue-lt); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; transition: background .25s, transform .25s; }
.ab-card-ic svg { width: 28px; height: 28px; color: var(--blue-dk); transition: color .25s; }
.ab-card:hover .ab-card-ic { background: var(--blue); transform: scale(1.06); }
.ab-card:hover .ab-card-ic svg { color: #fff; }
.ab-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--black); letter-spacing: -.01em; margin-bottom: 9px; }
.ab-card p { font-size: 14px; line-height: 1.6; color: var(--gray); }
.stagger-in .ab-card { opacity: 0; transform: translateY(24px); }
.stagger-in.visible .ab-card { opacity: 1; transform: translateY(0); transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i) * .06s); }
@media (max-width: 1024px) { .ab-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 760px) { .ab-grid { grid-template-columns: repeat(2,1fr); gap: 16px; } }
@media (max-width: 460px) { .ab-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   WERTE
   -------------------------------------------------------------------- */
.werte-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.werte-card { padding: 6px 0; }
.werte-nummer { font-size: 1.6rem; font-weight: 700; color: var(--blue-lt); -webkit-text-stroke: 1.5px var(--blue); }
.werte-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--black); margin: 10px 0 8px; }
.werte-card p { font-size: 13.5px; line-height: 1.55; color: var(--gray); }
@media (max-width: 900px) { .werte-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .werte-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   HERO – "Ausbildungsplätze" (echte Klassen .ap-hero* aus der Vorschau,
   Bild+Text-Split; NICHT .kar-hero--split, siehe KORREKTUREN.md)
   -------------------------------------------------------------------- */
.ap-hero { position: relative; background: var(--gray-lt); padding: 80px 40px 72px; border-bottom: 1px solid var(--line); overflow: hidden; }
.ap-hero-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.ap-breadcrumb { font-size: 12px; color: var(--gray); margin-bottom: 22px; }
.ap-breadcrumb a { color: var(--gray); text-decoration: none; }
.ap-breadcrumb a:hover { color: var(--blue); }
.ap-breadcrumb span { color: var(--blue); }
.ap-hero-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.ap-hero-tag::before { content: ''; width: 26px; height: 2px; background: var(--blue); }
.ap-hero h1 { font-size: clamp(2.2rem,5vw,3.5rem); font-weight: 700; line-height: 1.05; color: var(--black); margin-bottom: 16px; }
.ap-hero h1 span { color: var(--blue); }
.ap-hero-sub { font-size: 16.5px; line-height: 1.8; color: var(--gray); max-width: 560px; }
.ap-hero-sub strong { color: var(--blue); font-weight: 700; }
.ap-hero-media { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.18); aspect-ratio: 3/2; }
.ap-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-hero-badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; background: rgba(28,28,27,.78); backdrop-filter: blur(6px); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.ap-hero-badge svg { width: 14px; height: 14px; color: var(--blue); }
@media (max-width: 880px) { .ap-hero-inner { grid-template-columns: 1fr; gap: 32px; } .ap-hero-media { order: -1; aspect-ratio: 16/10; } }

/* --------------------------------------------------------------------
   KENNZAHLEN-LEISTE – "Ausbildungsplätze" (.ap-overview, ersetzt das
   generische .kar-fakten-leiste; feste Icons für Start/Ort/Zeit/Geld)
   -------------------------------------------------------------------- */
.ap-overview { background: var(--blue); padding: 22px 40px; }
.ap-overview-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; justify-content: center; }
.ap-ov-item { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 14px; font-weight: 700; }
.ap-ov-item svg { width: 18px; height: 18px; color: rgba(255,255,255,.85); transition: transform .3s ease; }
.ap-ov-item:hover svg { transform: scale(1.15); }

/* --------------------------------------------------------------------
   AUSBILDUNGSPLÄTZE-/STELLEN-KARTEN (.ap-jobs/.ap-job) – echte Klassen
   aus der Vorschau. Ausbildungsplätze: jede Karte ist immer vollständig
   sichtbar (kein Akkordeon). Offene Stellen: hier IST es im Original ein
   echtes Akkordeon (.ap-job-panel/.ap-job-toggle/.ap-job-meta/.ap-job-date,
   siehe weiter unten) – .ap-cols/.ap-facts werden von beiden Seiten
   gemeinsam genutzt.
   -------------------------------------------------------------------- */
.ap-jobs { padding: 72px 40px; background: var(--white); }
.ap-jobs-inner { max-width: 1000px; margin: 0 auto; }
#benefits { scroll-margin-top: 120px; }
.ap-job { scroll-margin-top: 120px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 28px; background: var(--white); transition: box-shadow .25s, border-color .25s; }
.ap-job:hover { box-shadow: 0 16px 44px rgba(0,0,0,.08); border-color: rgba(0,150,255,.25); }
.ap-job-head { display: flex; align-items: center; gap: 20px; padding: 30px 34px; background: var(--gray-lt); border-bottom: 1px solid var(--line); position: relative; }
.ap-job-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 12px; background: var(--blue-lt); display: flex; align-items: center; justify-content: center; }
.ap-job-icon svg { width: 28px; height: 28px; color: var(--blue); }
.ap-job-titles { flex: 1; min-width: 0; }
.ap-job-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); display: block; margin-bottom: 5px; }
.ap-job-titles h2, .ap-job-titles h3 { font-size: clamp(1.15rem,2.2vw,1.5rem); font-weight: 700; color: var(--black); line-height: 1.2; }
.ap-job-start { flex: 0 0 auto; text-align: right; }
.ap-job-start-badge { display: inline-block; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.ap-job-body { padding: 32px 34px; }
.ap-job-intro { font-size: 15.5px; line-height: 1.8; color: var(--gray); margin-bottom: 8px; }
.ap-job-areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px; }
.ap-job-area { font-size: 13px; font-weight: 700; color: var(--blue); background: var(--blue-lt); padding: 6px 14px; border-radius: 8px; }
.ap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 8px; }
.ap-col h3, .ap-col h4 { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--black); margin-bottom: 16px; display: flex; align-items: center; gap: 9px; }
.ap-col ul { list-style: none; padding: 0; margin: 0; }
.ap-col li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.6; color: var(--gray); margin-bottom: 11px; }
.ap-col li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue-lt); border: 3px solid var(--blue); }
.ap-offer { margin-top: 8px; }
.ap-facts { background: var(--gray-lt); border-radius: 12px; padding: 22px 26px; margin-top: 8px; }
.ap-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.ap-facts dt { font-weight: 700; color: var(--black); font-size: 14px; }
.ap-facts dd { margin: 0; color: var(--gray); font-size: 14px; }
.ap-facts a { color: var(--blue); text-decoration: none; }
.ap-facts a:hover { text-decoration: underline; }
.ap-offer-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: none; transition: gap .2s, color .2s; }
.ap-offer-more svg { width: 16px; height: 16px; transition: transform .2s; }
.ap-offer-more:hover { color: var(--blue-dk); gap: 10px; }
.ap-offer-more:hover svg { transform: translateX(4px); }
.ap-job-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 760px) { .ap-cols { grid-template-columns: 1fr; gap: 24px; } .ap-job-head { flex-wrap: wrap; } .ap-job-start { text-align: left; width: 100%; } .ap-facts dl { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   OFFENE STELLEN – Akkordeon-spezifische Ergänzungen zu .ap-job (echtes
   Akkordeon im Original, anders als bei Ausbildungsplätze). JS unverändert:
   assets/js/offene-stellen-akkordeon.js schaltet nur [open]/aria-expanded.
   -------------------------------------------------------------------- */
button.ap-job-head { cursor: pointer; user-select: none; border: 0; background: none; font: inherit; text-align: left; width: 100%; }
.ap-job-subtitle { font-size: 14px; color: var(--gray); margin-top: 4px; }
.ap-job-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; }
.ap-job-date { font-size: 12.5px; color: var(--gray); white-space: nowrap; }
.ap-job-toggle { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--white); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: background .2s, transform .3s; }
.ap-job-toggle svg { width: 20px; height: 20px; color: var(--blue); transition: transform .3s; }
.ap-job[open] .ap-job-toggle { background: var(--blue); }
.ap-job[open] .ap-job-toggle svg { color: #fff; transform: rotate(180deg); }
.ap-job-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ap-job[open] .ap-job-panel { grid-template-rows: 1fr; }
.ap-job-panel-inner { overflow: hidden; min-height: 0; }

/* --------------------------------------------------------------------
   "SO BEWIRBST DU DICH" – Ausbildungsplätze (.ap-apply, mit Icon-Karten)
   -------------------------------------------------------------------- */
.ap-apply { padding: 72px 40px; }
.ap-apply-inner { max-width: 1000px; margin: 0 auto; }
.ap-apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.ap-apply-card { border: 1px solid var(--line); border-radius: 14px; background: var(--white); padding: 28px; }
.ap-apply-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-lt); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.ap-apply-ic svg { width: 24px; height: 24px; color: var(--blue-dk); }
.ap-apply-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.ap-apply-card p { font-size: 14px; line-height: 1.6; color: var(--gray); margin-bottom: 16px; }
@media (max-width: 700px) { .ap-apply-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   ANSPRECHPARTNERIN – Ausbildungsplätze/Offene Stellen (.ap-contact,
   Personen-Raster .ap-people-grid/.ap-person)
   -------------------------------------------------------------------- */
.ap-contact { padding: 72px 40px; background: var(--gray-lt); }
.ap-contact-inner { max-width: 900px; margin: 0 auto; }
.ap-contact-inner > .sec-eyebrow { justify-content: center; margin-bottom: 28px; }
.ap-people-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; }
.ap-person { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--white); transition: box-shadow .2s, transform .2s, border-color .2s; }
.ap-person:hover { box-shadow: 0 10px 30px rgba(0,0,0,.07); transform: translateY(-3px); border-color: var(--blue); }
.ap-photo { width: 76px; height: 76px; border-radius: 10px; flex-shrink: 0; object-fit: cover; background: linear-gradient(135deg,#DfE3E6,#c3c9ce); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ap-photo svg { width: 36px; height: 36px; color: #9aa2a8; }
.ap-person-body { min-width: 0; flex: 1; }
.ap-person-body h3 { font-size: 1.05rem; font-weight: 700; color: var(--black); margin-bottom: 3px; }
.ap-person-role { font-size: 12.5px; color: var(--gray); margin-bottom: 12px; line-height: 1.4; }
.ap-person-lines { display: flex; flex-direction: column; gap: 7px; }
.ap-person-lines a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray); text-decoration: none; transition: color .15s; word-break: break-word; }
.ap-person-lines a:hover { color: var(--blue); }
.ap-contact-shared { max-width: 900px; margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; font-size: 14px; color: var(--gray); text-align: center; }
.ap-contact-shared a { color: var(--gray); text-decoration: none; }
.ap-contact-shared a:hover { color: var(--blue); }
@media (max-width: 480px) { .ap-person { flex-direction: column; align-items: flex-start; } }

/* --------------------------------------------------------------------
   #BEUTTERBANDE-BLOCK (Ausbildungsplätze-Seite) – echte Klassen .ap-bande*
   aus der Vorschau (dunkler Hintergrund + animiertes Gitter-Overlay,
   vorher fälschlich .bande-band mit hellblauer Karte, siehe KORREKTUREN.md)
   -------------------------------------------------------------------- */
.ap-bande { position: relative; background: var(--gray); padding: 64px 40px; overflow: hidden; }
.ap-bande-grid-bg { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px); }
.ap-bande-inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.ap-bande-logo { width: 72px; height: 72px; border-radius: 16px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; }
.ap-bande-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ap-bande-text { min-width: 0; }
.ap-bande-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5cb8ff; margin-bottom: 10px; }
.ap-bande-text h2 { font-size: clamp(1.4rem,2.8vw,1.9rem); font-weight: 700; color: #fff; margin-bottom: 12px; }
.ap-bande-text h2 strong { color: var(--blue); }
.ap-bande-text p { font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,.78); margin-bottom: 20px; max-width: 620px; }
.ap-social { display: flex; gap: 12px; flex-wrap: wrap; }
.ap-social-btn { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 20px; text-decoration: none; transition: background .18s, border-color .18s; }
.ap-social-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.ap-social-btn svg { width: 17px; height: 17px; }
@media (max-width: 700px) { .ap-bande-inner { grid-template-columns: 1fr; text-align: center; } .ap-social { justify-content: center; } }

/* --------------------------------------------------------------------
   BEWERBUNGSFORMULAR
   -------------------------------------------------------------------- */
.bw-main { max-width: 1100px; margin: 0 auto; padding: clamp(40px, 8vw, 56px) 40px; }
.bw-grid { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.bw-form-card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 40px 42px; box-shadow: 0 4px 24px rgba(28,28,27,.04); }
.bw-form-intro { margin-bottom: 30px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.bw-form-intro h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.bw-form-intro p { font-size: .96rem; line-height: 1.6; color: var(--gray); }
fieldset.bw-fieldset { border: none; padding: 0; margin: 0 0 30px; }
.bw-fieldset legend { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; padding: 0; }
.bw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.bw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.bw-field label { font-size: 13px; font-weight: 700; color: var(--black); }
.bw-field input, .bw-field select, .bw-field textarea { font: inherit; font-size: 14.5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--black); }
.bw-field input:focus, .bw-field select:focus, .bw-field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.bw-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; transition: border-color .18s, background .18s; }
.bw-drop.drag { border-color: var(--blue); background: var(--blue-lt); }
.bw-drop p { font-size: 13.5px; color: var(--gray); }
.bw-drop button { background: none; border: none; color: var(--blue); font-weight: 700; cursor: pointer; font: inherit; padding: 0; }
.bw-hinweis { font-size: 12px; color: var(--gray); margin-top: 8px; }
.bw-filelist { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.bw-fileitem { display: flex; align-items: center; gap: 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.bw-fileitem .fn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-fileitem .fs { color: var(--gray); }
.bw-fileitem .rm { background: none; border: none; color: var(--gray); cursor: pointer; padding: 2px; }
.bw-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--gray); line-height: 1.5; margin-bottom: 20px; }
.bw-consent input { margin-top: 3px; }
.bw-hinweis-klein { font-size: 12.5px; color: var(--gray); margin-top: 10px; }
.bw-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 96px; }
.bw-side-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 28px 26px; }
.bw-side-card.contact { background: var(--gray-lt); }
.bw-side-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 6px; }
.bw-side-card .role { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.bw-side-card .funktion { font-size: .9rem; color: var(--gray); margin: 2px 0 18px; }
.bw-contact-row { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: var(--black); margin-bottom: 12px; }
.bw-contact-row:last-child { margin-bottom: 0; }
.bw-contact-row svg { width: 18px; height: 18px; stroke: var(--blue); fill: none; stroke-width: 2; flex-shrink: 0; }
.bw-contact-row a { color: var(--black); text-decoration: none; }
.bw-contact-row a:hover { color: var(--blue); }
.bw-schritte { display: flex; flex-direction: column; gap: 16px; }
.bw-schritt { display: flex; gap: 12px; }
.bw-schritt-nr { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-lt); color: var(--blue-dk); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.bw-schritt h4 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 2px; }
.bw-schritt p { font-size: 13px; color: var(--gray); }
.bw-side-card.tip { background: var(--blue-lt); border-color: #cfe8ff; font-size: 13px; line-height: 1.55; color: var(--gray); }
.bw-success { display: none; text-align: center; padding: 60px 20px; }
.bw-success.show { display: block; }
.bw-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-lt); color: var(--blue); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.bw-success h2 { font-size: 1.4rem; font-weight: 700; color: var(--black); margin-bottom: 10px; }
.bw-success p { font-size: 14.5px; color: var(--gray); margin-bottom: 24px; }
@media (max-width: 900px) {
	.bw-grid { grid-template-columns: 1fr; gap: 36px; }
	.bw-main { padding: 44px 22px; }
	.bw-side { position: static; }
	.bw-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.bw-form-card { padding: 28px 22px; }
}