@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,700;6..12,800;6..12,900&display=swap');

.jgs-wrap {
    --navy:   #1E3870;
    --red:    #C0262A;
    --ink:    #1a1a2e;
    --soft:   #5a5870;
    --bg:     #F5F6FA;
    --border: #D0D4E0;
    --font:   'Nunito Sans', -apple-system, Arial, sans-serif;
    --radius: 12px;
    font-family: var(--font);
    color: var(--ink);
    max-width: 760px;
    margin: 0 auto;
}

/* ── Header ── */
.jgs-header {
    background: #fff !important;
    border-top: 5px solid var(--navy) !important;
    border-bottom: 3px solid var(--red) !important;
    padding: 20px 26px !important;
    margin-bottom: 18px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}
.jgs-header-logos {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
}
.jgs-header-text { flex: 1 1 auto; }
/* Logos werden per Inline-Style gezwungen – CSS als Fallback */
.jgs-logo-jgs {
    height: 60px !important;
    width: auto !important;
    max-width: 150px !important;
    display: block !important;
    object-fit: contain !important;
}
.jgs-logo-sl {
    height: 60px !important;
    width: auto !important;
    max-width: 130px !important;
    display: block !important;
    object-fit: contain !important;
}
.jgs-header-divider {
    display: none !important;
}

.jgs-slogan {
    font-size: 1.35rem;
    font-weight: 900;
    color: var(--navy);
    margin: 0 0 2px;
}
.jgs-subtitle { font-size: 0.9rem; color: var(--soft); margin: 0 0 6px; font-weight: 700; }
.jgs-meta { display:flex; gap:16px; font-size:0.82rem; color:var(--soft); font-weight:700; flex-wrap:wrap; }

/* ── Frist ── */
.jgs-frist {
    background: var(--navy);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.88rem;
    margin-bottom: 24px;
}
.jgs-frist strong { color: #FFE580; }

/* ── Fenster-Meldungen ── */
.jgs-window-msg {
    padding: 20px 24px;
    border-radius: var(--radius);
    font-size: 1rem;
    line-height: 1.6;
    margin: 16px 0;
}
.jgs-window-soon   { background: #EFF4FF; border-left: 4px solid var(--navy); color: var(--navy); }
.jgs-window-closed { background: #FEF0F0; border-left: 4px solid var(--red);  color: var(--red); }

/* ── Fortschritt ── */
.jgs-progress-wrap { margin-bottom: 24px; }
.jgs-progress-bar  { background: var(--border); border-radius: 99px; height: 6px; overflow:hidden; margin-bottom:8px; }
.jgs-progress-fill { background: linear-gradient(90deg, var(--navy), var(--red)); height:100%; transition:width .35s ease; }
.jgs-steps-labels  { display:flex; gap:2px; }
.jgs-step-label    { flex:1; font-size:0.72rem; font-weight:700; color:var(--soft); text-align:center; padding:3px 2px; border-radius:5px; }
.jgs-step-label.is-active { background: var(--navy); color:#fff; }

/* ── Schritte ── */
.jgs-step           { display:none; }
.jgs-step.is-active { display:block; animation:jgsFade .2s ease; }
@keyframes jgsFade  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.jgs-step h3        { font-size:1.15rem; font-weight:900; color:var(--navy); margin:0 0 18px; padding-bottom:7px; border-bottom:2px solid var(--navy); }

/* ── Felder ── */
.jgs-field { margin-bottom:14px; }
.jgs-field label { display:block; font-weight:800; font-size:0.9rem; margin-bottom:5px; color:var(--ink); }
.jgs-field input[type=text],
.jgs-field input[type=email],
.jgs-field input[type=tel],
.jgs-field textarea {
    width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px;
    font-size:1rem; font-family:var(--font); color:var(--ink); background:#fff;
    transition:border-color .15s; box-sizing:border-box;
}
.jgs-field input:focus, .jgs-field textarea:focus { outline:none; border-color:var(--navy); }
.jgs-field textarea { resize:vertical; min-height:110px; }

.jgs-row    { display:flex; gap:12px; }
.jgs-col-s  { flex:0 0 110px; }
.jgs-col-l  { flex:1 1 auto; }

/* ── Berufe nebeneinander ── */
.jgs-berufe-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }

/* ── Hinweis ── */
.jgs-hint { font-size:0.85rem; color:var(--soft); margin:4px 0 14px; line-height:1.5; font-style:italic; }

/* ── Consent ── */
.jgs-consent { display:flex; gap:9px; align-items:flex-start; font-size:0.87rem; color:var(--soft); margin:10px 0; line-height:1.45; cursor:pointer; }
.jgs-consent input { margin-top:3px; flex:0 0 auto; width:18px; height:18px; accent-color:var(--navy); }
.jgs-consent a { color:var(--navy); }

/* ── Übersicht ── */
.jgs-uebersicht { background:var(--bg); border-radius:var(--radius); padding:18px; font-size:0.9rem; border:1px solid var(--border); }
.jgs-uebersicht h4 { font-size:0.8rem; font-weight:900; color:var(--navy); margin:12px 0 4px; text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--border); padding-bottom:2px; }
.jgs-ov-row { display:flex; gap:8px; margin-bottom:3px; }
.jgs-ov-label { color:var(--soft); flex:0 0 140px; }

/* ── Alert ── */
.jgs-alert { background:#fdeaea; color:#c0392b; border-left:4px solid #c0392b; border-radius:10px; padding:12px 16px; margin-bottom:16px; font-weight:700; }

/* ── Navigation ── */
.jgs-nav { display:flex; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.jgs-btn { border:0; border-radius:10px; font-family:var(--font); font-weight:800; font-size:1rem; padding:12px 22px; cursor:pointer; transition:background .15s; }
.jgs-btn-back   { background:var(--bg); color:var(--ink); border:1.5px solid var(--border); }
.jgs-btn-back:hover { border-color:var(--navy); color:var(--navy); }
.jgs-btn-next   { background:var(--navy); color:#fff; box-shadow:0 4px 14px rgba(30,56,112,.25); }
.jgs-btn-next:hover { background:#162D5C; }
.jgs-btn-submit { background:var(--red); color:#fff; box-shadow:0 4px 14px rgba(192,38,42,.22); }
.jgs-btn-submit:hover { background:#961018; }

/* ── Erfolg ── */
.jgs-success { text-align:center; padding:48px 24px; }
.jgs-success-icon { width:60px; height:60px; background:var(--navy); color:#fff; border-radius:50%; font-size:2rem; line-height:60px; margin:0 auto 18px; font-weight:900; }
.jgs-success h2 { font-size:1.6rem; font-weight:900; color:var(--navy); margin:0 0 12px; }
.jgs-success p  { font-size:1rem; line-height:1.65; color:var(--soft); }
.jgs-success a  { color:var(--navy); }

/* ── CAPTCHA ── */
.captcha-field { margin-top:14px; }
.captcha-label { display:block; font-weight:800; font-size:0.9rem; margin-bottom:5px; color:var(--ink); }
.captcha-input { width:130px !important; padding:10px 12px; border:1.5px solid var(--border); border-radius:10px; font-size:1rem; font-family:var(--font); }
.captcha-input:focus { outline:none; border-color:var(--navy); }

@media(max-width:540px) {
    .jgs-header { flex-direction:column !important; align-items:flex-start !important; gap:14px !important; }
    .jgs-header-logos { order: 2; }
    .jgs-header-text  { order: 1; }
    .jgs-row         { flex-direction:column; }
    .jgs-berufe-grid { grid-template-columns:1fr; }
}