/* ===================================================================
   JP2027 Theme – angeglichen an jp2027.de (WordPress „Blockskit Travel“)
   Farben und Schrift hier zentral ändern.
   =================================================================== */
:root {
    --jp-primary:      #113A75;   /* Navy (WP „secondary“) */
    --jp-primary-dark: #0B2A57;   /* Hover / dunklere Flächen */
    --jp-text:         #6C6C6C;   /* Fließtext (WP „body“) */
    --jp-heading:      #1B1917;   /* Überschriften (WP „heading“) */
    --jp-light:        #EEF8FF;   /* helle Hinweisflächen (WP „light“) */
    --jp-outline:      #EDEDED;
    --jp-font:         'Plus Jakarta Sans', sans-serif;
}

body {
    font-family: var(--jp-font);
    color: var(--jp-text);
    font-size: 15px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--jp-font);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}
h1 { font-size: 2.1rem; }
.page-title h1, .main-content > h1 { color: var(--jp-heading); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p, li, label { font-family: var(--jp-font); }
a { color: var(--jp-primary); }
a:hover { color: var(--jp-primary-dark); }
input, select, textarea, button { font-family: var(--jp-font); }

input:focus, select:focus, textarea:focus {
    border-color: var(--jp-primary) !important;
    outline-color: var(--jp-primary);
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--jp-primary); }

::selection { background: var(--jp-primary); color: #fff; }

/* ── Hinweis-Kästen im jp2027-Schema ─────────────────────────────
   info-box = Navy (Information), warning-box = Orange-Akzent der
   WordPress-Seite (#FF7525) statt des alten Gelb. */
.info-box,
.warning-box,
.success-box {
    border-radius: 3px;
    padding: 14px 18px;
    margin: 16px 0;
    line-height: 1.55;
}
.info-box    { background: var(--jp-light); border-left: 4px solid var(--jp-primary); color: var(--jp-text); }
.warning-box { background: #FFF4EC;         border-left: 4px solid #FF7525;           color: #5a3a24; }
.info-box strong    { color: var(--jp-primary); }
.warning-box strong { color: #8A3B0C; }
.info-box > :last-child,
.warning-box > :last-child { margin-bottom: 0; }

/* ── Listen: Aufzählungspunkte innerhalb der Box ───────────────── */
.main-content ul,
.main-content ol,
.info-card ul,
.info-card ol {
    padding-left: 1.4em;
    margin: 0.5em 0 1.2em;
}
.main-content li { margin: 0.25em 0; padding-left: 0.2em; }
.main-content li::marker { color: var(--jp-primary); }
.info-box ul, .info-box ol,
.warning-box ul, .warning-box ol { margin: 8px 0 0; }

/* ── Abstände von Zwischenüberschriften ────────────────────────── */
.main-content h3,
.info-card h3,
.form-step h3 {
    color: var(--jp-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 36px 0 12px;
}
.info-card h2 + h3,
.form-step h2 + h3,
.feature-item h3 { margin-top: 0; }
.feature-item h3 { color: var(--jp-primary); }
.main-content p + ul,
.info-card p + ul { margin-top: -0.8em; }
.info-card ul + p,
.info-card ul + div { margin-top: 1em; }

/* ── Formular: Auswahlfelder, Rahmen, Pflichtfeld-Stern ────────── */
.radio-option,
.checkbox-option {
    border-color: var(--jp-outline) !important;
    border-radius: 3px !important;
    align-items: flex-start;
    gap: 2px;
}
.radio-option:hover,
.checkbox-option:hover { background: var(--jp-light) !important; border-color: #cfdcef !important; }
.radio-option input,
.checkbox-option input { margin-top: 4px; flex-shrink: 0; }
.radio-option label,
.checkbox-option label { line-height: 1.45; }
label.required::after,
.required::after { color: #c0392b; }
.form-step {
    border-radius: 4px;
}
input[type="text"], input[type="email"], input[type="number"], input[type="password"],
input[type="url"], input[type="tel"], select, textarea {
    border-radius: 3px;
}
.cta-button, .form-button, .submit-btn {
    border-radius: 3px !important;
    font-weight: 600;
    letter-spacing: normal !important;
    text-transform: none !important;
}
.info-card { border-radius: 4px; }