/**
 * mediaktiv template - brand CSS
 *
 * Loaded AFTER the unmodified vendor Bootstrap 5 CSS (media/vendor/bootstrap, registered as the
 * "bootstrap.css" web asset and loaded via templates/mediaktiv/index.php / error.php). All
 * colors/typography/spacing values below come from docs/design-spec.md (the verified live
 * design, NOT the misleading Astroid default.json - see that document's "Kernerkenntnis"
 * section).
 *
 * IMPORTANT for whoever reviews this on the real server (see docs/phase3-testing-checklist.md):
 * Bootstrap 5.3's compiled CSS uses per-component custom properties (e.g. ".btn-primary" sets
 * its OWN "--bs-btn-bg" etc. to a literal hex value) rather than reading the root-level
 * "--bs-primary" variable. Overriding "--bs-primary" at :root therefore does NOT recolor
 * ".btn-primary" - only selectors that Bootstrap's reboot.css itself writes as var()-references
 * to root tokens (plain <a> links, nav-links, pagination links - all via --bs-link-color /
 * --bs-link-color-rgb) pick up a :root override automatically. Everything else (buttons, form
 * focus rings, badges) is overridden explicitly below, by selector, with values read directly
 * out of media/vendor/bootstrap/css/bootstrap.css. This was verified by reading that file, not
 * by running the site - please double-check button/link colors visually against the live site
 * as one of the first things on the Linux test machine.
 */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  /* Colors - docs/design-spec.md Abschnitt 1 */
  --mk-color-primary: #D11A1F;
  --mk-color-primary-rgb: 209, 26, 31;
  --mk-color-primary-hover: #B0161A;
  --mk-color-primary-active: #961215;
  --mk-color-success: #01978C;
  --mk-color-warning: #FFBE00;
  --mk-color-info: #17A2B8;

  --mk-color-body-text: #555555;
  --mk-color-body-link: #222222;
  --mk-color-body-link-hover: #999999;

  --mk-color-header-text: #999999;
  --mk-color-nav-link: #555555;
  --mk-color-nav-link-hover: #999999;
  --mk-color-nav-link-active: #D11A1F;

  --mk-color-dropdown-bg: #ffffff;
  --mk-color-dropdown-link: #777777;
  --mk-color-dropdown-hover-bg: #eeeeee;
  --mk-color-dropdown-hover-link: #000000;

  --mk-color-tinted-bg: #eeeeee;
  --mk-color-footer-outer: #D11A1F;
  --mk-color-footer-column: #222222;
  --mk-color-footer-copyright: #0B2834;

  /* Typography - docs/design-spec.md Abschnitt 2 (bewusst kein Google-Fonts-Import) */
  --mk-font-family: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --mk-container-max: 1140px;
  --mk-section-gap-y: 3%;

  /* z-index scale - klein und explizit gehalten. Der Cookie-Banner steht bewusst UEBER Nav und
     Dropdown: .mk-header hat selbst einen eigenen Stacking-Context (position:relative + z-index),
     der bei aufgeklapptem Mobilmenue (viele Menuepunkte, laenger als Viewport minus Banner-Hoehe)
     sonst den fixierten Banner komplett verdeckt - genau der alte Astroid-Bug, den dieses Template
     laut README vermeiden sollte. Per echtem Funktionstest reproduziert (Phase 3 Linux-Testumgebung,
     docs/phase3-testing-checklist.md Abschnitt 5) und hier durch die Reihenfolge behoben, nicht nur
     durch die (fuer sich allein nicht ausreichende) Geometrie "Banner unten fix, Menue klappt oben
     auf". */
  --mk-z-nav: 1030;
  --mk-z-dropdown: 1035;
  --mk-z-cookie-banner: 1040;

  /* Bootstrap root tokens that reboot.css references via var() - overriding these here is
     sufficient for plain <a> links, nav-links and pagination links (see file header comment). */
  --bs-body-font-family: var(--mk-font-family);
  --bs-body-color: var(--mk-color-body-text);
  --bs-link-color: var(--mk-color-body-link);
  --bs-link-color-rgb: 34, 34, 34;
  --bs-link-hover-color: var(--mk-color-body-link-hover);
  --bs-link-hover-color-rgb: 153, 153, 153;
  --bs-primary: var(--mk-color-primary);
  --bs-primary-rgb: var(--mk-color-primary-rgb);
}

/* ==========================================================================
   2. Base / typography - docs/design-spec.md Abschnitt 2.1
   ========================================================================== */

body {
  font-family: var(--mk-font-family);
  font-size: 15px;
  line-height: 1.7;
  color: var(--mk-color-body-text);
  background: #ffffff;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--mk-font-family);
  color: inherit;
}

h1, .h1 {
  font-size: 30px;
  line-height: 1.6;
  font-weight: 600;
  text-transform: uppercase;
}

h2, .h2 {
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
}

h3, .h3 {
  font-size: 24px;
  line-height: 1.6;
  font-weight: 500;
}

h4, .h4 {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
}

h5, .h5 {
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: 300;
}

h6, .h6 {
  font-size: 1.4rem;
  line-height: 1.4;
  font-weight: 300;
}

@media (max-width: 767.98px) {
  h1, .h1 {
    line-height: 1.3;
  }
  h3, .h3 {
    line-height: 1.2;
  }
}

/* Skip link - accessibility, hidden until focused */
.mk-skip-link {
  position: absolute;
  top: -3rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: #ffffff;
  color: var(--mk-color-body-link);
  border: 2px solid var(--mk-color-primary);
  border-radius: 2px;
  transition: top 0.15s ease-in-out;
}

.mk-skip-link:focus {
  top: 0.5rem;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.mk-container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .mk-container { max-width: 540px; }
}
@media (min-width: 768px) {
  .mk-container { max-width: 720px; }
}
@media (min-width: 992px) {
  .mk-container { max-width: 960px; }
}
@media (min-width: 1200px) {
  .mk-container { max-width: var(--mk-container-max); }
}

.mk-section {
  padding-top: var(--mk-section-gap-y);
  padding-bottom: var(--mk-section-gap-y);
}

.mk-section--tinted {
  background-color: var(--mk-color-tinted-bg);
}

/* ==========================================================================
   4. Bootstrap component overrides (buttons, forms, badges, breadcrumbs, pagination)
   Values taken directly from media/vendor/bootstrap/css/bootstrap.css - see file header.
   ========================================================================== */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--mk-color-primary);
  --bs-btn-border-color: var(--mk-color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mk-color-primary-hover);
  --bs-btn-hover-border-color: var(--mk-color-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--mk-color-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mk-color-primary-active);
  --bs-btn-active-border-color: var(--mk-color-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--mk-color-primary);
  --bs-btn-disabled-border-color: var(--mk-color-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--mk-color-primary);
  --bs-btn-border-color: var(--mk-color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--mk-color-primary);
  --bs-btn-hover-border-color: var(--mk-color-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--mk-color-primary);
  --bs-btn-active-border-color: var(--mk-color-primary);
  --bs-btn-disabled-color: var(--mk-color-primary);
  --bs-btn-disabled-border-color: var(--mk-color-primary);
}

/* Form focus rings (com_contact etc.) - explicit rule rather than a variable name guess, so it
   works regardless of Bootstrap's internal custom-property wiring for this component. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--mk-color-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--mk-color-primary-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--mk-color-primary);
  border-color: var(--mk-color-primary);
}

/* ==========================================================================
   5. Header: Toolbar (Section 1) + Navbar (Section 2) - docs/design-spec.md Abschnitt 3
   ========================================================================== */

.mk-header {
  position: relative;
  z-index: var(--mk-z-nav);
}

.mk-toolbar {
  background-color: var(--mk-color-primary);
  padding: 10px 0 5px;
  color: #ffffff;
  font-size: 0.85rem;
}

.mk-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mk-toolbar a {
  color: #ffffff;
  text-decoration: none;
}

.mk-toolbar__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
}

@media (max-width: 991.98px) {
  .mk-toolbar {
    padding: 6px 0;
  }
}

.mk-navbar {
  background-color: #ffffff;
  padding: 6px 0;
  border-bottom: 1px solid #eeeeee;
}

.mk-navbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Kundenwunsch 2026-09-26: Die Kopfzeile nutzt bewusst dieselbe 1140px-".mk-container"-Breite wie
   alle anderen Sections (vorher eigene 1272px-Breite nach altem Live-Mass), damit das Logo buendig
   ueber dem "W" von "Willkommen im Gesundheitszentrum" steht. */

.mk-navbar__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.mk-navbar__brand img {
  max-height: 64px;
  width: auto;
  display: block;
}

.mk-navbar__toggler {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  cursor: pointer;
}

.mk-navbar__toggler-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background-color: var(--mk-color-body-link);
}

.mk-navbar__search {
  margin-left: auto;
}

.mk-navbar__search-mobile {
  padding: 0.75rem 0;
}

@media (min-width: 992px) {
  .mk-navbar__toggler {
    display: none;
  }

  /* The desktop main navigation is never "collapsed", regardless of the Bootstrap .collapse
     state (relevant if a visitor resizes a still-open mobile menu up past the breakpoint).
     This mirrors Bootstrap's own .navbar-expand-lg behaviour. justify-content: center matches
     live's header layout (Astroid "horizontal-center-header": logo pinned left, nav menu
     centered in the remaining width, not just placed with a small gap next to the logo -
     measured live gap logo-to-menu ~192px at a 1440px viewport vs this rule's previous
     default-flex-start behaviour, which only left the 1rem .mk-navbar__inner flex gap, ~16px). */
  .mk-navbar__collapse.collapse {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
  }

  .mk-navbar__search-mobile {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .mk-navbar__collapse {
    width: 100%;
  }

  .mk-navbar__inner {
    flex-wrap: wrap;
  }
}

/* mod_menu (position-7) - see templates/mediaktiv/README.md for why the module's own "Default"
   layout (modules/mod_menu/tmpl/default.php) is used rather than Cassiopeia's Metismenu layout:
   default.php already loads media/mod_menu/js/menu.js, which gives every ".nav" hover- and
   keyboard-driven submenu behaviour for free (matches docs/design-spec.md Abschnitt 4: dropdowns
   open on hover).

   Scoped to ".mk-navbar__collapse .mod-menu" rather than the bare ".mod-menu" class: mod_menu's
   default layout outputs the same "mod-menu" class regardless of module position, and this
   template also uses mod_menu for the footer "Rechtliches" links (bottom-e-3, see
   parts/footer.php), which must stay small/plain, not uppercase-bold-15px like the main nav
   (found via visual comparison against the live site - the footer legal links were incorrectly
   inheriting the primary navigation's styling). */

.mk-navbar__collapse .mod-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-navbar__collapse .mod-menu .nav-item > a,
.mk-navbar__collapse .mod-menu .nav-item > span {
  display: block;
  color: var(--mk-color-nav-link);
  font-weight: 600;
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none;
}

.mk-navbar__collapse .mod-menu .nav-item > a:hover,
.mk-navbar__collapse .mod-menu .nav-item > a:focus {
  color: var(--mk-color-nav-link-hover);
}

.mk-navbar__collapse .mod-menu .nav-item.current > a,
.mk-navbar__collapse .mod-menu .nav-item.active > a {
  color: var(--mk-color-nav-link-active);
}

.mk-navbar__collapse .mod-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-navbar__collapse .mod-menu__sub .nav-item > a {
  color: var(--mk-color-dropdown-link);
  text-transform: none;
  font-weight: 400;
  font-size: 14px;
}

.mk-navbar__collapse .mod-menu__sub .nav-item > a:hover,
.mk-navbar__collapse .mod-menu__sub .nav-item.current > a,
.mk-navbar__collapse .mod-menu__sub .nav-item.active > a {
  background-color: var(--mk-color-dropdown-hover-bg);
  color: var(--mk-color-dropdown-hover-link);
}

/* Footer "Rechtliches" mod_menu (bottom-e-3) - plain stacked links, matches the live site.
   mod_menu's default layout also adds Bootstrap's own ".nav" class to the <ul> (class="mod-menu
   mod-list nav"), and bootstrap.css sets ".nav { display: flex }" unconditionally - overridden
   here back to a plain block list, otherwise "Impressum"/"Datenschutzerklärung" render side by
   side on one line instead of stacked. */
.mk-bottom-e .mod-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mk-bottom-e .mod-menu .nav-item {
  display: block;
  margin-bottom: 0.5rem;
}

.mk-bottom-e .mod-menu .nav-item > a {
  color: var(--mk-color-body-link);
  text-decoration: none;
}

.mk-bottom-e .mod-menu .nav-item > a:hover {
  color: var(--mk-color-body-link-hover);
  text-decoration: underline;
}

/* Mobile (<992px): flat, always-expanded, stacked list - no accordion/offcanvas, per the brief. */
@media (max-width: 991.98px) {
  .mk-navbar__collapse .mod-menu .nav-item {
    border-top: 1px solid #eeeeee;
  }

  .mk-navbar__collapse .mod-menu .nav-item > a,
  .mk-navbar__collapse .mod-menu .nav-item > span {
    padding: 0.85rem 0;
  }

  .mk-navbar__collapse .mod-menu__sub {
    padding-left: 1rem;
  }

  .mk-navbar__collapse .mod-menu__sub .nav-item > a {
    padding: 0.6rem 0;
  }
}

/* Desktop (>=992px): horizontal bar with hover/focus dropdown flyouts. */
@media (min-width: 992px) {
  .mk-navbar__collapse .mod-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .mk-navbar__collapse .mod-menu > .nav-item {
    position: relative;
  }

  .mk-navbar__collapse .mod-menu > .nav-item > a,
  .mk-navbar__collapse .mod-menu > .nav-item > span {
    padding: 8px 1rem;
  }

  .mk-navbar__collapse .mod-menu__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: var(--mk-color-dropdown-bg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
    z-index: var(--mk-z-dropdown);
  }

  .mk-navbar__collapse .mod-menu > .nav-item.parent:hover > .mod-menu__sub,
  .mk-navbar__collapse .mod-menu > .nav-item.parent:focus-within > .mod-menu__sub,
  .mk-navbar__collapse .mod-menu__sub.show-menu {
    display: block;
  }

  .mod-menu__sub .nav-item > a {
    padding: 0.6rem 1rem;
  }
}

/* ==========================================================================
   6. Hero (Section 3, top-b-1) - docs/design-spec.md Abschnitt 3, Section 3 + 5.3
   ========================================================================== */

.mk-hero {
  width: 100%;
}

/* Live crops the hero slideshow to a fixed 16:3 banner (UIkit "ratio:16:3", verified in the live
   page's own slideshow markup) instead of showing each source photo at its natural aspect ratio.
   The generic ".mk-carousel__slide img { height: auto }" rule (Abschnitt 7 below) leaves the hero
   uncropped, which is much taller than live at full width (measured 720px locally vs live's 270px
   at a 1440px viewport - the source photos are closer to a 3:2 shot than a wide banner). Scoped to
   ".mk-hero" only, so the two image galleries and the Leistungen slider (same .mk-carousel__slide
   img rule) keep showing their photos uncropped. */
.mk-hero .mk-carousel__slide img {
  aspect-ratio: 16 / 3;
  object-fit: cover;
}

/* ==========================================================================
   7. Carousel component (hero + both galleries + Leistungen slider)
   ========================================================================== */

.mk-carousel {
  position: relative;
}

.mk-carousel__track {
  display: block;
}

/* Without JS (or before it runs): every slide is a normal, visible, stacked block. */
.mk-carousel__slide {
  margin: 0 0 1rem;
}

.mk-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Only once JS has enhanced the carousel does it become a true single-slide-at-a-time
   slideshow - see media/templates/site/mediaktiv/js/carousel.js for the matching logic. */
.mk-carousel--js .mk-carousel__slide {
  display: none;
  margin: 0;
}

.mk-carousel--js .mk-carousel__slide--active {
  display: block;
}

.mk-carousel--js .mk-carousel__track {
  position: relative;
}

.mk-carousel__controls {
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.mk-carousel--js .mk-carousel__controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

.mk-carousel__arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 50%;
  color: var(--mk-color-body-link);
  font-size: 1.1rem;
  cursor: pointer;
  margin: 0 0.75rem;
}

.mk-carousel__arrow:hover,
.mk-carousel__arrow:focus {
  background: #ffffff;
  color: var(--mk-color-primary);
}

.mk-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.mk-carousel--js .mk-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  margin-top: 0;
}

.mk-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.mk-carousel__dot--active {
  background: var(--mk-color-primary);
}

.visually-hidden-mk {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   8. Welcome + Notizzettel (Section 4, top-c-1/top-c-2)
   ========================================================================== */

.mk-welcome__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 992px) {
  .mk-welcome__grid {
    grid-template-columns: 2fr 1fr;
  }
}

.mk-welcome h2 {
  margin-bottom: 1.25rem;
}

.mk-welcome ul {
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.mk-welcome li {
  margin-bottom: 0.5rem;
}

/* Caveat (Google Fonts, SIL OFL - free/open per project rule 2), self-hosted rather than linked
   from fonts.googleapis.com (same self-hosting approach as the Font Awesome fix, Abschnitt 17) -
   used only for the Notizzettel signature below. Latin subset only (covers German umlauts/ß,
   U+00E4/00F6/00FC/00DF are all within U+0000-00FF); weight 400 only, the only weight actually
   used (docs/design-spec.md 3, Section 4 / .mk-notizzettel__signature). */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/media/templates/site/mediaktiv/fonts/caveat-v23-latin-400.woff2") format("woff2");
}

/* "Sticky note" card - matched directly against the live site's ".profi-notiz" (measured via
   getComputedStyle: 2deg rotation, sharp corners, two-layer shadow, centered pin with its own
   inset+drop shadow, and a handwritten-font red signature - none of which the previous version
   had, it was an unrotated flat card with a plain small dot and an italicised (not handwritten)
   signature). */
.mk-notizzettel {
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 0;
  padding: 30px 25px 20px;
  position: relative;
  transform: rotate(2deg);
  font-size: 17.6px;
  color: #333333;
}

.mk-notizzettel::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #e2001a;
  box-shadow: inset -3px -3px 6px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.mk-notizzettel h3 {
  margin-bottom: 15px;
  font-size: 17.6px;
  font-weight: 700;
  color: #333333;
}

.mk-notizzettel p {
  margin-bottom: 15px;
}

.mk-notizzettel__signature {
  color: #e2001a;
  font-family: "Caveat", cursive;
  font-size: 1.8rem;
  margin-bottom: 0;
}

/* ==========================================================================
   9. Leistungen (Section 5, top-d-1)
   ========================================================================== */

.mk-leistungen {
  text-align: center;
}

.mk-leistungen__heading {
  margin-bottom: 2rem;
  text-align: center;
}

.mk-leistungen .mk-carousel {
  background-color: rgba(255, 255, 255, 0.815);
  padding: 1.5rem;
  text-align: left;
}

/* Below 768px .mk-service-card's 3-column grid (section 9 below) collapses to one column, so a
   slide here is 3 stacked cards (~1650px tall) instead of one compact image. The generic
   controls/dots rules (section 7) center them at 50%/bottom:1rem of that height, landing mid-way
   through card 2 resp. over the bottom of card 3. Only this carousel groups multiple items per
   slide, so only here they need to drop back into normal document flow below the stacked cards
   instead of floating over them. */
@media (max-width: 767.98px) {
  .mk-leistungen .mk-carousel--js .mk-carousel__controls {
    position: static;
    transform: none;
    margin-top: 1rem;
  }

  .mk-leistungen .mk-carousel--js .mk-carousel__dots {
    position: static;
    margin-top: 0.75rem;
  }
}

/* Service cards (image + title + description + CTA) used as .mk-carousel slides for
   top-d-1 - the same slide/track/JS mechanism as the hero, just with richer slide content
   instead of a bare <img> (carousel.js only cares about direct children of .mk-carousel__track,
   it is not image-specific). */
.mk-service-card {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .mk-service-card {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mk-service-card__item {
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mk-service-card__item img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.mk-service-card__body {
  padding: 1.25rem;
}

.mk-service-card__body h3 {
  margin-bottom: 0.75rem;
}

.mk-service-card__body p {
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   10. Content area (Section 6) + galleries
   ========================================================================== */

.mk-content {
  background-color: #ffffff;
}

.mk-gallery {
  margin-top: 2rem;
}

/* Scoped to :not(.mk-carousel--js) - without this guard this rule has the same specificity as
   ".mk-carousel--js .mk-carousel__slide--active" (section 7) and, being declared later in this
   file, was winning the cascade and keeping every slide visible even after JS picked one active
   slide (the milon-gallery/rehasport-gallery carousels never advanced, all images just stacked). */
.mk-gallery .mk-carousel:not(.mk-carousel--js) .mk-carousel__slide {
  display: inline-block;
  width: 100%;
}

/* Without JS the galleries lay out as a simple responsive grid, not a single stacked column,
   so "every image visible" (per the brief) still reads well. */
.mk-gallery .mk-carousel__track {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 576px) {
  .mk-gallery .mk-carousel__track {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .mk-gallery--milon .mk-carousel__track {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Kundenwunsch 2026-09-26: Milon-Galerie auf der Startseite 25% kleiner, proportional und
   zentriert (Bilder behalten ihr Seitenverhaeltnis, links/rechts entsteht Rand). */
.mk-gallery--milon .mk-carousel {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

/* Once JS enhances a gallery into a carousel, fall back to the single-slide layout rules from
   section 7 above (.mk-carousel--js overrides the grid). */
.mk-gallery .mk-carousel--js .mk-carousel__track {
  display: block;
}

/* ==========================================================================
   10b. mod_uk_gallery (Leistungen-Unterseiten Fitness/Rehasport, per {loadposition}
   eingebunden - siehe content-migration/pages/fitness.html und rehasport.html). Das Modul
   selbst (modules/mod_uk_gallery) liefert keinerlei Bildgroessen-CSS, die <img>-Tags haben
   weder Breite/Hoehe-Attribute noch eine Klasse - ohne diese Regel rendern sie in ihrer vollen
   Originalaufloesung (bei diesen Fotos ca. 1280px) und ueberlappen weit ueber ihre Grid-Zelle
   hinaus in Nachbarspalten/-zeilen. */
.mod_uk_gallery .uk-inline {
  overflow: hidden;
}

.mod_uk_gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   11. Milon-Zirkel (Section 7, bottom-a-1) - docs/design-spec.md Abschnitt 1.5 + Section 7
   ========================================================================== */

.mk-milon {
  background-color: #f8f8f8;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 60px 0;
}

@media (min-width: 992px) {
  .mk-milon {
    padding: 150px 0;
  }
}

.mk-milon__box {
  background-color: rgba(255, 255, 255, 0.6);
  padding: 30px;
}

/* ==========================================================================
   12. Bottom D (Section 8, bottom-d-1/bottom-d-2)
   ========================================================================== */

.mk-bottom-d {
  background-color: #f9f9f9;
}

.mk-bottom-d__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  background-color: #ffffff;
}

@media (min-width: 992px) {
  .mk-bottom-d__grid {
    grid-template-columns: 2fr 1fr;
  }
}

.mk-bottom-d__col--aside {
  background-color: var(--mk-color-tinted-bg);
  padding: 1.5rem;
}

/* ==========================================================================
   13. Bottom E: Anfahrt / Adresse & Kontakt / Rechtliches (Section 9)
   ========================================================================== */

.mk-bottom-e {
  background: linear-gradient(to bottom, #ffffff, #eeeeee);
}

.mk-bottom-e__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .mk-bottom-e__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mk-bottom-e__grid iframe {
  max-width: 100%;
  border: 0;
}

.mk-bottom-e address a {
  color: inherit;
  text-decoration: none;
}

.mk-contact-line {
  display: inline-flex;
  align-items: center;
}

.mk-contact-line .fas,
.mk-contact-line .far,
.mk-contact-line .fab {
  margin-right: 12px;
  color: #ce000c;
  font-size: 1.1em;
}

/* Column heading used by the three bottom-e modules (Anfahrt / Adresse & Kontakt / Rechtliches):
   small red left bar + bottom underline, matches the live site's footer column headings. */
.mk-panel-title {
  position: relative;
  padding-left: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid #dee2e6;
}

.mk-panel-title::before {
  content: "";
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 4px;
  height: 1em;
  background-color: var(--mk-color-primary);
}

/* ==========================================================================
   14. Footer (Section 10) - three-layer per docs/design-spec.md Abschnitt 1.5
   ========================================================================== */

.mk-footer {
  background-color: var(--mk-color-footer-outer);
  padding: 10px 0;
}

.mk-footer__panel {
  background-color: var(--mk-color-footer-column);
}

.mk-footer__band {
  background-color: var(--mk-color-footer-copyright);
  text-align: center;
  color: #ffffff;
  padding: 0.75rem 1rem;
}

.mk-footer__band a {
  color: #ffffff;
}

.mk-footer__copyright {
  margin: 0;
}

/* ==========================================================================
   15. Cookie consent banner - docs/design-spec.md Abschnitt 6
   Deliberately a slim bottom bar, kept above nav/dropdown in the z-index scale (Abschnitt 1) so
   an expanded mobile menu can never paint over it - see templates/mediaktiv/parts/cookie-consent.php
   for the full reasoning (found via real functional testing, not merely geometry).
   ========================================================================== */

.mk-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--mk-z-cookie-banner);
  background: #ffffff;
  border-top: 1px solid #dee2e6;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

.mk-cookie-banner__inner {
  max-width: var(--mk-container-max);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
}

.mk-cookie-banner__text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 0.9rem;
  color: var(--mk-color-body-text);
}

.mk-cookie-banner__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Equal-weight buttons by construction: identical padding, border width and font weight -
   only the color differs. No dark pattern (accept is not visually louder than reject). */
.mk-btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}

.mk-btn--primary {
  background-color: var(--mk-color-primary);
  border-color: var(--mk-color-primary);
  color: #ffffff;
}

.mk-btn--primary:hover,
.mk-btn--primary:focus {
  background-color: var(--mk-color-primary-hover);
  border-color: var(--mk-color-primary-hover);
  color: #ffffff;
}

.mk-btn--outline {
  background-color: transparent;
  border-color: #555555;
  color: #333333;
}

.mk-btn--outline:hover,
.mk-btn--outline:focus {
  background-color: #555555;
  border-color: #555555;
  color: #ffffff;
}

@media (max-width: 575.98px) {
  .mk-cookie-banner__actions {
    width: 100%;
  }

  .mk-cookie-banner__actions .mk-btn {
    flex: 1 1 0;
  }
}

/* ==========================================================================
   16. Error pages (templates/mediaktiv/error.php)
   ========================================================================== */

.mk-error__headline {
  margin-top: 2rem;
}

.mk-error__box {
  padding: 1.5rem 0;
}

/* ==========================================================================
   17. Font Awesome icon glyphs (toolbar contact icons, footer contact icons,
   Facebook icon - design-spec.md 3, Sections 1 + 9). The "fontawesome" web
   asset (media/vendor/joomla.asset.json, self-hosted @fortawesome/fontawesome-
   free 6.7.2, GPL-compatible per project rule 2) ships the icon-to-glyph CSS
   but NO @font-face rules at all, for any weight - without these, none of its
   icon classes render anything (verified by reading
   media/vendor/fontawesome-free/css/fontawesome.css directly: zero @font-face
   blocks despite the webfonts/ files being present). It also only bundles the
   solid+regular "Free" glyphs, not the brand glyphs (no fa-facebook-f rule),
   so that one icon is added here too, using the codepoint from the vendor
   package's own scss/_variables.scss ($fa-var-facebook-f: \f39e).
   ========================================================================== */

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/media/vendor/fontawesome-free/webfonts/fa-solid-900.woff2") format("woff2"),
       url("/media/vendor/fontawesome-free/webfonts/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/media/vendor/fontawesome-free/webfonts/fa-regular-400.woff2") format("woff2"),
       url("/media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/media/vendor/fontawesome-free/webfonts/fa-brands-400.woff2") format("woff2"),
       url("/media/vendor/fontawesome-free/webfonts/fa-brands-400.ttf") format("truetype");
}

.fa-facebook-f {
  --fa: "\f39e";
}

/* The vendor CSS only ever sets font-weight via the unused "--fa-style" custom property (read by
   the bare ".fa" rule alone - never assigned by ".fas"/".far"/".fab" themselves), so an icon
   using only e.g. class="fas fa-phone-alt" inherits the browser default weight 400 for <i> and
   silently matches the wrong @font-face above (missing-glyph tofu box for solid-only icons like
   fa-phone-alt/fa-map-marker-alt/fa-fax, which do not exist in the regular-400 weight). Setting
   the weight explicitly per style class here is the standard Font Awesome behavior this vendor
   build omits. */
.fas {
  font-weight: 900;
}

.far,
.fab {
  font-weight: 400;
}

/* ==========================================================================
   18. Schwebender Anruf-Button (templates/mediaktiv/parts/call-button.php), nur <768px
   Unsichtbar bis call-button.js nach dem ersten Scrollen --visible setzt. z-index unter
   --mk-z-nav, damit ein aufgeklapptes Mobilmenue darueber liegt.
   ========================================================================== */

.mk-call-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--mk-color-primary);
  color: #ffffff;
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.mk-call-btn--visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.mk-call-btn:hover,
.mk-call-btn:focus {
  background-color: var(--mk-color-primary-hover);
  color: #ffffff;
}

.mk-call-btn:focus-visible {
  outline: 3px solid #ffffff;
  box-shadow: 0 0 0 5px var(--mk-color-primary);
}

@media (min-width: 768px) {
  .mk-call-btn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mk-call-btn {
    transition: none;
  }
}