/*
 * Bewerbung und „Meine Bewerbung“ im Stream-Deck-Look.
 * Wird NACH style.css und den Seiten-Styles geladen und legt nur den Look darüber.
 * Aufbau, IDs und Skripte (apply.js, apply-channel.js, my-applications.js) bleiben unverändert.
 */
@font-face { font-family: "Familjen Grotesk"; src: url("/fonts/landing-deck/familjen-grotesk-latin-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/landing-deck/jetbrains-mono-latin-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #131019; --bg-soft: #1a1622; --panel: #0e0b14; --border: #2f2940;
  --text: #f1eef7; --muted: #a59eb6; --purple: #9146ff;
  --case-hi: #201b2b; --ink: #f1eef7; --ink-2: #a59eb6; --line: #2f2940;
  --accent: #9146ff; --accent-lo: #5b1fb8; --lav: #c9b0ff;
  --amber: #f4b860; --red: #f27a6e; --green: #6fdcaa;
  --plate: #0e0b14; --lcd: #09070d;
  --sans: "Familjen Grotesk", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --deck: linear-gradient(180deg, #1c1726, #100d16);
  --deck-shadow: 0 1px 0 #3a3150 inset, 0 0 0 1px #2a2338, 0 30px 50px -18px rgba(0,0,0,.45), 0 10px 0 #06050a;
}
html body { color: var(--ink); font-family: var(--sans); background: var(--bg); background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px); background-size: 6px 6px; }
html body :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Kopfzeile */
html body .apply-topbar, html body .as-topbar { min-height: 0; padding: 18px max(24px, calc((100% - 1000px) / 2)); background: rgba(19,16,25,.88); border-bottom: 1px solid var(--line); }
html body .brand { gap: 10px; text-decoration: none; color: inherit; }
html body .brand-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 0; display: grid; place-items: center; background: linear-gradient(160deg, #a66bff, #5a28c4); box-shadow: 0 3px 0 #000, inset 0 0 0 1px rgba(255,255,255,.18); }
html body .brand-icon::after { content: "MC"; font: 700 13px var(--mono); color: #fff; }
html body .brand-title { font: 600 19px var(--sans); color: var(--ink); }
html body .brand-subtitle { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
html body #applicant-logout-button { border: 0 !important; background: var(--case-hi) !important; border-radius: 11px !important; box-shadow: 0 4px 0 var(--line); font-family: var(--sans) !important; }
html body #applicant-logout-button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }

/* Inhalt */
html body .apply-content, html body .as-content { max-width: 1000px; padding: 36px 24px 64px; gap: 22px; }

/* Kopf-Karte als Pult */
html body .welcome-card { position: relative; overflow: hidden; padding: 26px 26px 24px; border: 0; border-radius: 24px; background: var(--deck); box-shadow: var(--deck-shadow); }
html body .welcome-card::after { display: none; }
html body .welcome-card .eyebrow, html body .application-own-header .eyebrow { display: inline-block; padding: 4px 9px; border-radius: 2px; background: var(--accent); color: #fff; font: 600 11px var(--mono); letter-spacing: .12em; transform: rotate(-1.5deg); box-shadow: 0 2px 0 var(--accent-lo); }
html body .welcome-card h2 { margin: 16px 0 10px; font: 700 clamp(30px, 4.4vw, 50px)/1 var(--sans); letter-spacing: -.035em; }
html body .welcome-card p { max-width: 46em; color: var(--ink-2); font-size: 16.5px; line-height: 1.6; }
html body .welcome-card p strong { color: #fff; font-family: var(--mono); }
html body .welcome-card a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 8px 12px; border-radius: 10px; background: #0a080e; color: var(--ink-2); font: 600 12px var(--mono); text-decoration: none; box-shadow: 0 4px 0 #000, inset 0 0 0 1px #2a2338; }
html body .welcome-card a:hover { color: #fff; }

/* Hinweis vom Team */
html body .apply-info { border: 0; border-radius: 16px; background: rgba(145,70,255,.08); box-shadow: inset 0 0 0 1px rgba(145,70,255,.35); }

/* Verifizierung */
html body .apply-grid { gap: 16px; }
html body .apply-card { padding: 18px; border: 0; border-radius: 22px; background: var(--deck); box-shadow: var(--deck-shadow); }
html body .apply-card h3 { font-size: 18px; letter-spacing: -.01em; }
html body .apply-card > p { color: var(--ink-2); font-size: 13.5px; }
html body .verification-state { margin-top: 14px; padding: 12px; border: 0; border-radius: 14px; background: var(--lcd); box-shadow: inset 0 2px 10px rgba(0,0,0,.8); }
html body .verification-avatar { border-radius: 11px; box-shadow: 0 3px 0 #000; }
html body .verification-info strong { font-family: var(--sans); font-size: 15px; color: #fff; }
html body .verification-info span { font: 500 11.5px var(--mono); color: #8a80a0; }
html body .verification-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 0; border-radius: 10px; font: 700 11.5px var(--mono); text-decoration: none; white-space: nowrap; }
html body .verification-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
html body .verification-badge.success { color: var(--green); background: #0f1a16; box-shadow: inset 0 0 0 1px rgba(111,220,170,.35); }
html body .verification-badge.pending { color: #fff; background: linear-gradient(160deg, #f6c879, #c98a2c); color: #2a1a00; box-shadow: 0 4px 0 #000, inset 0 0 0 1px rgba(255,255,255,.2); }
html body a.verification-badge.pending:hover { filter: brightness(1.08); }
html body a.verification-badge.pending:active { transform: translateY(3px); box-shadow: 0 1px 0 #000; }
html body .verification-badge.pending::before { background: #2a1a00; box-shadow: none; animation: bwblink 1.4s infinite; }
@keyframes bwblink { 50% { opacity: .3; } }

/* Bewerbungs-Bereich */
html body .panel { border: 0; border-radius: 24px; background: var(--deck); box-shadow: var(--deck-shadow); overflow: hidden; }
html body .panel-header { padding: 18px 22px 12px; border-bottom: 0; background: none; }
html body .panel-header h3 { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
html body .panel-header p { color: #8a80a0; font-size: 13px; }
html body #application-form { padding: 0 14px 14px; box-sizing: border-box; }
html body #application-form > div > div:nth-child(1),
html body #application-form > div > div:nth-child(2),
html body #application-form > div > div:nth-child(3),
html body #application-form > div > div:nth-child(4) { border: 0; border-radius: 16px; background: var(--plate); box-shadow: inset 0 0 0 1px #221c2e; }
html body #application-form strong { font-size: 16px; }
html body #application-form p { color: var(--ink-2) !important; }
html body #application-age, html body .application-question textarea, html body .application-applicant-message-compose textarea { border: 0; border-radius: 12px; background: var(--lcd); color: #ddd3f2; font-family: var(--mono); box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 8px rgba(0,0,0,.8); }
html body #application-age:focus, html body .application-question textarea:focus, html body .application-applicant-message-compose textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(145,70,255,.25); }
html body #application-age::placeholder, html body .application-question textarea::placeholder { color: #6a5c88; }

/* Auswahl als kleine Tasten mit Lampe */
html body #application-form label:has(input[type="checkbox"]) { min-height: 0; padding: 11px 12px; border-radius: 11px; background: #0a080e; color: var(--ink-2); font: 600 13px var(--mono); box-shadow: 0 4px 0 #000, inset 0 0 0 1px #2a2338; transition: transform .06s, box-shadow .06s, color .15s; }
html body #application-form label:has(input[type="checkbox"]):hover { background: #14101b; color: var(--ink); }
html body #application-form label:has(input[type="checkbox"]):active { transform: translateY(3px); box-shadow: 0 1px 0 #000, inset 0 0 0 1px #2a2338; }
html body #application-form label:has(input:checked) { color: #fff; background: #1d1828; box-shadow: 0 4px 0 #000, inset 0 0 0 1px var(--accent); }
html body #application-form input[type="checkbox"] { width: 10px; height: 10px; flex: 0 0 10px; border: 0; border-radius: 50%; background: #3a3348; box-shadow: none; }
html body #application-form input[type="checkbox"]:checked { background: var(--lav); box-shadow: 0 0 8px var(--lav); }
html body #application-form input[type="checkbox"]:checked::after { content: none; }
html body #application-form > div > div:nth-child(2) > div:last-child,
html body #application-form > div > div:nth-child(3) > div:last-child { gap: 10px !important; margin-top: 8px; }

/* Fragen */
html body .application-question { border: 0; border-radius: 14px; background: #0a080e; box-shadow: inset 0 0 0 1px #221c2e; }
html body .application-question:hover { background: #0c0911; box-shadow: inset 0 0 0 1px #3a3150; }
html body .application-question label > strong { font-size: 15px; }

/* Absenden und andere Haupt-Tasten */
html body #application-submit, html body .application-applicant-message-compose button, html body .ma-btn:not(.ma-btn-ghost) { position: relative; min-height: 0; padding: 14px 22px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(160deg, #a66bff, #5a28c4); font: 700 16px var(--sans); box-shadow: 0 7px 0 #000, inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 30px -10px rgba(145,70,255,.5); transition: transform .07s, box-shadow .07s; }
html body #application-submit:not(:disabled):hover, html body .ma-btn:not(.ma-btn-ghost):hover { transform: translateY(-2px); filter: none; }
html body #application-submit:not(:disabled):active, html body .application-applicant-message-compose button:active, html body .ma-btn:not(.ma-btn-ghost):active { transform: translateY(6px); box-shadow: 0 1px 0 #000, inset 0 0 0 2px #fff; }
html body #application-submit:disabled { filter: grayscale(.6); opacity: .5; }
html body #application-form-message { border: 0; border-radius: 12px; background: var(--lcd); font: 500 13px var(--mono); box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }

/* Platzhalter: gesperrt, geschlossen, Fragen laden */
html body .apply-placeholder { border: 0; border-radius: 16px; background: var(--lcd); box-shadow: inset 0 2px 10px rgba(0,0,0,.8); }
html body .apply-placeholder strong { font-family: var(--mono); }
html body .apply-placeholder p { font-family: var(--mono); font-size: 13px; }
html body #application-form-locked { margin: 0 14px 14px; padding: 34px 20px; }
html body .apply-placeholder-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; font-size: 26px; line-height: 1; background: linear-gradient(160deg, #f6c879, #c98a2c); box-shadow: 0 6px 0 #000, inset 0 0 0 1px rgba(255,255,255,.2), 0 0 30px -6px rgba(244,184,96,.5); display: grid; place-items: center; }
html body #application-form-locked .apply-placeholder-icon { font-size: 0; }
html body #application-form-locked .apply-placeholder-icon { position: relative; }
html body #application-form-locked .apply-placeholder-icon::before { content: ""; position: absolute; left: 50%; top: 13px; width: 12px; height: 12px; margin-left: -9px; border: 3px solid #2a1a00; border-bottom: 0; border-radius: 9px 9px 0 0; }
html body #application-form-locked .apply-placeholder-icon::after { content: ""; position: absolute; left: 50%; top: 26px; width: 22px; height: 16px; margin-left: -11px; border-radius: 4px; background: #2a1a00; }
html body #application-form-locked strong { font: 700 20px var(--mono); color: var(--amber); text-shadow: 0 0 14px rgba(244,184,96,.35); }

/* Nach dem Absenden: Stand der Bewerbung */
html body .application-dashboard-hero { padding: 20px; border: 0; border-radius: 16px; background: var(--plate); box-shadow: inset 0 0 0 1px #221c2e; }
html body .application-dashboard-title h2 { font-size: 26px; letter-spacing: -.02em; }
html body .application-status-pill { gap: 8px; border: 0; border-radius: 10px; background: var(--lcd); color: var(--lav); font: 700 12px var(--mono); box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
html body .application-progress-step { padding: 12px 10px; border: 0; border-radius: 12px; background: #0a080e; color: #6f6782; font: 600 12px var(--mono); box-shadow: 0 4px 0 #000, inset 0 0 0 1px #2a2338; }
html body .application-progress-step.active { color: #fff; background: #1d1828; box-shadow: 0 4px 0 #000, inset 0 0 0 1px var(--accent), 0 0 18px -6px rgba(145,70,255,.6); }
html body .application-progress-step.done { color: var(--green); background: #0f1a16; box-shadow: 0 4px 0 #000, inset 0 0 0 1px rgba(111,220,170,.35); }
html body .application-dashboard-card, html body .application-dashboard-messages { border: 0; border-radius: 14px; background: var(--plate); box-shadow: inset 0 0 0 1px #221c2e; }
html body .application-dashboard-card span { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6f6782; }
html body .application-tag { border: 0; border-radius: 8px; background: #0a080e; font: 600 11.5px var(--mono); box-shadow: 0 2px 0 #000, inset 0 0 0 1px #2a2338; }
html body .application-view-button, html body .ma-btn-ghost { border: 0; border-radius: 12px; background: #0a080e; color: var(--ink); font-weight: 700; box-shadow: 0 4px 0 #000, inset 0 0 0 1px #2a2338; }
html body .application-view-button:active, html body .ma-btn-ghost:active { transform: translateY(3px); box-shadow: 0 1px 0 #000, inset 0 0 0 1px #2a2338; }
html body .application-applicant-message { border: 0; border-radius: 12px; background: #0a080e; box-shadow: inset 0 0 0 1px #2a2338; }
html body .application-applicant-message.applicant { background: #1d1828; box-shadow: inset 0 0 0 1px rgba(145,70,255,.45); }
html body .application-applicant-message-meta { font-family: var(--mono); }
html body .application-messages-empty { border: 0; border-radius: 12px; background: var(--lcd); font-family: var(--mono); box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
html body .application-mine-link { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }
html body .application-mine-link a { color: var(--lav); }

/* Eigene Antworten (Fenster) */
html body .application-own-window { border: 0; border-radius: 24px; background: var(--deck); box-shadow: var(--deck-shadow); }
html body .application-own-header { border-bottom: 1px solid var(--line); }
html body .application-own-close { border: 0; border-radius: 11px; background: #0a080e; box-shadow: 0 4px 0 #000, inset 0 0 0 1px #2a2338; }
html body .application-own-answer { border: 0; border-radius: 14px; background: var(--plate); box-shadow: inset 0 0 0 1px #221c2e; }
html body .application-own-answer-text { border-radius: 10px; background: var(--lcd); font-family: var(--mono); font-size: 13.5px; box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }

/* Meine Bewerbung */
html body .ma-login, html body .ma-empty, html body .ma-card { border: 0; border-radius: 22px; background: var(--deck); box-shadow: var(--deck-shadow); }
html body .ma-login h3 { font-size: 22px; letter-spacing: -.02em; }
html body .ma-card.is-accepted { box-shadow: 0 1px 0 #3a3150 inset, 0 0 0 1px rgba(111,220,170,.5), 0 10px 0 #06050a; }
html body .ma-card .as-avatar { border-radius: 12px; box-shadow: 0 3px 0 #000; }
html body .ma-title small { font-family: var(--mono); font-size: 12px; }
html body .ma-state { display: inline-flex; align-items: center; gap: 8px; border-radius: 10px; background: var(--lcd); color: var(--lav); font: 700 12.5px var(--mono); box-shadow: inset 0 2px 8px rgba(0,0,0,.8); }
html body .ma-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
html body .is-accepted .ma-state { color: var(--green); }
html body .is-rejected .ma-state, html body .is-withdrawn .ma-state { color: var(--red); }
html body .ma-steps { gap: 8px; }
html body .ma-steps li { padding: 10px 8px; border-radius: 11px; background: #0a080e; color: #6f6782; font: 600 11.5px var(--mono); box-shadow: 0 4px 0 #000, inset 0 0 0 1px #2a2338; }
html body .ma-steps li.is-done { color: var(--green); background: #0f1a16; box-shadow: 0 4px 0 #000, inset 0 0 0 1px rgba(111,220,170,.35); }
html body .ma-steps li.is-now { color: #fff; background: linear-gradient(160deg, #a66bff, #5a28c4); box-shadow: 0 4px 0 #000, 0 0 18px -6px rgba(145,70,255,.7); }
html body .ma-reason { border: 0; border-radius: 12px; background: var(--lcd); color: #ffc2bb; font-family: var(--mono); font-size: 13px; box-shadow: inset 0 0 0 1px rgba(242,122,110,.4); }
html body .ma-who { font-family: var(--mono); font-size: 12.5px; }
html body .ma-who img { border-radius: 9px; }
html body .ma-link { color: var(--lav); }
html body .ma-hint { font-family: var(--mono); font-size: 12px; }
html body .as-empty { border: 0; border-radius: 14px; background: var(--lcd); color: var(--lav); font: 500 13px var(--mono); box-shadow: inset 0 2px 10px rgba(0,0,0,.8); }

html body .is-accepted .ma-steps li.is-now { color: #06140e; background: linear-gradient(160deg, #8ff0c4, #3fae7d); }
html body .is-rejected .ma-steps li.is-now, html body .is-withdrawn .ma-steps li.is-now { color: #fff; background: linear-gradient(160deg, #f59a90, #b8483d); box-shadow: 0 4px 0 #000; }

/* Fußzeile */
html body .legal-links { box-sizing: border-box; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px 16px; padding: 22px 24px 34px; border-top: 1px solid var(--line); font: 500 12px var(--mono); }
html body .legal-links a { color: var(--ink-2); text-decoration: underline; }
html body .legal-links a:hover { color: var(--ink); }

@media (max-width: 640px) {
  html body .apply-topbar, html body .as-topbar { padding: 14px 16px; }
  html body .apply-content, html body .as-content { padding: 24px 16px 48px; }
  html body .welcome-card { padding: 20px 18px; }
  html body #application-form { padding: 0 8px 8px; }
  html body #application-form-locked { margin: 0 8px 8px; }
}
@media (prefers-reduced-motion: reduce) { html body .verification-badge.pending::before { animation: none; } }