/* ==========================================================================
   MH Immobilien — Redesign-Vorschau V2 („Abendlicht")
   Lädt NUR auf Seiten mit Meta `_mh_v2` (functions.php), NACH mh-blocks.css.
   Scope: body.mh-v2 — Original-Seiten bleiben unberührt.
   Typo: Fraunces (Display, lokal) + Inter (Body). Keine Versalien, keine
   Schatten (Mike-Regeln). Kontraste AA gegen die echten Flächen geprüft.
   ========================================================================== */

/* --- 0. Fraunces lokal (DSGVO) — variable: wght 300–600, opsz 9–144 -------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
}

/* --- 1. Tokens ------------------------------------------------------------- */
body.mh-v2 {
  --v2-paper: #FBF9F3;        /* Seitengrund */
  --v2-sand: #F1EADB;         /* warme Fläche */
  --v2-sand-tief: #E6DCC6;    /* Linien auf Sand */
  --v2-ink: #262014;          /* Text */
  --v2-ink-soft: #57503F;     /* Sekundärtext (7.2:1 auf Paper) */
  --v2-gold: #7E6839;         /* Marke, Linien, Akzent */
  --v2-gold-soft: #A98F58;    /* Linien auf Dunkel */
  --v2-dusk: #232D36;         /* Abendblau — dunkle Bänder */
  --v2-dusk-tief: #1A222A;
  --v2-cream: #F5EFE3;        /* Text auf Dunkel */
  --v2-cream-soft: #CFC6B4;   /* Sekundärtext auf Dunkel (8:1 auf Dusk) */
  --v2-display: 'Fraunces', Georgia, serif;
  --v2-radius-arch: 999px 999px 0 0;   /* Rundbogen (Panoramafenster-Motiv) */
  --v2-radius-arch-soft: 50% 50% 0 0 / 32% 32% 0 0; /* flacher Bogen: schneidet Gesichter nicht an */

  /* Typo-Skala — GENAU sechs Größen (Mike 08/2026: „nicht mehr als fünf,
     maximal sechs"). Jede font-size in dieser Datei MUSS eines dieser
     Tokens nutzen; neue Rohwerte sind tabu. */
  --v2-fs-display: clamp(2.75rem, 5.4vw, 4.9rem);      /* 1 · h1 / Seitentitel   */
  --v2-fs-h2:      clamp(2.1rem, 2.6vw + 1.4rem, 3.75rem); /* 2 · Sektions-h2    */
  --v2-fs-h3:      clamp(1.35rem, 1.1vw + 1rem, 1.7rem);   /* 3 · h3/Karten/Titel */
  --v2-fs-lead:    1.375rem;                            /* 4 · Leads & Zitate     */
  --v2-fs-body:    1.0625rem;                           /* 5 · Fließtext/Buttons  */
  --v2-fs-small:   0.9375rem;                           /* 6 · Kicker/Labels/Meta */
  /* Nur Textseiten (Impressum/Datenschutz/Danke): Kapitel-h2. Dort kommt die
     Display-Stufe nicht vor — es bleiben sechs Größen PRO SEITE. */
  --v2-fs-text-h2: clamp(1.7rem, 1vw + 1.3rem, 2.35rem);

  /* Legacy-Komponenten-Variablen aus mh-blocks.css auf die Skala mappen,
     damit auch Basis-Regeln (Fakten, FAQ, Karten …) die V2-Größen erben. */
  --mh-h-1: var(--v2-fs-display);
  --mh-h-2: var(--v2-fs-h2);
  --mh-h-3: var(--v2-fs-h3);
  --mh-lead: var(--v2-fs-lead);
  --mh-btn-size: var(--v2-fs-body);

  background: var(--v2-paper);
  color: var(--v2-ink);
}

/* --- 2. Typografie-Grundriss ----------------------------------------------- */
body.mh-v2 .mh-sec h1,
body.mh-v2 .mh-sec h2,
body.mh-v2 .mh-text__inhalt h1,
body.mh-v2 .mh-text__inhalt h2 {
  font-family: var(--v2-display);
  font-weight: 380;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--v2-ink);
  text-transform: none;
}
body.mh-v2 .mh-sec h1 { font-size: var(--v2-fs-display); }
body.mh-v2 .mh-sec h2 { font-size: var(--v2-fs-h2); }
body.mh-v2 .mh-heading--lg h1 { font-size: var(--v2-fs-display); }
body.mh-v2 .mh-heading--lg h2 { font-size: var(--v2-fs-h2); }
body.mh-v2 .mh-sec h3 {
  font-family: var(--fontFamily, Inter), Inter, sans-serif;
  font-size: var(--v2-fs-h3);
  font-weight: 600;
  line-height: 1.3;
}
body.mh-v2 .mh-sec { font-size: var(--v2-fs-body); }

/* Eyebrow: Goldstrich VOR der Zeile statt 100px-Linie darunter */
body.mh-v2 .mh-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  color: var(--v2-gold);
  font-size: var(--v2-fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
}
body.mh-v2 .mh-kicker::after {
  content: none;              /* alte Unterstrich-Linie aus */
}
body.mh-v2 .mh-kicker::before {
  content: "";
  flex: none;
  width: 44px;
  height: 1px;
  background: var(--v2-gold);
}
/* Heading-Group: Reihenfolge bleibt (visuell Kicker oben) — Luft neu geregelt */
body.mh-v2 .mh-heading { display: flex; flex-direction: column-reverse; }
body.mh-v2 .mh-heading + * { margin-top: var(--space-l); }

/* Lead: Fraunces kursiv — ruhiger als Gold-Bold */
body.mh-v2 .mh-lead {
  font-family: var(--v2-display);
  font-style: italic;
  font-weight: 420;
  font-size: var(--v2-fs-lead);
  line-height: 1.4;
  color: var(--v2-gold);
}

/* Fließtext: angenehme Zeilenlänge */
body.mh-v2 .mh-text-flow { max-width: 62ch; }
body.mh-v2 .mh-text-flow p { color: var(--v2-ink-soft); }
body.mh-v2 .mh-text-flow strong { color: var(--v2-ink); }

/* --- 3. Flächen-Umbau: alte Beige-Bänder werden ruhig ---------------------- */
body.mh-v2 .mh-section--bg-primary-ultra-light { background-color: var(--v2-paper); }
body.mh-v2 .mh-section--bg-primary-light { background-color: var(--v2-sand); }

/* Buttons: Ink-Outline, Gold-Fill beim Hover (Mechanik der Fläche bleibt) */
body.mh-v2 .mh-sec .mh-btn,
body.mh-v2 .mh-btn.mh-btn {
  background: transparent;
  color: var(--v2-ink);
  border: 1px solid var(--v2-ink);
  border-radius: 0;
  padding: 14px 26px;
  font-weight: 500;
}
body.mh-v2 .mh-sec .mh-btn::after,
body.mh-v2 .mh-btn.mh-btn::after { background: var(--v2-ink); }
body.mh-v2 .mh-sec .mh-btn:hover,
body.mh-v2 .mh-btn.mh-btn:hover,
body.mh-v2 .mh-sec .mh-btn:focus-visible,
body.mh-v2 .mh-btn.mh-btn:focus-visible { color: var(--v2-cream); border-color: var(--v2-ink); }

/* Bilder: kein Radius, ruhige Kanten */
body.mh-v2 .mh-sec img { border-radius: 0; }

/* --- 4. Hero „foto" (Firmen-Startseite): Vollbild-Abendbild ---------------- */
body.mh-v2 .mh-hero--foto {
  position: relative;
  margin-top: 0;                  /* V2-Header ist sticky im Flow — kein 130px-Offset */
  background-size: cover;
  background-position: center;
}
body.mh-v2 .mh-hero--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 34, 42, 0.28) 0%, rgba(26, 34, 42, 0.06) 34%, rgba(26, 34, 42, 0.62) 78%, rgba(26, 34, 42, 0.82) 100%);
}
body.mh-v2 .mh-hero--foto > .brxe-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* Original: flex-end (rechts) — V2: unten links */
  justify-content: flex-end;
  min-height: max(82svh, 600px);
  padding-top: clamp(3rem, 8vh, 6rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}
body.mh-v2 .mh-hero--foto .mh-hero__inhalt {
  width: 100%;
  max-width: 780px;
  margin-right: 0;
  text-align: left;
}
body.mh-v2 .mh-hero--foto h1 {
  color: var(--v2-cream);
  font-size: var(--v2-fs-display);
  text-wrap: balance;
}
body.mh-v2 .mh-hero--foto .mh-hero__h1-sub {
  display: block;
  font-style: italic;
  font-weight: 340;
  font-size: 0.62em;
  color: var(--v2-cream);
}
body.mh-v2 .mh-hero--foto .mh-kicker { color: var(--v2-gold-soft); }
body.mh-v2 .mh-hero--foto .mh-kicker::before { background: var(--v2-gold-soft); }
body.mh-v2 .mh-hero--foto .mh-text-flow p { color: var(--v2-cream-soft); }
body.mh-v2 .mh-hero--foto .mh-text-flow strong { color: var(--v2-cream); }
body.mh-v2 .mh-hero--foto .mh-btn {
  color: var(--v2-cream);
  border-color: var(--v2-cream);
}
body.mh-v2 .mh-hero--foto .mh-btn::after { background: var(--v2-cream); }
body.mh-v2 .mh-hero--foto .mh-btn:hover,
body.mh-v2 .mh-hero--foto .mh-btn:focus-visible { color: var(--v2-ink); }

/* --- 5. Hero „video" (Chalet-Startseite): hohe Bühne + Glas-Sprungnav ------ */
body.mh-v2 .mh-hero--video { position: relative; }
body.mh-v2 .mh-hero--video .mh-hero__video {
  display: block;
  width: 100%;
  height: max(78svh, 560px);
  object-fit: cover;
}
body.mh-v2 .mh-hero--slider .mh-hero__slide-bild {
  height: max(78svh, 560px);      /* gleiche Bühne wie das Video */
  max-height: none;
}
body.mh-v2 .mh-hero--video .mh-hero__navzeile {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;  /* über der Ken-Burns-Compositing-Ebene der Slider-Bilder */
  padding-block: 16px;
  background: rgba(26, 34, 42, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.mh-v2 .mh-hero--video .mh-hero__navzeile .mh-sprungnav { padding-block: 0; }
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) { background: transparent; }
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) .mh-sprungnav__label,
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) a { color: var(--v2-cream); }
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) a:hover { color: var(--v2-gold-soft); }
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) a.is-aktiv { color: var(--v2-gold-soft); }

/* Sprungnav angeheftet: Papier mit Goldlinie */
body.mh-v2 .mh-sprungnav.is-fixed {
  background: var(--v2-paper);
  border-bottom: 1px solid var(--v2-sand-tief);
}

/* Hero „band" (Über uns): Sand-Bühne, Bild als Rundbogen */
body.mh-v2 .mh-hero--band { background: var(--v2-sand); }
body.mh-v2 .mh-hero--band .mh-hero__medien img {
  border-radius: var(--v2-radius-arch);
}

/* --- 6. Intro / Text-Bild-Split: asymmetrisch, Bild atmet ------------------
   Original arbeitet mit Flex + width:50% + %-Paddings an den Kindern —
   fürs V2-Grid werden die Kind-Breiten/Paddings neutralisiert. */
body.mh-v2 .mh-intro__zeile {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
body.mh-v2 .mh-intro__medien,
body.mh-v2 .mh-intro__inhalt,
body.mh-v2 .mh-intro--medien-rechts .mh-intro__medien,
body.mh-v2 .mh-intro--medien-rechts .mh-intro__inhalt {
  width: 100%;
  padding: 0;
}
body.mh-v2 .mh-intro--medien-rechts .mh-intro__zeile { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
body.mh-v2 .mh-intro--medien-rechts .mh-intro__medien { order: 2; }
body.mh-v2 .mh-intro--medien-rechts .mh-intro__inhalt { order: 1; }
body.mh-v2 .mh-intro__medien .mh-fade-slider { width: 100%; }
body.mh-v2 .mh-intro__medien img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* --- 7. Fakten-Band: das dunkle Abend-Band --------------------------------- */
body.mh-v2 .mh-fakten-band,
body.mh-v2 .mh-fakten-band.mh-section--bg-primary-light { background: var(--v2-dusk); }
body.mh-v2 .mh-fakten-band__fakten {
  gap: 0;
  border-block: 1px solid rgba(169, 143, 88, 0.35);
}
body.mh-v2 .mh-fakten-band__fakt {
  padding: clamp(1.4rem, 2.4vw, 2.2rem) clamp(1rem, 1.8vw, 1.8rem);
  border-inline-start: 1px solid rgba(169, 143, 88, 0.35);
}
body.mh-v2 .mh-fakten-band__fakt:first-child { border-inline-start: none; }
body.mh-v2 .mh-fakten-band__fakt p { color: var(--v2-cream); }
body.mh-v2 .mh-fakten-band__fakt .svg-icon { color: var(--v2-gold-soft); }
body.mh-v2 .mh-fakten-band .mh-heading--dark h2 { color: var(--v2-cream); }
body.mh-v2 .mh-fakten-band .mh-kicker { color: var(--v2-gold-soft); }
body.mh-v2 .mh-fakten-band .mh-kicker::before { background: var(--v2-gold-soft); }
body.mh-v2 .mh-fakten-band .mh-kontakt-band__name { color: var(--v2-cream); }
body.mh-v2 .mh-fakten-band .mh-kontakt-band__rolle { color: var(--v2-cream-soft); }
body.mh-v2 .mh-fakten-band .mh-kontaktlinks a { color: var(--v2-cream); }
body.mh-v2 .mh-fakten-band .mh-kontaktlinks a:hover { color: var(--v2-gold-soft); }
/* Porträts RUND statt Bogen (Kundenfeedback 28.08.2026: Bogen wirkte „wie ein
   Grabstein", rund gefällt besser) — Fakten-Band, Werte-Zitat, Kontaktband.
   Bildquelle sind wieder die Original-Porträts 381/399 (550×685). */
body.mh-v2 { --v2-portrait-pos: 50% 10%; }   /* Kopf sitzt im oberen Drittel: Kreis zeigt Gesicht mittig */
body.mh-v2 .mh-fakten-band__portrait {
  align-self: center;                        /* Kreis schwebt mittig, nicht bündig zur Bandkante */
  flex: 0 0 clamp(200px, 24vw, 300px);
  width: clamp(200px, 24vw, 300px);
}
body.mh-v2 .mh-fakten-band__portrait img,
body.mh-v2 .mh-fakten-band .mh-achteck {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: var(--v2-portrait-pos);
  width: 100%;
  margin-bottom: 0;
  filter: none;
}

/* --- 8. Highlight-Grid: stille Karten, Bild führt -------------------------- */
body.mh-v2 .mh-highlight-grid { background: var(--v2-paper); }
body.mh-v2 .mh-karte { background: transparent; padding: 0; }
body.mh-v2 .mh-karte img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 500ms ease;
}
body.mh-v2 .mh-karte:hover img { transform: scale(1.025); }
body.mh-v2 .mh-karte { overflow: hidden; }
body.mh-v2 .mh-karte__titel {
  margin-top: var(--space-s);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--v2-sand-tief);
}
@media (prefers-reduced-motion: reduce) {
  body.mh-v2 .mh-karte img { transition: none; }
  body.mh-v2 .mh-karte:hover img { transform: none; }
}

/* --- 9. Lage: Bild trägt, Panel liegt auf ---------------------------------- */
body.mh-v2 .mh-lage__panel {
  background: var(--v2-sand);
  padding: clamp(1.2rem, 2vw, 2rem);
}
body.mh-v2 .mh-lage__panel::after { display: none; }   /* Winkel-Deko aus */
body.mh-v2 .mh-lage__foto { padding-left: 0; }         /* Live-Versatz neutralisieren */
body.mh-v2 .mh-lage__vorteile .svg-icon { color: var(--v2-gold); }

/* --- 10. Anreise: Tabellen mit Gold-Kopflinie ------------------------------ */
body.mh-v2 .mh-anreise { background: var(--v2-sand); }
body.mh-v2 .mh-anreise__tabelle caption {
  font-family: var(--v2-display);
  font-size: var(--v2-fs-h3);
  font-weight: 450;
  text-align: left;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--v2-gold);
  margin-bottom: 4px;
}
body.mh-v2 .mh-anreise__tabelle th,
body.mh-v2 .mh-anreise__tabelle td {
  border-bottom: 1px solid var(--v2-sand-tief);
  padding-block: 12px;
}
body.mh-v2 .mh-anreise__tabelle td { color: var(--v2-ink-soft); }

/* --- 11. Werte-Zitat: Zitat wird zur Bühne --------------------------------- */
body.mh-v2 .mh-werte-zitat { background: var(--v2-sand); }
body.mh-v2 .mh-werte-zitat__zitat {
  border: none;
  padding: 0;
  background: transparent;
}
body.mh-v2 .mh-werte-zitat__zitat-text {
  font-family: var(--v2-display);
  font-style: italic;
  font-weight: 380;
  font-size: var(--v2-fs-h3);
  line-height: 1.3;
  color: var(--v2-ink);
}
body.mh-v2 .mh-werte-zitat__quelle cite {
  font-style: normal;
  color: var(--v2-ink-soft);
}
body.mh-v2 .mh-werte-zitat__portrait { background: transparent; } /* mh-panel-Kachel wirkte als Farbfleck (Mike, 24.08.2026) */
body.mh-v2 .mh-werte-zitat__portraits { gap: 28px; }
body.mh-v2 .mh-werte-zitat__portraits img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  max-width: 300px;
  object-fit: cover;
  object-position: var(--v2-portrait-pos);
}
body.mh-v2 .mh-werte-zitat__portrait figcaption { color: var(--v2-ink-soft); }

/* --- 12. Kontakt-Band: Personen-Karten, SW → Farbe beim Hover -------------- */
body.mh-v2 .mh-kontakt-band { background: var(--v2-paper); }
body.mh-v2 .mh-kontakt-band.mh-section--bg-primary-light { background: var(--v2-paper); }
body.mh-v2 .mh-kontakt-band__person {
  border: 1px solid var(--v2-sand-tief);
  padding: clamp(1.2rem, 2vw, 2rem);
  background: var(--v2-paper);
  align-items: center;
}
body.mh-v2 .mh-kontakt-band__portrait { width: 11rem; }
/* Immer in Farbe (Mike, 24.08.2026: kein Schwarz-Weiss); rund statt Bogen
   (Kundenfeedback 28.08.2026). */
body.mh-v2 .mh-kontakt-band__portrait img,
body.mh-v2 .mh-kontakt-band__foto {
  border-radius: 50%;
  filter: none;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: var(--v2-portrait-pos);
  width: 100%;
}
body.mh-v2 .mh-kontakt-band__name { font-weight: 600; }
body.mh-v2 .mh-kontakt-band__rolle { color: var(--v2-ink-soft); }
body.mh-v2 .mh-kontakt-topzeile { background: var(--v2-dusk); }
body.mh-v2 .mh-kontakt-topzeile a { color: var(--v2-cream); }

/* --- 13. Projektkarten: editorial, Bild groß ------------------------------- */
body.mh-v2 .mh-projektkarte {
  align-items: center;
  gap: clamp(2rem, 5vw, 5.5rem);
}
body.mh-v2 .mh-projektkarte__medien img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: auto;
  object-fit: cover;
}
body.mh-v2 .mh-projektkarte__inhalt h3 {
  font-family: var(--v2-display);
  font-size: var(--v2-fs-h3);
  font-weight: 400;
  line-height: 1.12;
}
body.mh-v2 .mh-projektkarte__lead {
  font-family: var(--v2-display);
  font-style: italic;
  color: var(--v2-gold);
  font-size: var(--v2-fs-lead);
}
body.mh-v2 .mh-projektkarte__fakten li { border-bottom: 1px solid var(--v2-sand-tief); padding-block: 10px; }
body.mh-v2 .mh-projektkarte__fakten .svg-icon { color: var(--v2-gold); }
/* Bild fuehrt: deutlich groesser (Mike, 24.08.2026); nur Desktop -
   mobil stapelt mh-blocks die Karte auf volle Breite. */
@media (min-width: 992px) {
  body.mh-v2 .mh-projektkarte__medien { width: 58%; padding-right: 4%; }
  body.mh-v2 .mh-projektkarte--medien-rechts .mh-projektkarte__medien { padding-right: 0; padding-left: 4%; }
  body.mh-v2 .mh-projektkarte__inhalt { width: 42%; padding-right: 4%; }
  body.mh-v2 .mh-projektkarte__medien img { aspect-ratio: 4 / 3; }
}

/* --- 14. FAQ, SEO-Text, Zwischentitel, Formular ---------------------------- */
body.mh-v2 .mh-faq { background: var(--v2-paper); }
body.mh-v2 .mh-faq__item {
  border-top: 1px solid var(--v2-sand-tief);
  padding-top: var(--space-s);
}
body.mh-v2 .mh-faq__frage { color: var(--v2-ink); }
body.mh-v2 .mh-faq__antwort p { color: var(--v2-ink-soft); }

body.mh-v2 .mh-zwischentitel {
  background: var(--v2-dusk);
  text-align: left;
}
body.mh-v2 .mh-zwischentitel h2 { color: var(--v2-cream); }
body.mh-v2 .mh-zwischentitel .mh-kicker { color: var(--v2-gold-soft); }
body.mh-v2 .mh-zwischentitel .mh-kicker::before { background: var(--v2-gold-soft); }

body.mh-v2 .mh-formular { background: var(--v2-sand); }
body.mh-v2 .mh-formular__inhalt {
  background: var(--v2-paper);
  border: 1px solid var(--v2-sand-tief);
  padding: clamp(1.6rem, 3.4vw, 3.4rem);
  max-width: 880px;
  margin-inline: auto;
}

/* Video-Sektion: volle Bühne */
body.mh-v2 .mh-video .mh-video__video { display: block; width: 100%; }

/* Bergkette-Deko: im V2 ersatzlos still (ruhiger Ausklang) */
body.mh-v2 .mh-bergkette { display: none; }

/* --- 15. Textseiten (Impressum / Datenschutz / Danke) ---------------------- */
body.mh-v2 .mh-text__inhalt h1 {
  font-size: var(--v2-fs-display);
  color: var(--v2-ink);
}
body.mh-v2 .mh-text__inhalt h2 {
  font-family: var(--v2-display);
  font-weight: 420;
  color: var(--v2-ink);
  margin-top: 1.6em;
}
body.mh-v2 .mh-text__inhalt h3 { margin-top: 1.2em; }
body.mh-v2 .mh-text-flow a { color: var(--v2-gold); }

/* --- 16. Responsiv ---------------------------------------------------------- */
@media (max-width: 1119px) {
  body.mh-v2 .mh-intro__zeile,
  body.mh-v2 .mh-intro--medien-rechts .mh-intro__zeile { grid-template-columns: 1fr; }
  body.mh-v2 .mh-intro--medien-rechts .mh-intro__medien { order: 0; }
  body.mh-v2 .mh-intro--medien-rechts .mh-intro__inhalt { order: 0; }
}
@media (max-width: 991px) {
  body.mh-v2 .mh-fakten-band__fakt { border-inline-start: none; border-block-end: 1px solid rgba(169, 143, 88, 0.35); }
  body.mh-v2 .mh-fakten-band__fakten { border-block: none; }
  body.mh-v2 .mh-hero--foto > .brxe-container { min-height: max(72svh, 520px); }
}

/* --- 17. Feinschliff nach Prüfrunde (24.08.2026) ---------------------------
   Befunde der zwei Prüf-Agenten: Kontrast, Textseiten-Kopfluft, Hero-Kicker,
   Carousel-Overflow mobil, Fakten-Band mobil, Kontakt-Topzeile. */

/* Text-Gold mit AA-Reserve auf Sand UND Papier (5.7:1 / 6.5:1) */
body.mh-v2 { --v2-gold-text: #6B5830; }
body.mh-v2 .mh-kicker,
body.mh-v2 .mh-lead,
body.mh-v2 .mh-projektkarte__lead { color: var(--v2-gold-text); }
/* iconliste__titel: seit 25.08. einheitlich Ink (Abschnitt 20) */

/* Textseiten (mh/text): Bricks-Sticky-Header überlappt — echte Kopfluft aus
   der JS-gemessenen Headerhöhe, gilt für Danke/Impressum/Datenschutz */
body.mh-v2 .mh-text > .brxe-container {
  padding-top: calc(var(--mh-header-h, 96px) + clamp(2.5rem, 6vh, 4.5rem));
}

/* Hero „foto": Kicker in Creme (Gold säuft im hellen Himmel ab),
   Scrim oben etwas kräftiger für die mobile Lage des Inhalts */
body.mh-v2 .mh-hero--foto .mh-kicker { color: var(--v2-cream); }
body.mh-v2 .mh-hero--foto .mh-kicker::before { background: var(--v2-cream); }
body.mh-v2 .mh-hero--foto::before {
  background: linear-gradient(180deg, rgba(26, 34, 42, 0.42) 0%, rgba(26, 34, 42, 0.12) 34%, rgba(26, 34, 42, 0.62) 76%, rgba(26, 34, 42, 0.84) 100%);
}

/* Grundriss-Carousel: Viewport darf die Seite nie verbreitern (mobil war
   scrollWidth 441px statt 390) — Breite erzwingen + Section als Clip-Grenze */
body.mh-v2 .mh-grundrisse { overflow: clip; }
body.mh-v2 .mh-carousel__viewport { width: 100%; max-width: 100%; }
body.mh-v2 .mh-carousel__track { min-width: 0; }

/* Fakten-Band mobil: einspaltig statt enger 2-Spalten-Umbrüche */
@media (max-width: 767px) {
  body.mh-v2 .mh-fakten-band__fakten { grid-template-columns: 1fr; }
}

/* Kontakt-Topzeile: linksbündig statt verwaist rechts */
body.mh-v2 .mh-kontakt-topzeile { text-align: left; }
body.mh-v2 .mh-kontakt-topzeile a { color: var(--v2-cream); }

/* --- 15. Home-Hero: Ken-Burns-Slider (nur Startseite, JS in mh-v2.js) ------ */
body.mh-v2 .mh-hero--foto { position: relative; overflow: hidden; }
body.mh-v2 .mh-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1500ms ease-in-out;
  z-index: 0;
}
body.mh-v2 .mh-hero__slide.ist-aktiv {
  opacity: 1;
  animation: mhV2KenBurns 9s ease-in-out forwards;
}
body.mh-v2 .mh-hero--foto > .brxe-container { position: relative; z-index: 1; }
/* Lesbarkeits-Schleier ueber den Slides: links dunkler, wo der Text steht */
body.mh-v2 .mh-hero--foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(26, 34, 42, 0.5) 0%, rgba(26, 34, 42, 0.15) 45%, rgba(26, 34, 42, 0) 70%);
}
@keyframes mhV2KenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.2%, 0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  body.mh-v2 .mh-hero__slide { animation: none !important; transition: none; }
}

/* --- 16. Zwischentitel-Band + Video: eine Buehne, keine Creme-Luecke ------
   (Mike, 24.08.2026: Band endete abrupt ueber dem randlosen Video) */
body.mh-v2 .mh-zwischentitel {
  margin-bottom: 0;
  display: flow-root; /* BFC: Kind-Margin kollabierte sonst nach aussen = Creme-Luecke */
}
body.mh-v2 .mh-zwischentitel + .mh-video { margin-top: 0; padding-top: 0; background: var(--v2-dusk); }
body.mh-v2 .mh-zwischentitel + .mh-video > .brxe-container { padding-top: 0; }

/* --- 17. Nachjustierungen (Mike, 24.08.2026 abends) ------------------------ */

/* Hero-Text buendig mit dem Sektions-Content (Container hatte padding 0) */
body.mh-v2 .mh-hero--foto > .brxe-container {
  padding-inline: var(--section-padding-x);
}

/* Sektionsluft: 120px wirkten zu gross ("Abstand zu gross", "leerer Raum") */
body.mh-v2 .mh-sec > .brxe-container {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

/* Intro-Split: Text oben am Bild ausrichten statt mittig - nimmt die grosse
   Leere ueber dem Text bei hohen Bildern raus */
body.mh-v2 .mh-intro__zeile {
  align-items: start;
}
body.mh-v2 .mh-intro__zeile > * { align-self: start; }

/* Prozent-Margins aus dem Original (Live-Paritaet) reissen in der V2-Welt
   Loecher - die Abstaende kommen hier aus dem Sektions-Padding (Mike, 24.08.) */
body.mh-v2 .mh-werte-zitat { margin-top: 0; }
body.mh-v2 .mh-fakten-band { margin-bottom: 0; }
body.mh-v2 .mh-bergkette { margin-bottom: 0; }

/* Header + Footer buendig zum Content: ab 1700px zentriert sich der Inhalt
   (max-width), Header/Footer liefen full-width weiter (Mike, 24.08.2026) */
body.mh-v2 .site-header-v2__inner,
body.mh-v2 .site-footer-v2__inner,
body.mh-v2 .site-footer-v2__unten {
  max-width: calc(var(--content-width) - 2 * var(--section-padding-x));
  margin-inline: auto;
}

/* --- 18. Mobiles Offcanvas: Abendlicht statt Creme-Leere (Mike, 24.08.) ---- */
body.mh-v2 .mobile-offcanvas-v2 .x-offcanvas_inner {
  background: var(--v2-dusk);
  width: min(430px, 100%);
  padding: 28px 30px 40px;
}
body.mh-v2 .mobile-offcanvas-v2 .site-header-v2__logo {
  filter: brightness(0) invert(1);  /* weisses Logo auf Abendblau */
  width: 130px;
  height: auto;
}
body.mh-v2 .mobile-offcanvas-v2 .x-hamburger-inner,
body.mh-v2 .mobile-offcanvas-v2 .x-hamburger-inner::before,
body.mh-v2 .mobile-offcanvas-v2 .x-hamburger-inner::after {
  background-color: var(--v2-cream);
}
body.mh-v2 .mobile-offcanvas-v2__nav { margin-top: 44px; }
body.mh-v2 .mobile-offcanvas-v2__nav .bricks-nav-menu,
body.mh-v2 .mobile-offcanvas-v2__nav .bricks-nav-menu li { display: block; margin: 0; }
body.mh-v2 .mobile-offcanvas-v2__nav .bricks-nav-menu a {
  display: block;
  font-family: var(--v2-display);
  font-size: var(--v2-fs-h3);
  font-weight: 500;
  line-height: 1.2;
  color: var(--v2-cream);
  text-decoration: none;
  padding-block: 18px;
  border-bottom: 1px solid rgba(169, 143, 88, 0.3);
}
body.mh-v2 .mobile-offcanvas-v2__nav .bricks-nav-menu a:hover,
body.mh-v2 .mobile-offcanvas-v2__nav .bricks-nav-menu a:focus {
  color: var(--v2-gold-soft);
}
body.mh-v2 .mobile-offcanvas-v2__cta {
  margin-top: 36px;
  width: 100%;
  background: var(--v2-gold);
  border: 1.5px solid var(--v2-gold);
  border-radius: 2px;
  color: var(--v2-dusk-tief);
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  padding: 15px 20px;
}
body.mh-v2 .mobile-offcanvas-v2__cta:hover,
body.mh-v2 .mobile-offcanvas-v2__cta:focus {
  background: var(--v2-gold-soft);
  border-color: var(--v2-gold-soft);
  color: var(--v2-dusk-tief);
}

/* --- 19. Zwischentitel-Band: symmetrische Luft (Kind-Margin raus) ---------- */
body.mh-v2 .mh-zwischentitel > .brxe-container { padding-block: clamp(3rem, 5vw, 4.25rem); }
body.mh-v2 .mh-zwischentitel .mh-heading,
body.mh-v2 .mh-zwischentitel h2 { margin-bottom: 0; }

/* --- 20. Ueberschriften-Harmonie (Mike, 25.08.2026: "schoen gleichmaessig") -
   System: Fraunces-Ueberschriften in Ink (hell) bzw. Cream (dunkel).
   Gold gehoert den Kickern, Linien und Akzenten - nicht den Ueberschriften.
   Item-Titel (Iconlisten, Karten, FAQ) einheitlich Ink 600. */

/* Eine H2-Skala fuer alle Sektionen (vorher 49px/60px gemischt) */
body.mh-v2 .mh-sec h2 {
  font-size: var(--v2-fs-h2);
}

/* Projektkarten-Titel: einzige grosse Gold-Ueberschrift -> Ink wie alle */
body.mh-v2 .mh-projektkarte__inhalt h3 {
  color: var(--v2-ink);
}

/* Item-Titel einheitlich (waren Gold #7E6839 / Text-Gold #6B5830 / Ink gemischt) */
body.mh-v2 .mh-iconliste__titel,
body.mh-v2 .mh-karte__titel,
body.mh-v2 .mh-faq__frage {
  color: var(--v2-ink);
  font-weight: 600;
}

/* Textseiten-H1: siehe Sektion 23 (eine Stufe unter Display). */

/* --- 21. Sprungmarken (TOC) im Abendlicht (Mike, 25.08.2026) --------------- */
body.mh-v2 .mh-sprungnav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
}
body.mh-v2 .mh-sprungnav__label {
  color: var(--v2-ink-soft);
  font-size: var(--v2-fs-small);
}
body.mh-v2 .mh-sprungnav__link {
  color: var(--v2-gold-text);
  font-weight: 500;
  font-size: var(--v2-fs-small);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--v2-sand-tief);
  transition: color 250ms ease, border-color 250ms ease;
}
body.mh-v2 .mh-sprungnav__link:hover,
body.mh-v2 .mh-sprungnav__link:focus,
body.mh-v2 .mh-sprungnav__link.is-aktiv {
  color: var(--v2-ink);
  border-bottom-color: var(--v2-gold);
}
body.mh-v2 .mh-sprungnav__sep { display: none; } /* Trennstriche raus - Luft statt | */

/* Auf dem Video (Chalets): helle Toene auf dunklem Streifen */
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) .mh-sprungnav__label { color: var(--v2-cream-soft); }
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) .mh-sprungnav__link {
  color: var(--v2-cream);
  border-bottom-color: rgba(245, 239, 227, 0.25);
}
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) .mh-sprungnav__link:hover,
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) .mh-sprungnav__link:focus,
body.mh-v2 .mh-hero--video .mh-sprungnav:not(.is-fixed) .mh-sprungnav__link.is-aktiv {
  color: var(--v2-gold-soft);
  border-bottom-color: var(--v2-gold-soft);
}

/* --- 22. Skala-Nachzügler: Basisdatei-Rohwerte in die Sechser-Skala holen -- */
body.mh-v2 .mh-wohnungen__tabelle thead th { font-size: var(--v2-fs-h3); }
body.mh-v2 .mh-kontakt-band__rolle,
body.mh-v2 .mh-werte-zitat__quelle,
body.mh-v2 .mh-werte-zitat__portrait figcaption { font-size: var(--v2-fs-small); }
body.mh-v2 .mh-formular .fluentform form .ff-btn-submit:not(.ff_btn_no_style) { font-size: var(--v2-fs-body); }
body.mh-v2 .mh-carousel__slide figcaption { font-size: var(--v2-fs-small); }
body.mh-v2 .mh-werte-zitat__quelle cite { font-size: inherit; }
body.mh-v2 .mh-hero--band .mh-hero__inhalt .mh-lead { font-size: var(--v2-fs-lead); }
body.mh-v2 .mh-hero--bild .mh-hero__inhalt .mh-lead { font-size: var(--v2-fs-lead); }
body.mh-v2 .mh-sprungnav { font-size: var(--v2-fs-small); }
@media (max-width: 767px) {
  body.mh-v2 .mh-wohnungen__tabelle thead th { font-size: var(--v2-fs-h3); }
  body.mh-v2 .mh-wohnungen__tabelle tbody th,
  body.mh-v2 .mh-wohnungen__tabelle tbody td { font-size: var(--v2-fs-small); }
}

/* --- 23. Textseiten-Feinschliff (Impressum / Datenschutz / Danke) ----------
   Ruhige, zentrierte Leseachse; Kapitel eine Stufe kleiner als die
   Sektions-h2 der Marketingseiten. Steht bewusst am Dateiende, damit es die
   generischen .mh-sec-Skalen aus Sektion 2 und 20 übertrumpft. */
body.mh-v2 .mh-text > .brxe-container {
  /* fixer Header: h1 nicht anschneiden — gleiche Kopfluft wie die Heros */
  padding-top: max(var(--mh-block-space), var(--mh-hero-kopfluft));
}
body.mh-v2 .mh-text__inhalt {
  max-width: 46rem;                /* ≈ 75 Zeichen — schmale Spalte liest sich besser */
}
body.mh-v2 .mh-text .mh-text-flow { max-width: none; } /* eine gemeinsame Spalte */
body.mh-v2 .mh-sec.mh-text h1,
body.mh-v2 .mh-text__inhalt h1 {
  font-size: var(--v2-fs-h2);      /* Seitentitel: eine Stufe unter Display */
  margin: 0 0 var(--space-l, 2.5rem);
}
body.mh-v2 .mh-sec.mh-text h2,
body.mh-v2 .mh-text__inhalt h2 {
  font-size: var(--v2-fs-text-h2);
  font-weight: 420;
  margin: 3rem 0 0.8rem;
}
body.mh-v2 .mh-text__inhalt h3 {
  color: var(--v2-ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--v2-fs-h3);
  font-weight: 600;
  margin: 2.4rem 0 0.6rem;
}
body.mh-v2 .mh-text__inhalt h4 {
  color: var(--v2-ink);
  font-size: var(--v2-fs-lead);
  font-weight: 600;
  margin: 1.6rem 0 0.4rem;
}
/* Direkt aufeinanderfolgende Überschriften nicht doppelt spreizen */
body.mh-v2 .mh-text__inhalt h2 + h3,
body.mh-v2 .mh-text__inhalt h3 + h4 { margin-top: 0.5rem; }

/* --- 24. Fakten-Band: alleinstehende letzte Kachel (z. B. 7. Kachel „Preis ab …",
   Kundenfeedback 28.08.2026) spannt über die volle Rasterbreite, statt allein
   links in der Ecke zu stehen. Greift nur im 3-Spalten-Raster (Desktop). */
@media (min-width: 768px) {
  body.mh-v2 .mh-fakten-band__fakt:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    border-inline-start: none;
    border-block-start: 1px solid rgba(169, 143, 88, 0.35);
  }
}

/* --- 25. Prüfrunde 02.09.2026 (Prüf-Agent B): vorbestehende Layoutmängel ----
   Alles V2-Scope, Basis-CSS unangetastet. */

/* M1: Vorteile-Iconliste (2 × 1fr = min-content-Falle: lange Einzelwörter in
   h3-Größe) ragte bei 1200–1500px über den Viewport → H-Scroll auf Seensucht. */
body.mh-v2 .mh-iconliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.mh-v2 .mh-iconliste--einspaltig { grid-template-columns: minmax(0, 1fr); }
body.mh-v2 .mh-iconliste__inhalt { min-width: 0; }
body.mh-v2 .mh-iconliste__titel { overflow-wrap: anywhere; hyphens: manual; } /* Trennung nur an weichen Trennstrichen (U+00AD) im Inhalt */
@media (max-width: 767px) {
  body.mh-v2 .mh-iconliste { grid-template-columns: minmax(0, 1fr); }
}

/* M1b: Vorteile-Split 42/58 statt 50/50 — die Iconliste (2 Spalten, h3 27px)
   braucht die Breite, der Fließtext links nicht. Lange Einzelwörter tragen
   zusätzlich weiche Trennstriche (U+00AD) im Inhalt. */
@media (min-width: 1120px) {
  body.mh-v2 .mh-vorteile__inhalt { width: 42%; padding-right: 6%; }
  body.mh-v2 .mh-vorteile__zeile .mh-iconliste { width: 58%; }
}

/* M2: Wohnungstabellen (Dornbirn) waren bei 390px breiter als die Spalte und
   dehnten den Layout-Viewport auf 436px (Burger angeschnitten, Seite schiebbar).
   Tabelle bleibt Tabelle (Semantik), der Spalten-Wrapper scrollt bei Bedarf. */
body.mh-v2 .mh-wohnungen__zeile,
body.mh-v2 .mh-wohnungen__tabellen { min-width: 0; max-width: 100%; }
body.mh-v2 .mh-wohnungen__tabellen { overflow-x: auto; }
body.mh-v2 .mh-wohnungen { overflow: clip; }
@media (max-width: 479px) {
  body.mh-v2 .mh-wohnungen__tabelle tbody th,
  body.mh-v2 .mh-wohnungen__tabelle tbody td,
  body.mh-v2 .mh-wohnungen__tabelle thead th { padding-inline: 4px; }
  body.mh-v2 .mh-wohnungen__tabelle thead th { font-size: var(--v2-fs-body); }
  body.mh-v2 .mh-wohnungen__tabelle tbody th,
  body.mh-v2 .mh-wohnungen__tabelle tbody td { font-size: var(--v2-fs-small); }
}

/* M3/K1: Kontaktband — E-Mail brach bei 1024px am Bindestrich um
   („hm@mh-“ / „immobilien.immo“), Karten ungleich hoch. */
body.mh-v2 .mh-kontakt-band__personen { align-items: stretch; }
body.mh-v2 .mh-kontaktlinks a { white-space: nowrap; }
@media (max-width: 1119px) {
  body.mh-v2 .mh-kontakt-band__portrait { width: 9rem; }
}

/* K2: Fakten-Band — Spalten gleich breit (minmax(0,1fr) statt 1fr), keine
   verwaiste Trennlinie am Zeilenanfang der 2. Reihe. */
body.mh-v2 .mh-fakten-band__fakten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.mh-v2 .mh-fakten-band__fakt { min-width: 0; }
body.mh-v2 .mh-fakten-band__fakt p { overflow-wrap: anywhere; hyphens: manual; font-size: var(--v2-fs-small); }
body.mh-v2 .mh-fakten-band__fakt { padding-inline: clamp(0.5rem, 0.9vw, 1rem); } /* schmaler: lange Wörter passen ohne Trennung */
body.mh-v2 .mh-fakten-band__fakt:nth-child(3n + 1) { border-inline-start: none; }
@media (max-width: 767px) {
  body.mh-v2 .mh-fakten-band__fakten { grid-template-columns: minmax(0, 1fr); padding-top: 20px; }
  /* K3: mobil sitzt der Text links — Porträt-Kreis auf dieselbe Achse */
  body.mh-v2 .mh-fakten-band__portrait { align-self: flex-start; }
}