/* ============================================================================
   PROJECT — May & Große Bau- und Immobilienservice
   Richtung „PLANWERK": dunkles Zeichenbrett (Navy #001A3D), Gold #C69351 als
   einziger Akzent (Haarlinien, Maßpfeile, der eine Button), Konstruktionsraster,
   Maßlinien mit Mono-Beschriftung, Plankopf-Header in Planpapier-Weiß.
   Nur Token-Overrides + eigene Komponenten — geteilte Dateien bleiben unberührt.
   ========================================================================== */

/* --- Token-Override: Navy-Neutrale statt Grau (auf premium-dark aufgesetzt) --- */
:root[data-preset="premium-dark"] {
  --bg: #001A3D;
  --surface: #04224B;
  --surface-2: #0A2A52;
  --surface-3: #14335C;
  --fg: #EAF0F7;
  --fg-muted: #B9C6D8;
  --fg-subtle: #8CA0B9;
  --border: rgba(234, 240, 247, 0.14);
  --border-strong: rgba(234, 240, 247, 0.26);
  --accent-600: #D2A768;          /* Gold-Text auf Navy: >= 7:1 */
  --accent-700: #B07F41;
  --accent-100: #2A2313;
  --accent-soft: rgba(198, 147, 81, 0.14);
  --accent-ring: rgba(198, 147, 81, 0.32);
  --accent-2: #C69351;
  --surface-soft: #04224B;
  /* Technische, kantige Geometrie statt weicher App-Radien */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-image: 8px;
  --btn-radius: 4px;
  /* Big Shoulders ist condensed — kein negatives Tracking */
  --display-tracking: 0.015em;
  --leading-tight: 1.04;
  /* Planpapier für Plankopf (Header), Fußleiste und helle Kontrastmomente */
  --plan-paper: #EFF3F9;
  --plan-paper-2: #E2E9F2;
  --plan-ink: #001A3D;
  --plan-ink-muted: #33507A;
  --plan-line: rgba(234, 240, 247, 0.05);
  --gold-hairline: rgba(198, 147, 81, 0.42);
  /* Warnton heller als das globale #b3791b — das erreicht auf Navy nur 4.2:1 */
  --warning: #E2A85C;
  /* Goldton für Text auf Planpapier: #C69351 selbst schafft dort nur ~2:1 */
  --plan-gold-ink: #8A5F27;
}

/* --- Konstruktionsraster: feine Planlinien auf dem Zeichenbrett --- */
body {
  background-image:
    linear-gradient(var(--plan-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--plan-line) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* --- Typo-Haltung: Versal-Display wie Plankopf-Beschriftung --- */
h1, h2 {
  text-transform: uppercase;
  overflow-wrap: normal;
  text-wrap: balance;
}
h1 { font-size: var(--step-6); }

/* Mobile: lange deutsche Komposita („Ansprechpartner", „Immobilienservice")
   dürfen die Versal-Zeile NIE über den Viewport schieben — auf schmalen
   Breiten mit Trennstrich umbrechen statt horizontal zu scrollen. */
@media (max-width: 480px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* Mono-Labels (Positions-/Gewerke-Kürzel, Maßangaben) */
.mg-mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-600);
}

/* Eyebrow: Planbeschriftung statt Balken */
.eyebrow { color: var(--accent-600); }
.eyebrow::before { background: var(--accent-2); }

/* ============================================================================
   PLANKOPF — heller Header (das Logo trägt Navy-Schrift, es braucht Papier)
   ========================================================================== */
.site-header {
  /* Plankopf mit Millimeterraster: das Zeichenbrett-Motiv der Seite zieht in
     die Navigationsleiste — der Header gehört erkennbar zu diesem Planwerk */
  background:
    linear-gradient(rgba(0, 26, 61, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(0, 26, 61, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    color-mix(in srgb, var(--plan-paper) 94%, transparent);
  border-bottom: 1px solid var(--gold-hairline);
  color: var(--plan-ink);
}
.site-header .nav__link { color: var(--plan-ink-muted); }
.site-header .nav__link:hover,
.site-header .nav__link[aria-current="page"] { color: var(--plan-ink); }
.site-header .nav-toggle span { background: var(--plan-ink); }
.brand__logo { height: 2.5rem; max-width: 15rem; }

/* Mobile-Menü klappt unter dem hellen Plankopf auf -> ebenfalls Papier
   (Breakpoint 820px = das Classic-Collapse-Menü aus base.css) */
@media (max-width: 820px) {
  .site-header .nav {
    background: var(--plan-paper);
    border-color: var(--gold-hairline);
  }
}

/* Sieben Menüpunkte brauchen Platz. Die Nav darf NIE umbrechen oder
   überlaufen — deshalb klappt das Menü früher ein: bis 1080px gilt das
   Burger-Menü (gleiches Muster wie base.css unter 820px, auf Planpapier). */
@media (min-width: 821px) and (max-width: 1080px) {
  .header-actions .btn { display: none; }
  .nav-toggle { display: block; }
  .site-header .nav {
    position: fixed; inset: 4.5rem 0 auto 0; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--plan-paper); border-bottom: 1px solid var(--gold-hairline);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .site-header .nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .site-header .nav__link {
    padding: 0.9rem 0; border-bottom: 1px solid rgba(0, 26, 61, 0.14);
    font-size: var(--step-1);
  }
  /* base.css blendet den Kontakt-Nav-Link ab 821px aus (Desktop-CTA) — im
     eingeklappten Menü gibt es keinen CTA, der Link muss zurück. */
  .site-header .nav .nav__link--kontakt { display: block; }
}

/* Schmale Desktopbreiten: Nav und Logo verdichten, eine Zeile, kein Umbruch. */
@media (min-width: 1081px) and (max-width: 1260px) {
  .brand__logo { height: 2rem; max-width: 10rem; }
  .site-header .nav { gap: 0.65rem; }
  .site-header .nav__link { font-size: 0.9rem; }
  .site-header .header-actions .btn { padding-inline: 0.85rem; }
}

/* ============================================================================
   PLAN-LEGENDE — heller Footer, rahmt die Seite wie der Planrand
   ========================================================================== */
.site-footer {
  background: var(--plan-paper);
  color: var(--plan-ink);
  border-top: 1px solid var(--gold-hairline);
}
.site-footer a { color: var(--plan-ink-muted); }
.site-footer a:hover { color: var(--plan-ink); }
.site-footer .muted, .site-footer .footer-bottom { color: var(--plan-ink-muted); }
.site-footer .footer-col h2 { color: var(--plan-ink-muted); }
.site-footer .footer-bottom { border-top: 1px solid rgba(0, 26, 61, 0.14); }
.site-footer .footer-credit { color: var(--plan-ink-muted); }

/* ============================================================================
   MASSLINIE — ruhige Fassung: kurzer Gold-Strich + Mono-Label. Die frühere
   Pfeil-Variante (Endmarken + Pfeilspitzen) wurde bewusst entfernt.
   ========================================================================== */
.mgline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--accent-2);
}
.mgline--left { justify-content: flex-start; }
.mgline__strich {
  width: 3.25rem;
  height: 2px;
  background: currentColor;
  flex: none;
}
.mgline__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--fg-subtle);
}

/* ============================================================================
   HERO — Vollbild-Foto als Bühne, Headline als These
   ========================================================================== */
.mg-hero {
  position: relative;
  /* Volle Bildschirmhöhe: Header (4.5rem, sticky im Fluss) + Hero füllen
     zusammen exakt den Viewport. svh berücksichtigt mobile Browserleisten;
     vh davor ist der Fallback. Wächst nur, wenn der Inhalt nicht passt. */
  min-height: calc(100vh - 4.5rem);
  min-height: calc(100svh - 4.5rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.mg-hero__bg, .mg-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.mg-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 15, 38, 0.46) 0%, rgba(0, 15, 38, 0.24) 38%, rgba(0, 26, 61, 0.88) 78%, #001A3D 100%),
    linear-gradient(78deg, rgba(0, 15, 38, 0.6) 0%, transparent 66%);
}
/* Mobil liegt die Headline über der hellen Fassade — Scrim kräftiger,
   damit auch die Gold-Zeile sicher lesbar bleibt. */
@media (max-width: 700px) {
  .mg-hero__scrim {
    background:
      linear-gradient(180deg, rgba(0, 15, 38, 0.6) 0%, rgba(0, 15, 38, 0.45) 38%, rgba(0, 26, 61, 0.92) 78%, #001A3D 100%),
      linear-gradient(78deg, rgba(0, 15, 38, 0.6) 0%, transparent 70%);
  }
}
.mg-hero__inner {
  /* Kompakt genug, dass Header + Hero auf gängigen Bildschirmhöhen exakt
     einen Viewport füllen (min-height wächst nur als Notausgang). */
  padding-block: clamp(var(--space-md), 5vh, var(--space-xl)) clamp(var(--space-sm), 3.5vh, var(--space-lg));
  display: grid;
  gap: clamp(0.65rem, 1.6vh, var(--space-md));
}
.mg-hero__kicker {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent-600);
}
.mg-hero__title {
  /* Display-Stil explizit setzen: die rotierenden Slide-Titel sind <p>-Elemente
     (nur der erste Slide trägt die H1) und erben die Heading-Regeln nicht. */
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  overflow-wrap: normal;
  color: var(--fg);
  font-size: clamp(2.9rem, 1.9rem + 5.6vw, 5.9rem);
  line-height: 0.96;
  margin: 0;
  max-width: 12ch;
}
/* Niedrige Bildschirme (Laptops, Querformat): weiter verdichten, damit der
   Hero trotzdem exakt in die Bildschirmhöhe passt. */
@media (max-height: 780px) and (min-width: 701px) {
  .mg-hero__title { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 4.4rem); }
  .mg-hero__lead { font-size: var(--step-0); max-width: 44rem; }
  .mg-hero__slide { gap: 0.45rem; }
  .mg-hero__takt-i { min-height: 2.5rem; padding-block: 0.3rem; }
  .mg-hero__demo a { padding-bottom: 0.05rem; }
  .mg-hero__inner { gap: 0.55rem; }
  .mg-hero__actions .btn--lg { padding-block: 0.68rem; font-size: var(--step-0); }
  .mg-hero .mgline { margin-top: 0; }
}
/* Kurze Smartphones (z. B. 667px hoch): so weit verdichten wie möglich —
   reicht der Platz trotzdem nicht, wächst der Hero, statt Inhalt abzuschneiden. */
@media (max-width: 700px) and (max-height: 750px) {
  .mg-hero__title { font-size: clamp(2.35rem, 8.5vw, 2.9rem); }
  .mg-hero__lead { font-size: var(--step-0); }
  .mg-hero__inner { gap: 0.5rem; }
  .mg-hero__slide { gap: 0.45rem; }
  .mg-hero__actions .btn--lg { padding-block: 0.65rem; font-size: var(--step-0); }
  .mg-hero .mgline { margin-top: 0; }
}
.mg-hero__title .gold { color: var(--accent-600); }
.mg-hero__lead {
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: 34rem;
  line-height: var(--leading-normal);
}
.mg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.mg-hero .mgline { margin-top: 0.4rem; }

/* Hero-Einstieg: Zeilen steigen nacheinander auf (rein CSS, no-JS-sicher) */
@media (prefers-reduced-motion: no-preference) {
  .mg-hero__inner > * { animation: mg-rise 0.8s var(--ease-out) both; }
  .mg-hero__inner > *:nth-child(2) { animation-delay: 0.08s; }
  .mg-hero__inner > *:nth-child(3) { animation-delay: 0.16s; }
  .mg-hero__inner > *:nth-child(4) { animation-delay: 0.24s; }
  .mg-hero__inner > *:nth-child(5) { animation-delay: 0.32s; }
}
@keyframes mg-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================================
   HERO-TAKT — die vier Leistungswelten als ruhiger Wechsel: Crossfade mit
   minimaler horizontaler Bewegung, konstante Höhe (Slides teilen sich eine
   Grid-Zelle), Taktleiste statt Slider-Punkten. Ohne JS steht Slide 1.
   ========================================================================== */
.mg-hero__bilder {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.mg-hero--takt .mg-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: translateX(1.4%) scale(1.03);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.mg-hero--takt .mg-hero__bg.is-aktiv { opacity: 1; transform: scale(1.03); }
.mg-hero--takt .mg-hero__bg img { z-index: 0; }

.mg-hero__slides { display: grid; }
.mg-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(0.55rem, 1.4vh, var(--space-sm));
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.mg-hero__slide.is-aktiv {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.18s;
}
.mg-hero__bereich {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-600);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mg-hero__bereich::after { content: ""; width: 2.6rem; height: 1px; background: var(--gold-hairline); }

/* Taktleiste: vier schmale Fortschrittslinien, klickbar, ohne Pfeile */
.mg-hero__takt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-sm);
  margin-top: var(--space-2xs);
}
.mg-hero__takt-i {
  background: none;
  border: 0;
  padding: 0.55rem 0;
  min-height: 2.75rem;
  min-width: 7.5rem;
  cursor: pointer;
  display: grid;
  gap: 0.4rem;
  justify-items: start;
  align-content: center;
  text-align: left;
  color: var(--fg-subtle);
  font: inherit;
}
.mg-hero__takt-i:hover { color: var(--fg-muted); }
.mg-hero__takt-i:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.mg-hero__takt-i.is-aktiv { color: var(--accent-600); }
.mg-hero__takt-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mg-hero__takt-linie {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(234, 240, 247, 0.22);
  overflow: hidden;
}
.mg-hero__takt-linie i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-2);
  transform: scaleX(0);
  transform-origin: left;
}
.mg-hero__takt-i.is-aktiv .mg-hero__takt-linie i { animation: mg-takt 6s linear forwards; }
@keyframes mg-takt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 480px) {
  .mg-hero__takt { gap: 0.15rem 0.8rem; }
  .mg-hero__takt-i { min-width: calc(50% - 0.8rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mg-hero--takt .mg-hero__bg,
  .mg-hero__slide { transition: none; transform: none; }
  .mg-hero--takt .mg-hero__bg.is-aktiv { transform: none; }
  .mg-hero__takt-i.is-aktiv .mg-hero__takt-linie i { animation: none; transform: scaleX(1); }
}

/* ============================================================================
   BAUTAFEL-MARQUEE — Gewerke im Lauf, gerahmt von Gold-Haarlinien
   ========================================================================== */
.marquee-section {
  padding-block: var(--space-md);
  border-top: 1px solid var(--gold-hairline);
  border-bottom: 1px solid var(--gold-hairline);
  background: rgba(0, 15, 38, 0.45);
}
.marquee__item {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--step-2);
  color: var(--fg-subtle);
}
.marquee__item--dot::after { color: var(--accent-2); content: "·"; }

/* ============================================================================
   EXPOSÉ-TEASER (Start) — Grundriss auf Planpapier + Text
   ========================================================================== */
.mg-plansheet {
  background: var(--plan-paper);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-sm), 2.5vw, var(--space-lg));
  box-shadow: var(--shadow-lg);
  position: relative;
}
.mg-plansheet img { display: block; width: 100%; height: auto; }
.mg-plansheet__stamp {
  position: absolute;
  right: clamp(0.6rem, 2vw, 1.4rem);
  bottom: clamp(0.6rem, 2vw, 1.4rem);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plan-ink-muted);
  border: 1px solid rgba(0, 26, 61, 0.35);
  padding: 0.35rem 0.6rem;
  background: rgba(255, 255, 255, 0.82);
}

/* ============================================================================
   BAUABLAUF — echte Sequenz 01–04
   ========================================================================== */
.mg-ablauf { display: grid; gap: 0; }
.mg-ablauf__item {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.mg-ablauf__item + .mg-ablauf__item { border-top: 1px solid var(--border); }
.mg-ablauf__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--accent-600);
  padding-top: 0.35rem;
}
.mg-ablauf__item h3 { font-size: var(--step-2); text-transform: uppercase; letter-spacing: 0.02em; }
.mg-ablauf__item p { color: var(--fg-muted); max-width: 52ch; margin-top: 0.4rem; }
@media (max-width: 560px) {
  .mg-ablauf__item { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* ============================================================================
   PRINZIP-SEKTION (Start) — drei Aussagen an Gold-Markern, schmale Spur
   ========================================================================== */
.mg-prinzip { display: grid; gap: var(--space-lg); }
.mg-prinzip__item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  gap: var(--space-md);
  align-items: start;
}
.mg-prinzip__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-sm);
  color: var(--accent-600);
}
.mg-prinzip__icon svg { width: 1.3rem; height: 1.3rem; }
.mg-prinzip__item h3 { font-size: var(--step-1); }
.mg-prinzip__item p { color: var(--fg-muted); margin-top: 0.3rem; }

/* ============================================================================
   ABSCHLUSS-CTA — ruhig, dunkel, ein Gold-Button
   ========================================================================== */
.mg-cta {
  text-align: center;
  padding-block: clamp(var(--space-2xl), 12vw, var(--space-3xl));
  /* Konstruktionsraster in Gold statt Spot-Glow — die Signatur der Site,
     kein Verlaufs-Schein */
  background:
    linear-gradient(rgba(198, 147, 81, 0.055) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(90deg, rgba(198, 147, 81, 0.055) 1px, transparent 1px) 0 0 / 72px 72px,
    #000F26;
  border-top: 1px solid var(--gold-hairline);
}
.mg-cta h2 { font-size: var(--step-4); max-width: 18ch; margin-inline: auto; }
.mg-cta p { color: var(--fg-muted); max-width: 44ch; margin: var(--space-sm) auto var(--space-lg); }
.mg-cta .mgline { margin: var(--space-md) auto 0; }

/* ============================================================================
   UNTERSEITEN-KOPF — Planfeld statt Template-Pagehead
   ========================================================================== */
.mg-kopf {
  padding-block: clamp(var(--space-xl), 9vw, var(--space-2xl)) clamp(var(--space-lg), 6vw, var(--space-xl));
  border-bottom: 1px solid var(--border);
  position: relative;
}
.mg-kopf__pos {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-600);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.mg-kopf__pos::after { content: ""; width: 4rem; height: 1px; background: var(--gold-hairline); }
.mg-kopf h1 { font-size: clamp(2.6rem, 2rem + 4.4vw, 5rem); margin-top: var(--space-sm); }
.mg-kopf__lead {
  font-size: var(--step-1);
  color: var(--fg-muted);
  max-width: 66ch;
  margin-top: var(--space-md);
  line-height: var(--leading-normal);
}

/* Split-Variante (Immobilienservice): Bild schon im ersten Fold statt
   Text-Planfeld — die Leistungsseiten öffnen nicht mehr alle gleich */
.mg-kopf--split .mg-kopf__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
}
.mg-kopf__foto {
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.mg-kopf__foto img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
@media (max-width: 860px) {
  .mg-kopf--split .mg-kopf__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   LEISTUNGSVERZEICHNIS (leistungen.php) — alternierende Blöcke
   ========================================================================== */
.mg-lv { display: grid; gap: clamp(var(--space-xl), 8vw, var(--space-2xl)); }
.mg-lv__block {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
}
.mg-lv__block--flip .mg-lv__media { order: 2; }
.mg-lv__media {
  border-radius: var(--radius-image);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
}
.mg-lv__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mg-lv__media--plan { background: var(--plan-paper); padding: var(--space-md); }
.mg-lv__media--plan img { object-fit: contain; aspect-ratio: auto; }
.mg-lv__body { display: grid; gap: var(--space-sm); align-content: start; }
.mg-lv__body h2 { font-size: var(--step-4); }
.mg-lv__body > p { color: var(--fg-muted); max-width: 50ch; }
.mg-liste { display: grid; gap: 0.55rem; padding: 0; margin: 0.4rem 0 0; list-style: none; }
.mg-liste li { display: flex; gap: 0.7rem; align-items: baseline; color: var(--fg-muted); }
.mg-liste li::before {
  content: "";
  flex: none;
  width: 1.1rem;
  height: 1px;
  background: var(--accent-2);
  transform: translateY(-0.28em);
}
@media (max-width: 860px) {
  .mg-lv__block { grid-template-columns: 1fr; }
  .mg-lv__block--flip .mg-lv__media { order: 0; }
}

/* ============================================================================
   BAUSERVICE — Foto-Band + Felder
   ========================================================================== */
.mg-band {
  position: relative;
  height: clamp(16rem, 42vw, 30rem);
  overflow: hidden;
  border-block: 1px solid var(--border);
}
.mg-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 26, 61, 0.34), rgba(0, 26, 61, 0.06) 45%, rgba(0, 26, 61, 0.5));
}
.mg-band__note {
  position: absolute;
  left: var(--gutter);
  bottom: var(--space-sm);
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(234, 240, 247, 0.85);
}

/* ============================================================================
   HAUSMEISTER — Jahreslauf (echte Saison-Sequenz an der Goldlinie)
   ========================================================================== */
.mg-jahr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg) var(--space-md);
  position: relative;
  padding-top: var(--space-md);
}
.mg-jahr::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold-hairline);
}
.mg-jahr__station { position: relative; display: grid; gap: 0.5rem; align-content: start; }
.mg-jahr__station::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-md) - 4px);
  left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-2);
}
.mg-jahr__zeit {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-600);
}
.mg-jahr__station p { color: var(--fg-muted); font-size: var(--step-0); }
@media (max-width: 760px) {
  .mg-jahr { grid-template-columns: 1fr; padding-top: 0; padding-left: var(--space-md); }
  .mg-jahr::before { top: 0; bottom: 0; left: 0; right: auto; width: 1px; height: auto; }
  .mg-jahr__station::before { top: 0.35rem; left: calc(-1 * var(--space-md) - 4px); }
}

/* ============================================================================
   IMMOBILIENSERVICE — Dokumentations-Duett + Doku-Band
   ========================================================================== */
.mg-duett {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}
@media (max-width: 860px) { .mg-duett { grid-template-columns: 1fr; } }
.mg-doku-band {
  background: var(--plan-paper);
  color: var(--plan-ink);
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
}
.mg-doku-band h2 { color: var(--plan-ink); font-size: var(--step-4); }
.mg-doku-band p { color: var(--plan-ink-muted); max-width: 56ch; }
.mg-doku-band .mgline__label { color: var(--plan-ink-muted); }

/* ============================================================================
   PLANPAPIER-SEKTION — heller Rhythmus-Wechsel im dunklen Seitenkörper
   (Start: Exposé-Teaser, Bauservice: Baustellenmanagement). Alle Kind-Farben
   wechseln auf Plan-Tinte; Gold wird zur AA-festen Papier-Variante.
   ========================================================================== */
.mg-papier { background: var(--plan-paper); color: var(--plan-ink); }
.mg-papier h2, .mg-papier h3 { color: var(--plan-ink); }
.mg-papier p, .mg-papier .lead, .mg-papier .muted { color: var(--plan-ink-muted); }
.mg-papier .eyebrow { color: var(--plan-gold-ink); }
.mg-papier .eyebrow::before { background: var(--accent-700); }
.mg-papier .mgline { color: var(--accent-700); }
.mg-papier .mgline__label { color: var(--plan-ink-muted); }
.mg-papier .mg-liste li { color: var(--plan-ink-muted); }
.mg-papier .mg-liste li::before { background: var(--accent-700); }
.mg-papier .mg-ablauf__num { color: var(--plan-gold-ink); }
.mg-papier .mg-ablauf__item + .mg-ablauf__item { border-top-color: rgba(0, 26, 61, 0.16); }
.mg-papier .btn--ghost { --_fg: var(--plan-ink); --_bd: rgba(0, 26, 61, 0.4); }
.mg-papier .mg-plansheet {
  border: 1px solid rgba(0, 26, 61, 0.16);
  box-shadow: var(--shadow-md);
}

/* ============================================================================
   EXPOSÉ — Weg-Schritte (echte Sequenz), Abgrenzungs-Notiz
   ========================================================================== */
.mg-weg { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.mg-weg__step { display: grid; gap: 0.6rem; align-content: start; position: relative; padding-top: var(--space-sm); }
.mg-weg__step::before { content: ""; position: absolute; top: 0; left: 0; width: 2.6rem; height: 2px; background: var(--accent-2); }
.mg-weg__num { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.14em; color: var(--accent-600); }
.mg-weg__step h3 { font-size: var(--step-1); }
.mg-weg__step p { color: var(--fg-muted); }
@media (max-width: 760px) { .mg-weg { grid-template-columns: 1fr; } }

.mg-notiz {
  /* Plan-Randnotiz: gestrichelte Umrandung wie eine Revisions-Markierung,
     kein Seiten-Tab */
  border: 1px dashed var(--gold-hairline);
  border-radius: 0;
  padding: clamp(var(--space-md), 3vw, var(--space-lg));
  background: rgba(0, 15, 38, 0.5);
  max-width: 46rem;
}
.mg-notiz h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.mg-notiz p { color: var(--fg-muted); }

/* Viewer3d auf Navy: Bedienelemente lesbar halten */
.viewer3d__seg-i { color: var(--fg-muted); }
.viewer3d__legend { background: rgba(0, 15, 38, 0.78); border: 1px solid var(--border); }
.viewer3d__hint { color: var(--fg-subtle); }
/* „Drehung pausieren": opak auf Planpapier statt Gold-Glas über dem 3D-Canvas —
   der backdrop-blur drückte den Pixel-Kontrast unter AA */
.viewer3d__rotate {
  background: var(--plan-paper);
  color: var(--plan-ink);
  border-color: rgba(0, 26, 61, 0.4);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.viewer3d__rotate:hover { background: #ffffff; }

/* ============================================================================
   ÜBER UNS — Geschäftsführer als typografische Monogramm-Karten
   ========================================================================== */
.mg-gf { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
@media (max-width: 700px) { .mg-gf { grid-template-columns: 1fr; } }
.mg-gf__karte {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
}
.mg-gf__mono {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.6rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--fg);
}
.mg-gf__mono span { color: var(--accent-600); }
.mg-gf__karte h3 { font-size: var(--step-2); text-transform: uppercase; }
.mg-gf__rolle {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.mg-claimband {
  background: var(--plan-paper);
  padding-block: clamp(var(--space-xl), 7vw, var(--space-2xl));
  text-align: center;
}
.mg-claimband img { max-width: min(28rem, 78vw); height: auto; }

/* Werte-Reihe */
.mg-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 760px) { .mg-werte { grid-template-columns: 1fr; } }
.mg-werte__item { border-top: 2px solid var(--accent-2); padding-top: var(--space-sm); display: grid; gap: 0.4rem; align-content: start; }
.mg-werte__item h3 { font-size: var(--step-1); }
.mg-werte__item p { color: var(--fg-muted); }

/* ============================================================================
   Formular auf Navy — Felder sichtbar, Fokus deutlich
   ========================================================================== */
.form input, .form textarea, .form select {
  background: rgba(0, 15, 38, 0.6);
  border-color: var(--border-strong);
  color: var(--fg);
}
.form input:focus-visible, .form textarea:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}

/* Inline-SVG-Icons in Buttons und der statischen Karte: ohne feste Größe
   rendern sie in voller Containerbreite — hier auf Text-/Zierformat begrenzt. */
.btn svg { width: 1.05em; height: 1.05em; flex: none; }
.map-static svg { width: 2rem; height: 2rem; flex: none; opacity: 0.7; }

/* Deutlich markierte Pflichtangaben-Lücke auf Rechtsseiten (Impressum & Co.):
   fehlende Stammdaten werden NIE erfunden, sondern sichtbar als Platzhalter
   ausgewiesen, bis der Betreiber sie nachreicht. */
.platzhalter {
  display: inline-block;
  padding: 0.32em 0.55em;
  border: 1px dashed var(--warning, #d97706);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warning, #d97706) 12%, transparent);
  color: var(--warning, #e8a33d);
  font-weight: 600;
}

/* ============================================================================
   LESBARKEIT & TYPO-SKALA — Zeilen unter ~80 Zeichen halten; klare Stufung
   Hero-These >> Section-Titel >> Eyebrow (statt gleich lauter Versal-Zeilen)
   ========================================================================== */
.prose p, .prose li { max-width: 68ch; }
.lead { max-width: 60ch; }
.section__head h2 { font-size: var(--step-3); }

/* ============================================================================
   MOBIL — verdichten statt 1:1 stapeln: knapperes Sektions-Padding,
   engerer Ablauf
   ========================================================================== */
@media (max-width: 700px) {
  .section { padding-block: var(--space-xl); }
  .mg-ablauf__item { padding-block: var(--space-md); }
  .mg-cta { padding-block: var(--space-xl); }
  .mg-lv { gap: var(--space-xl); }
  .mg-kopf { padding-block: var(--space-lg); }
}

/* ============================================================================
   HERO — leiser Beispiel-Exposé-Link unter den Buttons (Mono, Gold)
   ========================================================================== */
.mg-hero__demo { margin: 0; }
.mg-hero__demo a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-600);
  border-bottom: 1px solid var(--gold-hairline);
  padding-bottom: 0.2rem;
}
.mg-hero__demo a:hover { color: var(--fg); border-color: currentColor; }
.mg-hero__demo svg { width: 0.95rem; height: 0.95rem; }
@media (prefers-reduced-motion: no-preference) {
  .mg-hero__inner > *:nth-child(6) { animation-delay: 0.4s; }
}

/* Anker-Ziele nicht unter dem Sticky-Header verstecken */
#leistungswelten, #beispiel-expose, #leistungen { scroll-margin-top: 5.5rem; }

/* ============================================================================
   UNTERSEITEN-KOPF — frühe Handlungsaufforderung unter dem Lead
   ========================================================================== */
.mg-kopf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

/* ============================================================================
   LEISTUNGS-AKKORDEON (Hausmeister) — fünf Zeilen an durchgehenden
   Trennlinien, echte Buttons, dezente Öffnung über grid-template-rows.
   Ohne JS (kein .js am html) stehen alle Bereiche offen.
   ========================================================================== */
.mg-akkordeon { border-top: 1px solid var(--border); }
.mg-akk { border-bottom: 1px solid var(--border); }
.mg-akk__titel { margin: 0; font-size: inherit; }
.mg-akk__knopf {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 3rem;
  padding: clamp(1rem, 2.5vw, 1.4rem) 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mg-akk__knopf:hover .mg-akk__name { color: var(--accent-600); }
.mg-akk__knopf:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.mg-akk__icon { display: inline-flex; color: var(--accent-600); }
.mg-akk__icon svg { width: 1.35rem; height: 1.35rem; }
.mg-akk__text { display: grid; gap: 0.2rem; min-width: 0; }
.mg-akk__name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--step-2);
  line-height: 1.1;
  transition: color var(--dur-base) var(--ease);
}
.mg-akk__kurz { color: var(--fg-subtle); font-size: var(--step-0); }
.mg-akk__plus { position: relative; width: 1.05rem; height: 1.05rem; flex: none; color: var(--accent-600); }
.mg-akk__plus span { position: absolute; inset: 0; margin: auto; background: currentColor; }
.mg-akk__plus span:nth-child(1) { width: 100%; height: 1.5px; }
.mg-akk__plus span:nth-child(2) { width: 1.5px; height: 100%; transition: transform var(--dur-base) var(--ease); }
.is-offen .mg-akk__plus span:nth-child(2) { transform: scaleY(0); }
.js .mg-akk__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s var(--ease); }
.js .is-offen .mg-akk__panel { grid-template-rows: 1fr; }
.js .mg-akk__inner { overflow: hidden; visibility: hidden; transition: visibility 0.28s; }
.js .is-offen .mg-akk__inner { visibility: visible; }
.mg-akk__liste {
  padding: 0 0.25rem clamp(1rem, 2.5vw, 1.4rem) calc(1.35rem + var(--space-sm));
  margin: 0;
}
/* Desktop: Detailpunkte zweispaltig über die volle Inhaltsbreite (1216px),
   Spalten gleichmäßig verteilt — große Bildschirme werden echt genutzt */
@media (min-width: 861px) {
  .mg-akk__liste {
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(var(--space-lg), 6vw, var(--space-2xl));
    padding-right: var(--space-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .mg-akk__panel, .js .mg-akk__inner, .mg-akk__plus span:nth-child(2) { transition: none; }
}

/* ============================================================================
   DREI LEISTUNGSWELTEN (Start) — jede Welt mit eigenem visuellen Prinzip:
   01 Foto (die Baustelle), 02 Objektakte (das Dokument), 03 Plan (das Papier)
   ========================================================================== */
.mg-welten { display: grid; gap: clamp(var(--space-xl), 8vw, var(--space-2xl)); }
.mg-welt {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
}
.mg-welt__body { display: grid; gap: var(--space-sm); align-content: start; justify-items: start; }
.mg-welt__body h3 { font-size: var(--step-4); text-transform: uppercase; letter-spacing: 0.02em; }
.mg-welt__body > p { color: var(--fg-muted); max-width: 50ch; }
.mg-welt__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }

/* Welt 01 — das Foto trägt */
.mg-welt--foto .mg-welt__media {
  position: relative;
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.mg-welt--foto .mg-welt__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mg-welt__note {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(234, 240, 247, 0.9);
  background: rgba(0, 15, 38, 0.62);
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(234, 240, 247, 0.18);
}

/* Welt 02 — die Objektakte als Dokument-Karte (Inhalt fließt umgekehrt) */
.mg-welt--akte .mg-welt__body { order: 1; }
.mg-welt--akte .mg-akte { order: 2; }

/* Welt 03 — der Plan auf Papier (Plansheet aus der Bibliothek) */
.mg-welt--plan .mg-plansheet { align-self: start; }

@media (max-width: 860px) {
  .mg-welt { grid-template-columns: 1fr; }
  .mg-welt--akte .mg-akte { order: 0; }
}

/* ============================================================================
   OBJEKTAKTE — schematischer Dokument-Auszug (KEINE erfundenen Objektdaten:
   nur die Leistungen selbst). Dunkle Fassung (Start) + Papier-Fassung (IMO).
   ========================================================================== */
.mg-akte {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mg-akte__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--gold-hairline);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-600);
}
.mg-akte__stand { color: var(--fg-subtle); letter-spacing: 0.08em; }
.mg-akte__zeilen { list-style: none; margin: 0; padding: var(--space-2xs) 0; }
.mg-akte__zeilen li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem var(--space-md);
  color: var(--fg-muted);
  font-size: var(--step-0);
}
.mg-akte__zeilen li + li { border-top: 1px dashed var(--border); }
.mg-akte__zeilen svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-600); transform: translateY(0.15em); }
.mg-akte__nr {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--accent-600);
  flex: none;
}
.mg-akte__fuss {
  padding: var(--space-xs) var(--space-md) var(--space-sm);
  border-top: 1px solid var(--border);
  color: var(--fg-subtle);
  font-size: var(--step--1);
}
/* Papier-Fassung (Immobilienservice, im .mg-papier-Band) */
.mg-akte--papier { background: #ffffff; border-color: rgba(0, 26, 61, 0.2); box-shadow: var(--shadow-md); }
.mg-akte--papier .mg-akte__kopf { color: var(--plan-gold-ink); border-bottom-color: rgba(176, 127, 65, 0.5); }
.mg-akte--papier .mg-akte__stand { color: var(--plan-ink-muted); }
.mg-akte--papier .mg-akte__zeilen li { color: var(--plan-ink); }
.mg-akte--papier .mg-akte__zeilen li + li { border-top-color: rgba(0, 26, 61, 0.14); }
.mg-akte--papier .mg-akte__nr { color: var(--plan-gold-ink); }

/* ============================================================================
   BEISPIEL-EXPOSÉ — Text + Browserfenster-Vorschau auf Planpapier.
   Externe 3D-Anwendung wird nie eingebettet: das Fenster IST der Link.
   ========================================================================== */
.mg-beispiel {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
}
.mg-beispiel__text { display: grid; gap: var(--space-sm); justify-items: start; }
.mg-beispiel__text h2 { font-size: var(--step-4); max-width: 22ch; }
.mg-beispiel__lead { max-width: 52ch; }
.mg-beispiel__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem var(--space-md);
  width: 100%;
  max-width: 40rem;
}
.mg-beispiel__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.mg-beispiel__hinweis { font-size: var(--step--1); color: var(--plan-ink-muted); max-width: 52ch; }
@media (max-width: 900px) {
  .mg-beispiel { grid-template-columns: 1fr; }
  .mg-beispiel__facts { grid-template-columns: 1fr; }
}

/* Browserfenster: Titelleiste mit Punkten + Adressfeld, darunter der Screenshot */
.mg-browser {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(0, 26, 61, 0.25);
  background: #ffffff;
  box-shadow: var(--shadow-lg);
  position: relative;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.mg-browser:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl, var(--shadow-lg)); }
.mg-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  background: var(--plan-paper-2);
  border-bottom: 1px solid rgba(0, 26, 61, 0.14);
}
.mg-browser__bar i {
  width: 0.62rem; height: 0.62rem;
  border-radius: 50%;
  background: rgba(0, 26, 61, 0.22);
  flex: none;
}
.mg-browser__url {
  margin-left: 0.5rem;
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--plan-ink-muted);
  background: #ffffff;
  border: 1px solid rgba(0, 26, 61, 0.14);
  border-radius: 999px;
  padding: 0.22rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mg-browser picture, .mg-browser img { display: block; width: 100%; height: auto; }
/* Sichtbare Kennzeichnung des externen Beispiels als Fußleiste des Fensters */
.mg-browser__tag {
  display: block;
  padding: 0.55rem 0.85rem;
  background: var(--plan-paper-2);
  border-top: 1px solid rgba(0, 26, 61, 0.14);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plan-ink-muted);
}
.mg-browser__cta {
  position: absolute;
  right: var(--space-sm);
  bottom: calc(var(--space-sm) + 2.3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-2);
  color: var(--accent-ink, #001A3D);
  font-weight: var(--weight-semibold);
  font-size: var(--step--1);
  padding: 0.55rem 0.95rem;
  border-radius: var(--btn-radius);
  box-shadow: var(--shadow-md);
}
.mg-browser__cta svg { width: 1rem; height: 1rem; }

/* ============================================================================
   PROZESSKETTE (Exposé-Kopf) — Aufmaß → … → PDF-Exposé als Maßlinien-Zug
   ========================================================================== */
.mg-kette {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0;
}
.mg-kette li {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--border-strong);
  padding: 0.4rem 0.7rem;
  background: rgba(0, 15, 38, 0.5);
  white-space: nowrap;
}
/* Verbindung als schlichte Goldlinie — bewusst ohne Pfeilspitzen */
.mg-kette li + li { position: relative; margin-left: 1.5rem; }
.mg-kette li + li::before {
  content: "";
  position: absolute;
  left: -1.3rem;
  top: 50%;
  width: 1.1rem;
  height: 1px;
  background: var(--accent-2);
}
.mg-kette .mg-kette__ziel {
  color: var(--accent-600);
  border-color: var(--gold-hairline);
  background: var(--accent-soft);
}

/* ============================================================================
   WELT-MARKER (Leistungsverzeichnis) — Gruppentrenner der drei Welten
   ========================================================================== */
.mg-weltmarker {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--gold-hairline);
  padding-bottom: var(--space-2xs);
  margin-bottom: calc(-1 * clamp(var(--space-lg), 4vw, var(--space-xl)));
}
.mg-weltmarker__titel {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--step-1);
  color: var(--fg-subtle);
}

/* ============================================================================
   AUFGABEN-FLUSS (Immobilienservice) — vier großzügige, alternierende
   Querformat-Sektionen: Bild und Text wechseln die Seite, keine Rahmen,
   dezente Trennlinien, klare Leserichtung. Mobil: Bild, Text, Merkmale.
   ========================================================================== */
.mg-fluss { display: grid; gap: clamp(var(--space-xl), 6vw, var(--space-2xl)); }
.mg-fluss__abschnitt {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(var(--space-lg), 5vw, var(--space-2xl));
  align-items: center;
}
.mg-fluss__abschnitt--flip .mg-fluss__media { order: 2; }
.mg-fluss__abschnitt + .mg-fluss__abschnitt {
  border-top: 1px solid var(--border);
  padding-top: clamp(var(--space-xl), 6vw, var(--space-2xl));
}
.mg-fluss__media {
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.mg-fluss__media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.mg-fluss__media--plan { background: var(--plan-paper); padding: clamp(var(--space-sm), 2.5vw, var(--space-lg)); }
.mg-fluss__media--plan img { object-fit: contain; aspect-ratio: auto; }
.mg-fluss__body { display: grid; gap: var(--space-sm); align-content: center; }
.mg-fluss__body h3 { font-size: var(--step-3); text-transform: uppercase; letter-spacing: 0.02em; }
.mg-fluss__body > p { color: var(--fg-muted); max-width: 54ch; font-size: calc(var(--step-0) * 1.04); line-height: var(--leading-normal); }
@media (max-width: 860px) {
  .mg-fluss__abschnitt { grid-template-columns: 1fr; }
  .mg-fluss__abschnitt--flip .mg-fluss__media { order: 0; }
}

/* ============================================================================
   NUTZEN-REIHE (Hausmeister, auf Planpapier) — sechs Aussagen, zwei Spalten
   ========================================================================== */
.mg-nutzen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm) var(--space-lg);
}
.mg-nutzen li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--plan-ink);
  font-weight: var(--weight-medium);
  border-top: 2px solid var(--accent-700);
  padding-top: var(--space-xs);
}
.mg-nutzen svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--plan-gold-ink); transform: translateY(0.15em); }
@media (max-width: 860px) { .mg-nutzen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mg-nutzen { grid-template-columns: 1fr; } }

/* ============================================================================
   PROJEKTE (Start) — erscheint erst mit echten Projekten aus site.json
   ========================================================================== */
.mg-projekte { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 860px) { .mg-projekte { grid-template-columns: 1fr; } }
.mg-projekt {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}
.mg-projekt__media { margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-xs); overflow: hidden; }
.mg-projekt__media img { display: block; width: 100%; height: auto; }
.mg-projekt__ort { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--fg-subtle); }
.mg-projekt h3 { font-size: var(--step-1); }
.mg-projekt p { color: var(--fg-muted); }

/* ============================================================================
   GESCHÄFTSFÜHRER-KARTEN — Foto-Slot (rendert erst mit gepflegtem Bild)
   ========================================================================== */
.mg-gf__foto {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
}
.mg-gf__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mg-gf__text { color: var(--fg-muted); max-width: 44ch; }

/* ============================================================================
   ANFRAGE-FORMULAR — zweispaltige Zeilen (Desktop), Selects im Feld-Stil
   ========================================================================== */
.form__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
@media (max-width: 640px) { .form__zeile { grid-template-columns: 1fr; } }
.field select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: rgba(0, 15, 38, 0.6);
  color: var(--fg);
  font: inherit;
  min-height: 2.9rem;
}
.field select:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 1px;
}
.field select option { background: var(--surface); color: var(--fg); }
.form__hinweis { color: var(--fg-subtle); font-size: var(--step--1); margin: 0; }

/* Footer: vier Spalten (Marke / Leistungen / Navigation / Kontakt) auf Desktop */
@media (min-width: 861px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ============================================================================
   MOBIL — Nachverdichtung der neuen Sektionen
   ========================================================================== */
@media (max-width: 700px) {
  .mg-welten { gap: var(--space-xl); }
  .mg-welt__body h3 { font-size: var(--step-3); }
  .mg-beispiel__text h2 { font-size: var(--step-3); }
  .mg-kette { margin-top: var(--space-sm); }
  .mg-kette li { font-size: 0.7rem; padding: 0.32rem 0.5rem; }
  .mg-kette li + li { margin-left: 1.05rem; }
  .mg-kette li + li::before { left: -0.9rem; width: 0.75rem; }
  .mg-browser__cta { position: static; margin: var(--space-2xs) var(--space-sm) var(--space-sm); width: max-content; }
  .mg-weltmarker { margin-bottom: calc(-1 * var(--space-md)); }
}

/* Reduced Motion: alles steht sofort */
@media (prefers-reduced-motion: reduce) {
  .mg-hero__inner > * { animation: none; }
  .mg-browser { transition: none; }
  .mg-browser:hover { transform: none; }
}