:root {
    --jsb-green: #173f32;
    --jsb-gold: #c28a2c;
    --jsb-cream: #fffdf8;
    --jsb-cream-2: #fbf7ef;
    --jsb-border: #dfd2bc;
    --jsb-text: #173f32;
    --jsb-muted: #6f6a61;
    --jsb-error: #9b2c2c;
}

.jsb-wrap {
    color: var(--jsb-text);
    font-family: inherit;
    max-width: 980px;
    margin: 0 auto;
    padding: 16px 0 10px;
}

.jsb-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
}

.jsb-kicker {
    color: var(--jsb-gold);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.jsb-heading h2,
.jsb-success h3 {
    color: var(--jsb-green);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    line-height: 1.12;
    margin: 0 0 12px;
}

.jsb-heading h2 { font-size: clamp(32px, 4vw, 54px); }
.jsb-heading p,
.jsb-success p {
    margin: 0 auto;
    line-height: 1.65;
    color: var(--jsb-text);
}

.jsb-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 0;
}
.jsb-ornament img {
    display: block;
    width: min(230px, 58%);
    height: auto;
}

.jsb-card {
    background: rgba(255,253,248,.98);
    border: 1px solid var(--jsb-border);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(41, 51, 44, .08);
    overflow: hidden;
}

.jsb-form { padding: 10px 28px 24px; }
.jsb-section { padding: 22px 4px; border-bottom: 1px solid rgba(194,138,44,.50); }
.jsb-section h3 {
    font-size: 14px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--jsb-green);
    margin: 0 0 16px;
    font-weight: 700;
}
.jsb-section h3 span { color: var(--jsb-gold); margin-right: 4px; }

.jsb-grid { display: grid; gap: 16px 28px; }
.jsb-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jsb-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jsb-availability { grid-template-columns: .9fr 1.5fr 1fr; align-items: start; }

.jsb-field label,
.jsb-fieldset legend {
    display: block;
    font-size: 14px;
    margin-bottom: 7px;
    color: var(--jsb-green);
    font-weight: 500;
}
.jsb-field label em,
.jsb-fieldset legend em,
.jsb-consent em { color: var(--jsb-gold); font-style: normal; }
.jsb-field label small { color: var(--jsb-muted); font-weight: 400; }

.jsb-field input[type="text"],
.jsb-field input[type="email"],
.jsb-field input[type="tel"],
.jsb-field select,
.jsb-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #cfc7bb;
    border-radius: 7px;
    background: #fffdfa;
    color: #24372f;
    min-height: 44px;
    padding: 10px 12px;
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.jsb-field textarea { min-height: 110px; resize: vertical; }
.jsb-field input:focus,
.jsb-field select:focus,
.jsb-field textarea:focus {
    border-color: var(--jsb-gold);
    box-shadow: 0 0 0 3px rgba(194,138,44,.12);
}

.jsb-fieldset { margin: 0; padding: 0; border: 0; }
.jsb-check,
.jsb-consent label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.45;
}
.jsb-check input,
.jsb-consent input { margin-top: 3px; accent-color: var(--jsb-green); }
.jsb-days { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
.jsb-days legend { grid-column: 1 / -1; }

.jsb-upload {
    min-height: 76px;
    border: 1px dashed var(--jsb-gold);
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--jsb-cream-2);
    cursor: pointer;
    text-align: left;
}
.jsb-upload input { position:absolute; opacity:0; width:1px; height:1px; overflow:hidden; }
.jsb-upload-icon {
    width: 34px;
    height: 34px;
    border: 1px solid var(--jsb-gold);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jsb-gold);
    font-size: 19px;
    flex: 0 0 auto;
}
.jsb-upload strong { display:block; color:var(--jsb-green); }
.jsb-upload small { display:block; margin-top:2px; color:var(--jsb-muted); }
.jsb-file-name { margin-top: 6px; font-size: 12px; color: var(--jsb-muted); min-height: 17px; }

.jsb-consent { padding: 18px 4px 4px; }
.jsb-consent a { color: var(--jsb-gold); text-decoration: underline; text-underline-offset: 2px; }
.jsb-feedback { min-height: 24px; padding: 0 4px; color: var(--jsb-error); font-size: 14px; }

.jsb-actions { text-align:center; padding: 10px 0 0; isolation:isolate; }
/*
 * Der Absende-Button verwendet bewusst dieselben Avada-/Barock-Klassen
 * wie die übrigen Buttons der Junge-Symphonie-Website.
 * Dadurch greift das bereits global hinterlegte CSS für
 * .fusion-button.barock-button + .barock-gruen.
 */
.jsb-submit.fusion-button {
    appearance: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 24px !important;
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
    text-transform: none !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
    cursor: pointer;
    transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}
.jsb-submit.fusion-button span {
    position: relative;
    z-index: 2;
    color: inherit !important;
}
.jsb-submit.fusion-button:hover:not(:disabled),
.jsb-submit.fusion-button:focus:not(:disabled) {
    transform: translateY(-1px);
}
.jsb-submit.fusion-button:disabled {
    opacity: .58 !important;
    filter: grayscale(1) saturate(.15);
    cursor: not-allowed !important;
    transform: none !important;
}
.jsb-submit.fusion-button:not(:disabled) {
    opacity: 1 !important;
    filter: none;
}
.jsb-actions p { font-size: 12px; color: var(--jsb-muted); margin: 8px 0 0; }
.jsb-action-ornament {
    display:flex;
    align-items:center;
    justify-content:center;
    margin:16px auto 0;
}
.jsb-action-ornament img {
    display:block;
    width:min(210px,62%);
    height:auto;
}

.jsb-success {
    text-align:center;
    padding: 58px 32px 62px;
}
.jsb-success h2 {
    color: var(--jsb-gold);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 14px;
}
.jsb-success h3 { font-size: 34px; margin-bottom: 14px; }
.jsb-hp { position:absolute !important; left:-99999px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

@media (max-width: 820px) {
    .jsb-form { padding: 8px 18px 20px; }
    .jsb-grid-3, .jsb-availability { grid-template-columns: 1fr; }
    .jsb-days { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
    .jsb-wrap { padding-top: 6px; }
    .jsb-heading { margin-bottom: 18px; }
    .jsb-heading h2 { font-size: 34px; }
    .jsb-heading p { font-size: 14px; }
    .jsb-card { border-radius: 12px; }
    .jsb-grid-2 { grid-template-columns: 1fr; }
    .jsb-section { padding: 18px 0; }
    .jsb-days { grid-template-columns: 1fr; }
    .jsb-days legend { grid-column: auto; }
    .jsb-submit.fusion-button { font-size:16px !important; }
}

/* Eigenes Popup: unabhängig von Avada, damit der Header das Formular nicht überdeckt. */
.jsb-modal[hidden] {
    display: none !important;
}

.jsb-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: block;
    padding: 22px;
    box-sizing: border-box;
    overflow: hidden;
}

.jsb-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 28, 23, .68);
    backdrop-filter: blur(3px);
}

.jsb-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1040px, 100%);
    max-height: calc(100vh - 44px);
    max-height: calc(100dvh - 44px);
    margin: 0 auto;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    box-sizing: border-box;
    background: var(--jsb-cream);
    border: 1px solid rgba(194, 138, 44, .55);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
    padding: 22px 28px 28px;
}

.jsb-modal-close {
    position: sticky;
    top: 0;
    float: right;
    margin: 0 0 -42px 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(194, 138, 44, .65);
    border-radius: 50%;
    background: var(--jsb-cream);
    color: var(--jsb-green);
    font: 400 28px/1 Arial, sans-serif;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

html.jsb-modal-open,
body.jsb-modal-open {
    overflow: hidden !important;
}

.jsb-modal .jsb-wrap {
    max-width: none;
    margin: 0;
    padding: 6px 0 0;
    clear: both;
}

.jsb-modal .jsb-heading {
    padding: 4px 54px 0;
}

.jsb-modal .jsb-card {
    box-shadow: none;
}

@media (max-width: 700px) {
    .jsb-modal { padding: 10px; }
    .jsb-modal-dialog {
        width: 100%;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 14px;
        padding: 14px 14px 20px;
    }
    .jsb-modal .jsb-heading { padding: 4px 34px 0; }
    .jsb-modal-close { width:38px; height:38px; font-size:24px; margin-bottom:-38px; }
}

.jsb-heading[hidden], .jsb-form[hidden], .jsb-success[hidden] { display:none !important; }

/* JS Bewerbung v1.0.0 – strukturierte Erstbewerbung */
.jsb-person-name { grid-template-columns: 150px minmax(0,1fr) minmax(0,1fr); margin-bottom:16px; }
.jsb-person-contact { grid-template-columns: .8fr 1fr 1.25fr; margin-bottom:16px; }
.jsb-person-address { grid-template-columns: 2fr .55fr 1fr; }
.jsb-grid .jsb-field textarea { min-height: 104px; }
.jsb-field input[type="date"],
.jsb-field input[type="number"],
.jsb-time-field input[type="time"] {
    width:100%; box-sizing:border-box; border:1px solid #cfc7bb; border-radius:7px; background:#fffdfa;
    color:#24372f; min-height:44px; padding:10px 12px; font:inherit; font-size:16px; outline:none;
}
.jsb-field input[type="date"]:focus,
.jsb-field input[type="number"]:focus,
.jsb-time-field input[type="time"]:focus { border-color:var(--jsb-gold); box-shadow:0 0 0 3px rgba(194,138,44,.12); }
.jsb-field input::placeholder,.jsb-field textarea::placeholder { color:#9b958c; opacity:1; }
.jsb-subblock { margin-top:20px; }
.jsb-subtitle { font-size:14px; color:var(--jsb-green); font-weight:600; margin-bottom:10px; }
.jsb-subtitle em { color:var(--jsb-gold); font-style:normal; }
.jsb-age-required-note { color:var(--jsb-muted); font-weight:400; font-size:12px; }
.jsb-pill-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.jsb-pill { position:relative; display:inline-flex; cursor:pointer; margin:0; }
.jsb-pill input { position:absolute; opacity:0; pointer-events:none; }
.jsb-pill span { display:inline-flex; align-items:center; min-height:36px; padding:7px 12px; border:1px solid #d3c9ba; border-radius:999px; background:#fffdfa; color:var(--jsb-green); font-size:13px; transition:.16s ease; }
.jsb-pill input:checked + span { background:#edf4f1; border-color:var(--jsb-green); box-shadow:inset 0 0 0 1px var(--jsb-green); }
.jsb-pill input:focus-visible + span { outline:2px solid var(--jsb-gold); outline-offset:2px; }
.jsb-section-note { margin:-4px 0 16px; color:var(--jsb-muted); font-size:13px; line-height:1.55; }
.jsb-week { border:1px solid #e1d7c8; border-radius:12px; overflow:hidden; background:#fffdfa; }
.jsb-day-row { display:grid; grid-template-columns:1.2fr .9fr .9fr; gap:16px; align-items:end; padding:12px 14px; border-top:1px solid #eee5d7; }
.jsb-day-row:first-child { border-top:0; }
.jsb-day-toggle { display:flex; align-items:center; gap:9px; min-height:44px; margin:0; cursor:pointer; color:var(--jsb-green); font-weight:600; }
.jsb-day-toggle input { width:18px !important; height:18px !important; min-height:0 !important; margin:0 !important; flex:0 0 auto; accent-color:var(--jsb-green); }
.jsb-time-field { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; margin:0; color:var(--jsb-muted); font-size:12px; }
.jsb-time-field input:disabled { opacity:.45; background:#f5f1ea; }
.jsb-upload-field { min-width:0; }
.jsb-upload-field:last-child:nth-child(odd) { grid-column:1 / -1; }
.jsb-file-name { word-break:break-word; }
.jsb-field-title select { padding-right:28px; }

@media (max-width: 820px) {
    .jsb-person-name { grid-template-columns:120px 1fr 1fr; }
    .jsb-person-contact { grid-template-columns:1fr 1fr; }
    .jsb-person-contact .jsb-field:last-child { grid-column:1 / -1; }
    .jsb-person-address { grid-template-columns:1.6fr .55fr 1fr; }
    .jsb-day-row { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width: 600px) {
    .jsb-person-name,.jsb-person-contact,.jsb-person-address { grid-template-columns:1fr; }
    .jsb-person-contact .jsb-field:last-child { grid-column:auto; }
    .jsb-field-title { max-width:170px; }
    .jsb-day-row { grid-template-columns:1fr 1fr; gap:10px 12px; }
    .jsb-day-toggle { grid-column:1 / -1; }
    .jsb-pill-list { gap:7px; }
    .jsb-pill span { font-size:12px; padding:7px 10px; }
}