/*
 * Shared content pages of the section-builder templates (lumen, atelier, steuerkanzlei, hellwach-v2):
 * News, Termine, Team, Galerie, Videos, Formulare (also the contact page's form), Orte, Trainingszeiten, Suche and the
 * content of customer pages.
 * Colours, fonts and radius come from the hosting template: its includes/page-frame.xhtml sets the --mp-* tokens.
 * Rules (ui-ux-pro-max): body ≥ 16px, line-height 1.6, text ≤ 70ch, targets ≥ 44px with ≥ 8px gaps, visible focus,
 * no motion without prefers-reduced-motion.
 */
.mp {
  --mp-ink: #0f172a;
  --mp-muted: #475569;
  --mp-surface: #ffffff;
  --mp-soft: #f1f5f9;
  --mp-border: #d9dee5;
  --mp-accent: #1f4f7a;
  --mp-on-accent: #ffffff;
  --mp-radius: 12px;
  --mp-font-display: inherit;
  --mp-gap: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--mp-ink);
  font-size: 1rem;
  line-height: 1.6;
}
.mp--framed { margin-top: clamp(1.5rem, 4vw, 2.5rem); } /* gap below the template's page headline */
.mp *, .mp *::before, .mp *::after { box-sizing: border-box; }
.mp a { color: var(--mp-accent-text, var(--mp-accent)); text-underline-offset: 2px; } /* --mp-accent-text: optional link colour when the button colour is too light for text */
.mp a:focus-visible, .mp button:focus-visible, .mp input:focus-visible, .mp textarea:focus-visible, .mp select:focus-visible,
.mp summary:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 2px; border-radius: 4px; }
.mp h2, .mp h3 { font-family: var(--mp-font-display); line-height: 1.25; margin: 0; color: var(--mp-ink); }
.mp h2 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.mp h3 { font-size: 1.125rem; }
.mp img { max-width: 100%; height: auto; }

/* visually hidden, still read by screen readers */
.mp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mp-input { min-height: 44px; padding: .6rem .9rem; border: 1px solid var(--mp-border); border-radius: 999px; background: var(--mp-surface); color: var(--mp-ink); font: inherit; }

/* opening hours / training times */
.mp-hours { max-width: 46rem; }
.mp-hours__day { margin: 1.5rem 0 .5rem; font-size: 1.125rem; }
.mp-hours__day:first-child { margin-top: 0; }
.mp-hours__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--mp-border); }
.mp-hours__time { color: var(--mp-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* page intro + text (customer pages, detail pages) */
.mp-intro { max-width: 70ch; margin: 0 0 var(--mp-gap); color: var(--mp-muted); font-size: 1.0625rem; }
.mp-prose { max-width: 70ch; overflow-wrap: anywhere; }
.mp-prose > :first-child { margin-top: 0; }
.mp-prose p, .mp-prose ul, .mp-prose ol { margin: 0 0 1em; }
/* lists written by the author: templates reset ul/ol for their navigation – bring markers back (class-less lists only) */
.mp-prose ul:not([class]) { list-style: disc; margin: 0 0 1em; padding-left: 1.5em; }
.mp-prose ol:not([class]) { list-style: decimal; margin: 0 0 1em; padding-left: 1.5em; }
.mp-prose li > :is(ul, ol):not([class]) { margin: .25em 0 0; }
.mp-prose h2, .mp-prose h3, .mp-prose h4 { margin: 1.5em 0 .5em; }
.mp-prose img { border-radius: var(--mp-radius); }
.mp-prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.mp-prose td, .mp-prose th { border: 1px solid var(--mp-border); padding: .5rem .75rem; text-align: left; }
.mp-empty { padding: 1.5rem; border: 1px dashed var(--mp-border); border-radius: var(--mp-radius); color: var(--mp-muted); }

/* list of cards (news, termine, team, videos, orte, formulare, search results) */
.mp-list { display: grid; gap: var(--mp-gap); margin: 0; padding: 0; list-style: none; }
.mp-list--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.mp-card {
  position: relative; display: flex; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: var(--mp-radius);
}
.mp-card--stack { flex-direction: column; }
.mp-card__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; flex: 1; }
.mp-card__body > * { margin: 0; } /* spacing comes from the gap, not from template p/h margins */
.mp-card__title a { color: var(--mp-ink); text-decoration: none; }
.mp-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--mp-radius); } /* whole card clickable */
.mp-card__title a:hover { text-decoration: underline; }
.mp-card:focus-within { outline: 3px solid var(--mp-accent); outline-offset: 2px; }
.mp-card__title a:focus-visible { outline: none; }
.mp-card__text { color: var(--mp-muted); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mp-card__media { flex: none; width: 6.5rem; aspect-ratio: 1; border-radius: calc(var(--mp-radius) * .75); object-fit: cover; background: var(--mp-soft); }
.mp-card__media + .mp-date { display: none; } /* news with a picture: the date is in the meta line */
.mp-card__text img, .mp-card__text iframe { display: none; } /* the picture is the card's media; embeds do not fit 4 lines */
.mp-card--stack .mp-card__media { width: 100%; aspect-ratio: 16 / 9; }
.mp-card .mp-actions { position: relative; z-index: 1; } /* buttons above the card link */

.mp-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--mp-muted); }
.mp-ai-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--mp-muted); } /* „Mit KI erstellt“ (aiNote.xhtml) */
.mp-meta li { display: inline-flex; align-items: center; gap: .35rem; }

/* date badge (news, termine) */
.mp-date {
  flex: none; display: grid; place-items: center; align-content: center; width: 4.25rem; min-height: 4.25rem; padding: .35rem;
  border-radius: calc(var(--mp-radius) * .75); background: var(--mp-soft); color: var(--mp-ink); text-align: center; line-height: 1.1;
}
.mp-date__day { font-family: var(--mp-font-display); font-size: 1.5rem; font-weight: 700; }
.mp-date__month { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mp-muted); }

/* buttons */
.mp-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.mp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem;
  border: 1px solid var(--mp-accent); border-radius: 999px; background: var(--mp-accent); color: var(--mp-on-accent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.mp-btn:hover { filter: brightness(1.08); }
.mp-btn--ghost { background: transparent; color: var(--mp-accent); }
.mp-btn--ghost:hover { background: var(--mp-soft); filter: none; }
/* a link styled as button: „.mp a“ (link colour = accent) is more specific than .mp-btn and gave „Termin buchen“
   the button's own colour as text colour; template rules like „main a“ / „.x-prose a“ must not win either */
.mp a.mp-btn, .mp a.mp-btn:hover, .mp a.mp-btn:visited { color: var(--mp-on-accent); text-decoration: none; }
.mp a.mp-btn--ghost, .mp a.mp-btn--ghost:hover, .mp a.mp-btn--ghost:visited { color: var(--mp-accent-text, var(--mp-accent)); }
.mp input.mp-btn { color: var(--mp-on-accent); }
.mp input.mp-btn--ghost { color: var(--mp-accent-text, var(--mp-accent)); }

/* detail page */
.mp-detail { display: grid; gap: var(--mp-gap); }
.mp-detail__media { display: block; width: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--mp-radius); background: var(--mp-soft); }
.mp-detail__aside { display: grid; gap: .75rem; align-content: start; padding: 1.25rem; border-radius: var(--mp-radius); background: var(--mp-soft); }
@media (min-width: 900px) {
  .mp-detail--aside { grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; }
}
.mp-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; margin-bottom: .5rem; font-weight: 600; }

/* contact rows (team, orte) */
.mp-contact { display: grid; gap: .25rem; margin: 0; }
.mp-contact dt { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; color: var(--mp-muted); }
.mp-contact dd { margin: 0 0 .5rem; overflow-wrap: anywhere; }

/* gallery */
.mp-album + .mp-album { margin-top: calc(var(--mp-gap) * 1.5); }
.mp-album summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; cursor: pointer;
  font-family: var(--mp-font-display); font-size: 1.25rem; font-weight: 700; list-style: none; }
.mp-album summary::-webkit-details-marker { display: none; }
.mp-album summary::after { content: "+"; font-size: 1.5rem; color: var(--mp-accent); }
.mp-album[open] summary::after { content: "–"; }
.mp-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.mp-pics a { display: block; border-radius: calc(var(--mp-radius) * .5); overflow: hidden; }
.mp-pics img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .2s ease; }
.mp-pics a:focus-visible img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) { .mp-pics a:hover img { transform: scale(1.03); } }

/* video */
.mp-video { position: relative; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; border-radius: var(--mp-radius); overflow: hidden; background: #000; }
.mp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* forms of the form module (formularFelder.xhtml): contact page and single form pages */
.mp-form { max-width: 44rem; }
.mp-ff { display: grid; gap: 1.1rem; max-width: 44rem; }
.mp-ff__hint, .mp-ff__help { margin: 0; color: var(--mp-muted); font-size: .9375rem; }
.mp-ff__help { margin-top: .35rem; }
.mp-ff__field[hidden] { display: none; }
.mp-ff__heading { margin: .75rem 0 0; padding-top: .75rem; border-top: 1px solid var(--mp-border); font-size: 1.125rem; }
.mp-ff__label { display: block; margin: 0 0 .35rem; padding: 0; font-weight: 600; }
.mp-ff__control {
  display: block; width: 100%; min-height: 44px; padding: .6rem .75rem; border: 1px solid var(--mp-border);
  border-radius: calc(var(--mp-radius) * .5); background: var(--mp-surface); color: var(--mp-ink); font: inherit;
}
textarea.mp-ff__control { min-height: 8rem; resize: vertical; }
.mp-ff__select { appearance: auto; }
.mp-ff__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.mp-ff__choice { display: flex; align-items: center; gap: .6rem; min-height: 44px; margin: 0 0 .5rem; padding: .5rem .85rem;
  border: 1px solid var(--mp-border); border-radius: calc(var(--mp-radius) * .5); background: var(--mp-surface); cursor: pointer; }
.mp-ff__choice:has(input:checked) { border-color: var(--mp-accent); box-shadow: inset 0 0 0 1px var(--mp-accent); }
.mp-ff__choice input, .mp-ff__check input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--mp-accent); }
.mp-ff__check { display: flex; align-items: flex-start; gap: .6rem; }
.mp-ff__check input { margin-top: .2rem; }
.mp-ff__check label { font-weight: 400; }
.mp-ff__submit { justify-self: start; min-height: 48px; padding: .75rem 1.5rem; }
.mp-ff__messages { margin: 0; padding: 0; list-style: none; }
.mp-ff__msg { margin: 0 0 .5rem; padding: .75rem 1rem; border-radius: calc(var(--mp-radius) * .5); }
.mp-ff__msg--error { background: #fdecec; color: #8a1c1c; border: 1px solid #f3b4b4; }
.mp-ff__msg--ok, .mp-ff__done { background: #e9f6ee; color: #155c2e; border: 1px solid #b6e0c4; }
.mp-ff__done { padding: 1rem 1.25rem; border-radius: var(--mp-radius); }
.mp-ff__done p { margin: 0; }
.mp-ff input:focus-visible, .mp-ff textarea:focus-visible, .mp-ff select:focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 2px; }

/* event booking (terminBuchung.xhtml): free slots, then the form (.mp-ff), then the „check your mail“ card */
.mp-booking { display: grid; gap: 1rem; max-width: 44rem; margin-top: var(--mp-gap); }
.mp-booking__title { margin: 0; }
.mp-booking .mp-ff__done h2 { margin: 0 0 .35rem; font-size: 1.125rem; color: inherit; }
.mp-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mp-slot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .5rem .5rem 1rem;
  background: var(--mp-surface); border: 1px solid var(--mp-border); border-radius: calc(var(--mp-radius) * .5); }
.mp-slot__time { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-slot__pick { padding-inline: .9rem; }
.mp details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--mp-accent-text, var(--mp-accent)); }
/* message card (terminBuchungStatus.xhtml – link from the booking mail) */
.mp-notice { display: grid; gap: .75rem; max-width: 44rem; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--mp-border);
  border-left: 4px solid var(--mp-accent); border-radius: var(--mp-radius); background: var(--mp-surface); }
.mp-notice--ok { border-left-color: #1f8a4c; }
.mp-notice--error { border-left-color: #b42318; }
.mp-notice > * { margin: 0; }
.mp-notice__title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.mp-notice address { font-style: normal; color: var(--mp-muted); }

/* paginator of p:dataList */
.mp .ui-paginator { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: var(--mp-gap); padding: 0; border: 0; background: none; }
.mp .ui-paginator a, .mp .ui-paginator span.ui-paginator-page {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--mp-border);
  border-radius: 999px; color: var(--mp-ink); text-decoration: none; background: var(--mp-surface);
}
.mp .ui-paginator .ui-state-active { background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-on-accent); }
.mp .ui-paginator .ui-state-disabled { opacity: .45; }
.mp .ui-datalist, .mp .ui-datalist-content, .mp .ui-widget-content { border: 0; background: none; padding: 0; }
.mp .ui-datalist-data { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--mp-gap); }
/* p:dataList type="none" renders the items directly into the content div */
.mp .ui-datalist-content { display: grid; gap: var(--mp-gap); }
.mp .ui-datalist-content > .ui-datalist-data { display: contents; }

@media (max-width: 599px) {
  .mp-card { flex-direction: column; }
  .mp-card__media { width: 100%; aspect-ratio: 16 / 9; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-pics img { transition: none; }
}

/* search results (_pages/suche.xhtml); suggestion list colours via --ss-* (/css/site-search.css) */
.mp-search { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; max-width: 46rem;
  --ss-bg: var(--mp-surface); --ss-ink: var(--mp-ink); --ss-muted: var(--mp-muted); --ss-border: var(--mp-border);
  --ss-accent: var(--mp-accent); --ss-active-bg: var(--mp-soft); --ss-radius: var(--mp-radius); }
.mp-search__input { flex: 1; min-width: 12rem; }
.mp-search__summary { margin: 0 0 1rem; }
.mp-search__count { margin: 0; color: var(--mp-muted); }
.mp-search__direct { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1.5rem; }
.mp-search__direct-label { color: var(--mp-muted); font-size: .9375rem; }
.mp-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 1px solid var(--mp-border); border-radius: 999px; background: var(--mp-surface); color: var(--mp-accent); font-weight: 600; text-decoration: none; }
.mp-chip:hover { background: var(--mp-soft); }

/* news tags, offer price, course descriptions under the training times */
.mp-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.mp-tags li { padding: .125rem .625rem; border-radius: 999px; background: var(--mp-soft); color: var(--mp-muted); font-size: .8125rem; }
.mp-price__was { margin-left: .5rem; color: var(--mp-muted); font-weight: 400; }
.mp-courses { margin-top: 2.5rem; }
.mp-course { padding: 1rem 0; border-bottom: 1px solid var(--mp-border); }
.mp-course__title { margin: 0 0 .25rem; font-size: 1rem; }
.mp-course .mp-prose > :last-child { margin-bottom: 0; }
.mp-search__group { margin: 0 0 2rem; max-width: 70ch; }
.mp-search__heading { display: flex; align-items: baseline; gap: .4rem; margin: 0 0 .5rem; }
.mp-search__n { color: var(--mp-muted); font-size: .9375rem; font-weight: 400; }
.mp-search__list { margin: 0; padding: 0; list-style: none; }
.mp-search__hit { padding: .875rem 0; border-bottom: 1px solid var(--mp-border); }
.mp-search__hit:last-child { border-bottom: 0; }
.mp-search__title { font-size: 1.0625rem; font-weight: 600; text-decoration: none; }
.mp-search__title:hover { text-decoration: underline; }
.mp-search__meta { margin: .125rem 0 0; color: var(--mp-muted); font-size: .875rem; }
.mp-search__snippet { margin: .25rem 0 0; color: var(--mp-ink); }
.mp-search mark, .mp-search__hit mark { background: color-mix(in srgb, var(--mp-accent) 22%, transparent); color: inherit; padding: 0 .1em; border-radius: 2px; }
.mp-search__more { margin: .5rem 0 0; color: var(--mp-muted); font-size: .9375rem; }
@media (forced-colors: active) { .mp-search__hit mark { background: Mark; color: MarkText; } }

/* ---------- newsletter sign-up (newsletterBand.xhtml / newsletterForm.xhtml): section or band above the footer ---------- */
.nl { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--mp-soft, #f4f6f8); color: var(--mp-ink, #0f172a); }
.nl--band { border-top: 1px solid var(--mp-border, #e2e8f0); }
.nl__wrap { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
.nl__inner { display: grid; gap: 1.25rem 3rem; align-items: center; }
@media (min-width: 900px) { .nl__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.nl__overline { margin: 0 0 .35rem; color: var(--mp-accent-text, var(--mp-accent)); font-weight: 700; font-size: .875rem; }
.nl__headline { margin: 0 0 .5rem; font-family: var(--mp-font-display, inherit); font-size: clamp(1.5rem, 3vw, 2.125rem); line-height: 1.15; }
.nl__text { margin: 0; color: var(--mp-muted, #475569); max-width: 38rem; }
.nl-form { display: grid; gap: .5rem; }
.nl-form__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.nl-form__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-form .nl-form__input { flex: 1 1 14rem; min-width: 0; min-height: 48px; padding: .6rem 1rem; border: 1px solid var(--mp-border, #cbd5e1); border-radius: 999px; background: var(--mp-surface, #fff); color: var(--mp-ink, #0f172a); font: inherit; }
.nl-form .nl-form__input:focus { outline: 2px solid var(--mp-accent, #2563eb); outline-offset: 1px; }
.nl-form .nl-form__button { flex: none; min-height: 48px; padding: .6rem 1.4rem; border: 0; border-radius: 999px; background: var(--mp-accent, #2563eb); color: var(--mp-on-accent, #fff); font: inherit; font-weight: 650; cursor: pointer; }
.nl-form .nl-form__button .ui-button-text { padding: 0; }
.nl-form__hint { margin: 0; font-size: .8125rem; color: var(--mp-muted, #475569); }
.nl-form__hint a { color: inherit; text-decoration: underline; }
.nl-form__messages { margin: 0; }
.nl-form__messages .ui-messages-info, .nl-form__messages .ui-messages-error { margin: 0; padding: .65rem .9rem; border-radius: calc(var(--mp-radius, 8px) * .75); font-weight: 600; }
.nl-form__messages .ui-messages-info { background: #e6f4ea; color: #145a2e; border: 0; }
.nl-form__messages .ui-messages-error { background: #fdecea; color: #8a1c14; border: 0; }