.jf-app { max-width: 900px; margin: 2rem auto; color: #202631; line-height: 1.55; }
.jf-app * { box-sizing: border-box; }
.jf-app [hidden] { display: none !important; }
.jf-card { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid #dde2e7; border-radius: 12px; background: #fff; box-shadow: 0 5px 24px rgba(26, 40, 57, .06); }
.jf-app h2, .jf-app h3, .jf-app h4 { margin: 0 0 1rem; color: #192f4c; }
.jf-app h3 { font-size: 1.35rem; }
.jf-app h4 { margin-top: 1.5rem; }
.jf-choices, .jf-mode-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.jf-app button { cursor: pointer; border: 1px solid #214b73; border-radius: 6px; padding: .7rem 1.15rem; color: #fff; background: #214b73; font: inherit; font-weight: 600; }
.jf-app button:hover { background: #153451; }
.jf-app button:focus-visible, .jf-app input:focus-visible, .jf-app select:focus-visible, .jf-app textarea:focus-visible { outline: 3px solid #99b9da; outline-offset: 2px; }
.jf-app button.secondary { background: #fff; color: #214b73; }
.jf-app button.secondary:hover { background: #eef4f9; }
.jf-app button.danger { background: #a62e37; border-color: #a62e37; }
.jf-app button:disabled { opacity: .55; cursor: wait; }
.jf-app button.jf-choice { flex: 1 1 220px; min-height: 95px; text-align: left; background: #f4f7fa; color: #193a5c; display: flex; flex-direction: column; justify-content: space-between; }
.jf-app button.jf-choice:hover { background: #e7f0f7; }
.jf-app button.jf-link { margin: 0 0 .8rem; padding: .3rem 0; background: none; border: 0; color: #214b73; }
.jf-access { max-width: 470px; margin-top: 1.4rem; }
.jf-access-help { color: #596574; font-size: .92rem; }
.jf-seats { display: inline-block; padding: .35rem .7rem; border-radius: 4px; background: #edf4f8; }
.jf-progress { color: #53687e; border-bottom: 3px solid #dce6ee; margin-bottom: 1.5rem; padding-bottom: .6rem; font-size: .9rem; }
.jf-content img { max-width: 100%; height: auto; }
.jf-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .8rem 1.2rem; }
.jf-field { display: flex; flex-direction: column; gap: .3rem; margin: 0 0 1rem; font-weight: 600; }
.jf-app input:not([type=checkbox]), .jf-app select, .jf-app textarea { width: 100%; padding: .65rem .7rem; font: inherit; color: #202631; background: #fff; border: 1px solid #aab4bf; border-radius: 5px; }
.jf-app textarea { resize: vertical; }
.jf-check { display: flex; align-items: baseline; gap: .55rem; margin: 1.2rem 0; }
.jf-actions { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.75rem; }
.jf-actions button:only-child { margin-left: auto; }
.jf-payment { background: #f4f7fa; border-radius: 8px; padding: 1.1rem; }
.jf-payment p { margin: .4rem 0 1rem; }
.jf-message { margin: 1rem 0; padding: .8rem; border-left: 4px solid #a62e37; background: #fff2f2; }
.jf-summary { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 2fr); gap: .4rem 1rem; }
.jf-summary dt { font-weight: 600; } .jf-summary dd { margin: 0; overflow-wrap: anywhere; }
.jf-personal-code { background: #edf4f8; padding: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.jf-cancel-zone { margin-top: 2rem; font-size: .95rem; }
@media (max-width: 580px) { .jf-grid { grid-template-columns: 1fr; } .jf-summary { grid-template-columns: 1fr; gap: .1rem; } .jf-summary dd { margin-bottom: .7rem; } }
.jf-waitlist-notice { padding: .85rem; background: #fff8e7; border-left: 4px solid #bf8a2e; }

.jf-plain-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.jf-content p, .jf-intro p { margin-bottom: 1em; }

/* Zahlungsseite: Kosten, Termine und Überweisungsdaten auf einen Blick. */
.jf-app .jf-payment { background: transparent; border-radius: 0; padding: 0; }
.jf-app .jf-payment-total { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.35rem; border-radius: 9px; color: #fff; background: #214b73; }
.jf-app .jf-payment-total > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .65rem; }
.jf-app .jf-payment-eyebrow { flex-basis: 100%; color: #dfeaf4; font-size: .85rem; font-weight: 600; }
.jf-app .jf-payment-price { color: #fff; font-size: 1.8rem; line-height: 1.3; }
.jf-app .jf-payment-per-person { color: #dfeaf4; font-size: .9rem; }
.jf-app .jf-payment-surcharge, .jf-app .jf-payment-snapshot { margin: .7rem 0 0; color: #53687e; font-size: .9rem; }
.jf-app .jf-payment-section { margin-top: 1.4rem; }
.jf-app .jf-payment-section h4 { margin: 0 0 .65rem; color: #192f4c; font-size: 1rem; }
.jf-app .jf-payment-schedule { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 205px), 1fr)); gap: .7rem; }
.jf-app .jf-payment-rate { display: flex; justify-content: space-between; align-items: center; gap: .65rem; padding: .85rem 1rem; border: 1px solid #dce5ee; border-radius: 7px; background: #f6f8fb; }
.jf-app .jf-payment-rate-name, .jf-app .jf-payment-rate-date { display: block; }
.jf-app .jf-payment-rate-name, .jf-app .jf-payment-rate strong { color: #203a54; font-weight: 700; }
.jf-app .jf-payment-rate-date { margin-top: .2rem; color: #617386; font-size: .82rem; }
.jf-app .jf-payment-rate strong { flex-shrink: 0; }
.jf-app .jf-payment-bank dl { margin: 0; border: 1px solid #dce5ee; border-radius: 7px; overflow: hidden; }
.jf-app .jf-payment-bank dl > div { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(0, 2fr); gap: .6rem; padding: .65rem .95rem; }
.jf-app .jf-payment-bank dl > div + div { border-top: 1px solid #e9edf2; }
.jf-app .jf-payment-bank dt { color: #617386; font-weight: 500; }
.jf-app .jf-payment-bank dd { margin: 0; color: #24374a; overflow-wrap: anywhere; }
.jf-app .jf-payment-note { margin-top: 1.3rem; padding: .95rem 1.1rem; border-left: 3px solid #477ca8; border-radius: 3px; background: #f3f7fb; }
.jf-app .jf-payment-note p:first-child { margin-top: 0; }
.jf-app .jf-payment-note p:last-child { margin-bottom: 0; }
.jf-app .jf-payment-hint { margin: 1.1rem 0 0; color: #617386; font-size: .85rem; }
@media (max-width: 480px) { .jf-app .jf-payment-bank dl > div { grid-template-columns: 1fr; gap: .1rem; } .jf-app .jf-payment-price { font-size: 1.55rem; } }

/* reCAPTCHA: das originale Google-Widget bleibt in kleinen Ansichten erreichbar. */
.jf-app .jf-captcha-block { margin: .9rem 0 1rem; max-width: 100%; overflow-x: auto; }
.jf-app .jf-recaptcha { min-height: 78px; }
.jf-app .jf-captcha-info { color: #596574; font-size: .88rem; margin: .45rem 0 0; }
