/* ==========================================================================
   StaffConnect — Bewerbungsfragebogen /jobs/  (Styles)

   HERKUNFT: uebernommen aus dem WordPress-Custom-HTML-Block der alten
   /jobs/-Seite (StaffConnectPortal/wordpress/jobs.html). Die Optik ist
   bewusst 1:1 erhalten — das Formular ist erprobt und der einzige
   offizielle Bewerbungsweg.

   WARUM DIESE DATEI IN public/ LIEGT UND NICHT ALS <style> IN DER SEITE:
   Das Skript public/assets/jobs-questionnaire.js baut saemtliche Antwort-
   Elemente (Radios, Checkboxen, Likert-Skala) zur Laufzeit im Browser.
   Ein Astro-<style> ist per Default *scoped*: Astro haengt jedem Selektor
   ein data-astro-cid-Attribut an und setzt dieses Attribut nur an die
   Elemente, die im .astro-Template stehen. Dynamisch erzeugte Elemente
   tragen es nie — die halbe Maske waere unformatiert. Diese Datei wird
   deshalb unveraendert ausgeliefert und per <link> eingebunden.

   ZWEI BEWUSSTE ABWEICHUNGEN VOM ORIGINAL:
   1. Der @import auf fonts.googleapis.com ist ersatzlos gestrichen. Die
      Content-Security-Policy (nginx/conf.d/security-headers.inc) laesst
      keine Fremd-Hosts zu, und Montserrat/Bebas Neue liegen selbst
      gehostet unter public/fonts/. Ein @import waere zugleich eine
      falsche Aussage in der Datenschutzerklaerung.
      Statt der harten Familie steht ueberall var(--font, …) — die
      Variable kommt aus src/styles/tokens.css, der Fallback greift,
      falls diese Datei je ohne die Seite geladen wird.
   2. `outline: none` im Fokuszustand der Textfelder ist entfernt; ein
      sichtbarer Fokusring kommt am Ende der Datei zurueck (WCAG 2.4.7).
   ========================================================================== */

/* --- Questionnaire Modal Styles (scoped + WP-safe) --- */
#scjqm-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 48px;
    box-sizing: border-box;
    overflow: visible;
}

.scjqm-glass {
    position: relative;
    width: 100%;
    max-width: 600px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 3.5rem;
    color: #ffffff;
    overflow: visible;
    overflow-x: hidden;
    box-sizing: border-box;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

.scjqm-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
    transition: transform 0.2s ease;
}
.scjqm-close:hover {
    transform: scale(1.1);
}

.scjqm-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 24px;
    overflow: visible;
}

.scjqm-border-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 4;
}

.scjqm-border-fill {
    fill: none;
    stroke: #ffffff;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scjqm-content {
    width: 100%;
    text-align: center;
    z-index: 1;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

#scjqm-question-text {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

.scjqm-question-info {
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: 1.5rem;
    font-style: italic;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

#scjqm-answer-container {
    margin-bottom: 2rem;
    min-height: 100px;
    max-height: none;
    overflow-y: visible;
    overflow: visible;
    width: 100%;
}

/* Form Elements (exact match to original) */
.scjqm-text-input {
    width: 100%;
    max-width: 400px;
    padding: 0.8rem;
    /* 1rem = 16px ist Pflicht, nicht Geschmack: iOS Safari zoomt beim Fokus in
       jedes Feld unter 16px automatisch in die Seite hinein und zoomt danach
       NICHT wieder heraus. Der Bewerber tippt den Rest des Fragebogens in einer
       vergroesserten, seitlich verschobenen Ansicht — der haeufigste Grund fuer
       Abbrueche in mobilen Formularen. */
    font-size: 1rem;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}
.scjqm-text-input:focus {
    /* Kein `outline: none` mehr: der Fokusrahmen ist die einzige Ortsangabe
       fuer Tastaturnutzer (WCAG 2.4.7). Die Fuellung bleibt wie gehabt, der
       sichtbare Ring kommt aus dem :focus-visible-Block weiter unten. */
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}
.scjqm-text-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

textarea.scjqm-text-input {
    min-height: 4.5rem;
    line-height: 1.45;
    resize: vertical;
    box-sizing: border-box;
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) rgba(0, 0, 0, 0.22);
}
textarea.scjqm-text-input::-webkit-scrollbar {
    width: 8px;
}
textarea.scjqm-text-input::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}
textarea.scjqm-text-input::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 6px;
}
textarea.scjqm-text-input::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
}

.scjqm-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

.scjqm-radio-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 250px;
    justify-content: flex-start;
    font-size: 0.85rem;
    line-height: 1.3;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    user-select: none;
}

.scjqm-radio-option:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.2);
}

.scjqm-radio-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.scjqm-radio-option.selected {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

/* Zusatzfeld unter „Ja" / „Empfehlung" / „Angestellt" – nach Basis-`.scjqm-radio-option`, damit max-width nicht überschreibt */
.scjqm-radio-group:has(.scjqm-radio-extra) {
    max-width: min(480px, 100%);
}
.scjqm-radio-option:has(.scjqm-radio-extra) {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    max-width: none;
    width: 100%;
    min-height: 0;
    gap: 0.65rem;
    padding: 0.75rem 1rem 0.85rem;
}
.scjqm-radio-option:has(.scjqm-radio-extra) > span {
    align-self: flex-start;
    padding-top: 0.05rem;
}
textarea.scjqm-radio-extra {
    width: 100%;
    max-width: none;
    min-height: 5.75rem;
    margin: 0;
    flex-shrink: 0;
}

.scjqm-checkbox-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.scjqm-checkbox-group.scjqm-dresscode { grid-template-columns: repeat(2, 1fr); max-width: 400px; }
.scjqm-checkbox-group.scjqm-two-columns { grid-template-columns: repeat(2, 1fr); max-width: 450px; }

.scjqm-checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    transition: all 0.3s ease;
    justify-content: flex-start;
    font-size: 0.7rem;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    min-height: 44px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    user-select: none;
}

.scjqm-checkbox-option:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.2);
}

.scjqm-checkbox-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

.scjqm-checkbox-option.selected {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
}

.scjqm-consent-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    max-width: 400px;
    margin: 0.85rem auto 0;
    padding: 0.75rem 0.85rem;
    text-align: left;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    box-sizing: border-box;
}
.scjqm-consent-wrap input {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #48bf91;
    cursor: pointer;
}

/* Likert Scale (exact match to original) */
.scjqm-likert {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    position: relative;
    padding: 1rem 0 2rem;
    min-height: 100px;
    max-width: 100%;
    overflow: visible;
}
.scjqm-likert::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: rgba(255,255,255,0.3);
    z-index: 0;
}
.scjqm-likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    gap: 0.5rem;
    padding: 0.3rem;
    flex: 1;
    min-width: 0;
}
.scjqm-likert-option input {
    display: none;
}
.scjqm-likert-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.6);
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.scjqm-likert-option:hover .scjqm-likert-circle {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}
.scjqm-likert-option input:checked + .scjqm-likert-circle {
    background: #ffffff;
    border-color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255,255,255,0.5);
}
.scjqm-likert-label {
    font-size: 0.65rem;
    opacity: 0.8;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    position: absolute;
    top: 40px;
    width: 100%;
    max-width: 100px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
    line-height: 1.2;
}

/* Navigation */
.navigation-buttons-modal {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.nav-btn-modal {
    padding: 0.8rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    transition: all 0.3s;
}
.nav-btn-modal:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
}
.nav-btn-modal:disabled { opacity: 0.4; cursor: not-allowed; }

.nav-btn-back-modal { background: rgba(220, 53, 69, 0.6); border-color: transparent; }

.step-indicator-modal { margin-top: 1rem; font-size: 0.85rem; opacity: 0.6; font-family: var(--font, 'Montserrat', system-ui, sans-serif); }

/* Result Container (like original bewerben.html) */
#scjqm-modal-backdrop #scjqm-result-container {
    animation: scjqm-fadeIn 0.5s ease-in;
    padding: 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: auto;
    overflow: hidden;
    background: transparent;
    border: none;
    box-sizing: border-box;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

#scjqm-modal-backdrop #scjqm-result-container.match {
    background: rgba(72, 191, 145, 0.1);
    border: 2px solid rgba(72, 191, 145, 0.3);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

#scjqm-modal-backdrop #scjqm-result-container.match h2 {
    color: #48bf91;
    margin: 0 0 1rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    text-shadow: 0 2px 10px rgba(72, 191, 145, 0.3);
    line-height: 1.3;
    text-align: center;
}

#scjqm-modal-backdrop #scjqm-result-container.match p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.65;
    opacity: 0.95;
    margin: 0 0 1rem 0;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    text-align: center;
    max-width: 100%;
}

#scjqm-modal-backdrop #scjqm-result-container.no-match {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 2rem 2.25rem;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

#scjqm-modal-backdrop #scjqm-result-container.no-match h2 {
    color: rgba(255, 255, 255, 0.95);
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    text-align: center;
}

#scjqm-modal-backdrop #scjqm-result-container.no-match p {
    line-height: 1.7;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
    text-align: center;
}

#scjqm-modal-backdrop #scjqm-result-message {
    font-size: 1rem;
    line-height: 1.65;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

@keyframes scjqm-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.loading-spinner-modal {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top-color: white;
    border-radius: 50%;
    animation: scjqm-spin 1s linear infinite;
    margin: 0 auto 1rem;
}
@keyframes scjqm-spin { to { transform: rotate(360deg); } }

/* Completion Screen Modal */
.completion-screen-modal {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
    padding: 1rem 0;
    box-sizing: border-box;
    overflow: hidden;
}

#scjqm-loading-container {
    text-align: center;
    padding: 2rem;
}

#scjqm-loading-container p {
    color: rgba(255, 255, 255, 0.9);
    margin-top: 1rem;
    font-size: 1rem;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif);
}

/* WhatsApp Button: standardmäßig versteckt, nur sichtbar wenn gültiger Link gesetzt (Klasse .scjqm-whatsapp-btn-ready) */
#scjqm-whatsapp-button-match {
    display: none !important;
}
#scjqm-whatsapp-button-match.scjqm-whatsapp-btn-ready {
    display: inline-flex !important;
}
#scjqm-modal-backdrop .scjqm-whatsapp-btn.scjqm-whatsapp-btn-ready,
#scjqm-modal-backdrop #scjqm-result-container .scjqm-whatsapp-btn.scjqm-whatsapp-btn-ready,
#scjqm-result-container.match .scjqm-whatsapp-btn.scjqm-whatsapp-btn-ready,
.result-container-modal.match .scjqm-whatsapp-btn.scjqm-whatsapp-btn-ready {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.8rem !important;
    padding: 1rem 2rem !important;
    background: #25D366 !important;
    background-color: #25D366 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    font-family: var(--font, 'Montserrat', system-ui, sans-serif) !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 1.25rem !important;
    margin-bottom: 0.5rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999999 !important;
    flex-shrink: 0 !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

#scjqm-modal-backdrop .scjqm-whatsapp-btn:hover {
    background: #128C7E !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}

#scjqm-modal-backdrop .scjqm-whatsapp-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    #scjqm-modal-backdrop { padding: 20px; }
    .scjqm-glass {
        padding: 2rem 1.5rem;
        box-sizing: border-box;
    }
    #scjqm-question-text { font-size: 1.1rem; }
    .nav-btn-modal { padding: 0.7rem 1.5rem; font-size: 0.9rem; }
    #scjqm-modal-backdrop #scjqm-result-container.match {
        padding: 1.5rem 1.25rem;
        max-width: 100%;
    }
    #scjqm-modal-backdrop #scjqm-result-container.match h2 { font-size: 1.5rem; }
    #scjqm-modal-backdrop #scjqm-result-container.match p { font-size: 0.95rem; }
    #scjqm-modal-backdrop .scjqm-whatsapp-btn {
        font-size: 0.95rem;
        padding: 0.8rem 1.2rem;
        margin-top: 1rem;
        max-width: 100%;
    }
    #scjqm-modal-backdrop .scjqm-whatsapp-btn svg {
        width: 20px;
        height: 20px;
    }
    .completion-screen-modal {
        padding: 0.5rem 0;
    }
}
/* ==========================================================================
   Ergaenzungen gegenueber dem WordPress-Original — Bedienbarkeit
   ========================================================================== */

/* Sichtbarer Fokus in der Glasflaeche. Die globale Regel aus global.css
   (:focus-visible { outline: 2px solid var(--accent) }) zeichnet Blau auf
   Blau-Weiss-Glas; hier gewinnt ein weisser Ring mit dunklem Saum, der auf
   jedem Untergrund der Maske steht. */
#scjqm-modal-backdrop :focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45);
}

/* Die Antwort-Elemente sind Labels, keine Buttons: sie brauchen den
   Tastaturfokus ausdruecklich (tabindex setzt das Skript). */
.scjqm-radio-option,
.scjqm-checkbox-option,
.scjqm-likert-option {
    outline-offset: 2px;
}

/* Auswahlzustand zusaetzlich zur Fuellung markieren — Farbe allein ist
   kein Unterscheidungsmerkmal (WCAG 1.4.1). */
.scjqm-radio-option.selected > span::before,
.scjqm-checkbox-option.selected > span::before {
    content: "\2713\00a0";
    font-weight: 700;
}

/* Der Dateiauswahl-Knopf ist ein <label> mit verstecktem <input type=file>:
   Der Fokus liegt am unsichtbaren Input, sichtbar wird er nur ueber das Label. */
#scjqm-photo-label:focus-within {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.45);
}

/* Fortschritt: Beschriftung fuer Screenreader, sichtbar bleibt der Rand. */
.scjqm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sehr hohe Masken (Bereiche-Frage am kleinen Geraet) duerfen scrollen,
   statt oben und unten aus dem Bild zu laufen.
   `align-items: center` + `overflow: auto` schneidet in jedem Browser den
   oberen Rand ab, sobald das Kind hoeher ist als der Rahmen — die Loesung
   ist `margin: auto` am Kind: bei genug Platz zentriert es, bei zu wenig
   Platz beginnt es oben und der Rest wird scrollbar. */
#scjqm-modal-backdrop {
    overflow-y: auto;
    align-items: flex-start;
}
.scjqm-glass {
    margin: auto;
}

@media (prefers-reduced-motion: reduce) {
    #scjqm-modal-backdrop *,
    #scjqm-modal-backdrop *::before,
    #scjqm-modal-backdrop *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}