/* ==========================================================================
   Malhaus am Blauen Hut – Template-Stylesheet
   Mannheims-Webdesign Imhof · 2026
   Eigene Anpassungen bitte in user.css (gleicher Ordner) – wird nach dieser
   Datei geladen und bei Updates nicht überschrieben.
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO-konform) ---------- */
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-var.woff") format("woff"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-italic-var.woff") format("woff"); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-var.woff") format("woff"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/sourcesans3-italic-var.woff") format("woff"); font-weight: 300 700; font-style: italic; font-display: swap; }

/* ---------- Gestaltungs-Variablen ---------- */
:root {
  --mh-blau: #8e3b5c;
  --mh-blau-tief: #6e2a46;
  --mh-blau-hell: #f8e6ea;
  --mh-tinte: #3a2433;
  --mh-text: #3b3037;
  --mh-text-leise: #6d5c66;
  --mh-papier: #fffaf6;
  --mh-sand: #f8e7de;
  --mh-sand-dunkel: #edd0c3;
  --mh-ocker: #e0896a;
  --mh-ocker-dunkel: #a94a3a;
  --mh-terra: #c75652;
  --mh-gruen: #3f7a52;
  --mh-weiss: #fff;
  --mh-linie: rgba(58, 36, 51, .14);

  --mh-font-head: "Fraunces", Georgia, "Times New Roman", serif;
  --mh-font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --mh-radius: 14px;
  --mh-radius-s: 8px;
  --mh-shadow: 0 1px 2px rgba(58, 36, 51, .06), 0 8px 24px rgba(58, 36, 51, .08);
  --mh-shadow-hover: 0 2px 4px rgba(58, 36, 51, .08), 0 16px 36px rgba(58, 36, 51, .14);
  --mh-wrap: 1180px;
  --mh-gutter: clamp(16px, 4vw, 32px);
  --mh-header-h: 84px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--mh-header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--mh-font-body);
  font-size: clamp(1.0625rem, .98rem + .3vw, 1.15rem);
  line-height: 1.65;
  color: var(--mh-text);
  /* Aquarell-Hintergrund hinter dem „Papierblatt“ (wie im alten Blog) */
  background: #ecc6b6 url("../images/aquarell-hintergrund.webp") center / cover fixed no-repeat;
  text-rendering: optimizeLegibility;
}
/* iOS/Touch: fixed-Hintergründe ruckeln – dort mitscrollen */
@media (hover: none) { body { background-attachment: scroll; background-size: auto 100vh; background-repeat: repeat-y; } }

/* Das Papierblatt: die eigentliche Seite liegt auf dem Aquarell */
.mh-blatt {
  max-width: calc(var(--mh-wrap) + 120px); margin: clamp(0px, 2.4vw, 36px) auto;
  background: var(--mh-papier);
  box-shadow: 0 2px 6px rgba(58, 36, 51, .10), 0 24px 70px rgba(110, 42, 70, .22);
  border-radius: 6px; overflow: clip;
}
@media (max-width: 767.98px) { .mh-blatt { margin: 0; border-radius: 0; } }
img, svg, video { max-width: 100%; height: auto; }
img { border-radius: var(--mh-radius-s); }
a { color: var(--mh-blau); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--mh-blau-tief); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mh-ocker); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--mh-ocker); color: var(--mh-tinte); }

h1, h2, h3, h4, h5 {
  font-family: var(--mh-font-head);
  color: var(--mh-tinte);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 1.6em 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem); font-weight: 650; margin-top: .2em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); }
h4 { font-size: 1.15rem; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.1em; }
ul, ol { padding-inline-start: 1.3em; }
li + li { margin-top: .25em; }
hr { border: 0; height: 18px; margin: 2.2em 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18'%3E%3Cpath d='M4 10c40-8 70 6 110-2s80-6 122 1' fill='none' stroke='%23e0896a' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 240px 18px no-repeat; }
small { font-size: .875em; }
strong, b { font-weight: 650; }

.visually-hidden, .element-invisible {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
  margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.mh-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: .6em 1em; background: var(--mh-tinte); color: #fff; border-radius: 0 0 8px 8px; }
.mh-skip:focus { top: 0; color: #fff; }
.mh-wrap { width: 100%; max-width: var(--mh-wrap); margin-inline: auto; padding-inline: var(--mh-gutter); }

/* ---------- Buttons ---------- */
.mh-btn, .btn, button.btn, input[type="submit"].btn {
  --b: var(--mh-blau);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .65em 1.35em;
  font: 600 1rem/1.2 var(--mh-font-body); letter-spacing: .01em;
  color: #fff; background: var(--b); border: 2px solid var(--b); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.mh-btn:hover, .btn:hover { color: #fff; background: var(--mh-blau-tief); border-color: var(--mh-blau-tief); transform: translateY(-1px); box-shadow: var(--mh-shadow); text-decoration: none; }
.mh-btn--ocker { --b: var(--mh-ocker); color: var(--mh-tinte); }
.mh-btn--ocker:hover { background: var(--mh-ocker-dunkel); border-color: var(--mh-ocker-dunkel); color: #fff; }
.mh-btn--ghost, .btn-secondary, .btn-outline-primary { color: var(--mh-blau); background: transparent; }
.mh-btn--ghost:hover, .btn-secondary:hover { color: #fff; }
.mh-btn--hell { --b: #fff; color: var(--mh-tinte); }
.mh-btn--hell:hover { background: var(--mh-sand); border-color: var(--mh-sand); color: var(--mh-tinte); }
.mh-btn--klein { min-height: 38px; padding: .4em 1em; font-size: .92rem; }
.mh-btn[disabled], .mh-btn.is-busy { opacity: .6; pointer-events: none; }
.btn-primary { --b: var(--mh-blau); }
.btn-danger { --b: var(--mh-terra); }
.btn-success { --b: var(--mh-gruen); }
.mh-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.2em 0; }

/* ---------- Kopfbereich ---------- */
.mh-header { position: relative; z-index: 50; }
.has-sticky-header .mh-header { position: sticky; top: 0; }
.mh-topbar { background: var(--mh-tinte); color: #f3dfe6; font-size: .9rem; }
.mh-topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 36px; }
.mh-topbar__contact { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; list-style: none; margin: 0; padding: 0; }
.mh-topbar__contact li { margin: 0; }
.mh-topbar a { color: #fff; text-decoration: none; }
.mh-topbar a:hover { color: var(--mh-ocker); }
.mh-topbar__modules { display: flex; gap: 1rem; }
.mh-masthead { background: rgba(255, 250, 246, .94); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--mh-linie); }
.mh-masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--mh-header-h); }
.mh-brand { display: flex; align-items: center; gap: .8rem; color: var(--mh-tinte); text-decoration: none; }
.mh-brand:hover { color: var(--mh-tinte); text-decoration: none; }
.mh-brand__logo { width: 58px; height: 58px; border-radius: 0; flex: none; transition: transform .3s ease; }
.mh-brand:hover .mh-brand__logo { transform: rotate(-6deg); }
.mh-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.mh-brand__title { font-family: var(--mh-font-head); font-weight: 650; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.mh-brand__sub { font-size: .82rem; color: var(--mh-text-leise); margin-top: .2rem; letter-spacing: .02em; }

/* Navigation (nutzt das Joomla-Standardmenü inkl. Untermenü-Schaltern) */
.mh-nav .mod-menu { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.mh-nav .mod-menu > li { position: relative; margin: 0; display: flex; align-items: center; }
.mh-nav .mod-menu a, .mh-nav .mod-menu .mod-menu__heading, .mh-nav .mod-menu .mod-menu__separator {
  display: block; padding: .55rem .8rem; border-radius: 999px;
  color: var(--mh-tinte); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.mh-nav .mod-menu > li > a:hover, .mh-nav .mod-menu > li.active > a, .mh-nav .mod-menu > li.current > a { background: var(--mh-blau-hell); color: var(--mh-blau); }
.mh-nav .mod-menu__toggle-sub { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .8rem; border: 0; border-radius: 999px; background: transparent; color: var(--mh-tinte); font: 600 1em/1.65 var(--mh-font-body); cursor: pointer; white-space: nowrap; }
.mh-nav .mod-menu a + .mod-menu__toggle-sub { width: 32px; height: 32px; padding: 0; margin-inline-start: -.4rem; border-radius: 50%; }
.mh-nav .mod-menu__toggle-sub .mod-menu__heading, .mh-nav .mod-menu__toggle-sub .nav-header { padding: 0; border-radius: 0; display: inline; }
.mh-nav .mod-menu__toggle-sub:hover, .mh-nav .mod-menu > li.active > .mod-menu__toggle-sub { background: var(--mh-blau-hell); color: var(--mh-blau); }
.mh-nav .mod-menu__toggle-sub .icon-chevron-down { margin: 0; font-size: .7rem; }
.mh-nav .mod-menu__toggle-sub .icon-chevron-down { font-size: .72rem; transition: transform .2s ease; }
.mh-nav .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down { transform: rotate(180deg); }
.mh-nav .mod-menu__sub { list-style: none; margin: 0; padding: .5rem; }
.mh-nav .mod-menu__sub a { border-radius: var(--mh-radius-s); font-weight: 500; }
.mh-nav .mod-menu__sub a:hover, .mh-nav .mod-menu__sub .current > a { background: var(--mh-blau-hell); color: var(--mh-blau); }

.mh-navtoggle { display: none; align-items: center; gap: .55rem; padding: .55rem .9rem; border: 2px solid var(--mh-tinte); border-radius: 999px; background: transparent; color: var(--mh-tinte); font: 600 1rem var(--mh-font-body); cursor: pointer; }
.mh-navtoggle__bars, .mh-navtoggle__bars::before, .mh-navtoggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s ease, opacity .2s ease; }
.mh-navtoggle__bars::before, .mh-navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.mh-navtoggle__bars::before { top: -6px; }
.mh-navtoggle__bars::after { top: 6px; }
.mh-navtoggle[aria-expanded="true"] .mh-navtoggle__bars { background: transparent; }
.mh-navtoggle[aria-expanded="true"] .mh-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.mh-navtoggle[aria-expanded="true"] .mh-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 1024px) {
  .mh-nav .mod-menu__sub {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
    background: #fff; border-radius: var(--mh-radius); box-shadow: var(--mh-shadow-hover);
    border: 1px solid var(--mh-linie);
  }
  .mh-nav .mod-menu__sub[aria-hidden="true"] { display: none; }
  .mh-nav .mod-menu > li:hover > .mod-menu__sub, .mh-nav .mod-menu > li:focus-within > .mod-menu__sub { display: block; }
  .mh-nav .mod-menu__sub::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
}

@media (max-width: 1023.98px) {
  :root { --mh-header-h: 70px; }
  .mh-brand__logo { width: 46px; height: 46px; }
  .mh-brand__sub { display: none; }
  .mh-navtoggle { display: inline-flex; }
  .mh-nav {
    position: fixed; inset: calc(var(--mh-header-h) + 36px) 0 0 0; z-index: 60;
    padding: 1rem var(--mh-gutter) 2rem; overflow-y: auto;
    background: var(--mh-papier); border-top: 1px solid var(--mh-linie);
    transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility .25s;
  }
  .mh-nav.is-open { transform: none; visibility: visible; }
  .mh-nav .mod-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .mh-nav .mod-menu > li { flex-wrap: wrap; border-bottom: 1px solid var(--mh-linie); }
  .mh-nav .mod-menu > li > a { flex: 1; padding: .9rem .4rem; font-size: 1.15rem; border-radius: 0; }
  .mh-nav .mod-menu a + .mod-menu__toggle-sub { width: 48px; height: 48px; margin: 0; }
  .mh-nav .mod-menu > li > .mod-menu__toggle-sub:first-child { flex: 1; justify-content: space-between; padding: .9rem .4rem; font-size: 1.15rem; border-radius: 0; }
  .mh-nav .mod-menu__sub { width: 100%; padding: 0 0 .6rem 1rem; }
  .mh-nav .mod-menu__sub a { padding: .6rem .4rem; font-size: 1.05rem; }
  body.mh-nav-open { overflow: hidden; }
}
@media (max-width: 599.98px) {
  .mh-topbar__contact li:nth-child(n+3) { display: none; }
  .mh-navtoggle__label { display: none; }
  .mh-nav { inset-block-start: calc(var(--mh-header-h) + 36px); }
}

/* ---------- Hero (Modul „Hero“ auf der Startseite) ---------- */
.mh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; background: var(--mh-tinte);
  min-height: clamp(420px, 62vh, 640px); display: grid; align-items: end;
}
.mh-hero__bild { position: absolute; inset: 0; z-index: -2; }
.mh-hero__bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mh-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(58, 36, 51, .88) 0%, rgba(58, 36, 51, .62) 45%, rgba(58, 36, 51, .1) 85%);
}
.mh-hero__inhalt { padding-block: clamp(48px, 9vw, 110px) clamp(40px, 6vw, 80px); max-width: 760px; }
.mh-hero h1, .mh-hero .mh-hero__titel { color: #fff; margin: .1em 0 .35em; font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); line-height: 1.05; }
.mh-hero h1 em { font-style: italic; color: var(--mh-ocker); font-weight: 500; }
.mh-hero p { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); color: #fbf0f2; max-width: 36em; }
.mh-kicker { display: inline-block; margin: 0 0 .4em; font: 700 .82rem/1 var(--mh-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mh-ocker-dunkel); }
.mh-hero .mh-kicker { padding: .5em .9em; border-radius: 999px; background: rgba(255, 250, 246, .12); }
.mh-hero__fakten { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: .95rem; color: #f0dde4; }
.mh-hero__fakten li { margin: 0; }
.mh-hero__fakten strong { display: block; font: 600 1.6rem/1.1 var(--mh-font-head); color: #fff; }

/* ---------- Hero als Collage (Variante „mh-hero--collage“) ---------- */
.mh-hero--collage {
  display: block; min-height: 0; color: var(--mh-text);
  background: linear-gradient(180deg, var(--mh-papier) 0%, #fdf0ea 100%);
  padding-block: clamp(28px, 5vw, 64px) clamp(40px, 6vw, 84px);
}
.mh-hero--collage::after { display: none; }
/* großer Aquarell-Klecks hinter der Überschrift */
.mh-hero--collage::before {
  content: ""; position: absolute; z-index: -1; left: -6%; top: -18%; width: min(62vw, 720px); aspect-ratio: 1;
  background: url("../images/klecks-3.webp") center / contain no-repeat; opacity: .55; transform: rotate(-12deg);
}
.mh-hero__grid { position: relative; display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .mh-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.mh-hero--collage .mh-hero__inhalt { padding: 0; max-width: 620px; }
.mh-hero--collage h1 { color: var(--mh-tinte); font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.7rem); }
.mh-hero--collage h1 em { color: var(--mh-terra); }
.mh-hero--collage p { color: var(--mh-text); }
.mh-hero--collage .mh-kicker { background: rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(58, 36, 51, .06); }
.mh-hero--collage .mh-hero__fakten { color: var(--mh-text-leise); }
.mh-hero--collage .mh-hero__fakten strong { color: var(--mh-blau); }

.mh-collage { position: relative; min-height: clamp(300px, 38vw, 470px); }
/* Aquarell-Kleckse und ausgeschnittene Papierformen – reine Deko aus dem CSS */
.mh-collage::before, .mh-collage::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.mh-collage::before { inset: -6% 8% 20% -4%; background: url("../images/klecks-1.webp") center / contain no-repeat; opacity: .9; }
.mh-collage::after  { inset: 34% -6% -10% 30%; background: url("../images/klecks-2.webp") center / contain no-repeat; opacity: .85; }
.mh-collage__foto {
  --dreh: 0deg; --tape: rgba(224, 137, 106, .62);
  position: absolute; z-index: 2; margin: 0; padding: 9px 9px 9px; background: #fff;
  border-radius: 3px; box-shadow: 0 2px 4px rgba(58, 36, 51, .12), 0 18px 34px rgba(110, 42, 70, .18);
  transform: rotate(var(--dreh)); transition: transform .35s ease, box-shadow .35s ease;
}
.mh-collage__foto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 1px; }
/* Washi-Tape mit gerissenen Enden */
.mh-collage__foto::before {
  content: ""; position: absolute; z-index: 3; top: -13px; left: 50%; width: 42%; height: 26px; translate: -50% 0; rotate: -4deg;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 6px, transparent 6px 12px), var(--tape);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 12%, 96% 0, 100% 10%, 100% 92%, 96% 100%, 92% 88%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 90%);
  box-shadow: 0 1px 2px rgba(58, 36, 51, .1);
}
.mh-collage__foto--a { --dreh: -4deg; top: 4%; left: 4%; width: 60%; z-index: 2; }
.mh-collage__foto--b { --dreh: 5deg; top: 22%; right: 0; width: 48%; z-index: 3; --tape: rgba(185, 116, 134, .6); }
.mh-collage__foto--c { --dreh: 3deg; bottom: 0; left: 10%; width: 42%; z-index: 4; --tape: rgba(227, 160, 122, .7); }
.mh-collage__foto--d { --dreh: -7deg; bottom: 4%; right: 8%; width: 36%; z-index: 5; --tape: rgba(199, 86, 82, .5); }
.mh-collage__foto--c::before { left: 18%; rotate: 8deg; }
.mh-collage__foto--d::before { left: 76%; rotate: -14deg; width: 46%; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mh-collage__foto:hover { z-index: 6; transform: rotate(0deg) scale(1.04); box-shadow: 0 4px 8px rgba(58, 36, 51, .14), 0 26px 48px rgba(110, 42, 70, .26); }
}
/* handschriftliche Notiz auf einem Papierschnipsel */
.mh-collage__notiz {
  position: absolute; z-index: 6; right: 2%; top: 0; margin: 0; padding: .35em .8em .45em;
  font: italic 500 clamp(1rem, .9rem + .4vw, 1.25rem)/1.1 var(--mh-font-head); color: var(--mh-tinte);
  background: #fde7d8; rotate: 6deg; box-shadow: 0 6px 14px rgba(110, 42, 70, .14);
  clip-path: polygon(0 4%, 6% 0, 40% 5%, 70% 0, 100% 6%, 98% 50%, 100% 96%, 60% 100%, 30% 95%, 2% 100%, 0 60%);
}
@media (max-width: 899.98px) {
  .mh-collage { min-height: clamp(280px, 78vw, 440px); max-width: 560px; width: 100%; margin-inline: auto; }
  .mh-hero--collage::before { width: 110vw; left: -30%; top: -10%; }
}
@media (max-width: 479.98px) {
  .mh-collage__foto--d { display: none; }
  .mh-collage__foto--a { width: 66%; }
  .mh-collage__foto--b { width: 50%; top: 30%; }
  .mh-collage__foto--c { width: 48%; }
}

/* ---------- Seitengerüst ---------- */
.mh-breadcrumbs { padding-top: 1rem; font-size: .92rem; }
.mh-breadcrumbs ol, .mh-breadcrumbs .breadcrumb { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; color: var(--mh-text-leise); }
.mh-breadcrumbs li { margin: 0; }
.mh-breadcrumbs li + li::before { content: "›"; margin-inline-end: .35rem; color: var(--mh-ocker-dunkel); }
.mh-breadcrumbs .float-start, .mh-breadcrumbs .divider { display: none; }
.mh-main { padding-block: clamp(24px, 5vw, 56px) clamp(48px, 7vw, 96px); outline: none; }
.is-home .mh-main { padding-top: clamp(32px, 5vw, 64px); }
.mh-layout { display: grid; gap: clamp(24px, 4vw, 56px); }
.mh-layout--sidebar { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 992px) { .mh-layout--sidebar { grid-template-columns: minmax(0, 1fr) 320px; } }
.mh-content { min-width: 0; }
.mh-sidebar .moduletable { background: #fff; border-radius: var(--mh-radius); padding: 1.3rem 1.4rem; box-shadow: var(--mh-shadow); margin-bottom: 1.5rem; }
.mh-sidebar h3 { margin-top: 0; }

/* Seitenkopf & Pinselstrich unter Hauptüberschriften */
.page-header { margin-bottom: 1.2rem; }
.page-header h1, .page-header h2, .mh-pinsel {
  position: relative; display: inline-block; padding-bottom: .3em;
}
.page-header h1::after, .page-header h2::after, .mh-pinsel::after {
  content: ""; position: absolute; left: 0; bottom: -.05em; width: min(220px, 70%); height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c30-6 52 3 84-1s64-6 92-3 25 1 38-1' fill='none' stroke='%23e0896a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") left / 100% 100% no-repeat;
}
.item-page, .blog, .mh-magazin, .mh-katalog { max-width: 100%; }
.mh-prose { max-width: 72ch; }
/* Fließtext lesefreundlich schmal, Bausteine (Karten, Raster, Formulare) dürfen die volle Breite nutzen */
.com-content-article__body > p, .com-content-article__body > ul:not([class]), .com-content-article__body > ol,
.com-content-article__body > h2, .com-content-article__body > h3, .com-content-article__body > blockquote,
.com-content-article__body > .mh-hinweis, .com-content-article__body > dl { max-width: 72ch; }
.com-content-article__body > p.mh-actions { max-width: none; }
.mh-breit .com-content-article__body > *, .com-content-article__body.mh-breit > * { max-width: none; }
.com-content-article__body > :first-child { margin-top: 0; }
.com-content-article__body h2 { margin-top: 1.8em; }
.article-info, .mh-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0 0 1.4rem; padding: 0; font-size: .92rem; color: var(--mh-text-leise); }
.article-info dt { display: none; }
.article-info dd { margin: 0; }
.mh-lead, .com-content-article__body > p:first-child.lead { font-size: 1.2em; color: var(--mh-tinte); }
.icons .dropdown, .com-content-article .icons { margin-bottom: 1rem; }

/* ---------- Inhalts-Bausteine (über die Editor-Vorlagen einfügbar) ---------- */
.mh-kasten { background: #fff; border-radius: var(--mh-radius); padding: clamp(1.1rem, 3vw, 1.8rem); box-shadow: var(--mh-shadow); margin: 1.6em 0; }
.mh-kasten > :last-child { margin-bottom: 0; }
.mh-kasten--sand { background: var(--mh-sand); box-shadow: none; }
.mh-kasten--blau { background: var(--mh-blau); color: #fff; }
.mh-kasten--blau h2, .mh-kasten--blau h3, .mh-kasten--blau a { color: #fff; }
.mh-hinweis { border-inline-start: 5px solid var(--mh-ocker); background: #fff3ec; padding: 1rem 1.2rem; border-radius: 0 var(--mh-radius-s) var(--mh-radius-s) 0; margin: 1.4em 0; }
.mh-hinweis > :last-child { margin-bottom: 0; }
.mh-zitat, blockquote { font: italic 400 1.3rem/1.5 var(--mh-font-head); color: var(--mh-tinte); border-inline-start: 4px solid var(--mh-blau); padding: .2rem 0 .2rem 1.2rem; margin-inline: 0; }
.mh-spalten { display: grid; gap: clamp(1rem, 3vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 1.6em 0; }
.mh-spalten > * { min-width: 0; }
.mh-spalten > div > :last-child { margin-bottom: 0; }
.mh-bild-text { display: grid; gap: clamp(1rem, 3vw, 2.4rem); align-items: center; margin: 2em 0; }
@media (min-width: 760px) { .mh-bild-text { grid-template-columns: 5fr 7fr; } .mh-bild-text--rechts { grid-template-columns: 7fr 5fr; } .mh-bild-text--rechts > :first-child { order: 2; } }
.mh-bild-text img { width: 100%; box-shadow: var(--mh-shadow); }
.mh-rahmen { background: #fff; padding: 10px 10px 34px; border-radius: 4px; box-shadow: var(--mh-shadow); transform: rotate(-1.4deg); display: inline-block; }
.mh-rahmen img { border-radius: 2px; display: block; }
.mh-rahmen:nth-child(even) { transform: rotate(1.2deg); }
figure figcaption, .mh-rahmen figcaption { font-size: .9rem; color: var(--mh-text-leise); margin-top: .5rem; }
.mh-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.8em 0; padding: 0; list-style: none; }
.mh-zahlen li { margin: 0; background: #fff; border-radius: var(--mh-radius); padding: 1.1rem 1.2rem; box-shadow: var(--mh-shadow); }
.mh-zahlen strong { display: block; font: 600 2rem/1.1 var(--mh-font-head); color: var(--mh-blau); }

/* Tabellen – auf kleinen Bildschirmen seitlich scrollbar */
.com-content-article__body table, .mh-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--mh-radius-s); overflow: hidden; box-shadow: var(--mh-shadow); font-size: .97rem; }
.com-content-article__body th, .com-content-article__body td, .mh-tabelle th, .mh-tabelle td { padding: .65rem .85rem; border-bottom: 1px solid var(--mh-linie); text-align: left; vertical-align: top; }
.com-content-article__body thead th, .mh-tabelle thead th { background: var(--mh-blau); color: #fff; font-weight: 600; }
@media (max-width: 759.98px) { .com-content-article__body table, .mh-tabelle { display: block; overflow-x: auto; white-space: nowrap; } }

/* Kursplan: ein Kärtchen pro Wochentag */
.mh-kursplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 1rem; margin: 1.6em 0; }
.mh-tag { background: #fff; border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); overflow: hidden; }
.mh-tag h3 { margin: 0; padding: .7rem 1rem; background: var(--mh-blau); color: #fff; font-size: 1.15rem; }
.mh-tag ul { list-style: none; margin: 0; padding: .4rem 1rem 1rem; }
.mh-tag li { margin: 0; padding: .55rem 0; border-bottom: 1px dashed var(--mh-linie); display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.mh-tag li:last-child { border-bottom: 0; }
.mh-tag .mh-zeit { font-weight: 650; color: var(--mh-tinte); font-variant-numeric: tabular-nums; }
.mh-tag .mh-alter { background: var(--mh-sand); color: var(--mh-tinte); border-radius: 999px; padding: .05rem .6rem; font-size: .9rem; white-space: nowrap; }

/* Termine nach Monaten */
.mh-termine { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 1.6em 0; }
.mh-monat { background: #fff; border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); padding: 1rem 1.2rem; }
.mh-monat h3 { margin: 0 0 .5rem; color: var(--mh-blau); }
.mh-monat dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; margin: 0; }
.mh-monat dt { font-weight: 650; }
.mh-monat dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Preise */
.mh-preise { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 1.6em 0; }
.mh-preis-karte { background: #fff; border-radius: var(--mh-radius); padding: 1.2rem 1.3rem; box-shadow: var(--mh-shadow); border-top: 5px solid var(--mh-ocker); }
.mh-preis-karte strong { display: block; font: 600 2.1rem/1 var(--mh-font-head); color: var(--mh-tinte); margin: .3rem 0; }

/* Galerie + Lightbox */
.mh-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: clamp(8px, 1.4vw, 14px); margin: 1.6em 0; padding: 0; list-style: none; }
.mh-galerie li, .mh-galerie figure { margin: 0; }
.mh-galerie a { display: block; border-radius: var(--mh-radius-s); overflow: hidden; background: var(--mh-sand); aspect-ratio: 1; }
.mh-galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s ease; }
.mh-galerie a:hover img { transform: scale(1.05); }
.mh-lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.mh-lightbox::backdrop { background: rgba(30, 16, 26, .92); }
.mh-lightbox__inner { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 56px 12px; }
.mh-lightbox img { max-width: 100%; max-height: calc(100vh - 112px); object-fit: contain; border-radius: 4px; }
.mh-lightbox__cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #f6e9ec; font-size: .95rem; padding-inline: 60px; }
.mh-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.mh-lightbox button:hover { background: rgba(255, 255, 255, .28); }
.mh-lightbox .mh-lb-close { top: 10px; right: 10px; }
.mh-lightbox .mh-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.mh-lightbox .mh-lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* FAQ (details/summary) */
.mh-faq details { background: #fff; border-radius: var(--mh-radius-s); box-shadow: var(--mh-shadow); margin: 0 0 .7rem; }
.mh-faq summary { cursor: pointer; padding: 1rem 3rem 1rem 1.2rem; font-weight: 650; color: var(--mh-tinte); list-style: none; position: relative; }
.mh-faq summary::-webkit-details-marker { display: none; }
.mh-faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font: 400 1.6rem/1 var(--mh-font-head); color: var(--mh-blau); }
.mh-faq details[open] summary::after { content: "–"; }
.mh-faq details > :not(summary) { padding: 0 1.2rem; }
.mh-faq details > :last-child { padding-bottom: 1rem; margin-bottom: 0; }

/* ---------- Karten (Startseite, Workshops, Blog) ---------- */
.mh-karten { display: grid; gap: clamp(14px, 2.4vw, 26px); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); margin: 1.6em 0 2.4em; padding: 0; list-style: none; }
.mh-karten > li { margin: 0; }
.mh-karte { position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--mh-radius); overflow: hidden; box-shadow: var(--mh-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.mh-karte:hover { transform: translateY(-3px); box-shadow: var(--mh-shadow-hover); }
.mh-karte__bild { aspect-ratio: 4 / 3; background: var(--mh-sand); overflow: hidden; }
.mh-karte__bild img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.mh-karte__body { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.25rem 1.3rem; flex: 1; }
.mh-karte__body > * { margin: 0; }
.mh-karte h2, .mh-karte h3 { font-size: 1.25rem; margin: 0; }
.mh-karte h2 a, .mh-karte h3 a { color: var(--mh-tinte); text-decoration: none; }
.mh-karte h2 a::after, .mh-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.mh-karte__meta { font-size: .88rem; color: var(--mh-text-leise); }
.mh-karte__text { font-size: .98rem; color: var(--mh-text); }
.mh-karte__fuss { margin-top: auto !important; padding-top: .5rem; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.mh-karte__fuss .mh-btn, .mh-karte__fuss button { position: relative; z-index: 2; }
.mh-badge { display: inline-block; padding: .2em .65em; border-radius: 999px; font: 700 .74rem/1.4 var(--mh-font-body); letter-spacing: .06em; text-transform: uppercase; background: var(--mh-blau-hell); color: var(--mh-blau); }
.mh-badge--ocker { background: #fbe2d6; color: var(--mh-ocker-dunkel); }
.mh-badge--demo { background: var(--mh-terra); color: #fff; box-shadow: 0 0 0 2px #fff; }
.mh-karte .mh-badge { align-self: flex-start; }
.mh-karte__ecke { position: absolute; top: 12px; left: 12px; z-index: 1; }

/* Abschnitte auf der Startseite */
.mh-abschnitt { margin: clamp(40px, 6vw, 72px) 0; }
.mh-abschnitt__kopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.mh-abschnitt__kopf h2 { margin: 0; }
.mh-abschnitt__kopf a { font-weight: 600; }
.mh-band { background: var(--mh-sand); border-radius: calc(var(--mh-radius) * 1.6); padding: clamp(1.4rem, 4vw, 3rem); margin: clamp(40px, 6vw, 72px) 0; }
.mh-band > :last-child { margin-bottom: 0; }
.mh-angebote { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 1.4em 0 0; padding: 0; list-style: none; }
.mh-angebote li { margin: 0; }
.mh-angebot { display: block; height: 100%; padding: 1.3rem 1.3rem 1.4rem; border-radius: var(--mh-radius); background: #fff; color: var(--mh-text); text-decoration: none; box-shadow: var(--mh-shadow); transition: transform .2s ease, box-shadow .2s ease; border-bottom: 5px solid var(--mh-blau); }
.mh-angebot:nth-child(2n), .mh-angebote li:nth-child(2n) .mh-angebot { border-bottom-color: var(--mh-ocker); }
.mh-angebote li:nth-child(3n) .mh-angebot { border-bottom-color: var(--mh-terra); }
.mh-angebot:hover { transform: translateY(-3px); box-shadow: var(--mh-shadow-hover); color: var(--mh-text); text-decoration: none; }
.mh-angebot strong { display: block; font: 600 1.3rem/1.2 var(--mh-font-head); color: var(--mh-tinte); margin-bottom: .35rem; }
.mh-angebot span { font-size: .98rem; }

/* ---------- Magazin / Blog ---------- */
.mh-magazin__filter, .mh-katalog__filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.mh-magazin__filter li, .mh-katalog__filter li { margin: 0; }
.mh-chip { display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .95rem; border-radius: 999px; border: 1.5px solid var(--mh-linie); background: #fff; color: var(--mh-tinte); font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; }
.mh-chip:hover { border-color: var(--mh-blau); color: var(--mh-blau); text-decoration: none; }
.mh-chip.is-aktiv, .mh-chip[aria-pressed="true"] { background: var(--mh-blau); border-color: var(--mh-blau); color: #fff; }
.mh-verwandt { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--mh-linie); }
.mh-verwandt h2 { font-size: 1.4rem; margin-top: 0; }

/* ---------- Katalog ---------- */
.mh-katalog__leiste { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); background: #fff; border-radius: var(--mh-radius); padding: 1rem 1.1rem; box-shadow: var(--mh-shadow); margin-bottom: 1.6rem; }
.mh-katalog__leiste label { display: block; font-size: .85rem; font-weight: 650; color: var(--mh-text-leise); margin-bottom: .25rem; }
.mh-katalog__leer { display: none; padding: 1.2rem; background: #fff; border-radius: var(--mh-radius); text-align: center; }
.mh-katalog__leer.is-sichtbar { display: block; }
.mh-produkte .mh-karte__bild { aspect-ratio: 1; }
.mh-produkt__daten { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: .3rem 0 0; font-size: .92rem; }
.mh-produkt__daten dt { color: var(--mh-text-leise); }
.mh-produkt__daten dd { margin: 0; color: var(--mh-tinte); }
.mh-preis { font: 650 1.25rem/1.2 var(--mh-font-head); color: var(--mh-tinte); }
.mh-preis del { font-size: .85em; color: var(--mh-text-leise); font-weight: 400; margin-inline-end: .3rem; }
.mh-preis--gesperrt { font: 600 .92rem/1.3 var(--mh-font-body); color: var(--mh-text-leise); }
.mh-preis--gesperrt a { font-weight: 650; }
.mh-produkt { display: grid; gap: clamp(1.2rem, 4vw, 3rem); }
@media (min-width: 900px) { .mh-produkt { grid-template-columns: 6fr 5fr; align-items: start; } .mh-produkt__info { position: sticky; top: calc(var(--mh-header-h) + 24px); } }
.mh-galerie--einzel { display: block; margin: 0 0 1.4rem; }
.mh-galerie--einzel a { aspect-ratio: auto; background: #fff; }
.mh-galerie--einzel img { height: auto; object-fit: contain; }
.mh-galerie--einzel a:hover img { transform: none; }
.mh-produkt__bilder .mh-produkt__hauptbild { display: block; background: #fff; border-radius: var(--mh-radius); padding: 14px; box-shadow: var(--mh-shadow); }
.mh-produkt__bilder .mh-produkt__hauptbild img { width: 100%; border-radius: 4px; }
.mh-produkt__bilder .mh-galerie { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.mh-produkt__info { background: #fff; border-radius: var(--mh-radius); padding: clamp(1.1rem, 3vw, 1.8rem); box-shadow: var(--mh-shadow); }
.mh-produkt__info h1 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-top: 0; }
.mh-produkt__info .mh-produkt__daten { font-size: 1rem; margin: 1rem 0 1.2rem; }
.mh-menge { display: inline-flex; align-items: center; border: 1.5px solid var(--mh-linie); border-radius: 999px; overflow: hidden; background: #fff; }
.mh-menge button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--mh-tinte); }
.mh-menge input { width: 48px; height: 40px; border: 0; text-align: center; font: 600 1rem var(--mh-font-body); -moz-appearance: textfield; }
.mh-menge input::-webkit-outer-spin-button, .mh-menge input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mh-in-liste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* Merkliste / Bestellliste (wird per JavaScript des Malhaus-Plugins befüllt) */
.mh-liste-knopf { position: fixed; right: 18px; bottom: 92px; z-index: 70; display: none; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border: 0; border-radius: 999px; background: var(--mh-ocker); color: var(--mh-tinte); font: 700 1rem var(--mh-font-body); box-shadow: var(--mh-shadow-hover); cursor: pointer; }
.mh-liste-knopf.is-sichtbar { display: inline-flex; }
.mh-liste-knopf__zahl { min-width: 24px; height: 24px; border-radius: 999px; background: var(--mh-tinte); color: #fff; font-size: .82rem; display: inline-grid; place-items: center; padding: 0 .35rem; }
.mh-liste { position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(460px, 100vw); background: var(--mh-papier); box-shadow: -10px 0 40px rgba(58, 36, 51, .25); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
.mh-liste.is-offen { transform: none; }
.mh-liste__kopf { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--mh-linie); }
.mh-liste__kopf h2 { margin: 0; font-size: 1.4rem; }
.mh-liste__zu { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; font-size: 1.5rem; cursor: pointer; }
.mh-liste__inhalt { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; }
.mh-liste__posten { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; padding: .8rem 0; border-bottom: 1px solid var(--mh-linie); list-style: none; }
.mh-liste__posten strong { color: var(--mh-tinte); }
.mh-liste__posten small { color: var(--mh-text-leise); grid-column: 1; }
.mh-liste__entfernen { border: 0; background: none; color: var(--mh-terra); cursor: pointer; font-size: .9rem; text-decoration: underline; justify-self: end; }
.mh-liste__fuss { padding: 1rem 1.2rem 1.4rem; border-top: 1px solid var(--mh-linie); background: #fff; }
.mh-liste__summe { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: .8rem; }
.mh-liste-overlay { position: fixed; inset: 0; z-index: 85; background: rgba(58, 36, 51, .4); display: none; }
.mh-liste-overlay.is-sichtbar { display: block; }

/* ---------- Formulare ---------- */
.com-content-article__body > .mh-form { max-width: 760px; }
.mh-form { display: grid; gap: 1rem; background: #fff; padding: clamp(1.1rem, 3vw, 1.8rem); border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); margin: 1.6em 0; }
.mh-form--narrow { max-width: 420px; margin-inline: auto; }
.mh-form__reihe { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mh-form label, .control-label label, .form-label { display: block; font-weight: 650; color: var(--mh-tinte); margin-bottom: .3rem; font-size: .97rem; }
.mh-form .mh-pflicht, .star { color: var(--mh-terra); }
.mh-input, .mh-form input[type="text"], .mh-form input[type="email"], .mh-form input[type="tel"], .mh-form input[type="number"], .mh-form input[type="date"], .mh-form select, .mh-form textarea,
.form-control, .form-select, .inputbox {
  width: 100%; min-height: 48px; padding: .6rem .85rem;
  font: 400 1rem/1.4 var(--mh-font-body); color: var(--mh-text);
  background: var(--mh-papier); border: 1.5px solid var(--mh-sand-dunkel); border-radius: var(--mh-radius-s);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mh-form textarea, textarea.form-control { min-height: 140px; resize: vertical; }
.mh-input:focus, .mh-form input:focus, .mh-form select:focus, .mh-form textarea:focus, .form-control:focus, .form-select:focus { outline: none; border-color: var(--mh-blau); box-shadow: 0 0 0 4px rgba(142, 59, 92, .16); background: #fff; }
.mh-form__check { display: flex; gap: .65rem; align-items: flex-start; font-size: .95rem; }
.mh-form__check input { width: 20px; height: 20px; margin-top: .2rem; flex: none; accent-color: var(--mh-blau); }
.mh-form__check label { font-weight: 400; margin: 0; color: var(--mh-text); }
.mh-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.mh-form__status { padding: .9rem 1.1rem; border-radius: var(--mh-radius-s); display: none; }
.mh-form__status.is-ok { display: block; background: #e6f2ea; color: #1f5232; }
.mh-form__status.is-fehler { display: block; background: #fbe9e5; color: #8a2b18; }
.mh-form__hinweis { font-size: .88rem; color: var(--mh-text-leise); margin: 0; }
.control-group { margin-bottom: 1rem; }
.com-users-login, .com-users-registration, .com-users-profile, .com-users-reset, .com-users-remind { max-width: 640px; }
.com-users-login form, .com-users-registration form, .com-users-reset form, .com-users-remind form { background: #fff; padding: clamp(1.1rem, 3vw, 1.8rem); border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); }
.com-users-registration fieldset, .com-users-profile fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.com-users-registration legend, .com-users-profile legend { font: 600 1.3rem var(--mh-font-head); color: var(--mh-tinte); margin-bottom: .8rem; }
.input-group { display: flex; }
.input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group .btn { border-radius: 0 var(--mh-radius-s) var(--mh-radius-s) 0; min-height: 48px; }
.form-check { display: flex; gap: .5rem; align-items: center; }
.invalid { border-color: var(--mh-terra) !important; }
label.invalid, .form-control-feedback { color: var(--mh-terra); }

/* Zwei-Klick-Karte */
.mh-karte-2klick { position: relative; display: grid; place-items: center; min-height: 320px; padding: 1.5rem; border-radius: var(--mh-radius); overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--mh-blau-hell), var(--mh-sand)); box-shadow: var(--mh-shadow); margin: 1.6em 0; }
.mh-karte-2klick p { max-width: 34em; font-size: .95rem; }
.mh-karte-2klick iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Seitenfuß ---------- */
.mh-bottom { padding-block: 0 clamp(40px, 6vw, 72px); }
.mh-footer { position: relative; background: var(--mh-tinte); color: #ecd6de; margin-top: 40px; font-size: .97rem; }
.mh-footer__wave { position: absolute; left: 0; right: 0; top: -38px; height: 40px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22c120-14 240-20 360-14s240 22 360 20 240-22 360-24 240 10 360 18v18z' fill='%233a2433'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mh-footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); padding-block: 3rem 2rem; }
.mh-footer h3, .mh-footer .moduletable > h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .8rem; }
.mh-footer a { color: #fff; }
.mh-footer a:hover { color: var(--mh-ocker); }
.mh-footer ul { list-style: none; padding: 0; }
.mh-footer .moduletable { margin-bottom: 1.4rem; }
.mh-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.2rem 1.6rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; }
.mh-footer__copy { margin: 0; color: #c7a9b6; }
.mh-footer__credit { margin: 0; flex-basis: 100%; color: #c7a9b6; font-size: .85rem; }
.mh-footer__credit a { color: #ecd6de; text-decoration: none; }
.mh-footer__credit a:hover { color: var(--mh-ocker); text-decoration: underline; }
.mh-footer__menu .mod-menu { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.mh-footer__menu .mod-menu li { margin: 0; }
.mh-footer__menu a { color: #ecd6de; text-decoration: none; }
.mh-footer__menu a:hover { text-decoration: underline; }
.mh-social { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 0; }
.mh-social a { display: inline-block; padding: .35rem .9rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; text-decoration: none; font-size: .9rem; }
.mh-whatsapp { position: fixed; right: 18px; bottom: 18px; z-index: 70; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: var(--mh-shadow-hover); transition: transform .2s ease; }
.mh-whatsapp:hover { transform: scale(1.06); color: #fff; }

/* ---------- Joomla-Systemelemente ---------- */
#system-message-container joomla-alert, .alert { display: block; padding: 1rem 1.2rem; margin-bottom: 1.2rem; border-radius: var(--mh-radius-s); background: var(--mh-blau-hell); color: var(--mh-tinte); border-inline-start: 5px solid var(--mh-blau); }
#system-message-container joomla-alert[type="success"], .alert-success { background: #e6f2ea; border-color: var(--mh-gruen); }
#system-message-container joomla-alert[type="warning"], .alert-warning { background: #fdeee4; border-color: var(--mh-ocker); }
#system-message-container joomla-alert[type="danger"], .alert-danger, .alert-error { background: #fbe9e5; border-color: var(--mh-terra); }
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.pagination li { margin: 0; }
.pagination .page-link { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .7rem; border-radius: 999px; background: #fff; color: var(--mh-tinte); text-decoration: none; box-shadow: var(--mh-shadow); }
.pagination .active .page-link { background: var(--mh-blau); color: #fff; }
.pagination .disabled .page-link { opacity: .45; }
.counter { color: var(--mh-text-leise); font-size: .9rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; }
.tags li { margin: 0; }
.tags a, .tags .btn { min-height: 0; padding: .2rem .7rem; font-size: .82rem; border-radius: 999px; background: var(--mh-sand); color: var(--mh-tinte); border: 0; text-decoration: none; }
.float-start { float: left; margin: 0 1.4rem 1rem 0; }
.float-end { float: right; margin: 0 0 1rem 1.4rem; }
@media (max-width: 599.98px) { .float-start, .float-end { float: none; margin: 0 0 1rem; } }
.item-image img, .item-page figure img { box-shadow: var(--mh-shadow); }
.clearfix::after { content: ""; display: table; clear: both; }

/* Fehlerseite / Offline */
.mh-error { min-height: 100vh; display: grid; place-items: center; text-align: center; }
.mh-error__box { max-width: 680px; background: var(--mh-papier); border-radius: 6px; padding: clamp(28px, 6vw, 56px); box-shadow: 0 24px 70px rgba(110, 42, 70, .22); }
.mh-error__box img { display: block; margin: 0 auto 1rem; border-radius: 0; }
.mh-error__debug { text-align: left; font-size: .8rem; overflow: auto; }

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Druck */
@media print {
  .mh-header, .mh-footer, .mh-whatsapp, .mh-liste-knopf, .mh-liste, .mh-breadcrumbs, .mh-navtoggle { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  a { color: #000; }
}

/* Beitragsbild neben dem Text (z. B. Workshop-Foto) */
.item-image { margin: 0 0 1.4rem; }
.item-image.float-end, .item-image.float-start { width: min(42%, 440px); }
.item-image.float-end { margin-inline-start: clamp(1.2rem, 3vw, 2.2rem); }
.item-image.float-start { margin-inline-end: clamp(1.2rem, 3vw, 2.2rem); }
.item-image img { width: 100%; height: auto; border-radius: var(--mh-radius); }
@media (max-width: 599.98px) { .item-image.float-end, .item-image.float-start { width: 100%; } }