/* ============================================================
   Metallbau Müller — Site Redesign 2026 (Werkstatt-Editorial)
   ============================================================
   Übernommen aus Design/Redesign MM Local/styles/site.css plus
   pattern-spezifischen Inline-Styles der HTML-Prototypen.
   Beibehalten: alle CSS-Custom-Properties (Tokens), alle Klassen-
   Namen 1:1 wie im Prototyp, damit Texte/Markup-Anpassungen direkt
   übertragbar bleiben. Pattern-Gruppen sind durch Kommentar-Banner
   getrennt.
   ============================================================ */

:root {
  --mm-blue-50:  #e6f0fb;
  --mm-blue-100: #c2dbf4;
  --mm-blue-200: #8ebde8;
  --mm-blue-300: #4f97d6;
  --mm-blue-400: #2670bb;
  --mm-blue-500: #00479a;
  --mm-blue-600: #003b80;
  --mm-blue-700: #002e64;
  --mm-blue-900: #001a3d;

  --mm-steel-50:  #f4f6f8;
  --mm-steel-100: #e6eaee;
  --mm-steel-200: #c9d1d9;
  --mm-steel-300: #9aa6b2;
  --mm-steel-400: #6b7986;
  --mm-steel-500: #485561;
  --mm-steel-700: #2a323c;
  --mm-steel-900: #15191f;

  --mm-forge-500: #e8741b;

  --mm-paper: #fbfaf7;
  --mm-sand:  #f1ece2;
  --mm-line:  #d9d4c7;

  --bg: var(--mm-paper);
  --bg-alt: #f6f4ee;
  --bg-dark: #001a3d;
  --bg-deep: #00152f;
  --surface: #ffffff;

  --fg: var(--mm-steel-900);
  --fg-muted: var(--mm-steel-500);
  --fg-subtle: var(--mm-steel-400);

  --brand: var(--mm-blue-500);

  --border: #e3ddd0;
  --border-strong: #c4bca8;
  --border-on-dark: rgba(255,255,255,.12);
  --border-on-dark-strong: rgba(255,255,255,.22);

  --font-display: "Newsreader", "Source Serif Pro", Georgia, serif;
  --font-body:    "Source Sans 3", system-ui, sans-serif;
  --font-mono:    "Source Sans 3", system-ui, sans-serif;

  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-out-soft: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 520ms;

  --container: 1440px;
  --gutter: clamp(16px, 3vw, 40px);
  --nav-h: clamp(72px, 6vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--mm-blue-500); color: #fff; }

/* ============================================================
   Layout
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-tight {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(40px, 5vw, 80px); }
.section--tight { padding-block: clamp(28px, 3.5vw, 56px); }
.section--dark {
  background: var(--mm-blue-500);
  color: rgba(255,255,255,.92);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #ffffff; }
.section--navy { background: var(--bg-dark); color: rgba(255,255,255,.85); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #ffffff; }
.section--sand { background: var(--mm-sand); }
.section--blue { background: var(--mm-blue-500); color: #fff; }
.section--blue h1, .section--blue h2, .section--blue h3, .section--blue h4 { color: #fff; }

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--fg);
  text-wrap: balance;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fafbfc; }

.display-xxl { font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 11vw, 180px); line-height: .92; letter-spacing: -.035em; }
.display-xl  { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 8vw, 132px);  line-height: .94; letter-spacing: -.03em; }
.display-lg  { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 6vw, 96px);   line-height: .96; letter-spacing: -.025em; }
.display-md  { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4vw, 64px);   line-height: 1;   letter-spacing: -.02em; }

.italic, em, i { font-style: italic; font-weight: 500; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brand);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.section--dark .eyebrow, .section--blue .eyebrow { color: #8ebde8; }

.lead {
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 60ch;
  text-wrap: pretty;
}
.section--dark .lead, .section--blue .lead { color: rgba(255,255,255,.78); }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --btn-bg: var(--mm-blue-500);
  --btn-fg: #fff;
  --btn-border: var(--mm-blue-500);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-border);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-base) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn::after {
  content: "→";
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  transition: transform var(--t-base) var(--ease-out);
}
.btn:hover { background: var(--mm-blue-600); transform: translateY(-1px); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--no-arrow::after { content: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--mm-steel-900);
  --btn-border: var(--mm-steel-900);
}
.btn--ghost:hover { background: var(--mm-steel-900); color: #fff; }

.btn--light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255,255,255,.5);
}
.btn--light:hover { background: #fff; color: var(--mm-blue-700); border-color: #fff; }

.btn--solid-light {
  --btn-bg: #fff;
  --btn-fg: var(--mm-blue-700);
  --btn-border: #fff;
}
.btn--solid-light:hover { background: var(--mm-blue-50); border-color: var(--mm-blue-50); }

/* Modifier: weißer Button mit BRAND-blauer Border — sichtbar auch auf hellen Heros */
.btn--brand-border {
  --btn-bg: #fff;
  --btn-fg: var(--mm-blue-700);
  --btn-border: var(--mm-blue-500);
}
.btn--brand-border:hover { background: var(--mm-blue-50); border-color: var(--mm-blue-500); color: var(--mm-blue-700); }

.btn--sm { height: 40px; padding: 0 16px; font-size: 13.5px; }

.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--mm-steel-900);
  letter-spacing: 0;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  transition: all var(--t-fast) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
}
.btn-phone:hover { border-color: var(--mm-steel-900); background: var(--mm-steel-900); color: #fff; }
.btn-phone .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2cb551;
  box-shadow: 0 0 0 4px rgba(44,181,81,.18);
  display: inline-block;
  animation: pulse 2.6s var(--ease-out) infinite;
}
@keyframes pulse {
  0%, 60%, 100% { box-shadow: 0 0 0 4px rgba(44,181,81,.18); }
  30%           { box-shadow: 0 0 0 7px rgba(44,181,81,.06); }
}

.tlink {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-strong);
  transition: gap var(--t-base) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.tlink:hover { gap: 14px; border-color: var(--fg); }

/* ============================================================
   Reveal on scroll
   ============================================================ */
html.js .reveal:not(.is-in) {
  transform: translateY(14px);
  transition: transform 700ms var(--ease-out);
}
html.js .reveal.is-in { transform: none; }
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none !important; transition: none !important; }
}

/* ============================================================
   Crumbs
   ============================================================ */
.mm-crumbs, .crumbs {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
}
.mm-crumbs a, .crumbs a { transition: color var(--t-fast) var(--ease-out); }
.mm-crumbs a:hover, .crumbs a:hover { color: var(--fg); }
.crumbs .sep, .mm-crumbs__sep { opacity: .4; }
.section--blue .crumbs, .section--dark .crumbs { color: rgba(255,255,255,.55); }
.section--blue .crumbs a:hover, .section--dark .crumbs a:hover { color: #fff; }

/* ============================================================
   Reusable hero photo (left-fade + warm tint)
   ============================================================ */
.mm-hero-photo__wrap { position: relative; overflow: hidden; isolation: isolate; }
.mm-hero-photo__wrap::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 46%;
  height: 4px;
  background: var(--mm-blue-500);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 12%, rgba(0,0,0,1) 35%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 12%, rgba(0,0,0,1) 35%);
  z-index: 2;
}
.mm-hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 72%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  z-index: 0;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 22%, rgba(0,0,0,1) 50%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 22%, rgba(0,0,0,1) 50%);
  filter: contrast(1.05) saturate(.92);
}
.mm-hero-photo__tint {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(251,250,247,.65) 18%, rgba(251,250,247,0) 40%),
    linear-gradient(180deg, rgba(0,26,61,0) 65%, rgba(0,26,61,.35) 100%);
  pointer-events: none;
}
@media (max-width: 999px) {
  /* Mobile: Foto als großflächiger Hintergrund hinter dem Text */
  .mm-hero-photo {
    width: 100%;
    object-position: 50% 55%;
    opacity: .22;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.95) 60%, rgba(0,0,0,.6) 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.95) 60%, rgba(0,0,0,.6) 100%);
    filter: contrast(1.05) saturate(.85) grayscale(.15);
  }
  .mm-hero-photo__tint {
    background:
      linear-gradient(180deg, rgba(251,250,247,.35) 0%, rgba(251,250,247,.85) 75%, var(--bg) 100%);
  }
  .mm-hero-photo__wrap::before { width: 100%; }
}

/* ============================================================
   Startseiten-Foto-Hero (foto-hero-hell-firma.png)
   — Foto bringt eigene Cremeweiß-Vignette mit (#FBF7F3),
     daher Section-BG matched die Vignette → nahtloser Übergang.
     Foto wird komplett (object-fit: contain) angezeigt,
     nichts wird abgeschnitten.
   — Layout: Copy links, Actions unten rechts (Spec-Card entfällt).
   ============================================================ */
body.home .hero.mm-hero-photo__wrap { background: var(--mm-paper); }
body.home .hero.mm-hero-photo__wrap::before { display: none; }
body.home .mm-hero-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 62%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Schmaler Alpha-Fade an allen 4 Kanten, damit das Foto ohne harte
     Kante in den Page-BG (--mm-paper) auslaeuft. Asymmetrisch, weil
     die Bild-eigene KI-Vignette links knapper ist als rechts. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 24px, #000 calc(100% - 14px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8px,  #000 calc(100% - 8px),  transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 24px, #000 calc(100% - 14px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 8px,  #000 calc(100% - 8px),  transparent 100%);
          mask-composite: intersect;
  filter: none;
}
body.home .mm-hero-photo__tint { display: none; }

/* Inner-Grid auf Startseite umbauen: Copy links durchgehend (2 Zeilen hoch),
   Actions in der Zeile 2 rechts. */
body.home .hero__inner {
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 1fr auto;
  align-items: stretch;
}
body.home .hero__copy {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
body.home .hero__actions--bottom-right {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  justify-self: end;
  align-self: end;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
body.home .hero__actions--bottom-right .btn { text-align: center; justify-content: center; }

/* TABLET (768–999px): Desktop-Layout durchsetzen — Foto rechts absolute, Text links.
   Es ist genug Breite vorhanden, um beides nebeneinander zu zeigen wie auf Desktop. */
@media (min-width: 768px) and (max-width: 999px) {
  body.home .hero.mm-hero-photo__wrap {
    display: block;
    background: var(--mm-paper);
  }
  body.home .mm-hero-photo {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 55%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    opacity: 1;
    -webkit-mask-image: none;
            mask-image: none;
    filter: none;
    margin: 0;
    max-height: none;
    aspect-ratio: auto;
  }
  body.home .hero.mm-hero-photo__wrap > .hero__watermark { display: block; }
  body.home .hero.mm-hero-photo__wrap > .mm-hero-photo__tint { display: none; }
  body.home .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: 1fr auto;
  }
  body.home .hero__copy {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }
  body.home .hero__actions--bottom-right {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: end;
    align-self: end;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 280px;
  }
}

/* MOBILE (<768px): Foto im Hintergrund (absolute) mit starkem Fade-Mask von rechts.
   Linker Bildausschnitt voll sichtbar, rechte Hälfte blendet aus. Dezente Opacity, damit Text lesbar bleibt. */
/* MOBILE (<768px): Foto NICHT mehr hinter dem Text, sondern als eigenes
   Bild-Element UNTER Text + Buttons gestapelt. Umsetzung: Hero wird Flex-
   Spalte, Text-Container behaelt order:1, Foto bekommt order:2 und wird vom
   absoluten Hintergrund zum normalen Bild im Fluss (ganzes Bild, volle
   Deckkraft, kein Anschnitt). */
@media (max-width: 767px) {
  body.home .hero.mm-hero-photo__wrap {
    position: relative;
    isolation: auto;
    background: var(--mm-paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    padding-block: clamp(24px, 6vw, 40px) 0;
  }
  body.home .hero.mm-hero-photo__wrap > .container {
    order: 1;
    position: relative;
    z-index: 2;
  }
  body.home .mm-hero-photo {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    margin: clamp(20px, 6vw, 36px) 0 0;
    aspect-ratio: auto;
    z-index: auto;
    -webkit-mask-image: none;
            mask-image: none;
    filter: none;
  }
  body.home .hero.mm-hero-photo__wrap > .mm-hero-photo__tint,
  body.home .hero.mm-hero-photo__wrap > .hero__watermark { display: none; }
  /* Mobile: einspaltig, Actions stacken vertikal full-width.
     min-height:0 hebt die Desktop-Mindesthoehe auf, sonst klafft eine
     Luecke zwischen Text und Foto. */
  body.home .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
  }
  body.home .hero__copy { grid-column: 1; grid-row: 1; }
  body.home .hero__actions--bottom-right {
    grid-column: 1;
    grid-row: 2;
    justify-self: stretch;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   Image / placeholder
   ============================================================ */
.media-frame {
  position: relative;
  background: var(--mm-steel-100);
  overflow: hidden;
  isolation: isolate;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame .corner {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid rgba(255,255,255,.7);
  z-index: 2;
}
.media-frame .corner.tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; }
.media-frame .corner.tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; }
.media-frame .corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.media-frame .corner.br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; }

.placeholder {
  position: relative;
  background:
    linear-gradient(135deg, rgba(0,71,154,.06) 0%, rgba(0,71,154,.02) 100%),
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(72,85,97,.06) 14px 15px),
    #e9ecef;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  color: var(--mm-steel-400);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  text-align: center;
  padding: 16px;
  width: 100%; height: 100%;
}
.placeholder svg {
  width: 28px; height: 28px;
  stroke: var(--mm-steel-300);
  stroke-width: 1.25;
  fill: none;
}
.placeholder .ph-label { display: block; }
.placeholder .ph-meta { font-size: 10px; color: var(--mm-steel-300); letter-spacing: .1em; }

/* ============================================================
   Chips (für Filter)
   ============================================================ */
.chip, .mm-ref-filter__chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--fg-muted);
  transition: all var(--t-fast) var(--ease-out);
  cursor: pointer;
  user-select: none;
}
.chip:hover, .mm-ref-filter__chip:hover { color: var(--fg); border-color: var(--fg); }
.chip.is-active, .mm-ref-filter__chip.is-active {
  background: var(--mm-blue-500); color: #fff; border-color: var(--mm-blue-500);
}

/* ============================================================
   Utilities
   ============================================================ */
.stack { display: flex; flex-direction: column; }
.stack--sm { gap: 8px; }
.stack--md { gap: 16px; }
.stack--lg { gap: 24px; }
.stack--xl { gap: 40px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.row--btns { gap: 12px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tabular { font-variant-numeric: tabular-nums; }
.brand-rule { display: block; height: 4px; background: var(--brand); width: 100%; }

/* ============================================================
   Sub-Heroes — gemeinsame Basis (alle Heros außer Startseite)
   Galerie als Goldstandard: gleiche Höhe, gleiche Text-Positionen
   ============================================================ */
.mm-subhero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(28px, 3.5vw, 56px) clamp(40px, 6vw, 80px);
  min-height: clamp(420px, 62vh, 580px);
}
.mm-subhero > .container { position: relative; z-index: 2; }
.mm-subhero .crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
  margin-bottom: 0;
}
.mm-subhero .crumbs a:hover { color: var(--fg); }
.mm-subhero .crumbs .sep { opacity: .4; margin-inline: .3em; }
.mm-subhero .eyebrow {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mm-blue-700);
}
.mm-subhero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.8vw, 84px);
  line-height: .94;
  letter-spacing: -.035em;
  margin-block: 24px 32px;
  max-width: 18ch;
  color: var(--fg);
}
.mm-subhero h1 em { color: var(--brand); font-style: italic; font-weight: 500; }
.mm-subhero p.lead {
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--fg-muted);
}
/* Dark-Variante: weißer Text auf blauem Hintergrund */
.mm-subhero--dark { background: var(--mm-blue-500); color: #fff; }
.mm-subhero--dark .crumbs { color: rgba(255, 255, 255, .55); }
.mm-subhero--dark .crumbs a:hover { color: #fff; }
.mm-subhero--dark .eyebrow { color: var(--mm-blue-100); }
.mm-subhero--dark h1 { color: #fff; }
.mm-subhero--dark h1 em { color: var(--mm-blue-100); }
.mm-subhero--dark p.lead { color: rgba(255, 255, 255, .82); }

/* M-Mark — zweifarbig (outer + inner) via CSS-Mask, einfärbbar pro Hero */
.mm-mmark {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.mm-mmark::before,
.mm-mmark::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}
.mm-mmark::before {
  -webkit-mask-image: url('../../uploads/mm-redesign/m-mark-outer.svg');
          mask-image: url('../../uploads/mm-redesign/m-mark-outer.svg');
}
.mm-mmark::after {
  -webkit-mask-image: url('../../uploads/mm-redesign/m-mark-inner.svg');
          mask-image: url('../../uploads/mm-redesign/m-mark-inner.svg');
}
/* Standard-Position (Galerie-Goldstandard) */
.mm-mmark--default {
  top: 50%; right: 4%;
  transform: translateY(-50%);
  width: 36%; height: 90%;
}
/* Helle Heros: dunkler Außenring + Brand-Blau Innen */
.mm-subhero .mm-mmark::before { background-color: rgba(0, 36, 90, 0.13); }
.mm-subhero .mm-mmark::after  { background-color: rgba(0, 71, 154, 0.085); }
/* Dunkle Heros: weißer Außenring + helleres Blau Innen — sehr dezent, fast als Wasserzeichen */
.mm-subhero--dark .mm-mmark::before { background-color: rgba(255, 255, 255, 0.05); }
.mm-subhero--dark .mm-mmark::after  { background-color: rgba(142, 189, 232, 0.13); }

@media (max-width: 899px) {
  .mm-mmark { display: none; }
}
@media (max-width: 699px) {
  .mm-subhero {
    min-height: auto;
    padding-block: clamp(20px, 5vw, 32px) clamp(24px, 6vw, 40px);
  }
  .mm-subhero h1 { margin-block: 16px 20px; }
  .mm-subhero p.lead { margin-bottom: 0; }
}

/* ============================================================
   Pattern: hero-home
   ============================================================ */
.hero {
  position: relative;
  padding-block: clamp(28px, 3.5vw, 56px) clamp(40px, 6vw, 80px);
  min-height: clamp(420px, 62vh, 580px);
}
@media (max-width: 999px) { .hero { min-height: 380px; } }
.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch;
  min-height: clamp(440px, 62vh, 560px);
}
@media (min-width: 1000px) { .hero__inner { grid-template-columns: 1.05fr 1fr; } }
.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero .hero__copy h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.8vw, 84px);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  margin-top: auto !important;
}
.hero h1 .italic-blue { font-style: italic; color: var(--brand); font-weight: 500; }
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 .line--script { font-style: italic; }
.hero h1 .brand-blue   { color: var(--brand); }
.hero__sub {
  max-width: 38ch;
  font-size: clamp(17px, 1.4vw, 19px);
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.hero__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.hero__actions .btn { text-align: center; justify-content: center; }

.hero__watermark {
  position: absolute;
  top: 4%;
  left: -10%;
  width: 50vw;
  max-width: 640px;
  opacity: .055;
  pointer-events: none;
  z-index: 2;
  display: block;
}
@media (max-width: 999px) { .hero__watermark { display: none; } }

/* ============================================================
   Pattern: service-marquee
   ============================================================ */
.marquee {
  border-block: 1px solid transparent;
  background: var(--mm-blue-500);
  overflow: hidden;
  padding-block: 18px;
}
/* Etwas Luft zwischen Hero und Marquee — Cremeweiß-Streifen wirkt als Atempause */
.mm-hero-photo__wrap + .marquee,
.hero + .marquee { margin-top: clamp(24px, 3vw, 48px); }
.marquee__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 38s linear infinite;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff;
}
.marquee__track > * { flex-shrink: 0; display: inline-flex; align-items: center; gap: 12px; }
.marquee__track .ico {
  width: 22px; height: 22px;
  display: inline-block;
  flex-shrink: 0;
  background-color: #fff;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;    mask-size: contain;
}
/* Pro-Kategorie-Icon-Klassen — robust gegenüber KSES (inline style würde gestrippt) */
.marquee__track .ico--gelaender-und-zaeune { -webkit-mask-image: url("../../uploads/mm-category-icons/gelaender-zaeune.png");     mask-image: url("../../uploads/mm-category-icons/gelaender-zaeune.png"); }
.marquee__track .ico--terrassendaecher     { -webkit-mask-image: url("../../uploads/mm-category-icons/terrassendaecher.png");     mask-image: url("../../uploads/mm-category-icons/terrassendaecher.png"); }
.marquee__track .ico--balkone              { -webkit-mask-image: url("../../uploads/mm-category-icons/balkone.png");              mask-image: url("../../uploads/mm-category-icons/balkone.png"); }
.marquee__track .ico--wintergaerten        { -webkit-mask-image: url("../../uploads/mm-category-icons/wintergaerten.png");        mask-image: url("../../uploads/mm-category-icons/wintergaerten.png"); }
.marquee__track .ico--tore-und-treppen     { -webkit-mask-image: url("../../uploads/mm-category-icons/tore-treppen.png");         mask-image: url("../../uploads/mm-category-icons/tore-treppen.png"); }
.marquee__track .ico--fenster-und-tueren   { -webkit-mask-image: url("../../uploads/mm-category-icons/fenster-tueren.png");       mask-image: url("../../uploads/mm-category-icons/fenster-tueren.png"); }
.marquee__track .ico--spezialkonstruktionen{ -webkit-mask-image: url("../../uploads/mm-category-icons/spezialkonstruktionen.png");mask-image: url("../../uploads/mm-category-icons/spezialkonstruktionen.png"); }
.marquee__track .ico--einbruchschutz       { -webkit-mask-image: url("../../uploads/mm-category-icons/einbruchschutz.png");       mask-image: url("../../uploads/mm-category-icons/einbruchschutz.png"); }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Auf Mobile etwas schneller — gesittet, nicht hektisch */
@media (max-width: 699px) {
  .marquee__track { animation-duration: 24s; }
}

/* ============================================================
   Pattern: text-section / intro-grid
   ============================================================ */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
}
@media (min-width: 900px) { .intro-grid { grid-template-columns: minmax(0, 440px) 1fr; } }
.intro-grid .eyebrow { margin-bottom: 12px; }
.intro-grid h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--fg);
  text-transform: none;
}
.intro-grid h2 em { color: var(--brand); }
.intro-body p {
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--fg);
  line-height: 1.6;
  max-width: 60ch;
}
.intro-body p + p { margin-top: 1em; }
.intro-body strong { color: var(--mm-steel-900); font-weight: 600; }

/* ============================================================
   Pattern: services-grid (Editorial Index — Startseite)
   ============================================================ */
.svc-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
@media (min-width: 900px) {
  .svc-head {
    grid-template-columns: minmax(0, 440px) 1fr;
  }
}
.svc-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--fg);
}
.svc-head h2 em { color: var(--brand); }
.svc-head .lead {
  max-width: 60ch;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
}

/* Deko-Grafik (MannWand) — überspannt Intro- + Services-Bereich, sehr transparent */
#leistungen { position: relative; overflow: visible; }
#leistungen > .container { position: relative; z-index: 1; }
.mm-deco-mannwand {
  position: absolute;
  top: clamp(-270px, -17vw, -140px);
  right: clamp(-200px, -8vw, -40px);
  width: clamp(260px, 28vw, 460px);
  pointer-events: none;
  opacity: 0.06;
  z-index: 0;
}
.mm-deco-mannwand img { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .mm-deco-mannwand { display: none; } }

/* Variante für Leistungs-Detailseiten: Grafik beginnt innerhalb der Sektion,
   ragt nicht in den blauen Hero darüber. */
.det-section--deco { position: relative; overflow: visible; }
.det-section--deco > .container { position: relative; z-index: 1; }
.det-section--deco .mm-deco-mannwand {
  top: clamp(70px, 7vw, 140px);
  right: clamp(50px, 11vw, 220px);
  width: clamp(265px, 28.6vw, 460px);
}

.svc-index { border-top: 1px solid var(--border); }
.svc-row {
  display: grid;
  grid-template-columns: 56px 1.4fr 1fr auto;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(20px, 3vw, 36px);
  padding-inline: clamp(8px, 1.5vw, 20px);
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background var(--t-base) var(--ease-out);
  text-decoration: none;
}
.svc-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mm-blue-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out-soft);
  z-index: 0;
}
.svc-row:hover::before { transform: scaleX(1); }
.svc-row > * { position: relative; z-index: 1; transition: color var(--t-base) var(--ease-out); }
.svc-row:hover > *, .svc-row:hover .svc-row__hint { color: #fff; }
.svc-row:hover .svc-row__arrow { color: #fff; transform: translateX(8px); }
.svc-row:hover .svc-row__icon { background-color: #fff; }
.svc-row__icon {
  width: 44px; height: 44px;
  display: block;
  background-color: var(--mm-steel-700);
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;    mask-size: contain;
  transition: background-color var(--t-base) var(--ease-out);
}
.svc-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--fg);
}
.svc-row__hint {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg-muted);
  max-width: 36ch;
}
.svc-row__arrow {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--fg-subtle);
  transition: transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
@media (max-width: 720px) {
  .svc-row { grid-template-columns: 40px 1fr auto; }
  .svc-row__icon { width: 32px; height: 32px; }
  .svc-row__hint { grid-column: 2 / span 1; padding-top: 4px; font-size: 14px; }
  .svc-row__title { font-size: clamp(20px, 5.5vw, 28px); }
}

/* ============================================================
   Pattern: service-grid (Cat-Grid auf Leistungen-Übersicht)
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}
@media (min-width: 700px)  { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 36px 28px 28px;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: var(--mm-blue-500);
  color: #fff !important;
  text-decoration: none;
  overflow: hidden;
  transition: background 500ms var(--ease-out-soft);
  min-height: 280px;
}
@media (min-width: 1100px) { .cat-card:nth-child(4n) { border-right: 0; } }
@media (min-width: 700px) and (max-width: 1099.9px) { .cat-card:nth-child(2n) { border-right: 0; } }
@media (max-width: 699.9px) { .cat-card { border-right: 0; } }
.cat-card.cat-card--alt { background: var(--mm-blue-700); }
/* Hover: Farben tauschen (hell ↔ dunkel), Text bleibt weiß */
.cat-card:hover { background: var(--mm-blue-700); }
.cat-card.cat-card--alt:hover { background: var(--mm-blue-500); }
.cat-card, .cat-card:visited, .cat-card:focus, .cat-card:active,
.cat-card:hover, .cat-card:hover * { color: #fff !important; }
.cat-card__icon {
  width: 56px; height: 56px;
  margin: 4px 0 28px;
  color: #fff;
  transition: opacity var(--t-base) var(--ease-out);
}
.cat-card__icon img { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: auto; }
.cat-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin: 0;
  color: #fff !important;
}
.cat-card__hint { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.5; }
.cat-card:hover .cat-card__hint { color: rgba(255,255,255,.92) !important; }

/* lst-hero — Leistungen-Übersicht: hell, PNG-Bild rechts (seit 2026-05-20,
   ersetzt frühere technische SVG-Konstruktionszeichnung). Layout identisch
   zu .ref-hero__photo. */
.lst-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('../../uploads/mm-redesign/leistungen-hero-bg.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
@media (min-width: 900px) {
  .lst-hero__photo {
    background-position: right 8vw center;
    background-size: auto 43.2%;
    opacity: .82;
  }
}
@media (max-width: 899px) {
  .lst-hero__photo {
    background-position: center center;
    background-size: 110% auto;
    opacity: .20;
  }
}
@media (max-width: 699px) {
  .lst-hero__photo {
    background-position: center 30%;
  }
}

/* ============================================================
   Pattern: pillars-3
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.pillar {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  position: relative;
}
.pillar::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--brand);
}
.pillar__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.pillar h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  letter-spacing: -.015em;
  margin-top: 8px;
  margin-bottom: 12px;
  color: var(--fg);
  text-transform: none;
}
.pillar p { color: var(--fg-muted); font-size: 15.5px; line-height: 1.55; }
.section--dark .pillar { border-top-color: rgba(255,255,255,.15); }
.section--dark .pillar::before { background: var(--mm-blue-300); }
.section--dark .pillar__num { color: rgba(255,255,255,.5); }
.section--dark .pillar h3 { color: #fff; }
.section--dark .pillar p { color: rgba(255,255,255,.75); }
@media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } }

/* about-teaser (Startseite, blauer Block) */
.about-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (min-width: 1000px) { .about-teaser { grid-template-columns: 1.05fr 1fr; } }
.about-teaser__big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(80px, 14vw, 200px);
  line-height: .92;
  letter-spacing: -.06em;
  color: #fff;
  font-variant-numeric: lining-nums;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.about-teaser__big .small {
  display: block;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mm-blue-200);
  font-family: var(--font-body);
  font-weight: 500;
  margin-bottom: 28px;
  max-width: 24ch;
}
.about-teaser__big .num { display: block; line-height: .9; }
.about-teaser__headline {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  max-width: 18ch;
}
.about-teaser__copy h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 28px;
  color: #fff;
  text-transform: none;
}
.about-teaser__copy p {
  color: rgba(255,255,255,.78);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  max-width: 50ch;
  margin-bottom: 24px;
}
.about-teaser__copy strong { color: #fff; font-weight: 600; }

/* ============================================================
   Pattern: liefer-region (Leistungen — Statement + Regionen)
   ============================================================ */
.mm-delivery {
  padding-top: clamp(40px, 4.5vw, 72px);
  padding-bottom: clamp(40px, 4.5vw, 72px);
  background: var(--bg, #fff);
}
.mm-delivery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
@media (min-width: 900px) {
  .mm-delivery__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(48px, 6vw, 88px);
  }
}
.mm-delivery__statement {
  position: relative;
  padding-left: clamp(18px, 2.4vw, 26px);
  border-left: 3px solid var(--brand);
}
.mm-delivery__statement .eyebrow {
  margin-bottom: 18px;
}
.mm-delivery__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--fg);
  margin: 0;
  max-width: 24ch;
}
.mm-delivery__headline em {
  font-style: italic;
  color: var(--brand);
  font-weight: 500;
}
.mm-delivery__regions-label {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(0, 0, 0, .55);
  margin-bottom: 14px;
}
.mm-delivery__list {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.5;
  color: var(--brand);
  margin: 0;
}
.mm-delivery__sep {
  color: rgba(0, 0, 0, .28);
  font-style: normal;
  font-weight: 400;
  margin: 0 4px;
}

/* ============================================================
   Pattern: reference-grid (Editorial Cards)
   ============================================================ */
.refs-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: clamp(36px, 5vw, 64px);
  flex-wrap: wrap;
}
.refs-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: none;
}
.refs-head h2 em { color: var(--brand); }
.refs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
@media (max-width: 900px) { .refs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .refs-grid { grid-template-columns: 1fr; } }

.ref-card {
  display: block;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out);
  text-decoration: none;
}
.ref-card:hover { transform: translateY(-3px); }
.ref-card__media {
  aspect-ratio: 4/3;
  background: var(--mm-steel-100);
  overflow: hidden;
  position: relative;
}
.ref-card__media .placeholder { width: 100%; height: 100%; }
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.ref-card:hover .ref-card__media img { transform: scale(1.04); }
.ref-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
}
.ref-card__meta .cat { color: var(--brand); }
.ref-card__title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-top: 8px;
  color: var(--fg);
}
.ref-card__desc { margin-top: 8px; color: var(--fg-muted); font-size: 14.5px; line-height: 1.5; }

/* ============================================================
   Pattern: reference-grid (Referenzen-Seite — größere Cards + Filter)
   ============================================================ */
/* ref-hero — Referenzen: hell, PNG-Bild rechts (seit 2026-05-20, ersetzt
   früheres Bilderrahmen-Mosaik). Layout analog .ab-hero__photo (Über uns). */
.ref-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('../../uploads/mm-redesign/referenzen-hero-bg.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
@media (min-width: 900px) {
  .ref-hero__photo {
    background-position: right 8vw center;
    background-size: auto 71.25%;
    opacity: .72;
  }
}
@media (max-width: 899px) {
  .ref-hero__photo {
    background-position: center center;
    background-size: 110% auto;
    opacity: .20;
  }
}
@media (max-width: 699px) {
  .ref-hero__photo {
    background-position: center 30%;
  }
}
/* M-Logo auf Referenzen-Seite: Standard-Position (right: 4%) — wie bei Leistungen. */

.filter-bar, .mm-ref-filter {
  position: sticky;
  top: var(--nav-h);
  z-index: 20;
  background: rgba(251, 250, 247, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--border);
  padding-block: 18px;
}
.filter-bar__inner, .mm-ref-filter__inner {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.filter-bar__label {
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--fg-muted);
  margin-right: 12px;
}
.filter-bar__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--fg-muted);
}
.filter-bar__count strong { color: var(--brand); font-weight: 600; }

/* Toggle + Panel (Mobile-Collapse) — universell für .filter-bar und .gal-filter */
.filter-bar__toggle {
  display: none;
}
.filter-bar__panel {
  display: contents;
}
@media (max-width: 699px) {
  /* Sticky abschalten, damit der Filter nicht mitscrollt
     ( !important, weil .gal-filter seine sticky-Regel weiter unten in der CSS-Datei setzt) */
  .filter-bar, .gal-filter, .mm-ref-filter {
    position: static !important;
    padding-block: 12px;
  }
  .filter-bar__inner, .gal-filter__inner, .mm-ref-filter__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  /* Toggle-Button sichtbar */
  .filter-bar__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .gal-filter .filter-bar__toggle {
    border-color: rgba(255,255,255,.22);
    color: #fff;
  }
  .filter-bar__toggle-key {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--fg-muted);
  }
  .gal-filter .filter-bar__toggle-key { color: rgba(255,255,255,.55); }
  .filter-bar__toggle-current {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: -0.005em;
  }
  .filter-bar__toggle-chevron {
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--t-base) var(--ease-out);
    opacity: .65;
  }
  .filter-bar__toggle[aria-expanded="true"] .filter-bar__toggle-chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
  }
  /* Panel: default geschlossen.
     Der Adjacent-Selektor greift, wenn das Panel direkt nach dem Toggle steht
     (Legacy-Markup). Bei neuem Markup mit .filter-bar__toggles-Wrapper sitzt
     zwischen Toggle und Panel der Wrapper — dort öffnet das JS via .is-open. */
  .filter-bar__panel {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
  }
  .filter-bar__toggle[aria-expanded="true"] + .filter-bar__panel,
  .filter-bar__panel.is-open {
    display: flex;
  }
  /* Label im Panel klein halten — Toggle übernimmt die Headline */
  .filter-bar__panel .filter-bar__label,
  .filter-bar__panel .filter-label {
    width: 100%;
    margin: 0 0 4px;
  }
  /* Chips kompakter auf Mobile */
  .filter-bar__panel .chip { font-size: 12px; padding: 6px 12px; }
}

.ref-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 56px);
  padding-block: clamp(48px, 6vw, 96px);
}
@media (min-width: 700px)  { .ref-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ref-grid { grid-template-columns: repeat(3, 1fr); } }
.ref-item {
  display: flex; flex-direction: column;
  cursor: pointer; text-decoration: none;
  color: inherit;
  transition: transform var(--t-base) var(--ease-out);
}
.ref-item:hover { transform: translateY(-4px); }
.ref-item__media {
  aspect-ratio: 4/3;
  background: var(--mm-steel-100);
  overflow: hidden; position: relative;
}
.ref-item__media .placeholder { width: 100%; height: 100%; }
.ref-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.ref-item:hover .ref-item__media img { transform: scale(1.04); }
.ref-item__media .tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border-strong);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand);
}
.ref-item__body { padding-top: 18px; }
.ref-item__meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--fg-muted);
  margin-bottom: 10px;
}
.ref-item__meta .id { color: var(--fg-subtle); }
.ref-item__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 8px;
  color: var(--fg);
}
.ref-item__desc {
  color: var(--fg-muted);
  font-size: 14.5px; line-height: 1.5;
  margin: 0;
}
.ref-item__arrow {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--brand);
  display: inline-flex; gap: 8px; align-items: center;
}
.ref-item:hover .ref-item__arrow { gap: 14px; }
.ref-item.is-hidden { display: none; }

/* ============================================================
   Pattern: cta-strip (contact-strip im alten Schema)
   ============================================================ */
.cta-strip {
  background: var(--mm-blue-500);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cta-strip__inner {
  padding-block: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .cta-strip__inner { grid-template-columns: 1.4fr auto; gap: 64px; }
}
.cta-strip h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: none;
  color: #fff;
  margin: 0;
}
.cta-strip h2 em { color: var(--mm-blue-200); font-weight: 500; font-style: italic; }
.cta-strip .lead { color: rgba(255,255,255,.78); margin-top: 18px; max-width: 50ch; }
.cta-strip__actions { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.cta-strip__actions .btn { justify-content: center; min-width: 260px; }

/* Variante: social-cta — Buttons mit Brand-Icon links + 2-Zeilen-Label */
.btn--with-icon {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}
.btn--with-icon .btn__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: block;
}
.btn--with-icon .btn__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.btn--with-icon .btn__network {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 2px;
}
.btn--with-icon .btn__brand {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}
/* Social-CTA: 2-Reihen-Grid → Eyebrow oben (Row 1), H2/Lead + Buttons in Row 2.
   Dadurch sitzen Buttons garantiert auf Höhe der Headline-Oberkante,
   unabhängig von Eyebrow-Größe/Viewport. */
.cta-strip--social .cta-strip__eyebrow { margin-bottom: 24px; }
@media (min-width: 900px) {
  .cta-strip--social .cta-strip__inner {
    grid-template-columns: 1.4fr auto;
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
  .cta-strip--social .cta-strip__eyebrow { grid-row: 1; grid-column: 1; }
  .cta-strip--social .cta-strip__main    { grid-row: 2; grid-column: 1; }
  .cta-strip--social .cta-strip__actions { grid-row: 2; grid-column: 2; margin-top: 0; }
}
/* Social-CTA Buttons: linksbündig im Button (Icon links), Mindestbreite groß genug für 2 Zeilen */
.cta-strip--social .cta-strip__actions .btn {
  justify-content: flex-start;
  min-width: 280px;
  padding-block: 16px;
  padding-inline: 22px;
}
/* Mobile: Actions-Spalte voll ausschöpfen, Buttons full-width */
@media (max-width: 899px) {
  .cta-strip--social .cta-strip__actions { width: 100%; }
  .cta-strip--social .cta-strip__actions .btn { min-width: 0; width: 100%; }
}

/* ============================================================
   Pattern: detail-body / service-detail-intro (Leistung-Detail)
   ============================================================ */
.det-hero {
  position: relative;
  padding-block: clamp(28px, 3.5vw, 56px) 0;
  min-height: clamp(420px, 62vh, 580px);
  overflow: hidden;
}
.det-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: end;
}
@media (min-width: 1000px) { .det-hero__inner { grid-template-columns: 1fr 1fr; } }
.det-hero__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: .16em;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.det-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5.8vw, 84px);
  line-height: .95;
  letter-spacing: -.03em;
  margin-bottom: 28px;
}
.det-hero h1 em { color: var(--brand); }
.det-hero__lead { max-width: 44ch; color: var(--fg-muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
.det-hero__media {
  aspect-ratio: 4/3;
  background: var(--mm-steel-100);
  position: relative;
  overflow: hidden;
}
.det-hero__media .placeholder { width: 100%; height: 100%; padding: 32px; }
.det-hero__media .placeholder svg { width: 64px; height: 64px; }

.det-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
@media (min-width: 900px) { .det-body { grid-template-columns: minmax(0, 1fr) 360px; } }
/* Volle Breite (ohne Eckdaten-Aside) */
.det-body.det-body--full,
.det-body.det-body--full .det-prose { max-width: 920px; }
.det-body.det-body--full { grid-template-columns: 1fr; }
@media (min-width: 900px) { .det-body.det-body--full { grid-template-columns: 1fr; } }
.det-prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: none;
  margin-bottom: 20px;
  margin-top: 0;
  color: var(--fg);
}
.det-prose h2 em { color: var(--brand); font-style: italic; }
/* Zarter blauer Akzent-Strich vor jeder H2 ab der zweiten */
.det-prose h2 + p,
.det-prose h2 + ul { margin-top: 8px; }
.det-prose > h2:not(:first-child) {
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--border);
}
.det-prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--mm-blue-700);
  margin-bottom: 12px;
  margin-top: 32px;
}
.det-prose p { font-size: 16.5px; line-height: 1.65; color: var(--fg); max-width: 64ch; margin: 0 0 16px; }
.det-prose p strong { font-weight: 600; color: var(--mm-blue-700); }
/* Lead-Absatz mit Drop-Cap-Eyecatcher (großes blaues Newsreader-Italic) */
.det-prose .det-prose__lead {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  max-width: 68ch;
  margin-bottom: 24px;
}
.det-prose .det-prose__lead-cap {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brand);
  margin-right: 6px;
  vertical-align: baseline;
}

/* Dezenter Anker-Hint nach dem Lead — Mono-Eyebrow-Look mit Pfeil */
.det-prose .det-prose__anchor {
  margin: 8px 0 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  max-width: none;
}
.det-prose .det-prose__anchor a {
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.det-prose .det-prose__anchor a:hover { color: var(--mm-blue-700); }
.det-prose .det-prose__anchor a span {
  transition: transform 200ms var(--ease-out);
  display: inline-block;
}
.det-prose .det-prose__anchor a:hover span { transform: translateY(2px); }

/* Smooth-Scroll für In-Page-Anker, mit Offset für sticky Header */
html { scroll-behavior: smooth; }
#bilder { scroll-margin-top: clamp(80px, 10vh, 120px); }

.det-prose ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: grid;
  gap: 0;
}
.det-prose ul li {
  padding: 14px 0 14px 36px;
  border-bottom: 1px solid var(--border);
  position: relative;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
}
.det-prose ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 24px;
  width: 20px; height: 2px;
  background: var(--brand);
}
.det-prose ul li strong { font-weight: 600; color: var(--mm-blue-700); }
.det-prose ul li:last-child { border-bottom: 0; }
/* Tabellen sollen in Prosa umgewandelt werden — falls doch noch eine durchrutscht: einfacher Look */
.det-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 15.5px;
}
.det-prose table th,
.det-prose table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.det-prose table th {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mm-blue-700);
  font-weight: 500;
  border-bottom: 2px solid var(--mm-blue-500);
}
.det-prose table strong { color: var(--mm-blue-700); }
/* „Definition-Liste"-Style: **Begriff:** Erklärung (Absatz mit erstem bold) */
.det-prose p:has(strong:first-child) { padding-left: 0; }

/* ============================================================
   Pattern: service-detail-process (4-Schritte-Kacheln)
   ============================================================ */
.process-strip { background: var(--paper, #fff); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.process-strip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
@media (min-width: 800px) { .process-strip__grid { grid-template-columns: repeat(4, 1fr); } }
.process-strip__cell {
  background: var(--bg-alt);
  padding: 32px 24px;
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
}
.process-strip__cell .n {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -.04em;
}
.process-strip__cell h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--fg);
}
.process-strip__cell p { color: var(--fg-muted); font-size: 14.5px; line-height: 1.5; margin: 0; }

/* ============================================================
   Pattern: process-steps (Liste-Variante)
   ============================================================ */
/* Process-Sektion (Leistungen-Übersicht) — Werkstatt-Editorial, kein creme */
.process-section { background: var(--paper, #fff); padding-block: clamp(80px, 9vw, 144px); }
.process__eyebrow {
  text-transform: none !important;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--brand);
  margin-bottom: 20px;
}
.process__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: none;
  color: var(--fg);
  margin-bottom: 0;
}
.process__title em { color: var(--brand); font-style: italic; }
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) { .process { grid-template-columns: minmax(0, 380px) 1fr; gap: clamp(48px, 6vw, 96px); } }
.process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.process__step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding-block: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--border);
  align-items: start;
}
.process__step:last-child { border-bottom: 1px solid var(--border); }
.process__step .n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-top: 6px;
}
.process__step h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -.015em;
  margin-bottom: 8px;
  text-transform: none;
}
.process__step p { color: var(--fg-muted); font-size: 15.5px; line-height: 1.55; margin: 0; max-width: 60ch; }

/* ============================================================
   Pattern: gallery-strip (3 Bilder-Slots für Leistungs-Unterseiten)
   ============================================================ */
.gal-strip-section { padding-block: clamp(48px, 6vw, 96px); }
.gal-strip__head { margin-bottom: clamp(32px, 4vw, 56px); max-width: 800px; }
.gal-strip__head .eyebrow { margin-bottom: 16px; }
.gal-strip__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: none;
  margin: 0;
  color: var(--fg);
}
.gal-strip__title em { color: var(--brand); font-style: italic; }

.mm-gallery-strip {
  margin-block: 0 clamp(32px, 4vw, 56px);
  padding-inline: clamp(16px, 4vw, 48px);
  max-width: 1280px;
  margin-inline: auto;
}
.mm-gallery-strip.has-nested-images {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 700px)  { .mm-gallery-strip.has-nested-images { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1000px) { .mm-gallery-strip.has-nested-images.columns-3 { grid-template-columns: 1fr 1fr 1fr; gap: 24px; } }

/* Cards-Variante: jedes Bild wirkt wie eine Werkstatt-Karte mit dezentem Blau-Akzent */
.mm-gallery-strip.is-cards figure.wp-block-image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--mm-blue-50, #eaf1f9);
  border: 1px solid var(--border);
  border-top: 4px solid var(--mm-blue-500);
  transition: transform 320ms var(--ease-out-soft), box-shadow 320ms var(--ease-out-soft);
}
.mm-gallery-strip.is-cards figure.wp-block-image:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(0, 71, 154, .35);
}
.mm-gallery-strip.is-cards figure.wp-block-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Placeholder, wenn noch keine Bilder hochgeladen sind */
.mm-gallery-strip.has-nested-images:not(:has(figure)) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.mm-gallery-strip.has-nested-images:not(:has(figure))::after {
  content: "Bilder folgen — im CMS hinzufügen";
  display: grid; place-items: center;
  aspect-ratio: 16 / 5;
  background: var(--mm-blue-50, #eaf1f9);
  border: 1px dashed var(--mm-blue-500);
  color: var(--mm-blue-700);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Button-Row unter dem Bilder-Strip */
.gal-strip__cta-section { padding-block: clamp(8px, 1vw, 16px) clamp(64px, 8vw, 120px); }
.gal-strip__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.gal-strip__cta-row .btn { min-width: 220px; justify-content: center; }
@media (max-width: 600px) {
  .gal-strip__cta-row { flex-direction: column; align-items: stretch; }
  .gal-strip__cta-row .btn { min-width: 0; width: 100%; }
}

.gal-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 800px) { .gal-strip { grid-template-columns: repeat(4, 1fr); } }
.gal-strip .media-frame { aspect-ratio: 1/1; }

/* ============================================================
   Pattern: contact-hero (Kontakt — präzises Detail-SVG, neu)
   ============================================================ */
.kt-hero__detail {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 10%, rgba(0,0,0,1) 30%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 10%, rgba(0,0,0,1) 30%);
  border-top: 4px solid var(--mm-blue-500);
}
.kt-hero__detail svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kt-grid path { stroke: rgba(0, 71, 154, .07); stroke-width: 1; fill: none; }
.kt-fill { fill: rgba(0, 71, 154, .18); stroke: var(--mm-blue-700); stroke-width: 1.5; }
.kt-hole { fill: var(--bg); stroke: var(--mm-blue-700); stroke-width: 1; }
.kt-dim { stroke: var(--mm-blue-500); stroke-width: 1; stroke-dasharray: 3 3; fill: none; opacity: .65; }
.kt-circle { fill: none; stroke: var(--mm-blue-500); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .6; }
.kt-weld { fill: none; stroke: var(--mm-blue-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kt-arrow { stroke: var(--mm-blue-700); stroke-width: 1; fill: none; opacity: .55; }
.kt-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  fill: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: .14em;
}
.kt-label--blue { fill: var(--mm-blue-700); font-weight: 500; }
.kt-dim-text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--mm-blue-700);
  font-weight: 500;
}
.kt-hero__detail__overlay {
  position: absolute;
  top: 28px; left: 32px; right: 28px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
  z-index: 2;
  pointer-events: none;
}
.kt-hero__detail__overlay span {
  background: rgba(251, 250, 247, .92);
  padding: 5px 9px;
  border: 1px solid var(--border);
}
@media (max-width: 899px) { .kt-hero__detail { display: none; } }

/* ============================================================
   Pattern: info-cards (Kontakt-Infobar 3-Spalten)
   ============================================================ */
.kt-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
@media (min-width: 700px)  { .kt-info { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kt-info { grid-template-columns: 1fr 1fr 1fr; } }
.kt-info__cell {
  padding: 32px 28px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kt-info__cell .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
}
.kt-info__cell .val {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--fg);
}
.kt-info__cell .val.mono-val {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  letter-spacing: 0;
}
.kt-info__cell .desc { font-size: 14px; color: var(--fg-muted); line-height: 1.5; }
.kt-info__cell a { color: inherit; text-decoration: none; }
.kt-info__cell a:hover { color: var(--brand); }

/* ============================================================
   Pattern: contact-form (Form + Hours-Sidebar)
   ============================================================ */
.kt-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding-block: clamp(64px, 8vw, 128px);
  align-items: start;
}
@media (min-width: 1000px) { .kt-main { grid-template-columns: 1fr 1.2fr; } }
.kt-form-head .eyebrow { margin-bottom: 18px; }
.kt-form-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: none;
  margin-bottom: 16px;
}
.kt-form-head p { color: var(--fg-muted); font-size: 16.5px; line-height: 1.55; max-width: 44ch; }

/* ----- Kontaktformular: blauer Mantel (Werkstatt-Editorial Highlight) ----- */
.kt-form {
  background: var(--mm-blue-500);
  color: #fff;
  padding: clamp(28px, 3vw, 48px);
  border-top: 4px solid var(--mm-blue-200);
}
.kt-form h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mm-blue-200);
  font-weight: 500;
  margin-bottom: 24px;
}
/* Labels über den Feldern weiß/hellblau */
.kt-form .ff-el-input--label label,
.kt-form label {
  color: #fff !important;
}
.kt-form .ff-el-is-required.asterisk-right .ff-el-input--label label:after { color: var(--mm-blue-200) !important; }

/* Fluent Forms-Felder im Blau-Mantel */
.kt-form .ff-el-input--input input,
.kt-form .ff-el-input--input textarea,
.kt-form .ff-el-input--input select,
.kt-form input[type="text"],
.kt-form input[type="email"],
.kt-form input[type="tel"],
.kt-form input[type="url"],
.kt-form input[type="number"],
.kt-form textarea,
.kt-form select {
  background: #fff;
  color: var(--mm-blue-900);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 0;
}
.kt-form input::placeholder,
.kt-form textarea::placeholder { color: rgba(0, 26, 61, .45); }
.kt-form input:focus, .kt-form textarea:focus, .kt-form select:focus {
  outline: 0;
  border-color: var(--mm-blue-200);
  box-shadow: 0 0 0 3px rgba(142, 189, 232, .35);
}

/* Hilfetexte / Beschreibungen */
.kt-form .ff-el-input--content,
.kt-form .ff-el-input--label small,
.kt-form .ff-el-help-message { color: rgba(255, 255, 255, .7) !important; }

/* Fehlermeldungen sichtbar auf Dunkelblau */
.kt-form .text-danger,
.kt-form .error,
.kt-form .ff-el-form-check .error { color: #ffd9d4 !important; }

/* Submit-Button: invers — weiß auf blauem Grund, beim Hover heller */
.kt-form .ff-btn-submit, .kt-form button[type="submit"] {
  background: #fff !important;
  color: var(--mm-blue-700) !important;
  border-radius: 0 !important;
  border: 1px solid #fff !important;
  font-family: var(--font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  text-transform: none !important;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.kt-form .ff-btn-submit:hover, .kt-form button[type="submit"]:hover {
  background: var(--mm-blue-200) !important;
  color: var(--mm-blue-900) !important;
}

/* Datenschutz-Checkbox + Text: weiß lesbar, Checkbox-Akzent in Brand */
.kt-form .ff_tc_label,
.kt-form .ff-el-form-check-label,
.kt-form .ff_tc_label * { color: #fff !important; }
.kt-form .ff_tc_label a,
.kt-form .ff-el-form-check-label a {
  color: var(--mm-blue-200) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.kt-form .ff_tc_label a:hover,
.kt-form .ff-el-form-check-label a:hover { color: #fff !important; }
.kt-form input[type="checkbox"],
.kt-form .ff_tc_checkbox input,
.kt-form .ff-el-form-check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--mm-blue-200);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  margin-top: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.kt-form .ff_tc_label { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.kt-form .ff_tc_checkbox { display: inline-flex; align-items: flex-start; }

/* Generische Form-Styles */
.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.form-field label .req { color: var(--mm-forge-500); }
.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.form-textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-check {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px;
  color: var(--fg-muted);
  line-height: 1.45;
}
.form-check input { margin-top: 4px; accent-color: var(--brand); }

/* ============================================================
   Pattern: opening-hours
   ============================================================ */
.kt-hours, .mm-hours {
  border-top: 1px solid var(--border);
  width: 100%;
  border-collapse: collapse;
}
.kt-hours h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
  font-weight: 500;
  margin: 28px 0 8px;
}
.kt-hours__list { display: grid; }
.kt-hours__row, .mm-hours tr {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding-block: 16px;
  border-top: 1px solid var(--border);
}
.kt-hours__row:first-child, .mm-hours tr:first-child { border-top: 0; }
.mm-hours td { padding: 0; border: 0; }
.kt-hours__day, .mm-hours tr td:first-child {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 23px);
  letter-spacing: -.01em;
  color: var(--fg);
  line-height: 1;
}
.kt-hours__time, .mm-hours tr td:last-child {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--fg-muted);
  text-align: right;
  white-space: nowrap;
  letter-spacing: .02em;
}
.kt-hours__time.closed {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--fg-subtle);
  letter-spacing: 0;
}
.kt-hours__row.is-today .kt-hours__day,
.kt-hours__row.is-today .kt-hours__time,
.mm-hours tr.is-today td { color: var(--brand); }
.kt-hours__row.is-today .kt-hours__day,
.mm-hours tr.is-today td:first-child {
  position: relative;
  padding-left: 18px;
}
.kt-hours__row.is-today .kt-hours__day::before,
.mm-hours tr.is-today td:first-child::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.kt-hours__note {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-subtle);
}

/* Kontakt: Hinweise zum Datenschutz (Bottom-Strip) */
.kt-note {
  background: var(--bg-alt);
  padding: clamp(48px, 6vw, 80px) 0;
}
.kt-note__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 800px) { .kt-note__inner { grid-template-columns: 1fr 2fr; gap: 64px; } }
.kt-note h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand);
  font-weight: 500;
}
.kt-note p { color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; margin: 0; }
.kt-note p + p { margin-top: 12px; }
.kt-note strong { color: var(--fg); font-weight: 600; }

/* ============================================================
   Pattern: about-team / about-timeline (Über uns — blau, M-Logo wie Galerie)
   ============================================================ */
/* M-Logo auf Über-uns-Seite: aus der Standard-Rechts-Position in die Mitte
   schieben (analog Referenzen + Galerie). */
.ab-hero .mm-mmark--default { right: 32%; }

/* Schweisser-Foto im Über-uns-Hero (liegt über M-Mark, unter Container-Text) */
.ab-hero__photo {
  position: absolute;
  inset: 0;
  background-image: url('../../uploads/mm-redesign/about-hero-schweisser.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
@media (min-width: 900px) {
  .ab-hero__photo {
    background-position: right 6vw center;
    background-size: auto 85%;
    opacity: .60;
  }
}
@media (max-width: 899px) {
  .ab-hero__photo {
    background-position: center center;
    background-size: 150% auto;
    opacity: .18;
  }
}
/* Smartphone-Spezifisch: Bildausschnitt eher höher (Helm/Kopf-Bereich) statt
   Bildmitte. Tablet (700–899 px) und Desktop bleiben unverändert. */
@media (max-width: 699px) {
  .ab-hero__photo {
    background-position: center 30%;
  }
}

.ab-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (min-width: 900px) { .ab-intro { grid-template-columns: 360px 1fr; gap: clamp(80px, 8vw, 144px); } }
.ab-intro h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: none;
}
.ab-intro p { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; max-width: 60ch; color: var(--fg); }
.ab-intro strong { font-weight: 600; }

.ab-quote {
  border-left: 4px solid var(--brand);
  padding: 24px 0 24px 32px;
  margin-block: clamp(32px, 4vw, 48px);
  background: linear-gradient(90deg, rgba(0,71,154,.04), transparent 40%);
}
.ab-quote p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  color: var(--fg);
  max-width: 56ch;
  margin: 0;
}

.ab-numbers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-block: 1px solid var(--border);
}
@media (min-width: 600px)  { .ab-numbers { grid-template-columns: 1fr 1fr; } }
/* 2. Spalte (Werkhalle) etwas breiter, damit „1000m²" in einer Zeile passt. */
@media (min-width: 1000px) { .ab-numbers { grid-template-columns: 1fr 1.2fr 1fr 1fr; } }
.ab-num {
  padding: 32px 24px 28px;
  background: var(--bg);
  display: flex; flex-direction: column;
  gap: 8px;
  position: relative;
  min-width: 0; /* erlaubt Grid-Items, schmaler zu werden ohne Overflow */
}
.ab-num .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
}
.ab-num .big {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7vw, 88px);
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--fg);
  white-space: nowrap; /* verhindert Bruch innerhalb von z. B. „1000m²" */
}
.ab-num .big em { color: var(--brand); font-style: normal; }
/* Text-Variante: für statische Marken wie „DIN EN 1090" — kleiner, mit Wrap erlaubt */
.ab-num--text .big {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -.015em;
  line-height: 1.05;
  white-space: normal;
}
.ab-num .desc { font-size: 14.5px; color: var(--fg-muted); line-height: 1.4; }

.ab-timeline {
  background: var(--mm-blue-500);
  color: rgba(255,255,255,.85);
  padding-block: clamp(72px, 9vw, 128px);
}
.ab-timeline h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: none;
  color: #fff;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.ab-timeline__rail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
}
@media (min-width: 900px) {
  .ab-timeline__rail {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .ab-timeline__rail::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 6%; right: 6%;
    height: 1px;
    background: rgba(255,255,255,.15);
  }
}
.ab-event { position: relative; padding-top: 32px; }
@media (min-width: 900px) {
  .ab-event { padding-right: 32px; }
  .ab-event::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 0;
    width: 14px; height: 14px;
    border: 1px solid var(--mm-blue-100);
    background: var(--mm-blue-500);
  }
  .ab-event:first-child::before { background: #fff; }
}
.ab-event .year {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mm-blue-100);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ab-event h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -.015em;
  text-transform: none;
  color: #fff;
  margin-bottom: 8px;
}
.ab-event p {
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* Werkstatt und Technik — editoriales 2-Spalten-Layout: Text links,
   gerahmtes Foto rechts; darunter Verfahren-Chips + Sub-Bloecke. */
.ab-tech-section {
  position: relative;
  background: var(--mm-paper);
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 144px);
}
.ab-tech-section > .container { position: relative; z-index: 2; }

.ab-tech { max-width: none; }

/* Kopf: Lead-Text + gerahmtes Foto nebeneinander */
.ab-tech__top {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 899px) {
  .ab-tech__top { grid-template-columns: 1fr; gap: clamp(28px, 7vw, 44px); }
}
.ab-tech__lead { min-width: 0; }

/* Foto: klar begrenzt, gerahmt, dezenter Schatten — statt Vollflaechen-BG */
.ab-tech__figure {
  margin: 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 71, 154, .12);
  box-shadow:
    0 1px 2px rgba(21, 25, 31, .05),
    0 22px 48px -22px rgba(0, 36, 90, .32);
}
.ab-tech__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(0, 71, 154, .06) 0%, transparent 42%);
  pointer-events: none;
}
.ab-tech__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.ab-tech .eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--mm-blue-700);
}
.ab-tech h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-transform: none;
  margin: 0 0 28px;
  color: var(--fg);
  max-width: 14ch;
}
.ab-tech h2 em { color: var(--brand); font-style: italic; font-weight: 500; }
.ab-tech__intro p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--fg);
  max-width: 54ch;
  margin: 0 0 14px;
}
.ab-tech__intro strong { font-weight: 600; }

/* Verfahren-Block: Mono-Label mit Strichen + Pill-Tags */
.ab-tech__verfahren { margin-top: clamp(32px, 4vw, 48px); }
.ab-tech__verfahren-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.ab-tech__verfahren-label::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--mm-blue-700);
  opacity: .55;
}
.ab-tech__verfahren-label::after {
  content: "";
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: currentColor;
  opacity: .25;
}
.ab-tech ul.ab-tech__tags {
  list-style: none;
  margin: 0;
  margin-inline-start: 0;
  padding: 0;
  padding-inline-start: 0;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: none;
}
@media (max-width: 899px) {
  .ab-tech ul.ab-tech__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* BLAUE Chips: hellblauer Grund, Mueller-blauer Text + Rahmen, dezenter Hover. */
.ab-tech__tags li {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  background: var(--mm-blue-50);
  color: var(--mm-blue-700);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid rgba(0, 71, 154, .16);
  border-radius: 8px;
  transition: background .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.ab-tech__tags li:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(0, 36, 90, .55);
}

/* Zertifizierung + Unser Team: 2-Spalten-Subblock */
.ab-tech__subs {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(0, 71, 154, .15);
}
@media (min-width: 640px) {
  .ab-tech__subs { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.ab-tech__sub h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15;
  letter-spacing: -.015em;
  text-transform: none;
  margin: 0 0 12px;
  color: var(--fg);
  position: relative;
  padding-top: 14px;
}
.ab-tech__sub h3::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 36px;
  height: 2px;
  background: var(--brand);
}
.ab-tech__sub p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
  max-width: 38ch;
}
.ab-tech__sub p strong { color: var(--fg); font-weight: 600; }

/* ============================================================
   Pattern: gallery (Galerie-Hero — Frame-Mosaik mit Bildern, blau)
   ============================================================ */
.gal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 60% 100% at 80% 50%, rgba(255,255,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 20% 80%, rgba(255,255,255,.06) 0%, transparent 60%);
  pointer-events: none;
}
.gal-hero__frames {
  position: absolute;
  top: 0; right: 0;
  width: 52%; height: 100%;
  z-index: 1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 10%, rgba(0,0,0,1) 30%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 10%, rgba(0,0,0,1) 30%);
}
.gal-hero__frames svg { width: 100%; height: 100%; }
.gal-hero__frames .frame { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.gal-hero__frames .frame--active { fill: rgba(255, 255, 255, .18); stroke: #fff; stroke-width: 1.5; }
.gal-hero__frames .frame--has-image { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.gal-hero__frames .frame--active.frame--has-image { stroke: #fff; stroke-width: 2; }
@media (max-width: 899px) { .gal-hero__frames { display: none; } }
/* M-Logo auf Galerie-Seite: aus der Standard-Rechts-Position in die Mitte
   schieben (analog zur Referenzen-Seite), sodass es zwischen Headline und
   Bilderrahmen sichtbar bleibt. */
.gal-hero .mm-mmark--default { right: 32%; }
.gal-hero p.lead {
}

.gal-filter {
  background: var(--mm-blue-700);
  color: #fff;
  position: sticky;
  top: var(--nav-h);
  z-index: 25;
  padding-block: 20px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.gal-filter__inner {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  justify-content: center;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.gal-filter .filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.55);
  margin-right: 12px;
}
.gal-filter .chip {
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  background: transparent;
}
.gal-filter .chip:hover { color: #fff; border-color: #fff; }
.gal-filter .chip.is-active { background: #fff; border-color: #fff; color: var(--mm-blue-700); }
.gal-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.55);
}
.gal-count strong { color: #fff; font-weight: 600; }

.gal-count-line {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
  margin: 0;
  padding-top: clamp(40px, 5vw, 80px);
  padding-bottom: 16px;
}
.gal-count-line strong { color: var(--brand); font-weight: 600; font-size: 14px; }

.gal-grid {
  columns: 1;
  column-gap: 12px;
  padding-block: clamp(40px, 5vw, 80px);
}
.gal-count-line + .gal-grid { padding-top: 0; }
@media (min-width: 640px)  { .gal-grid { columns: 2; } }
@media (min-width: 1000px) { .gal-grid { columns: 3; } }
@media (min-width: 1400px) { .gal-grid { columns: 4; } }
.gal-tile {
  break-inside: avoid;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: var(--mm-steel-100);
  text-decoration: none;
}
.gal-tile .placeholder { width: 100%; padding: 24px; }
.gal-tile .placeholder svg { width: 32px; height: 32px; }
.gal-tile.t1 .placeholder, .gal-tile.t1 > img { aspect-ratio: 1/1; }
.gal-tile.t2 .placeholder, .gal-tile.t2 > img { aspect-ratio: 3/4; }
.gal-tile.t3 .placeholder, .gal-tile.t3 > img { aspect-ratio: 4/3; }
.gal-tile.t4 .placeholder, .gal-tile.t4 > img { aspect-ratio: 4/5; }
.gal-tile.t5 .placeholder, .gal-tile.t5 > img { aspect-ratio: 1/1.2; }
.gal-tile > img { width: 100%; height: auto; object-fit: cover; display: block; }
.gal-tile .tag {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--border-strong);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--brand);
  z-index: 2;
}
.gal-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,71,154,.85) 0%, rgba(0,71,154,0) 60%);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease-out);
  display: flex; align-items: flex-end;
  padding: 20px;
  color: #fff;
}
.gal-tile:hover .gal-tile__overlay { opacity: 1; }
.gal-tile__overlay .ttl {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  transform: translateY(8px);
  transition: transform var(--t-base) var(--ease-out);
}
.gal-tile:hover .gal-tile__overlay .ttl { transform: none; }
.gal-tile.is-hidden { display: none; }

/* ============================================================
   Pattern: reference-detail (Referenz-Einzelseite)
   ============================================================ */
.rd-hero { padding-block: clamp(64px, 8vw, 112px) clamp(40px, 5vw, 64px); }
.rd-hero__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 72px);
}
@media (min-width: 900px) {
  .rd-hero__head { grid-template-columns: 1.5fr 1fr; align-items: end; gap: 96px; }
}
.rd-hero__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: 18px;
}
.rd-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6.5vw, 104px);
  line-height: .96;
  letter-spacing: -.03em;
}
.rd-hero h1 em { color: var(--brand); }
.rd-hero__lead {
  color: var(--fg-muted);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
  max-width: 42ch;
  margin-top: 16px;
}
.rd-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.rd-meta dt { color: var(--fg-muted); margin-bottom: 4px; font-size: 10.5px; }
.rd-meta dd { color: var(--fg); margin: 0; font-weight: 500; }

.rd-feature {
  aspect-ratio: 16/9;
  background: var(--mm-steel-100);
  overflow: hidden;
  position: relative;
  margin-block: clamp(40px, 5vw, 64px);
}
.rd-feature .placeholder { width: 100%; height: 100%; padding: 32px; }
.rd-feature .placeholder svg { width: 64px; height: 64px; }
.rd-feature img { width: 100%; height: 100%; object-fit: cover; }

.rd-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(64px, 8vw, 128px);
}
@media (min-width: 900px) { .rd-body { grid-template-columns: 1fr 1.5fr; } }
.rd-body h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: none;
  margin-bottom: 18px;
}
.rd-body p { font-size: 16.5px; line-height: 1.65; color: var(--fg); max-width: 60ch; }
.rd-body p strong { font-weight: 600; }

.rd-aside { font-family: var(--font-mono); font-size: 13.5px; }
.rd-aside .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.rd-aside dl { margin: 0; border-top: 1px solid var(--border); }
.rd-aside .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 14px;
  border-bottom: 1px solid var(--border);
}
.rd-aside dt { color: var(--fg-muted); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
.rd-aside dd { margin: 0; color: var(--fg); font-weight: 500; }

.rd-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: clamp(32px, 4vw, 56px) 0;
}
@media (min-width: 700px) {
  .rd-gallery {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
  }
  .rd-gallery > :nth-child(1) { grid-row: span 2; }
}
.rd-gallery .media-frame { aspect-ratio: 4/3; }

.more-refs { background: var(--bg-alt); }
.more-refs__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px);
  gap: 24px;
  flex-wrap: wrap;
}
.more-refs__head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
}
.more-refs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 700px) { .more-refs__grid { grid-template-columns: 1fr 1fr 1fr; } }

.rd-nav {
  border-top: 1px solid var(--border);
  padding-block: 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rd-nav a {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: color var(--t-base) var(--ease-out);
}
.rd-nav a:hover { color: var(--brand); }
.rd-nav .lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
}
.rd-nav .ttl {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.015em;
}
.rd-nav a:last-child { text-align: right; }

/* ============================================================
   Kadence-Theme Overrides — entfernt Kadence-Defaults
   ============================================================ */
.kadence-page-title,
.kadence-page-title-wrap,
.entry-header { display: none !important; }

.content-container.site-container,
.entry-content,
.wp-block-post-content,
.entry-content > .wp-block-html { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; }

.content-area, .site-main { padding-block: 0 !important; padding: 0 !important; max-width: 100% !important; }
.wrap.site-main { padding: 0 !important; }
.content-wrap { padding: 0 !important; max-width: 100% !important; }

/* Pattern-Sektionen mit Container haben ihre eigene padding-inline. Außerhalb davon Full-Bleed. */
.entry-content > .wp-block-html { display: block; }
.entry-content > .wp-block-html > section,
.entry-content > .wp-block-html > div.marquee,
.entry-content > .wp-block-html > div.kt-info,
.entry-content > .wp-block-html > div.ab-numbers,
.entry-content > .wp-block-html > div.filter-bar,
.entry-content > .wp-block-html > div.gal-filter {
  width: 100%;
  max-width: 100%;
}

/* Buttons im Gutenberg-Editor (Block-Button) übersteuert nicht unsere .btn */
.wp-block-buttons { margin: 0; }

/* ============================================================
   Site Footer (für Kadence-Footer-Customization)
   ============================================================ */
.site-footer {
  background: var(--mm-blue-700);
  color: rgba(255,255,255,.75);
  padding-top: clamp(60px, 8vw, 96px);
  padding-bottom: 32px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.5);
  margin-bottom: 18px;
}
.site-footer a { transition: color var(--t-fast) var(--ease-out); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14.5px; }
.footer-lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 24px;
  max-width: 14ch;
}
.footer-contact {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
}
.footer-contact a:hover { color: #fff; }
/* Selektor mit .footer-grid Präfix, damit er die spezifischere
   Theme-Regel ".footer-grid ul { margin:0; display:grid; gap:10px }"
   sicher schlägt — sonst werden margin/gap/display überschrieben. */
.footer-grid .footer-socials {
  list-style: none;
  padding: 0;
  /* Lücke zur E-Mail-Zeile entspricht einer Leerzeile (line-height 1.7 × 13.5px font ≈ 23px Textsprung + Puffer) */
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.footer-grid .footer-socials li { margin: 0; padding: 0; }
.footer-grid .footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.8);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-decoration: none;
  transition: color .15s ease;
}
.footer-grid .footer-socials a:hover { color: #fff; }
.footer-grid .footer-socials__icon {
  width: 20px;
  height: 20px;
  display: block;
}
.footer-bar {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  flex-wrap: wrap;
  gap: 18px;
}
.footer-bar nav { display: flex; gap: 24px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Skip-Link (Accessibility)
   ============================================================ */
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
  z-index: 200;
}
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  position: fixed;
  left: 16px; top: 16px;
  width: auto; height: auto;
  padding: 12px 18px;
  background: var(--mm-blue-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   Site-Header — sticky, blur, vergrößert (2026-05-18)
   ============================================================ */
.site-header.mm-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(251, 250, 247, .85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out);
}
.site-header.mm-header.is-scrolled {
  border-bottom-color: rgba(21,25,31,.08);
  background: rgba(251, 250, 247, .94);
  box-shadow: 0 1px 0 rgba(21,25,31,.04), 0 8px 24px -16px rgba(21,25,31,.16);
}
.mm-header__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.mm-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.mm-header__logo img {
  height: clamp(44px, 4vw, 56px);
  width: auto;
  display: block;
  transition: height var(--t-base) var(--ease-out);
}
.site-header.mm-header.is-scrolled .mm-header__logo img { height: clamp(40px, 3.6vw, 50px); }

.mm-header__nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); flex: 1; justify-content: flex-end; margin-right: clamp(16px, 2vw, 28px); }
.mm-header__nav a {
  font-size: 15.5px; font-weight: 500;
  color: var(--mm-steel-700);
  position: relative;
  padding: 8px 2px;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: .005em;
  transition: color var(--t-fast) var(--ease-out);
}
.mm-header__nav a::after {
  content: "";
  position: absolute;
  left: 2px; right: calc(100% - 2px);
  bottom: 2px;
  height: 1.5px;
  background: currentColor;
  transition: right var(--t-base) var(--ease-out);
}
.mm-header__nav a:hover { color: var(--mm-steel-900); }
.mm-header__nav a:hover::after { right: 2px; }
.mm-header__nav a.is-active { color: var(--brand); }
.mm-header__nav a.is-active::after { right: 2px; background: var(--brand); height: 2px; }

/* ============================================================
   Header-Nav: Top-Item mit Submenu (Desktop-Dropdown 2026-05-19)
   ============================================================ */
/* Wrapper für ein Top-Item mit Untermenü — der eigentliche <a> behält
   alle Top-Nav-Styles (Underline-Effekt, is-active), das Caret/Dropdown
   sitzen relativ dazu. Klick auf den Link navigiert immer zur Übersicht;
   Hover/Focus öffnet das Dropdown. */
.mm-header__nav-item.has-submenu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.mm-header__nav-item.has-submenu > .mm-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mm-header__nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  margin-top: 2px;
  color: currentColor;
  opacity: .55;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.mm-header__nav-caret svg { width: 10px; height: 6px; display: block; }
.mm-header__nav-item.has-submenu.is-open > .mm-header__nav-link .mm-header__nav-caret,
.mm-header__nav-item.has-submenu:hover > .mm-header__nav-link .mm-header__nav-caret,
.mm-header__nav-item.has-submenu:focus-within > .mm-header__nav-link .mm-header__nav-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Dropdown-Card — Werkstatt-Editorial: solide, ruhig, layered Shadow,
   Brand-Akzent-Linie links beim Hover (2026-06-02 Refresh). */
.mm-header__submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: -16px;
  min-width: 272px;
  background: #fff;
  border: 1px solid rgba(21, 25, 31, .06);
  border-radius: 8px;
  box-shadow:
    0 1px 2px rgba(21, 25, 31, .04),
    0 10px 24px -6px rgba(21, 25, 31, .12),
    0 24px 60px -20px rgba(21, 25, 31, .18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 180ms cubic-bezier(.2, .7, .1, 1),
    transform 180ms cubic-bezier(.2, .7, .1, 1),
    visibility 0s linear 180ms;
  z-index: 81;
}
/* Unsichtbare Hover-Brücke nach oben (überbrückt die 12 px Lücke zum Link,
   damit der Mauszeiger nicht "ins Leere fällt" beim Wechsel Link → Card). */
.mm-header__submenu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.mm-header__nav-item.has-submenu.is-open > .mm-header__submenu,
.mm-header__nav-item.has-submenu:not(.is-suppressed):hover > .mm-header__submenu,
.mm-header__nav-item.has-submenu:not(.is-suppressed):focus-within > .mm-header__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 180ms cubic-bezier(.2, .7, .1, 1),
    transform 180ms cubic-bezier(.2, .7, .1, 1),
    visibility 0s;
}

.mm-header__submenu-link {
  position: relative;
  display: block;
  padding: 11px 16px 11px 20px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mm-steel-800, var(--mm-steel-700));
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: 0;
  transition:
    background 140ms cubic-bezier(.2, .7, .1, 1),
    color 140ms cubic-bezier(.2, .7, .1, 1);
}
/* Top-Nav-Underline-Effekt aus der globalen .mm-header__nav a-Regel ausschalten */
.mm-header__nav .mm-header__submenu-link::after { content: none; display: none; }
.mm-header__nav .mm-header__submenu-link:hover,
.mm-header__nav .mm-header__submenu-link:focus-visible {
  background: var(--mm-blue-50);
  color: var(--brand);
  outline: none;
}
.mm-header__nav .mm-header__submenu-link.is-active {
  color: var(--brand);
  background: var(--mm-blue-50);
}
/* Erste Position = "Übersicht" → Anker-Item, bündig an die obere Card-Kante,
   mit feinem Sand-Trennstrich zu den eigentlichen Unterseiten. */
.mm-header__submenu-link:first-child {
  font-weight: 600;
  margin: -6px -6px 4px;
  padding: 14px 18px 13px 22px;
  border-radius: 7px 7px 0 0;
  border-bottom: 1px solid rgba(21, 25, 31, .06);
}
.mm-header__nav .mm-header__submenu-link:first-child:hover,
.mm-header__nav .mm-header__submenu-link:first-child:focus-visible {
  background: var(--mm-blue-50);
  color: var(--brand);
}

.mm-header__actions { display: flex; align-items: center; gap: 12px; }
.mm-header__actions .btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
/* Header-CTA: kein Solid-Block, ruhiger Text-Button in Brand-Blau. Hover
   bildet einen Brand-Outline-Rahmen mit transparentem Innenraum, Schrift
   bleibt blau. Kein Lift im Hover. (2026-06-02) */
.mm-header__actions .btn--sm {
  --btn-bg: transparent;
  --btn-fg: var(--mm-blue-500);
  --btn-border: transparent;
  transition:
    background var(--t-base) var(--ease-out),
    border-color var(--t-base) var(--ease-out),
    color var(--t-base) var(--ease-out);
}
.mm-header__actions .btn--sm:hover,
.mm-header__actions .btn--sm:focus-visible {
  background: transparent;
  color: var(--mm-blue-500);
  border-color: var(--mm-blue-500);
  transform: none;
}
.mm-header__actions .btn--sm:hover::after,
.mm-header__actions .btn--sm:focus-visible::after {
  transform: translateX(4px);
}

/* Hamburger-Button — moderner Brand-Style: blau gefüllt, weiße Linien */
.mm-header__toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: var(--brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  padding: 0;
  box-shadow: 0 6px 18px -8px rgba(0, 71, 154, .45), 0 1px 0 rgba(0, 71, 154, .08);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mm-header__toggle:hover {
  background: var(--mm-blue-600);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(0, 71, 154, .55), 0 1px 0 rgba(0, 71, 154, .08);
}
.mm-header__toggle:active { transform: translateY(0); }
.mm-header__toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.mm-header__toggle svg { display: none; }
.mm-header__toggle .hb {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
}
.mm-header__toggle .hb span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.75px;
  background: #fff;
  border-radius: 1px;
  transform-origin: center;
  transition: transform .32s cubic-bezier(.22,.61,.36,1), opacity var(--t-fast) var(--ease-out), top .32s cubic-bezier(.22,.61,.36,1);
}
.mm-header__toggle .hb span:nth-child(1) { top: 0; }
.mm-header__toggle .hb span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.mm-header__toggle .hb span:nth-child(3) { top: calc(100% - 1.75px); }

.mm-header__toggle[aria-expanded="true"] .hb span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.mm-header__toggle[aria-expanded="true"] .hb span:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); }
.mm-header__toggle[aria-expanded="true"] .hb span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }
/* Wenn Drawer offen ist: Hamburger bleibt blau-gefuellt, aber Hover gedaempfter */
.mm-header__toggle[aria-expanded="true"]:hover { background: var(--mm-blue-700); }

/* Backdrop (dunkler Overlay hinter Drawer) */
.mm-header__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.mm-header__backdrop.is-open { opacity: 1; pointer-events: auto; }

/* Mobile-Drawer (Slide-in von rechts) — BRAND BLAU, weiße Schrift */
.mm-header__mobile {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  max-width: 100vw;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, var(--mm-blue-500) 0%, var(--mm-blue-700) 100%);
  color: #fff;
  z-index: 100;
  padding: 0;
  transform: translateX(100%);
  opacity: 1;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.22,.61,.36,1);
  border-left: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: -24px 0 64px -24px rgba(0, 21, 47, .55);
}
.mm-header__mobile.is-open { transform: translateX(0); pointer-events: auto; }

/* M-Mark als dezentes Watermark unten rechts, leicht geneigt, sehr verblasst */
.mm-header__mobile::after {
  content: "";
  position: absolute;
  right: -18%;
  bottom: 18%;
  width: 78%;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  -webkit-mask-image: url('/wp-content/uploads/mm-redesign/m-mark.svg');
  mask-image: url('/wp-content/uploads/mm-redesign/m-mark.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .08;
  transform: rotate(-14deg);
  pointer-events: none;
  z-index: 0;
}

/* Stelle sicher, dass Inhalte über dem Watermark liegen */
.mm-header__mobile-head,
.mm-header__mobile nav,
.mm-header__mobile-foot {
  position: relative;
  z-index: 1;
}

.mm-header__mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,.12);
  min-height: var(--nav-h);
  flex-shrink: 0;
}
.mm-header__mobile-head .ml-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: rgba(255,255,255,.6);
}
.mm-header__mobile-head .ml-label__visual {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.mm-header__mobile-head .ml-label__m {
  display: inline-block;
  width: 17px;
  height: 14px;
  background-color: #fff;
  -webkit-mask-image: url('/wp-content/uploads/mm-redesign/m-mark.svg');
  mask-image: url('/wp-content/uploads/mm-redesign/m-mark.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

/* ============================================================
   Inline M-Logo (ersetzt den Buchstaben "M" in Display-Headlines)
   img-Tag mit Original-Logo-Farben (blau + grau aus dem SVG).
   Größe in em → skaliert automatisch mit der umgebenden Schrift.
   ============================================================ */
.m-mark-inline {
  display: inline-block;
  /* SVG-viewBox 1254x1254, Bergform ~5.8% oben / 9.5% unten / 8% je Seite Padding.
     Bei height 0.95em ist die innere Bergform ~0.80em hoch — leicht größer als
     die Cap-Height der Schrift, ein subtiler Akzent. */
  width: .95em;
  height: .95em;
  background-color: currentColor;
  -webkit-mask-image: url('/wp-content/uploads/mm-redesign/m-mark.svg');
  mask-image: url('/wp-content/uploads/mm-redesign/m-mark.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: baseline;
  position: relative;
  /* +0.12em nach unten: das M-Logo ist stilisiert — die äusseren Beine sitzen
     im SVG bei y≈1079 (von 1254), die mittlere V-Spitze hängt bei y≈1135 nach
     unten. Wir richten die ÄUSSEREN BEINE auf die Text-Baseline aus; die V-Spitze
     hängt dann design-bedingt minimal darunter. */
  top: .12em;
  /* -0.075em links: das ~8% SVG-Padding-links optisch ausgleichen,
     damit das M bündig mit dem linken Textrand startet. */
  margin-left: -.075em;
  /* Minimal an "e" heranziehen */
  margin-right: -.06em;
}
/* Hero-Variante: gleiche Farbe wie der Text drumherum (currentColor übernimmt das) */
.m-mark-inline--hero { background-color: currentColor; }
.mm-header__mobile-close {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mm-header__mobile-close:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }
.mm-header__mobile-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mm-header__mobile-close::before,
.mm-header__mobile-close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 1.75px;
  background: #fff;
  border-radius: 1px;
}
.mm-header__mobile-close::before { transform: rotate(45deg); }
.mm-header__mobile-close::after { transform: rotate(-45deg); }

.mm-header__mobile nav {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  flex: 1 0 auto;
}
.mm-header__mobile nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: clamp(18px, 4.6vw, 21px);
  font-weight: 600;
  letter-spacing: -.005em;
  line-height: 1.2;
  min-height: 60px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: background var(--t-fast) var(--ease-out), padding-left var(--t-base) var(--ease-out);
}
.mm-header__mobile nav a:last-child { border-bottom: 0; }
.mm-header__mobile nav a .label { flex: 1 1 auto; }
.mm-header__mobile nav a .arrow {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 18px;
  color: rgba(255,255,255,.5);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.mm-header__mobile nav a:hover,
.mm-header__mobile nav a:active,
.mm-header__mobile nav a:focus-visible {
  background: rgba(255,255,255,.06);
  padding-left: calc(var(--gutter) + 6px);
  outline: none;
}
.mm-header__mobile nav a:hover .arrow,
.mm-header__mobile nav a:focus-visible .arrow {
  opacity: 1; transform: translateX(0); color: #fff;
}
.mm-header__mobile nav a.is-active { background: rgba(255,255,255,.05); }
.mm-header__mobile nav a.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 36px;
  background: #fff;
  transform: translateY(-50%);
}

/* ============================================================
   Mobile-Drawer: Top-Item mit Submenu (Akkordeon 2026-05-19)
   ============================================================ */
/* Struktur:
   .mm-mobile-item
     .mm-mobile-item__row
       a            ← Wort "Leistungen" (Link zur Übersicht)
       button.toggle ← Chevron rechts (klappt Submenu auf/zu)
     .mm-mobile-item__submenu (hidden)
       a, a, …      ← Übersicht + Unterseiten
   Der Chevron-Button sitzt absolut, der <a> reserviert dafür Padding rechts. */
.mm-mobile-item {
  position: relative;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mm-mobile-item:last-child { border-bottom: 0; }
.mm-mobile-item__row {
  position: relative;
}
/* Top-Link ist ganz normal ein <a> im <nav> → erbt alle .mm-header__mobile nav a-Styles.
   Wir reservieren rechts Platz für den Chevron-Button und blenden die Standard-„→" aus. */
.mm-header__mobile nav .mm-mobile-item__row > a {
  padding-right: calc(56px + 12px);
  border-bottom: 0;
}
.mm-header__mobile nav .mm-mobile-item__row > a .arrow { display: none; }

.mm-mobile-item__toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56px;
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.mm-mobile-item__toggle:hover,
.mm-mobile-item__toggle[aria-expanded="true"] { color: #fff; }
.mm-mobile-item__toggle:hover { background: rgba(255,255,255,.06); }
.mm-mobile-item__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.mm-mobile-item__toggle svg {
  width: 14px;
  height: 8px;
  display: block;
  transition: transform var(--t-base) var(--ease-out);
}
.mm-mobile-item__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.mm-mobile-item__submenu {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,.22);
}
.mm-mobile-item__submenu[hidden] { display: none; }
/* Submenu-Items: kleiner, eingerückt, eigene Styles (override der globalen
   .mm-header__mobile nav a Regel via höherer Spezifität). */
.mm-header__mobile nav .mm-mobile-item__sub {
  display: block;
  min-height: 0;
  padding: 13px var(--gutter) 13px calc(var(--gutter) + 18px);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  position: relative;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), padding-left var(--t-fast) var(--ease-out);
}
.mm-header__mobile nav .mm-mobile-item__sub:last-child { border-bottom: 0; }
/* Erstes Sub-Item = "Übersicht" hervorheben */
.mm-header__mobile nav .mm-mobile-item__sub:first-child {
  font-weight: 600;
  color: #fff;
}
.mm-header__mobile nav .mm-mobile-item__sub:hover,
.mm-header__mobile nav .mm-mobile-item__sub:active,
.mm-header__mobile nav .mm-mobile-item__sub:focus-visible {
  background: rgba(255,255,255,.06);
  color: #fff;
  padding-left: calc(var(--gutter) + 24px);
  outline: none;
}
.mm-header__mobile nav .mm-mobile-item__sub.is-active {
  color: #fff;
  background: rgba(255,255,255,.05);
}
.mm-header__mobile nav .mm-mobile-item__sub.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 24px;
  background: #fff;
  transform: translateY(-50%);
}

/* Bottom-Sektion: CTA + Kontakt — tiefer Blau-Ton */
.mm-header__mobile-foot {
  padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, .15);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}
/* Anfrage-CTA: weißer Solid-Button mit Brand-Blau-Schrift (Inversion für Kontrast) */
.mm-header__mobile-foot .btn {
  width: 100%;
  justify-content: center;
  height: 54px;
  font-size: 15px;
  background: #fff;
  color: var(--mm-blue-700);
  border-color: #fff;
}
.mm-header__mobile-foot .btn:hover {
  background: var(--mm-blue-50);
  color: var(--mm-blue-700);
  border-color: var(--mm-blue-50);
  transform: translateY(-1px);
}
.mm-header__mobile-foot .btn::after { color: var(--mm-blue-700); }

.mm-header__mobile-foot .quick-row {
  display: flex;
  gap: 10px;
}
.mm-header__mobile-foot .quick-row a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 6px;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.mm-header__mobile-foot .quick-row a:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
}
.mm-header__mobile-foot .quick-row a svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.mm-header__mobile-foot .addr {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  text-align: center;
  padding-top: 4px;
}

/* Breakpoints */
@media (max-width: 1080px) {
  .mm-header__nav { display: none; }
  .mm-header__toggle { display: inline-flex; }
  .mm-header__actions .btn--sm { display: none; }
  /* Logo links, Hamburger ganz rechts — Auto-Margin pusht die Actions an die Kante */
  .mm-header__logo { margin-right: auto; }
  .mm-header__actions { margin-left: 0; }
}
@media (min-width: 1081px) {
  .mm-header__mobile,
  .mm-header__backdrop { display: none !important; }
}

/* Wenn Drawer offen: Body kann nicht scrollen (per JS gesetzt) */
body.mm-nav-open { overflow: hidden; }

/* ============================================================
   Number ticker (animated count)
   ============================================================ */
.tick-num {
  font-family: var(--font-display);
  font-feature-settings: "lnum";
  font-weight: 500;
  font-size: clamp(56px, 8vw, 120px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--fg);
}
.section--dark .tick-num { color: #fff; }

/* ============================================================
   Galerie-Lightbox (Bild-Vollansicht auf /galerie/)
   ============================================================
   Bild-Klick öffnet ein Overlay statt zur nackten Bild-URL zu
   navigieren — dadurch bleibt die Scroll-Position der Galerie
   erhalten. Müller-Blauer Zurück-Button schließt; ESC, Klick auf
   Backdrop und Browser-Zurück schließen ebenfalls.
   ============================================================ */
.gal-tile { cursor: zoom-in; }

.mm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 22, 51, .96);
  z-index: 9990;
  display: none;
  flex-direction: column;
  padding: clamp(56px, 8vh, 96px) clamp(16px, 4vw, 48px) clamp(20px, 4vh, 40px);
  overflow: hidden;
  animation: mmLightboxFade var(--t-base) var(--ease-out);
}
.mm-lightbox.is-open { display: flex; }
@keyframes mmLightboxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body.mm-lightbox-open { overflow: hidden; }

.mm-lightbox__back {
  position: absolute;
  top: clamp(12px, 2vh, 20px);
  left: clamp(12px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  background: var(--mm-blue-500);
  color: #fff;
  border: 1px solid var(--mm-blue-500);
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  border-radius: 0;
  transition: background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out);
  z-index: 2;
}
.mm-lightbox__back:hover,
.mm-lightbox__back:focus-visible {
  background: var(--mm-blue-600);
  outline: none;
  transform: translateY(-1px);
}
.mm-lightbox__back-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  transform: translateY(-1px);
}

.mm-lightbox__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px;
}
.mm-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
}

.mm-lightbox__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  color: rgba(255,255,255,.85);
}
.mm-lightbox__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 500;
  color: #fff;
  flex: 1 1 auto;
  min-width: 0;
}
.mm-lightbox__title:empty { display: none; }

.mm-lightbox__visit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.5);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out);
}
.mm-lightbox__visit:hover,
.mm-lightbox__visit:focus-visible {
  border-color: #fff;
  background: rgba(255,255,255,.08);
  outline: none;
}
.mm-lightbox__visit[hidden] { display: none; }

@media (max-width: 699px) {
  .mm-lightbox {
    padding: clamp(72px, 12vh, 96px) 12px 16px;
  }
  .mm-lightbox__back {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
  }
  .mm-lightbox__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============================================================
   Filter-Bar Suche (Live-Filter neben Kategorien-Chips)
   ============================================================
   Layout-Strategie:
   - .filter-bar__toggles wickelt beide Mobile-Toggles (Filter + Lupe).
     Auf Desktop = display:contents (transparent fürs Flex der Bar).
   - .filter-bar__panel--search ist auf Desktop ebenfalls display:contents,
     der Such-Wrap wird damit direktes Flex-Item neben den Chips und
     schiebt sich via margin-left:auto ans Bar-Ende.
   - Auf Mobile (≤699px) klappt jeder Toggle sein eigenes Panel über
     .is-open auf (vom JS gesetzt; siehe wireFilterChips()).
   ============================================================ */

/* Desktop-Default: Toggles ausblenden lassen (greift via .filter-bar__toggle
   weiter oben). Such-Panel als eigene volle Zeile direkt unter den Chips —
   Suchfeld links, "Sonstiges"-Mirror rechts (bündig an Bar-Kante).

   Bündigkeit zur Chip-Reihe darüber:
   Die Chip-Reihe ist via `justify-content: center` zentriert; dadurch sitzen
   erster und letzter sichtbarer Chip nicht am Container-Padding-Edge, sondern
   eingerückt um (Container-Breite – Chip-Reihe-Breite) / 2. Damit die Such-
   Reihe optisch bündig mit dem ersten und letzten Chip der ersten Zeile liegt,
   misst frontend.js (siehe `wireFilterBarSearchAlign`) bei jedem Resize die
   Edges und schreibt sie als `--mm-search-pad-left` / `--mm-search-pad-right`
   auf die Bar. Fallback (0px) ist Bar-Edge-bündig (Stand vor dem Sync). */
.filter-bar__toggles { display: contents; }
.filter-bar__panel--search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-basis: 100%;
  width: 100%;
  padding-top: 0;
  padding-left: var(--mm-search-pad-left, 0px);
  padding-right: var(--mm-search-pad-right, 0px);
}

/* Sonstiges-Mirror im Such-Panel: rechts bündig an Bar-Kante.
   Auf Desktop sichtbar (Original im Filter-Panel ist hier versteckt). */
.filter-bar__panel--search .chip--mirror {
  margin-left: auto;
}

/* Original-Sonstiges im Filter-Panel: auf Desktop ausblenden
   (sichtbar bleibt der Mirror im Such-Panel).
   Auf Mobile umgekehrt: Original sichtbar, Mirror versteckt — damit
   beim Aufklappen des Filter-Panels alle 9 Kategorien beieinander sind. */
@media (min-width: 700px) {
  .filter-bar__panel--filter .chip--extra { display: none; }
}
@media (max-width: 699px) {
  .filter-bar__panel--search .chip--mirror { display: none; }
}

.filter-bar__search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 14px;
  height: 36px;
  width: 100%;
  max-width: 480px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}

/* Auf der Galerie (blaue Bar): dezent transparent mit weißem Akzent */
.gal-filter .filter-bar__search-wrap {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.gal-filter .filter-bar__search-wrap:focus-within {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

/* Auf der Referenzen-Bar (helle Bar): leise gegen Müller-Blau */
.filter-bar .filter-bar__search-wrap {
  background: #fff;
  border-color: var(--border);
  color: var(--fg);
}
.filter-bar .filter-bar__search-wrap:focus-within {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,71,154,.08);
}

.filter-bar__search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .8;
}
/* Spezifität bewusst erhöht (Klasse + Attribut), weil Kadence-Theme
   eine globale input[type="search"]-Regel mit eigenem Hintergrund setzt. */
.filter-bar__search-wrap input[type="search"].filter-bar__search-input {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  width: 100%;
  min-width: 140px;
  padding: 0;
  margin: 0;
  height: auto;
}
.filter-bar__search-wrap input[type="search"].filter-bar__search-input:focus {
  background: transparent;
  box-shadow: none;
  outline: none;
}
.gal-filter .filter-bar__search-wrap input[type="search"].filter-bar__search-input::placeholder { color: rgba(255,255,255,.55); }
.filter-bar .filter-bar__search-wrap input[type="search"].filter-bar__search-input::placeholder { color: var(--fg-muted); }

/* Native Browser-Such-X (Webkit/Edge) ausblenden, weil unser Wrap-Look
   das selbst macht und das X die Höhe verzerrt. */
.filter-bar__search-input::-webkit-search-cancel-button,
.filter-bar__search-input::-webkit-search-decoration { -webkit-appearance: none; }

/* Such-Toggle (Lupe-Button) bleibt auf Desktop unsichtbar — durch
   .filter-bar__toggle { display: none } weiter oben in dieser Datei. */

@media (max-width: 699px) {
  /* Beide Toggles in einer Reihe, Filter dehnt sich, Lupe quadratisch */
  .filter-bar__toggles {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  .filter-bar__toggle--filter {
    flex: 1 1 auto;
  }
  .filter-bar__toggle--search {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }
  .filter-bar__toggle--search .filter-bar__search-icon {
    width: 20px;
    height: 20px;
    opacity: 1;
  }

  /* Such-Panel default versteckt, .is-open öffnet.
     Padding-Variablen aus dem Desktop-Sync hier hart auf 0 zurück, damit
     der Such-Wrap auf Mobile volle Breite einnimmt. */
  .filter-bar__panel--search {
    display: none;
    width: 100%;
    padding-top: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  .filter-bar__panel--search.is-open {
    display: block;
  }

  /* Such-Wrap volle Breite mobil */
  .filter-bar__search-wrap {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    height: 44px;
  }
}