/* Winti Kids – Unterseiten (Artikel, SP Page Builder, EasyBlog, Events Booking, Formulare).
 * Wird nach Bootstrap geladen und gleicht dessen Stil an das Design an.
 */

.wk-site { --bs-body-font-family: var(--wk-font); --bs-body-color: var(--wk-ink); --bs-body-bg: var(--wk-paper); --bs-link-color: var(--wk-blue); --bs-link-hover-color: var(--wk-red); --bs-border-radius: 0; --bs-primary: var(--wk-blue); --bs-primary-rgb: 14, 74, 115; }

/* Component area: centred container unless the page brings its own full-width sections */
.wk-component { width: 100%; max-width: var(--wk-max); margin: 0 auto; padding: clamp(24px, 4vw, 56px) var(--wk-gutter) clamp(56px, 6vw, 96px); }
.is-fullwidth .wk-component { max-width: none; padding: 0; }

.wk-component h1, .wk-component .page-header h1, .wk-component .page-header h2 {
	margin: 0 0 .5em; font: 800 clamp(40px, 6vw, 84px)/.92 var(--wk-font); font-stretch: 92%; letter-spacing: -.035em; color: var(--wk-ink);
}
.wk-component h2 { margin: 1.4em 0 .5em; font: 800 clamp(28px, 3vw, 40px)/1.05 var(--wk-font); font-stretch: 92%; letter-spacing: -.02em; }
.wk-component h3 { margin: 1.2em 0 .5em; font: 800 clamp(22px, 2.2vw, 28px)/1.15 var(--wk-font); font-stretch: 92%; }
.wk-component p, .wk-component li { font: 400 18px/1.65 var(--wk-font); color: var(--wk-grey-3); }
.wk-component .page-header { border: 0; }

/* Buttons from Bootstrap / extensions get the design's flat look */
.wk-site .btn { border-radius: 0; font: 700 17px/1 var(--wk-font); padding: 16px 24px; }
.wk-site .btn-primary, .wk-site .btn-success { background: var(--wk-ink); border-color: var(--wk-ink); color: #fff; }
.wk-site .btn-primary:hover, .wk-site .btn-success:hover { background: var(--wk-red); border-color: var(--wk-red); color: #fff; }
.wk-site .btn-secondary, .wk-site .btn-outline-primary, .wk-site .btn-default { background: transparent; border: 2px solid var(--wk-ink); color: var(--wk-ink); padding: 14px 22px; }
.wk-site .btn-secondary:hover, .wk-site .btn-outline-primary:hover, .wk-site .btn-default:hover { background: var(--wk-ink); color: #fff; }

/* Form fields */
.wk-site .form-control, .wk-site .form-select, .wk-site .inputbox,
.wk-site input[type="text"], .wk-site input[type="email"], .wk-site input[type="tel"], .wk-site input[type="number"],
.wk-site input[type="date"], .wk-site input[type="password"], .wk-site select, .wk-site textarea {
	border: 1px solid rgba(19, 25, 31, .3); border-radius: 0; background-color: var(--wk-paper);
	font: 400 17px/1.4 var(--wk-font); color: var(--wk-ink);
}
.wk-site input[type="text"], .wk-site input[type="email"], .wk-site input[type="tel"], .wk-site input[type="number"],
.wk-site input[type="date"], .wk-site input[type="password"], .wk-site select, .wk-site .form-control:not(textarea), .wk-site .form-select { min-height: 56px; padding: 0 16px; }
.wk-site textarea { padding: 14px 16px; }
.wk-site .form-control:focus, .wk-site .form-select:focus, .wk-site input:focus, .wk-site select:focus, .wk-site textarea:focus { border-color: var(--wk-blue); box-shadow: none; outline: 3px solid var(--wk-red); outline-offset: 0; }
.wk-site input[type="radio"], .wk-site input[type="checkbox"] { accent-color: var(--wk-blue); }
.wk-site label, .wk-site .form-label, .wk-site .control-label { font: 600 16px/1.3 var(--wk-font); }

/* System messages */
#system-message-container { width: 100%; }
#system-message-container:not(:empty) { max-width: var(--wk-max); margin: 0 auto; padding: 16px var(--wk-gutter) 0; }
.wk-site joomla-alert, .wk-site .alert { border-radius: 0; border: 2px solid var(--wk-blue); background: var(--wk-blue-tint); color: var(--wk-ink); font: 500 16px/1.4 var(--wk-font); }
.wk-site joomla-alert[type="danger"], .wk-site joomla-alert[type="error"], .wk-site .alert-danger, .wk-site .alert-error { border-color: var(--wk-red); background: var(--wk-error-bg); color: var(--wk-error-dark); }

/* SP Page Builder pages keep their own grid, but use the site font */
.wk-site .sp-page-builder { font-family: var(--wk-font); }
.wk-site .sppb-addon-title { font-family: var(--wk-font); font-weight: 800; font-stretch: 92%; letter-spacing: -.02em; }
.wk-site .sppb-btn { border-radius: 0; font: 700 17px/1 var(--wk-font); }

/* ---------- Event detail page (Events Booking override) ---------- */

.wk-crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: clamp(24px, 3vw, 40px); font: 500 15px/1.4 var(--wk-font); color: var(--wk-grey-1); }
.wk-site .wk-crumbs a { color: var(--wk-grey-1); }
.wk-site .wk-crumbs a:hover { color: var(--wk-red); }
.wk-crumbs [aria-current] { color: var(--wk-ink); }

.wk-event__layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 5vw, 72px); padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(40px, 5vw, 72px); }
.wk-event__main { flex: 3 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.wk-event__aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.wk-event__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-site .wk-event__title { margin: 0; font: 800 clamp(52px, 8vw, 120px)/.88 var(--wk-font); font-stretch: 92%; letter-spacing: -.04em; color: var(--wk-ink); }

.wk-facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 1px; margin: 0; background: var(--wk-line); border: 1px solid var(--wk-line); }
.wk-facts-grid > div { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: #fff; }
.wk-facts-grid dt { font: 600 13px/1 var(--wk-font); letter-spacing: .1em; text-transform: uppercase; color: var(--wk-red); }
.wk-facts-grid dd { margin: 0; font: 700 20px/1.25 var(--wk-font); }

.wk-panel { display: flex; flex-direction: column; gap: 24px; padding: clamp(20px, 3vw, 32px); background: #fff; border: 1px solid var(--wk-line); }
.wk-site .wk-panel__title { margin: 0; font: 800 26px/1.1 var(--wk-font); font-stretch: 92%; letter-spacing: 0; }
.wk-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.wk-step { display: flex; flex-direction: column; gap: 10px; }
.wk-step__bar { height: 6px; background: var(--wk-line); }
.wk-step__state { font: 600 14px/1 var(--wk-font); color: var(--wk-grey-1); }
.wk-step__date { font: 800 24px/1 var(--wk-font); font-stretch: 92%; }
.wk-step__label { font: 500 16px/1.3 var(--wk-font); color: var(--wk-grey-2); }
.wk-step.is-done .wk-step__bar { background: var(--wk-blue); }
.wk-step.is-done .wk-step__state { color: var(--wk-blue); }
.wk-step.is-current .wk-step__bar { background: var(--wk-red); }
.wk-step.is-current .wk-step__state { color: var(--wk-red); }
.wk-steps__action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--wk-line-mid); }
.wk-steps__note { font: 500 16px/1.4 var(--wk-font); color: var(--wk-grey-2); }
.wk-steps__note--strong { font: 600 17px/1.4 var(--wk-font); color: var(--wk-ink); }
.wk-steps__notify { flex: 1 1 420px; }

.wk-article { display: flex; flex-direction: column; gap: 18px; max-width: 44em; }
.wk-article > * { margin: 0; }
.wk-site .wk-article p, .wk-site .wk-article li { font: 400 18px/1.65 var(--wk-font); color: var(--wk-grey-3); text-wrap: pretty; }
.wk-site .wk-article p:has(> strong:only-child) { font: 700 20px/1.5 var(--wk-font); }

.wk-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.wk-box { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 3vw, 32px); background: #fff; color: var(--wk-ink); border: 1px solid var(--wk-line); }
.wk-box--blue { background: var(--wk-blue); color: #fff; }
.wk-site .wk-box__title { margin: 0; font: 800 28px/1.05 var(--wk-font); font-stretch: 92%; letter-spacing: 0; color: inherit; }
.wk-site .wk-box p { margin: 0; font: 400 17px/1.55 var(--wk-font); color: inherit; opacity: .9; }
.wk-box .wk-btn { margin-top: auto; align-self: flex-start; }
.wk-site .wk-box .wk-btn--white:hover, .wk-site .wk-box .wk-btn--dark:hover { background: var(--wk-ink); color: #fff; }
.wk-site .wk-box--blue .wk-btn--white:hover { background: var(--wk-ink); }

.wk-event__poster { display: block; width: 100%; height: auto; background: #fff; border: 1px solid var(--wk-line); }
.wk-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: #fff; border: 1px solid var(--wk-line); }
.wk-site .wk-card__title { margin: 0; font: 800 20px/1.1 var(--wk-font); letter-spacing: 0; }
.wk-card address, .wk-site .wk-card p { margin: 0; font: 400 17px/1.5 var(--wk-font); font-style: normal; color: var(--wk-grey-2); }
.wk-card address { color: var(--wk-ink); }
.wk-card .wk-link-underline { align-self: flex-start; font-size: 16px; }
.wk-card__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-sponsor { display: flex; align-items: center; gap: 14px; padding: 8px 4px; font: 500 14px/1.3 var(--wk-font); color: var(--wk-grey-1); }
.wk-sponsor img { display: block; width: auto; height: 36px; }

@media (max-width: 959.98px) {
	.wk-event__aside { position: static; }
}

/* Links inside running text are underlined (WCAG 1.4.1) */
.wk-article a, .wk-component p a, .wk-component li a { text-decoration: underline; text-underline-offset: 2px; }

/* Convert Forms (e.g. HmS request form) in the design: readable labels, flat fields and buttons */
.wk-site .convertforms { --label-color: var(--wk-ink); --input-color: var(--wk-ink); --input-border-radius: 0; font-family: var(--wk-font); }
.wk-site .convertforms .cf-label { color: var(--wk-ink) !important; font: 600 16px/1.3 var(--wk-font) !important; }
.wk-site .convertforms .cf-label .cf-required-label { color: var(--wk-red); }
.wk-site .convertforms .cf-input { border-radius: 0 !important; min-height: 56px; font-size: 17px !important; color: var(--wk-ink) !important; }
.wk-site .convertforms .cf-btn { border-radius: 0 !important; background: var(--wk-red) !important; color: #fff !important; font: 700 17px/1 var(--wk-font) !important; padding: 16px 24px !important; }
.wk-site .convertforms .cf-btn:hover { background: var(--wk-ink) !important; }
.wk-site .convertforms .cf-control-input-desc { opacity: 1; color: var(--wk-grey-1) !important; font-size: 15px; }
.wk-site .convertforms .cf-control-input-desc * { color: inherit !important; }