/* ============================================================================
   May & Große Designstudio — Projekt-Stylesheet
   Richtung „LICHTKANTE" (siehe .factory/entwuerfe.md)

   Grundgedanke: Das Logo ist gebürstetes Metall. Metall zeigt sich nicht über
   Fläche, sondern über die Kante, an der das Licht bricht. Die Seite ist ein
   Stapel schwarzer Ebenen, von der Seite gesehen — sichtbar ist immer nur die
   Kante dazwischen. Gold ist kein Farbfeld, sondern das Licht auf genau einer
   Kante: es wandert, es leuchtet nicht.

   Wird als LETZTES geladen und gewinnt in der Kaskade.
   Farben ausschließlich über Tokens. Keine externen Ressourcen.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1 · Token-Schicht
   --------------------------------------------------------------------------- */
:root {
  /* Kante statt Erhebung: eckige Schaltflächen (Preset lässt Pill stehen). */
  --btn-radius: 0px;
}

:root[data-preset="etched-dark-mono"] {
  /* Silber ist die zweite, stille Stimme der Marke. */
  --mg-silber: #c1bfbf;
  --mg-rauch: #86868a;
  /* Goldspektrum des Logos — nur für Verläufe, Licht und Hover. */
  --mg-gold-licht: #f0d691;
  --mg-gold-tief: #ac8a48;

  /* Schnittflächen des 3D-Zeichens: das Material, das sichtbar wird, wenn man
     die Bildmarke aufsägt. Links (M) Gold, rechts (G) Silber — beides tief
     abgedunkelt, denn eine Flanke steht nie im vollen Licht. */
  --mg-flanke-gold: color-mix(in srgb, var(--mg-gold-tief) 62%, var(--accent-ink));
  --mg-flanke-silber: color-mix(in srgb, var(--mg-silber) 34%, var(--accent-ink));
  /* Der einmalige Lichtreflex über dem Material: warm-neutral, nicht rein weiß —
     reines Weiß auf gebürstetem Metall sieht nach Folie aus, nicht nach Licht. */
  --mg-3d-glanz: color-mix(in srgb, var(--mg-gold-licht) 55%, var(--mg-silber));
  /* Schattenton: fast die Tiefe der Bühne, aber nicht schwarz — sonst schneidet
     der Schatten ein Loch, statt das Studiolicht abzudunkeln. */
  --mg-3d-schattenton: color-mix(in srgb, var(--accent-ink) 86%, transparent);
  /* Papier und Druckfarbe für die Dokument-Anschauung. Der einzige Ort auf der
     Seite, an dem eine helle Fläche richtig ist: ein Blatt Papier ist hell. */
  --mg-papier-hell: #f4f3f1;
  --mg-papier-tief: #d9d7d3;
  --mg-druck: color-mix(in srgb, var(--accent-ink) 62%, transparent);
  --mg-druck-blass: color-mix(in srgb, var(--accent-ink) 26%, transparent);
  --mg-druck-voll: color-mix(in srgb, var(--accent-ink) 92%, transparent);

  --mg-linie: color-mix(in srgb, var(--mg-silber) 15%, transparent);
  --mg-linie-stark: color-mix(in srgb, var(--mg-silber) 34%, transparent);
  --mg-linie-gold: color-mix(in srgb, var(--accent) 55%, transparent);

  --border: var(--mg-linie);
  --border-strong: var(--mg-linie-stark);
  --fg-muted: #a9a7a7;
  --fg-subtle: var(--mg-rauch);

  /* Eigener Sektions-Rhythmus: großzügig, aber an die Viewport-Höhe gebunden. */
  --mg-block: clamp(4rem, 7vh + 3.5vw, 8.5rem);
  --mg-block-eng: clamp(2.75rem, 4vh + 2.5vw, 5.5rem);
  /* Spur, an der die hängenden Labels ausgerichtet sind. Der Mindestwert richtet
     sich nach dem längsten einteiligen Label („ERGEBNIS", „LEISTUNGEN") — darunter
     lief es in die Überschrift hinein. */
  --mg-spur: clamp(4.75rem, 7vw, 6rem);
}

/* ---------------------------------------------------------------------------
   2 · Typografie
   Display: Inter 200, riesig und selten. Fließtext: Literata (Serife, fürs
   Lesen gebaut) — die zweite Stimme. Labels: Inter 600, winzig, weit getrackt.
   --------------------------------------------------------------------------- */

/* Deutsche Komposita NIE mitten im Wort brechen (das wäre ein Satzfehler).
   Stattdessen sorgen die Grade unten dafür, dass die Spalte breit genug ist. */
h1, h2, h3, h4, .mg-reg__name, .mg-duo__name {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

h2 { font-size: var(--step-4); letter-spacing: -0.035em; line-height: 1.02; }
h3 { font-size: var(--step-2); font-weight: 400; letter-spacing: -0.015em; }
h4 { font-size: var(--step-1); font-weight: 400; letter-spacing: -0.01em; }

.lead {
  font-size: var(--step-1);
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 46ch;
}

/* Ein Label sagt, was der Abschnitt IST — es dekoriert nicht. Deshalb kein
   Akzentbalken davor: Gold bleibt für die Lichtkante reserviert. */
.eyebrow, .mg-label {
  display: inline-block;
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mg-rauch);
  line-height: 1.4;
}
.eyebrow::before { display: none; }

.mg-fliess { max-width: 62ch; color: var(--fg-muted); }
.mg-fliess p + p { margin-top: 1.1em; }
.mg-fliess strong { color: var(--fg); font-weight: 400; }

/* ---------------------------------------------------------------------------
   3 · Layout-Primitive
   --------------------------------------------------------------------------- */
.mg-sekt { padding-block: var(--mg-block); position: relative; }
.mg-sekt--eng { padding-block: var(--mg-block-eng); }
.mg-sekt--rand { padding-block: 0; }

.mg-bahn { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
/* EINE Satzbreite für die ganze Seite: Kopfzeile, Fußzeile und die Rechtsseiten
   nutzen .container aus base.css, alle eigenen Sektionen .mg-bahn. Standen die
   auf verschiedenen Breiten, teilte sich keine Kante der Seite dieselbe Flucht. */
.container { max-width: var(--container-wide); }
.mg-bahn--breit { max-width: min(104rem, 94vw); }
.mg-bahn--lese { max-width: 58rem; }

/* Kopf einer Sektion: Label hängt links, Titel und Lead stehen rechts.
   Auf Mobil fällt es sauber untereinander. */
.mg-kopf {
  display: grid;
  grid-template-columns: var(--mg-spur) minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
/* Das Label wird NICHT auf die Spurbreite gedehnt, sondern behält seine eigene
   Breite und darf notfalls in den Spaltenabstand hineinragen. Gedehnt lief ein
   einteiliges Wort wie „ERGEBNIS" über die Kastenkante hinaus. */
.mg-kopf > .mg-label {
  grid-column: 1;
  padding-top: 0.75rem;
  justify-self: start;
  width: max-content;
}
/* In der Spur läuft das Label enger und einen Tick kleiner als im Fließsatz —
   nicht unter 11px, das bleibt funktionaler Text. */
.mg-kopf > .mg-label, .mg-grenze .mg-label { font-size: 0.72rem; letter-spacing: 0.14em; }
.mg-kopf__text { grid-column: 2; display: grid; gap: var(--space-sm); }
.mg-kopf__text h1, .mg-kopf__text h2 { max-width: 18ch; }
@media (max-width: 720px) {
  .mg-kopf { grid-template-columns: 1fr; gap: var(--space-sm); }
  .mg-kopf > .mg-label { grid-column: 1; padding-top: 0; }
  .mg-kopf__text { grid-column: 1; }
}

/* ---------------------------------------------------------------------------
   4 · DIE LICHTKANTE — die Signatur dieser Seite
   Eine Haarlinie über die volle Breite, in der ein kurzes Goldsegment sitzt.
   Beim Scrollen wandert das Segment über die Kante (scroll-gebunden, ohne JS).
   Ohne Support / bei reduced-motion steht es ruhig am Anfang der Linie.
   --------------------------------------------------------------------------- */
.mg-kante {
  position: relative;
  height: 1px;
  width: 100%;
  background: var(--mg-linie);
  overflow: hidden;
  isolation: isolate;
}
.mg-kante::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 28%;
  min-width: 12rem;
  background: linear-gradient(90deg,
      transparent,
      var(--mg-gold-tief) 18%,
      var(--mg-gold-licht) 50%,
      var(--mg-gold-tief) 82%,
      transparent);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mg-kante::after {
      animation: mg-kante-lauf linear both;
      animation-timeline: view();
      animation-range: cover;
      will-change: transform;
    }
  }
}
@keyframes mg-kante-lauf {
  from { transform: translateX(-110%); }
  to   { transform: translateX(370%); }
}

/* Ruhige Variante ohne Gold — reiner Trenner. */
.mg-kante--still::after { display: none; }

/* ---------------------------------------------------------------------------
   5 · Kopfzeile — kompakte Bildmarke + gesetzte Wortmarke
   Das Logo wird NIE umgefärbt oder gefiltert. Es steht freigestellt auf Schwarz.
   --------------------------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, #000 76%, transparent);
  /* Keine tote Border: Die Unterkante ist die Lesekante (siehe unten). */
  border-bottom: 0;
}
.header-inner { min-height: 4.75rem; }

/* Die LESEKANTE — die Lichtkante der Seite, in die Kopfzeile eingezogen.
   In der 1px-Unterkante sitzt dasselbe Goldsegment wie in .mg-kante, aber es
   ist an den Scroll-Fortschritt der SEITE gebunden statt an die eigene
   Sichtbarkeit: ganz oben steht das Licht am Anfang der Kante, am Seitenende
   ruht es rechts. Die Kopfzeile zeigt damit, wo auf der Seite man steht.
   Ohne animation-timeline-Support (Firefox/ältere Safari) und bei reduced
   motion steht das Licht ruhig links — wie der Fallback von .mg-kante. */
.mg-lesekante {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--mg-linie);
  overflow: hidden;
  /* Macht 100cqi unten verfügbar: die Kantenbreite als Einheit im Keyframe. */
  container-type: inline-size;
}
.mg-lesekante::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 24%;
  min-width: 10rem;
  background: linear-gradient(90deg,
      transparent,
      var(--mg-gold-tief) 18%,
      var(--mg-gold-licht) 50%,
      var(--mg-gold-tief) 82%,
      transparent);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .mg-lesekante::after {
      animation: mg-lesekante-stand linear both;
      /* Explizit der SEITEN-Scroller (root), nicht der nächstgelegene —
         gemeint ist der Lesefortschritt der Seite, nichts anderes. */
      animation-timeline: scroll(root);
      will-change: transform;
    }
  }
}
@keyframes mg-lesekante-stand {
  from { transform: translateX(0); }
  /* Kantenbreite minus Segmentbreite: Am Seitenende schließt das Segment auf
     JEDER Viewport-Breite bündig mit der rechten Kante ab (100% = eigene
     Breite, auch wenn min-width statt der 24% greift). */
  to   { transform: translateX(calc(100cqi - 100%)); }
}

.brand.mg-marke { gap: 0.85rem; align-items: center; }
.mg-marke__zeichen {
  height: 1.75rem;
  width: auto;
  flex: none;
  /* Ausdrücklich KEIN Filter, keine Umfärbung: Gold-Silber bleibt Gold-Silber. */
}
/* Die Wortmarke steht wie im Logo zweizeilig: Schriftzug über „Designstudio".
   Der lange Selektor ist nötig, weil die Entrance-Choreografie in base.css
   (body[data-header-reveal] .brand > span…) sonst display:inline-block erzwingt. */
.mg-marke__wort,
body[data-header-reveal] .site-header .brand > span.mg-marke__wort {
  display: grid;
  gap: 0.16rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--mg-linie-stark);
}
.mg-marke__name {
  font-family: var(--stack-inter);
  font-weight: 400;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--fg);
}
.mg-marke__typ {
  font-family: var(--stack-inter);
  font-weight: 600;
  /* Nicht unter 11px: das ist funktionaler Text in der Kopfzeile jeder Seite und
     bei 0.6rem (9,6px) auf hochauflösenden Schirmen nicht mehr sicher lesbar. */
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mg-rauch);
}

.nav__link {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mg-rauch);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--fg); }
.nav__link::after { background: var(--accent); height: 1px; }
.nav-toggle { border-color: var(--mg-linie-stark); border-radius: 0; }

@media (max-width: 820px) {
  .nav { inset-block-start: 4.75rem; background: #000; border-bottom: 1px solid var(--mg-linie); box-shadow: none; }
  .nav__link { border-bottom: 1px solid var(--mg-linie); letter-spacing: 0.14em; font-size: var(--step-0); }
}
@media (max-width: 420px) {
  .mg-marke__name { font-size: 0.86rem; }
  /* Der Grad bleibt bei 0.7rem (11,2px) — enger wird nur die Laufweite. */
  .mg-marke__typ { letter-spacing: 0.16em; }
}

/* ---------------------------------------------------------------------------
   6 · Schaltflächen und Links — flach, eckig, Kante statt Erhebung
   --------------------------------------------------------------------------- */
.btn {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1.15em 2em;
  border-radius: 0;
  box-shadow: none;
  border-width: 1px;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.btn:hover { transform: none; box-shadow: none; }
.btn--primary { --_bd: var(--accent); }
.btn--primary:hover { --_bg: var(--mg-gold-licht); --_bd: var(--mg-gold-licht); }
.btn--ghost { --_bg: transparent; --_fg: var(--mg-silber); --_bd: var(--mg-linie-stark); }
.btn--ghost:hover { --_bg: transparent; --_fg: var(--mg-gold-licht); --_bd: var(--accent); }
.btn--lg { font-size: var(--step-0); letter-spacing: 0.14em; padding: 1.2em 2.3em; }

/* Textlink mit Kante darunter — auf Hover wird aus der Silberlinie Licht. */
.mg-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mg-silber);
  padding-bottom: 0.55em;
  transition: color var(--dur-base) var(--ease);
}
.mg-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--mg-linie-stark);
  transition: background var(--dur-base) var(--ease);
}
.mg-link:hover { color: var(--mg-gold-licht); }
.mg-link:hover::after { background: linear-gradient(90deg, var(--mg-gold-tief), var(--mg-gold-licht)); }
.mg-link__pfeil { transition: transform var(--dur-base) var(--ease-out); }
.mg-link:hover .mg-link__pfeil { transform: translateX(0.3em); }

.mg-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }

/* ---------------------------------------------------------------------------
   7 · Hero — Satz links, das eigene Zeichen als Ausschnitt rechts
   Bei 1440 × 760 steht der komplette Hero ohne Scrollen.
   --------------------------------------------------------------------------- */
.mg-hero {
  /* 4.75rem Kopfzeile + 1px Haarlinie darunter — sonst steht der Hero exakt
     einen Pixel über der Falz und die Seite scrollt bei 1440 × 760 doch. */
  min-height: calc(100svh - 4.75rem - 1px);
  display: grid;
  align-content: center;
  /* Die Kopfzeile klebt über dem Hero (sticky, transparent). Solange der Inhalt
     kleiner ist als die Mindesthöhe, hält ihn die Zentrierung frei — wird er
     größer, muss der Innenabstand die Kopfzeile freihalten, sonst schiebt sich
     die Überschrift darunter. Gilt nur breit; schmal steht der Hero ohnehin
     unter der Kopfzeile und jede Zeile über der Falz zählt (s. unten). */
  padding-top: max(clamp(2rem, 7vh, 5rem), 5.75rem);
  padding-bottom: clamp(2rem, 7vh, 5rem);
  /* Der Zeichen-Ausschnitt läuft über die Satzkante hinaus — er darf die Seite
     aber nicht breiter machen (sonst scrollt sie waagerecht). */
  overflow: hidden;
}
/* Zeile 1: Eyebrow über die volle Breite (EINE Achse, s. index.php).
   Zeile 2: Satz links, Zeichen rechts. */
.mg-hero__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(1.5rem, 4vh, 2.75rem) clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.mg-hero__eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.9em;
}
/* Zeile UND Spalte müssen beide gesetzt sein: die Bühne steht im Quelltext vor
   dem Satz (auf dem Handy soll das Zeichen früher kommen), und die automatische
   Platzierung schiebt einen später genannten Erstspalten-Kasten sonst in eine
   dritte Zeile — der Satz rutschte dadurch unter das Zeichen. */
.mg-hero__satz { grid-column: 1; grid-row: 2; }
.mg-hero__aktionen { margin-top: clamp(1.5rem, 3.6vh, 2.8rem); }

/* Die Bühne des Zeichens. Sie trägt zwei Dinge, die der 3D-Körper selbst nicht
   tragen kann: das Studiolicht dahinter (sonst hat der Schatten nichts, worauf
   er fallen könnte — auf reinem Schwarz ist ein dunkler Schatten unsichtbar)
   und die Scroll-Kopplung, mit der die Kamera beim Weiterlesen zurückfährt. */
.mg-hero__buehne {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  position: relative;
  width: 100%;
  line-height: 0;
}
.mg-hero__buehne::before {
  content: "";
  position: absolute;
  inset: -22% -14% -30%;
  z-index: -1;
  pointer-events: none;
  /* Weiches Studiolicht: ein einziger Lichtkegel von oben links, sehr flach.
     Er ist die Fläche, auf der der Schlagschatten überhaupt erst lesbar wird. */
  background:
    radial-gradient(52% 46% at 42% 34%, color-mix(in srgb, var(--mg-silber) 9%, transparent), transparent 72%),
    radial-gradient(66% 58% at 56% 62%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 76%);
}

/* ---------------------------------------------------------------------------
   7b · Das Zeichen als räumlicher Körper — aus zwei Teilen (Zeichen-Moment 2 von 4)

   Grundsatz: „Assemble, don't spin.“ Das Zeichen dreht sich NICHT. Es baut sich
   beim Laden einmal auf — das goldene M von links, das silberne G von rechts,
   beide aus der Tiefe — und steht danach fast still: ein sehr langsames
   Schweben, wenige Grad Neigung, mehr nicht.

   Aufbau der Schichten (jede trägt genau eine Bewegung, damit sich keine zwei
   Animationen dieselbe transform-Eigenschaft streitig machen):
     .mg-hero__buehne     Scrollkopplung (Kamera fährt zurück)
     .mg-zeichen3d        Perspektive + Einblendung
     .__szene             Ruhepose + gedämpfte Zeigerneigung (JS)
     .__schwebe           Schweben
     .__teil--m / --g     Aufbau aus der Tiefe, danach Ruhelage
   Innen je Teil: Stirnfläche (echte Datei), Flankenstapel (Alpha-Maske dieses
   Teils), Glanzstreifen. Farben ausschließlich als Tokens.
   --------------------------------------------------------------------------- */
.mg-zeichen3d {
  /* Materialstärke. Zu viel Tiefe lässt das Zeichen wie einen Klotz wirken —
     das hier entspricht etwa der Kantenstärke eines gefrästen Schilds. */
  --mg-3d-tiefe: clamp(10px, 1.7vw, 26px);
  /* Ruhepose: leicht von oben und schräg. Ohne sie wäre der Körper von vorn
     eine Fläche und die ganze Tiefe unsichtbar — aber flach genug, dass beide
     Buchstaben jederzeit sauber lesbar bleiben. */
  --mg-3d-ruhe-x: 4.5deg;
  --mg-3d-ruhe-y: -13deg;
  /* Setzt assets/js/mg-hero.js gedämpft; ohne JS bleibt es bei null. */
  --zeiger-x: 0deg;
  --zeiger-y: 0deg;
  /* Fluchtpunkt weit weg: eine kurze Perspektive verzerrt die Buchstaben. */
  perspective: clamp(1200px, 105vw, 1900px);
  perspective-origin: 50% 44%;
}
.mg-zeichen3d__szene {
  position: relative;
  transform-style: preserve-3d;
  /* KEIN transition hier: die Dämpfung rechnet das JS Bild für Bild. Beides
     zusammen würde die Bewegung doppelt verschleppen und träge wirken lassen. */
  transform: rotateX(calc(var(--mg-3d-ruhe-x) + var(--zeiger-x)))
             rotateY(calc(var(--mg-3d-ruhe-y) + var(--zeiger-y)));
}
.mg-zeichen3d__schwebe {
  position: relative;
  transform-style: preserve-3d;
}
.mg-zeichen3d__teil {
  transform-style: preserve-3d;
}
/* Das M steht im Fluss und gibt dem Kasten seine Höhe, das G liegt deckungs-
   gleich darüber. Beide Dateien haben dieselbe Leinwandgröße wie das Original —
   dadurch sitzen die Teile ohne eine einzige Positionsangabe passgenau. */
.mg-zeichen3d__teil--m { position: relative; }
.mg-zeichen3d__teil--g { position: absolute; top: 0; left: 0; width: 100%; }

/* Die Stirnfläche: die echte Datei, unverändert. Ausdrücklich KEIN Filter und
   keine Umfärbung — Gold-Silber bleibt Gold-Silber. backface-visibility blendet
   sie aus, wenn man von hinten auf das Teil sieht; dahinter liegt dann die
   hinterste Schnittfläche, also die matte Rückseite des Werkstücks. */
.mg-zeichen3d__vorn {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform: translateZ(calc(var(--mg-3d-tiefe) * 0.5));
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Die Schnittfläche. Jedes Teil maskiert sie mit SEINER eigenen Datei, deshalb
   bekommt das M goldene und das G silberne Flanken — ohne dass irgendwo ein
   Farbwert im Markup steht. */
.mg-zeichen3d__flanke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  --mg-3d-schatten: color-mix(in srgb, var(--accent-ink) var(--dunkel), transparent);
  /* Einfarbig als Rückfall: sollte color-mix mit var()-Prozentwert irgendwo
     nicht greifen, bleibt die Flanke sichtbar statt zu verschwinden. */
  background-color: var(--mg-flanke-gold);
  background-image:
    linear-gradient(var(--mg-3d-schatten), var(--mg-3d-schatten)),
    linear-gradient(var(--mg-flanke), var(--mg-flanke));
  -webkit-mask-image: var(--mg-zeichen-bild, url("img/mark.webp"));
          mask-image: var(--mg-zeichen-bild, url("img/mark.webp"));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transform: translateZ(calc(var(--mg-3d-tiefe) * var(--z)));
}
.mg-zeichen3d__teil--m { --mg-flanke: var(--mg-flanke-gold); }
.mg-zeichen3d__teil--g { --mg-flanke: var(--mg-flanke-silber); }

/* Der Lichtreflex, der EINMAL nach dem Aufbau über Gold und Silber läuft.
   Ruhezustand ist unsichtbar (opacity 0) — ohne Animation passiert hier nichts. */
.mg-zeichen3d__glanz {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform: translateZ(calc(var(--mg-3d-tiefe) * 0.5 + 1px));
  background-image: linear-gradient(104deg,
      transparent 38%, var(--mg-3d-glanz) 50%, transparent 62%);
  background-size: 300% 100%;
  background-position: 165% 0;
  background-repeat: no-repeat;
  -webkit-mask-image: var(--mg-zeichen-bild, url("img/mark.webp"));
          mask-image: var(--mg-zeichen-bild, url("img/mark.webp"));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Der Schlagschatten: dieselbe Silhouette, weit hinter dem Körper, weich
   gezeichnet. Er ist der einzige Grund, warum das Zeichen im Raum zu schweben
   scheint statt zu kleben. Bewusst nicht tiefschwarz — er soll das Studiolicht
   dämpfen, nicht ein Loch in die Seite schneiden. */
.mg-zeichen3d__schatten {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Der Weichzeichner gehört NACH AUSSEN: CSS wendet Filter vor der Maske an.
     Beides auf einem Element hieße, die weiche Wolke wieder auf die scharfe
     Silhouette zurückzuschneiden — der Schatten bekäme harte Kanten. */
  filter: blur(26px);
  opacity: 0.55;
  transform: translate3d(1.5%, 7%, -150px) scale(1.03);
}
.mg-zeichen3d__schattenform {
  position: absolute;
  inset: 0;
  background: var(--mg-3d-schattenton);
  -webkit-mask-image: var(--mg-zeichen-bild, url("img/mark.webp"));
          mask-image: var(--mg-zeichen-bild, url("img/mark.webp"));
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Schmale Schirme: halbe Ebenenzahl und ein billigerer Schatten. Bei der
   kleineren Darstellung sieht man den doppelten Ebenenabstand nicht, die halbe
   Compositor-Last und den kleineren Weichzeichner-Radius aber schon. */
@media (max-width: 900px) {
  .mg-zeichen3d__flanke--fein { display: none; }
  .mg-zeichen3d__schatten { filter: blur(12px); opacity: 0.42; transform: translate3d(1%, 5%, -90px) scale(1.02); }
}

/* Der Claim des Logos als gesetzte Trias statt als ein langer Versalsatz. */
.mg-trias {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.5rem, 3.6vh, 2.6rem);
  padding-top: clamp(0.9rem, 2vh, 1.4rem);
  border-top: 1px solid var(--mg-linie);
  list-style: none;
}
.mg-trias li {
  font-family: var(--stack-inter);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mg-rauch);
}
/* Nur das erste Wort trägt Licht — ein Akzent, nicht drei. */
.mg-trias li:first-child { color: var(--accent); }

.mg-hero h1 {
  font-family: var(--font-display);
  font-weight: 200;
  /* Der Satz teilt sich die Bühne jetzt mit dem Zeichen — daher der schmalere
     Grad als in der einspaltigen Fassung davor. */
  font-size: clamp(2.35rem, min(5.4vw, 11.5vh), 5.4rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  margin-block: 0;
}
.mg-hero h1 span { display: block; }
/* Der einzige Goldakzent des Heros. */
.mg-hero__gold { color: var(--accent); }

/* Selbstzeichnende Lichtkante unter der Headline (Zeichen-Moment 1 von 4). */
.mg-strich {
  display: block;
  width: min(30rem, 72%);
  height: 6px;
  margin-top: clamp(1.1rem, 2.6vh, 1.9rem);
  overflow: visible;
}
.mg-verlauf-a { stop-color: var(--mg-gold-tief); }
.mg-verlauf-b { stop-color: var(--mg-gold-licht); }
.mg-verlauf-c { stop-color: var(--accent); }
.mg-verlauf-d { stop-color: var(--mg-silber); stop-opacity: 0.35; }

.mg-hero__lead {
  font-family: var(--font-body);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 44ch;
  margin-top: clamp(1.1rem, 2.6vh, 1.9rem);
}
/* Unter 900px wird aus dem Zweispalter ein Stapel. Reihenfolge bewusst:
   Eyebrow, dann ein KLEIN gehaltenes Zeichen, dann sofort die Überschrift.
   Das Zeichen darf hier nicht die halbe Ansicht fressen — wer die Seite auf
   dem Handy öffnet, muss oben lesen können, worum es geht, und die beiden
   Schaltflächen ohne Scrollen erreichen. */
@media (max-width: 900px) {
  /* KEINE Bildschirmhöhe erzwingen. Breit füllt der Hero sie aus, schmal nicht:
     der Inhalt maß hier 430 px in einem 768 px hohen Kasten — 308 px schwarzes
     Loch unter den Schaltflächen, gut 40 % der Sektion. Das Cookie-Banner
     verdeckte davon nur einen Teil, für wiederkehrende Besucher stand es ganz
     offen. Der Hero ist jetzt so hoch wie sein Inhalt; dass die Kante der
     nächsten Sektion unten anschneidet, ist erwünscht — sie zeigt, dass es
     weitergeht. */
  .mg-hero { min-height: auto; }
  .mg-hero__innen { grid-template-columns: 1fr; gap: clamp(1.1rem, 2.6vh, 1.8rem); }
  /* Zeilen EXPLIZIT neu vergeben: die Grundregeln setzen beide auf Zeile 2, im
     Einspalter lägen Zeichen und Satz dann übereinander. */
  .mg-hero__buehne { grid-column: 1; grid-row: 2; }
  .mg-hero__satz   { grid-column: 1; grid-row: 3; }
  .mg-hero__buehne {
    /* Links bündig, NICHT zentriert: Eyebrow, Zeichen, Überschrift, Fließtext
       und Schaltflächen hängen schmal an EINER Achse (s. index.php). Ein
       zentriertes Zeichen wäre das einzige Element, das ausschert. */
    justify-self: start;
    /* NUR über die Breite deckeln. Ein max-height auf dem Bild hätte die
       Stirnfläche schmaler gemacht als die absolut liegenden Flanken und das
       zweite Teil — M und G wären auseinandergefallen. Aus der Breite folgt
       die Höhe über das Seitenverhältnis der Datei (1109 : 600).
       48 % waren zu wenig: das Zeichen saß als Briefmarke in der linken Ecke,
       rechts daneben lagen 184 px Leere. Es ist die erste Arbeitsprobe der
       Seite und darf entsprechend auftreten — die Überschrift bleibt trotzdem
       ohne Scrollen sichtbar. */
    width: min(17rem, 64%);
  }
  .mg-hero h1 { font-size: clamp(2.1rem, 8.6vw, 3.2rem); }
  .mg-strich { width: 100%; }

  /* Die erste Ansicht auf dem Handy soll Überschrift, Beschreibung UND beide
     Schaltflächen zeigen — über dem Cookie-Banner, das unten 183 px einnimmt
     (gemessen). Deshalb hier: oben ansetzen statt zentrieren, kleinere
     Abstände, kleinerer Fließtext und die beiden Knöpfe nebeneinander.
     Ab etwa 800 px Fensterhöhe geht das auf; darunter siehe die Höhen-Regel
     unter diesem Block. */
  .mg-hero {
    align-content: start;
    padding-top: clamp(1.5rem, 3.5vh, 2.5rem);
    /* Großzügiger als früher: ohne erzwungene Bildschirmhöhe ist der untere
       Innenabstand der einzige Atem zwischen Schaltflächen und Trennkante. */
    padding-bottom: clamp(2.5rem, 7vh, 4rem);
  }
  .mg-hero__innen { gap: 0.9rem; }
  .mg-strich { margin-top: 0.85rem; }
  .mg-hero__lead { font-size: var(--step-0); margin-top: 0.85rem; }
  .mg-hero__aktionen { margin-top: 1.15rem; }
  .mg-aktionen.mg-hero__aktionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .mg-hero__aktionen .btn {
    width: 100%;
    white-space: normal;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    padding-inline: 0.5rem;
  }
}
/* Kleine Handys (iPhone SE, ältere Androids) und jedes Fenster, dem die Höhe
   fehlt: dort ist jeder Pixel über der Falz einer zu viel für das Zeichen. Es
   wird zurückgenommen, damit von Überschrift, Beschreibung und Schaltflächen so
   viel wie möglich zuerst kommt. Ganz aufgeht die Rechnung dort nicht — das
   Cookie-Banner belegt unten rund 180 px, die Schaltflächen liegen darunter,
   bis der Besucher entschieden oder ein Stück gescrollt hat. */
@media (max-width: 900px) and (max-height: 720px) {
  .mg-hero__buehne { width: min(12rem, 46%); }
}

@media (max-width: 560px) {
  .mg-trias { gap: 0.35rem 1rem; }
  .mg-trias li { letter-spacing: 0.18em; }
}
/* Flache Fenster (Notebook quer): Grade zusätzlich über die Höhe deckeln. */
@media (min-width: 901px) and (max-height: 760px) {
  .mg-hero h1 { font-size: clamp(2.2rem, min(4.6vw, 9.5vh), 4.2rem); }
  .mg-hero__lead { font-size: var(--step-0); }
  /* Flaches Fenster: das Zeichen darf nicht die halbe Höhe fressen. */
  .mg-hero__buehne { width: min(100%, 32rem); }
}

/* ---------------------------------------------------------------------------
   8 · Register — die vier Disziplinen als vollbreite Zeilen
   Keine Karten-Reihe, keine Nummern: vier gleichrangige Fächer sind keine
   Sequenz. Unterschieden wird über Typo und Position.
   --------------------------------------------------------------------------- */
.mg-register { display: grid; margin-top: clamp(2rem, 5vh, 3.5rem); }
.mg-reg {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) auto;
  gap: var(--space-2xs) clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  padding-block: clamp(1.6rem, 3.6vh, 2.9rem);
  border-top: 1px solid var(--mg-linie);
  color: inherit;
}
.mg-register .mg-reg:last-child { border-bottom: 1px solid var(--mg-linie); }
/* Auf Hover läuft Licht an der Oberkante der Zeile entlang — dieselbe Geste
   wie die Lichtkante, hier vom Nutzer ausgelöst. */
.mg-reg::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--mg-gold-tief), var(--mg-gold-licht) 45%, transparent);
  transition: width var(--dur-slow) var(--ease-out);
}
.mg-reg:hover::after, .mg-reg:focus-visible::after { width: 100%; }

.mg-reg__name {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem);
  letter-spacing: -0.035em;
  line-height: 1.06;
  transition: color var(--dur-base) var(--ease);
}
.mg-reg:hover .mg-reg__name { color: var(--mg-gold-licht); }
.mg-reg__text {
  font-family: var(--font-body);
  color: var(--fg-muted);
  font-size: var(--step-0);
  line-height: 1.6;
  max-width: 46ch;
}
.mg-reg__pfeil {
  align-self: center;
  color: var(--mg-rauch);
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  transition: color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease-out);
}
.mg-reg:hover .mg-reg__pfeil { color: var(--accent); transform: translateX(0.3em); }

@media (max-width: 860px) {
  .mg-reg { grid-template-columns: minmax(0, 1fr) auto; }
  .mg-reg__name { grid-column: 1; }
  .mg-reg__pfeil { grid-column: 2; grid-row: 1; align-self: start; }
  .mg-reg__text { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
   9 · Grenz-Band — die Haltung, einmal und deutlich
   --------------------------------------------------------------------------- */
.mg-grenze { background: var(--surface); }
.mg-grenze__innen {
  display: grid;
  grid-template-columns: var(--mg-spur) minmax(0, 1fr);
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
}
.mg-grenze__text { grid-column: 2; }
.mg-grenze .mg-label { grid-column: 1; padding-top: 0.6rem; justify-self: start; width: max-content; }
.mg-grenze__satz {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.mg-grenze__satz + .mg-fliess { margin-top: clamp(1.5rem, 3.5vh, 2.5rem); }
@media (max-width: 720px) {
  .mg-grenze__innen { grid-template-columns: 1fr; gap: var(--space-sm); }
  .mg-grenze__text, .mg-grenze .mg-label { grid-column: 1; padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   9b · Musterfläche — eine Seite aus dem eigenen Styleguide
   Die einzige Arbeit, die eine Agenturseite ungefragt zeigen darf, ist die
   eigene. Sie steht hier auf einer helleren Fläche: das ist zugleich der
   Helligkeitswechsel, der der Seite beim Scrollen Rhythmus gibt.
   --------------------------------------------------------------------------- */
.mg-muster { background: var(--surface-2); }
.mg-muster__blatt {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
@media (max-width: 900px) { .mg-muster__blatt { grid-template-columns: 1fr; } }

/* Schutzraum: die Hilfslinien sind CSS, sie sitzen dadurch immer exakt auf der
   Kante des Zeichens — kein zweites Bild, das auseinanderlaufen könnte. */
.mg-muster__zeichen { margin: 0; display: grid; gap: var(--space-sm); }
.mg-schutzraum {
  position: relative;
  /* Der Schutzraum ist die halbe Zeichenhöhe — und zwar wirklich, nicht ungefähr.
     Prozentualer Innenabstand bezieht sich in CSS IMMER auf die Breite; beim
     Seitenverhältnis 1109:600 des Zeichens löst 17.56 % genau die halbe
     Zeichenhöhe auf allen vier Seiten auf (p = 1 / (2 + 2·1109/600 + 2)). */
  padding: 17.56%;
  background: #000;
}
/* Aussen gestrichelt: die Grenze des Schutzraums. Innen als Haarlinie: die Kante
   des Zeichens selbst. Der Abstand dazwischen IST die Aussage der Tafel. */
.mg-schutzraum::before,
.mg-schutzraum::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.mg-schutzraum::before { inset: 0; border: 1px dashed var(--mg-linie-gold); }
.mg-schutzraum::after { inset: 17.56%; border: 1px solid var(--mg-linie-stark); }
.mg-schutzraum img { display: block; width: 100%; height: auto; }
.mg-muster__zeichen figcaption {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  color: var(--mg-rauch);
  line-height: 1.5;
}

.mg-muster__daten { display: grid; gap: clamp(1.75rem, 4vh, 2.75rem); }
.mg-muster__block { display: grid; gap: var(--space-sm); }

/* Farbwerte: Feld, Name, Hexwert, Rolle — vier Spalten auf einer Haarlinie. */
.mg-farben { display: grid; }
.mg-farben li {
  display: grid;
  grid-template-columns: 1.75rem minmax(6rem, 1fr) 5.5rem minmax(0, 1.2fr);
  gap: 0.9rem;
  align-items: center;
  padding-block: 0.7rem;
  border-top: 1px solid var(--mg-linie);
}
.mg-farben li:last-child { border-bottom: 1px solid var(--mg-linie); }
.mg-farben__feld { width: 1.75rem; height: 1.75rem; border: 1px solid var(--mg-linie-stark); }
.mg-farben__name { font-family: var(--font-body); font-size: var(--step-0); color: var(--fg); }
.mg-farben__wert {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.mg-farben__rolle { font-family: var(--font-body); font-size: var(--step--1); color: var(--fg-muted); }
@media (max-width: 620px) {
  .mg-farben li { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .mg-farben__rolle { grid-column: 2 / -1; }
}

/* Mindestgrößen: dieselbe Datei in drei Graden, an einer Grundlinie. */
.mg-grade {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: 0.9rem;
  border-top: 1px solid var(--mg-linie);
  border-bottom: 1px solid var(--mg-linie);
}
.mg-grade li { display: grid; gap: 0.5rem; justify-items: start; }
.mg-grade img { width: auto; display: block; }
.mg-grade span {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--mg-rauch);
}

/* Schriftprobe: dieselbe Zeile in den drei Stimmen der Marke. */
.mg-schriftprobe { display: grid; }
.mg-schriftprobe > div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.4fr) minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  padding-block: 0.7rem;
  border-top: 1px solid var(--mg-linie);
}
.mg-schriftprobe > div:last-child { border-bottom: 1px solid var(--mg-linie); }
.mg-schriftprobe dt {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mg-rauch);
}
.mg-schriftprobe dd { margin: 0; color: var(--fg); }
.mg-schriftprobe__display { font-family: var(--font-display); font-weight: 200; font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -0.03em; }
.mg-schriftprobe__lese { font-family: var(--font-body); font-size: var(--step-1); }
.mg-schriftprobe__label { font-family: var(--stack-inter); font-weight: 600; font-size: var(--step--1); letter-spacing: 0.22em; text-transform: uppercase; }
@media (max-width: 620px) { .mg-schriftprobe > div { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   10 · Zwei-Spalter für Studio-Anriss und ähnliche Blöcke
   --------------------------------------------------------------------------- */
.mg-paar {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 860px) { .mg-paar { grid-template-columns: 1fr; gap: var(--space-lg); } }

.mg-namen {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}
.mg-namen span { display: block; }
.mg-namen--anriss { margin-top: var(--space-sm); }

.mg-anriss { display: grid; gap: var(--space-md); align-content: start; }
.mg-anriss h2 {
  font-size: var(--step-2);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.16;
  max-width: 24ch;
}

/* ---------------------------------------------------------------------------
   11 · Seitenkopf der Unterseiten (drei Varianten — jede Seite ein eigener Auftakt)
   --------------------------------------------------------------------------- */
.mg-pagehead { padding-block: clamp(4.5rem, 13vh, 9rem) var(--mg-block-eng); }
.mg-pagehead h1 {
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* register: Titel groß, daneben ein knappes Verzeichnis der Abschnitte. */
.mg-pagehead--register h1 { font-size: clamp(2.5rem, 6.6vw, 5.4rem); }
.mg-pagehead--register .mg-pagehead__gitter {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
}
.mg-verzeichnis { display: grid; gap: 0.1rem; }
.mg-verzeichnis a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding-block: 0.7rem;
  border-top: 1px solid var(--mg-linie);
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-rauch);
  transition: color var(--dur-base) var(--ease);
}
.mg-verzeichnis a:last-child { border-bottom: 1px solid var(--mg-linie); }
.mg-verzeichnis a:hover { color: var(--mg-gold-licht); }
@media (max-width: 860px) { .mg-pagehead--register .mg-pagehead__gitter { grid-template-columns: 1fr; } }

/* schmal: ruhige, mittige Lesespur — für die Arbeitsweise. */
.mg-pagehead--schmal { text-align: left; }
.mg-pagehead--schmal h1 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); max-width: 16ch; }
.mg-pagehead--schmal .mg-label { display: block; margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
.mg-pagehead--schmal .lead { margin-top: clamp(1.25rem, 3vh, 2rem); max-width: 52ch; }

/* ---------------------------------------------------------------------------
   12 · Disziplinen im Detail (Leistungen) — Label bleibt links stehen
   --------------------------------------------------------------------------- */
.mg-disziplin {
  /* Sprungziel des Verzeichnisses: sonst schiebt die klebende Kopfzeile die
     Überschrift beim Ankersprung unter sich. */
  scroll-margin-top: 6.5rem;
  display: grid;
  grid-template-columns: minmax(11rem, 26%) minmax(0, 1fr);
  gap: var(--space-md) clamp(1.75rem, 5vw, 5rem);
  padding-block: clamp(2.5rem, 7vh, 5rem);
  border-top: 1px solid var(--mg-linie);
}
.mg-disziplin:last-child { border-bottom: 1px solid var(--mg-linie); }
.mg-disziplin__marke { display: grid; gap: var(--space-2xs); align-content: start; }
.mg-disziplin__marke h2 {
  font-size: clamp(1.5rem, 2.9vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.mg-disziplin__inhalt { display: grid; gap: clamp(1.25rem, 3vh, 2rem); }

@media (min-width: 981px) {
  .mg-disziplin__marke { position: sticky; top: 7rem; align-self: start; }
}
@media (max-width: 980px) { .mg-disziplin { grid-template-columns: 1fr; } }

/* Umfang: zweispaltige Haarlinien-Liste statt Häkchen-Kette. */
.mg-umfang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.mg-umfang li {
  padding-block: 0.75rem;
  border-top: 1px solid var(--mg-linie);
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--fg-muted);
  line-height: 1.45;
}
@media (max-width: 620px) { .mg-umfang { grid-template-columns: 1fr; } }

/* Die Abgrenzung je Disziplin: Haltung, keine Entschuldigung. */
.mg-grenzsatz {
  border-left: 1px solid var(--mg-linie-gold);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--mg-silber);
  max-width: 56ch;
}

/* ---------------------------------------------------------------------------
   13 · Ablauf — WAAGERECHTE Zeitleiste (Zeichen-Moment 3 von 4)
   Der Inhalt IST eine Reihenfolge, deshalb ist hier — und nur hier — nummeriert.
   Die Leiste laeuft quer statt senkrecht: die Arbeitsweise-Seite bekommt damit
   einen eigenen Rhythmus und liest sich nicht mehr wie die Liste der Startseite.
   --------------------------------------------------------------------------- */
.mg-zeitleiste {
  position: relative;
  /* Grad und Abstand der Nummer stehen als Variablen, weil die Leiste GENAU auf
     der Unterkante der Nummernzeile liegen muss — sonst treffen die Knoten die
     Linie nicht. Einmal geaendert, wandern Nummer, Knoten und Linie gemeinsam. */
  --mg-n-grad: clamp(2.4rem, 4.6vw, 4.25rem);
  --mg-n-abstand: clamp(0.9rem, 2vh, 1.4rem);
  --mg-etappen-abstand: clamp(1.25rem, 2.6vw, 2.25rem);
}
/* Sechs Spalten, seit der Ablauf sechs Schritte hat. Bei fünf Spalten fiel der
   sechste Schritt in eine zweite Zeile — mit einem einzelnen Knoten unter einer
   Linie, die dort gar nicht mehr lag. Die Leiste trägt so viele Spalten, wie
   Schritte da sind; passt der Text nicht mehr, stapelt der Bruchpunkt unten. */
.mg-zeitleiste__etappen {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--mg-etappen-abstand);
  list-style: none;
}
.mg-etappe {
  display: grid;
  /* Zeile 1 Nummer, Zeile 2 Knoten auf der Leiste, danach Titel und Text. */
  grid-template-rows: auto 0 auto auto;
  gap: 0;
  align-content: start;
}
.mg-etappe__n {
  font-family: var(--font-display);
  font-weight: 200;
  /* Die Nummer ist hier Grafik, nicht Beschriftung — deshalb dieser Grad. */
  font-size: var(--mg-n-grad);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--mg-rauch);
  font-variant-numeric: tabular-nums;
  padding-bottom: var(--mg-n-abstand);
}
/* Der Knoten sitzt exakt auf der Leiste (Zeile 2 ist 0 hoch). */
.mg-etappe__knoten {
  width: 9px;
  height: 9px;
  translate: -1px -50%;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
}
.mg-etappe__titel {
  font-size: var(--step-1);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-top: clamp(1rem, 2.2vh, 1.6rem);
}
.mg-etappe__text {
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: 1.6;
  margin-top: 0.6rem;
  /* Greift erst im gestapelten Zustand: in der Leiste ist die Spalte ohnehin
     schmaler, gestapelt lief die Zeile sonst über die volle Satzbreite. */
  max-width: 58ch;
}

/* Die Leiste selbst: Haarlinie auf Hoehe der Knotenzeile, quer ueber alle Spalten. */
.mg-zeitleiste__linie {
  position: absolute;
  /* Die Leiste endet AM LETZTEN KNOTEN, nicht am Satzrand — der Ablauf hört mit
     der Übergabe auf. Bei 5 Spalten sitzt der letzte Knoten bei 4/5 der Breite
     plus vier Spaltenabständen, rechts bleibt also 20% minus 0,8 Abstände. */
  inset-inline: 0 calc(20% - 0.8 * var(--mg-etappen-abstand));
  /* Unterkante der Nummernzeile = Mitte der Knotenzeile: Zeilenhoehe der Nummer
     (Grad × 0.9) plus deren Abstand nach unten. */
  top: calc(var(--mg-n-grad) * 0.9 + var(--mg-n-abstand));
  height: 2px;
  overflow: visible;
  pointer-events: none;
}
.mg-zeitleiste__linie svg { width: 100%; height: 2px; overflow: visible; display: block; }

/* Zwischen 900 und 1180px werden sechs Textspalten zu schmal (die Wörter reißen
   auseinander) — dort läuft die Leiste über zwei Zeilen zu je drei Schritten.
   Die gezeichnete Linie passt dann nicht mehr und wird ausgeblendet; die Knoten
   auf den Etappen tragen den Zusammenhang weiter. */
@media (min-width: 901px) and (max-width: 1180px) {
  .mg-zeitleiste__etappen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(2rem, 4vh, 3rem); }
  .mg-zeitleiste__linie { display: none; }
}

/* Unter 900px ist eine waagerechte Leiste nicht mehr lesbar — zurueck auf einen
   senkrechten Stapel, Nummer und Titel in einer Zeile. */
@media (max-width: 900px) {
  .mg-zeitleiste__linie { display: none; }
  .mg-zeitleiste__etappen { grid-template-columns: 1fr; gap: 0; }
  .mg-etappe {
    grid-template-columns: clamp(2.75rem, 9vw, 4.5rem) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(1rem, 3vw, 1.75rem);
    padding-block: clamp(1.4rem, 3.4vh, 2.4rem);
    border-top: 1px solid var(--mg-linie);
  }
  .mg-etappe:last-child { border-bottom: 1px solid var(--mg-linie); }
  .mg-etappe__n { grid-column: 1; grid-row: 1; font-size: var(--step-2); padding-bottom: 0; padding-top: 0.25rem; }
  .mg-etappe__knoten { display: none; }
  .mg-etappe__titel { grid-column: 2; grid-row: 1; padding-top: 0; }
  .mg-etappe__text { grid-column: 2; grid-row: 2; }
}

/* ---------------------------------------------------------------------------
   14 · Uebergabe — das Paket als versetztes Feld aus Kanten-Tafeln
   Bewusst NICHT die Haarlinien-Liste der Startseite: erste Tafel breit, die
   folgenden im Zweierraster. Hellere Flaeche = spuerbarer Sektionswechsel.
   --------------------------------------------------------------------------- */
.mg-paket-sekt { background: var(--surface); }
.mg-paket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  /* 1px Abstand + Rahmen je Tafel ergibt EIN Kantenraster statt doppelter Linien. */
  background: var(--mg-linie);
  border: 1px solid var(--mg-linie);
  list-style: none;
}
.mg-tafel {
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  background: var(--bg);
}
/* Die erste Tafel liegt quer über beide Spalten — und teilt sich dann selbst in
   zwei, damit die Breite getragen wird statt als leere Fläche danebenzustehen. */
.mg-tafel--breit {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.mg-tafel--breit .mg-tafel__zaehler { grid-column: 1; }
.mg-tafel--breit .mg-tafel__titel { grid-column: 1; }
.mg-tafel--breit .mg-tafel__text { grid-column: 2; grid-row: 1 / span 2; max-width: 52ch; }
@media (max-width: 720px) {
  .mg-tafel--breit { grid-template-columns: 1fr; }
  .mg-tafel--breit .mg-tafel__text { grid-column: 1; grid-row: auto; }
}
/* Auf Hover laeuft Licht an der Oberkante der Tafel entlang — dieselbe Geste
   wie die Lichtkante, hier vom Nutzer ausgeloest. */
.mg-tafel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, var(--mg-gold-tief), var(--mg-gold-licht) 45%, transparent);
  transition: width var(--dur-slow) var(--ease-out);
}
.mg-tafel:hover::after { width: 100%; }
.mg-tafel__zaehler {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.mg-tafel__titel {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.mg-tafel__text { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.62; max-width: 46ch; }
@media (max-width: 720px) { .mg-paket { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   15 · Studio — zwei gleichberechtigte Namen als Diptychon (ohne Porträts)
   --------------------------------------------------------------------------- */
.mg-duo__namen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--mg-linie);
  border-bottom: 1px solid var(--mg-linie);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.mg-duo__name {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  padding-block: clamp(1.75rem, 4.5vh, 3rem);
  padding-right: var(--space-md);
}
.mg-duo__name + .mg-duo__name {
  border-left: 1px solid var(--mg-linie);
  padding-left: clamp(1.25rem, 4vw, 3rem);
}
@media (max-width: 620px) {
  .mg-duo__namen { grid-template-columns: 1fr; }
  .mg-duo__name + .mg-duo__name { border-left: 0; border-top: 1px solid var(--mg-linie); padding-left: 0; }
}

/* Haltung: Überschrift hängt links, Begründung steht rechts. */
.mg-haltung { display: grid; }
.mg-satz {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-sm) clamp(1.75rem, 5vw, 5rem);
  padding-block: clamp(1.6rem, 4vh, 2.9rem);
  border-top: 1px solid var(--mg-linie);
}
.mg-haltung .mg-satz:last-child { border-bottom: 1px solid var(--mg-linie); }
.mg-satz h3 {
  font-size: clamp(1.25rem, 2.3vw, 1.85rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.15;
  max-width: 22ch;
}
.mg-satz p { color: var(--fg-muted); max-width: 60ch; }
@media (max-width: 860px) { .mg-satz { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   16 · Kontakt — Briefing-Formular, flach und ohne Kasten
   --------------------------------------------------------------------------- */
.mg-kontakt__gitter {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 900px) { .mg-kontakt__gitter { grid-template-columns: 1fr; gap: var(--space-xl); } }

.mg-kontakt__spalte { display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); align-content: start; }
.mg-notiz { display: grid; gap: 0.45rem; padding-top: 1rem; border-top: 1px solid var(--mg-linie); }
.mg-notiz p { color: var(--fg-muted); font-size: var(--step--1); line-height: 1.6; max-width: 40ch; }
/* Verweis auf die vollständigen Angaben — die stehen im Impressum, nicht hier. */
.mg-notiz a { color: var(--mg-silber); text-decoration: underline; text-underline-offset: 3px; }
.mg-notiz a:hover { color: var(--mg-gold-licht); }

.mg-form { display: grid; gap: clamp(1.35rem, 3.2vh, 2.1rem); }
/* align-content:start — sonst dehnen sich die Zeilen eines Feldes auf die Höhe
   des Nachbarfeldes, und Eingabefeld und Auswahlfeld stehen nicht mehr auf
   derselben Linie. */
.mg-feld { display: grid; gap: 0.5rem; align-content: start; }
.mg-feld > label, .mg-gruppe > legend {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mg-rauch);
  padding: 0;
}
.mg-feld :is(input, select, textarea) {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--fg);
  background: transparent;
  border: 0;
  /* Feldgrenze ist die EINZIGE sichtbare Begrenzung dieser Eingaben (kein Kasten,
     kein Hintergrund) — sie muss daher als Bedienelement WCAG 1.4.11 (3:1) selbst
     im Ruhezustand erfüllen. --mg-linie-stark (34% Silber) liegt auf Schwarz nur
     bei ~2:1 und reicht dafür nicht; 55% Silber liegt bei ~3,8:1. */
  border-bottom: 1px solid color-mix(in srgb, var(--mg-silber) 55%, transparent);
  border-radius: 0;
  padding: 0.7rem 0;
  width: 100%;
  transition: border-color var(--dur-base) var(--ease);
}
.mg-feld textarea { resize: vertical; min-height: 7.5rem; line-height: 1.6; }
.mg-feld :is(input, select, textarea):hover { border-bottom-color: var(--mg-silber); }
.mg-feld :is(input, select, textarea):focus { border-bottom-color: var(--accent); }
.mg-feld :is(input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Auswahlfeld: eigener Pfeil aus Tokens, damit es als aufklappbar erkennbar
   bleibt — ohne ihn sieht ein appearance:none-Select wie statischer Text aus. */
.mg-select { position: relative; display: block; }
.mg-select::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: -0.34rem;
  border-right: 1px solid var(--mg-silber);
  border-bottom: 1px solid var(--mg-silber);
  transform: rotate(45deg);
  pointer-events: none;
}
.mg-feld select { appearance: none; padding-right: 1.75rem; cursor: pointer; line-height: 1.5; }
.mg-feld :is(input, textarea) { line-height: 1.5; }
.mg-feld__hinweis { font-family: var(--font-body); font-size: var(--step--1); color: var(--mg-rauch); }

.mg-zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.35rem, 3vw, 2.5rem); }
@media (max-width: 620px) { .mg-zeile { grid-template-columns: 1fr; } }

.mg-gruppe { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.mg-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.mg-wahl label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--mg-linie);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--fg-muted);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.mg-wahl label:hover { border-color: var(--mg-linie-stark); color: var(--fg); }
.mg-wahl input { width: 1rem; height: 1rem; flex: none; accent-color: var(--accent); }
.mg-wahl label:has(input:checked) { border-color: var(--mg-linie-gold); color: var(--fg); }
@media (max-width: 620px) { .mg-wahl { grid-template-columns: 1fr; } }

.mg-zustimmung { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.mg-zustimmung input { width: 1rem; height: 1rem; margin-top: 0.35rem; accent-color: var(--accent); }
.mg-zustimmung label { font-family: var(--font-body); font-size: var(--step--1); color: var(--fg-muted); line-height: 1.55; }
.mg-zustimmung a { color: var(--mg-silber); text-decoration: underline; text-underline-offset: 3px; }
.mg-zustimmung a:hover { color: var(--mg-gold-licht); }

/* Fehler stehen UNTER dem betroffenen Feld, nicht gesammelt oben. */
.mg-feld--fehler :is(input, select, textarea) { border-bottom-color: var(--danger); }
.mg-feld__fehler {
  font-family: var(--font-body);
  font-size: var(--step--1);
  /* --danger ist auf Schwarz zu dunkel für AA — aufgehellt aus demselben Token. */
  color: color-mix(in srgb, var(--danger) 45%, #fff);
  line-height: 1.45;
}

.mg-hinweis {
  padding: 1rem 1.25rem;
  border: 1px solid var(--mg-linie-stark);
  border-left-width: 2px;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--fg);
}
.mg-hinweis--ok { border-left-color: var(--accent); }
.mg-hinweis--fehler { border-left-color: var(--danger); }
.mg-pflicht { color: var(--accent); }

/* ---------------------------------------------------------------------------
   17 · Abschluss-Band
   --------------------------------------------------------------------------- */
.mg-abschluss { background: var(--surface); }
.mg-abschluss__innen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: end;
}
.mg-abschluss h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1.1;
  max-width: 18ch;
}
.mg-abschluss p { color: var(--fg-muted); max-width: 48ch; margin-top: var(--space-sm); font-family: var(--font-body); }
@media (max-width: 780px) { .mg-abschluss__innen { grid-template-columns: 1fr; align-items: start; } }

/* ---------------------------------------------------------------------------
   18 · Fußzeile — hier steht das volle Logo mit Claim
   --------------------------------------------------------------------------- */
.site-footer { background: transparent; border-top: 0; margin-top: 0; }
/* Vier Spalten, seit die Leistungsübersicht dazugekommen ist: Marke, Seiten,
   Leistungen, Kontakt & Rechtliches. Mit den drei Spalten des Grundgerüsts
   rutschte die Kontaktspalte in eine zweite Zeile unter die Marke. */
.footer-grid { grid-template-columns: 1.15fr 0.7fr 1fr 1fr; padding-block: var(--mg-block-eng) var(--space-lg); }
@media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

.mg-footer-marke { display: block; max-width: 17rem; }
.mg-footer-marke img { width: 100%; height: auto; }
.mg-footer-notiz { margin-top: var(--space-md); color: var(--fg-muted); max-width: 34ch; font-family: var(--font-body); font-size: var(--step--1); line-height: 1.6; }

.footer-col h2 {
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--mg-rauch);
  margin-bottom: var(--space-sm);
}
.footer-col a { color: var(--fg-muted); font-family: var(--font-body); font-size: var(--step--1); padding: 0.3rem 0; }
.footer-col a:hover { color: var(--mg-gold-licht); }
/* Links MITTEN in einem Fließtextabsatz bleiben inline und unterstrichen —
   sonst reißt der Blocksatz der Adressangabe auseinander. */
.footer-col p a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 3px; }
.footer-col p { font-family: var(--font-body); font-size: var(--step--1); line-height: 1.7; }
.footer-bottom { border-top: 1px solid var(--mg-linie); color: var(--mg-rauch); font-family: var(--stack-inter); letter-spacing: 0.04em; }

/* Entwickler-Hinweis: --mg-rauch (#86868a) steht auf Schwarz bei 5.8:1 und wäre
   damit sauber. base.css dämpft die Zeile aber zusätzlich mit opacity: 0.85 —
   effektiv #727275 und nur noch 4.37:1, also UNTER den 4.5:1 der WCAG 2.2 AA
   (von Lighthouse am 03.08.2026 als einziger Kontrastfehler gemeldet).
   Deckkraft gehört deshalb hier auf 1; die Aufhellung beim Zeigen übernimmt
   die Farbe, sonst hätte der Hover-Zustand gar keine Wirkung mehr. */
.footer-credit { opacity: 1; }
.footer-credit:hover, .footer-credit:focus-visible { color: var(--mg-silber); }

/* ---------------------------------------------------------------------------
   19 · Rechtsseiten (Impressum, Datenschutz, Barrierefreiheit)
   --------------------------------------------------------------------------- */
/* Kein eigener Innenabstand: der umgebende .section liefert den Rhythmus schon —
   beides zusammen riss ein totes Loch zwischen Seitenkopf und erstem Absatz. */
/* 46rem ergaben auf mittelbreiten Fenstern ~87 Zeichen pro Zeile — für einen
   Rechtstext, den man wirklich liest, deutlich zu lang. 40rem bleiben unter 80. */
.prose { padding-block: 0; margin-inline: 0; max-width: 40rem; }
.prose h1 { font-family: var(--font-display); font-weight: 200; font-size: clamp(2.1rem, 5vw, 3.6rem); letter-spacing: -0.04em; }
.prose h2 { font-size: var(--step-2); font-weight: 200; letter-spacing: -0.02em; margin-top: var(--space-xl); }
.prose h3 { font-size: var(--step-1); font-weight: 400; margin-top: var(--space-md); }
.prose p, .prose li { font-family: var(--font-body); color: var(--fg-muted); line-height: 1.7; }
.prose a { color: var(--mg-silber); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--mg-gold-licht); }
.prose ul { display: grid; gap: 0.3rem; margin-top: var(--space-xs); }
.prose ul li { padding-left: 1.1rem; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.5rem; height: 1px; background: var(--mg-linie-stark); }

/* Fehlende Pflichtangaben müssen SICHTBAR fehlen, nicht plausibel aussehen. */
.mg-luecke {
  display: inline-block;
  color: var(--accent);
  border-bottom: 1px dashed var(--mg-linie-gold);
  font-family: var(--stack-inter);
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
   20 · 404
   --------------------------------------------------------------------------- */
.mg-404 { min-height: 62svh; display: grid; align-content: center; padding-block: var(--mg-block); }
.mg-404__titel {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.mg-404__wege { margin-top: clamp(2rem, 5vh, 3.5rem); max-width: 34rem; }

/* ---------------------------------------------------------------------------
   21 · Bewegung — sparsam, reduced-motion-fest
   Die Seite hat GENAU vier Zeichen-Momente (Hero-Strich, das drehende Zeichen,
   Prozesslinie, Abschluss-Trenner) und eine wandernde Lichtkante. Sonst nichts.
   --------------------------------------------------------------------------- */
.reveal { will-change: auto; }

@media (prefers-reduced-motion: no-preference) {
  /* Der Hero-Strich zeichnet sich beim LADEN, nicht beim Scrollen — er gehört
     schon ins erste Bild. Ruhezustand (.draw aus effects.css) ist der fertig
     gezeichnete Pfad, die Animation kommt nur additiv dazu. */
  .mg-hero .mg-strich .draw { animation: mg-zeichnen 1.5s var(--ease-out) 0.35s both; }
  .mg-hero__eyebrow { animation: mg-auf 0.7s var(--ease-out) both; }

  /* ---- Der Aufbau des Zeichens ------------------------------------------
     Reihenfolge: die Bühne blendet auf, das M kommt von links aus der Tiefe,
     das G kurz danach von rechts, beide kommen weich zum Stehen. Ein einziger
     Lichtreflex läuft darüber, dann geht der Körper ins Schweben über.

     KEIN opacity auf den Teilen selbst: eine Deckkraft unter 1 zwingt das
     Element zu transform-style: flat — die Flanken würden für die Dauer der
     Einblendung in eine Fläche zusammenfallen und beim Erreichen von 1 sichtbar
     aufspringen. Deshalb blendet die Ebene DARÜBER auf, außerhalb des
     3D-Kontexts, und die Teile bewegen sich rein über transform. */
  .mg-zeichen3d { animation: mg-auf-still 0.8s var(--ease-out) 0.1s both; }
  .mg-zeichen3d__teil--m { animation: mg-3d-fuegt-m 1.5s cubic-bezier(0.16, 0.86, 0.28, 1) 0.3s both; }
  .mg-zeichen3d__teil--g { animation: mg-3d-fuegt-g 1.6s cubic-bezier(0.16, 0.86, 0.28, 1) 0.46s both; }
  .mg-zeichen3d__glanz   { animation: mg-3d-glanz 1.5s var(--ease) 1.95s both; }
  /* Schweben und Schatten atmen gegenläufig: steigt der Körper, wird der
     Schatten größer und blasser. Erst das liest sich als Höhe im Raum. */
  .mg-zeichen3d__schwebe  { animation: mg-3d-schweben 15s var(--ease-soft, ease-in-out) 2.1s infinite alternate both; }
  .mg-zeichen3d__schatten { animation: mg-3d-schattenatmen 15s var(--ease-soft, ease-in-out) 2.1s infinite alternate both; }
  .mg-hero__satz > * { animation: mg-auf 0.7s var(--ease-out) both; }
  .mg-hero__satz > *:nth-child(1) { animation-delay: 0.05s; }
  .mg-hero__satz > *:nth-child(2) { animation-delay: 0.14s; }
  .mg-hero__satz > *:nth-child(3) { animation-delay: 0.26s; }
  .mg-hero__satz > *:nth-child(4) { animation-delay: 0.36s; }
  .mg-hero__satz > *:nth-child(5) { animation-delay: 0.46s; }
  .mg-hero__satz > *:nth-child(6) { animation-delay: 0.56s; }
}
@keyframes mg-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mg-auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Ohne Versatz: die Bühne des Zeichens darf sich nicht zusätzlich verschieben,
   die Teile bringen ihre Bewegung selbst mit. */
@keyframes mg-auf-still { from { opacity: 0; } to { opacity: 1; } }

/* Der Aufbau. Beide Teile kommen aus der Tiefe (negatives Z = weiter weg, die
   Perspektive macht sie dadurch kleiner) und aus entgegengesetzten Richtungen,
   mit wenigen Grad Drehung — nicht mehr, sonst kippt es ins Effekthafte. */
@keyframes mg-3d-fuegt-m {
  from { transform: translate3d(-13%, 5%, -280px) rotateY(15deg) rotateX(-6deg); }
  to   { transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg); }
}
@keyframes mg-3d-fuegt-g {
  from { transform: translate3d(15%, -4%, -340px) rotateY(-19deg) rotateX(4deg); }
  to   { transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg); }
}
/* Ein Streifen Licht, einmal quer über Gold und Silber. Danach nie wieder. */
@keyframes mg-3d-glanz {
  from       { background-position: 165% 0; opacity: 0; }
  22%, 74%   { opacity: 0.7; }
  to         { background-position: -65% 0; opacity: 0; }
}
/* Das Schweben: gut ein Prozent Höhe, zwei bis drei Grad. Bewusst so wenig,
   dass man es eher spürt als sieht. */
@keyframes mg-3d-schweben {
  from { transform: translate3d(0, 0.8%, 0) rotateY(-1.5deg) rotateX(0.6deg); }
  to   { transform: translate3d(0, -1%, 0) rotateY(1.6deg) rotateX(-0.7deg); }
}
@keyframes mg-3d-schattenatmen {
  from { transform: translate3d(1.5%, 6.4%, -150px) scale(1.02); opacity: 0.6; }
  to   { transform: translate3d(1.5%, 8.6%, -150px) scale(1.09); opacity: 0.44; }
}

/* Scrollkopplung: die Kamera fährt zurück, sobald man weiterliest. Das Zeichen
   wird kleiner und tritt zurück, der Satz bekommt die Bühne. Nativ über
   animation-timeline (läuft auf dem Compositor, kein Scroll-Listener) und nur
   dort, wo der Browser das kann — sonst passiert schlicht nichts. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .mg-hero__buehne {
      animation: mg-hero-kamera linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 72svh;
    }
  }
}
@keyframes mg-hero-kamera {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-2.2rem) scale(0.87); opacity: 0.5; }
}

/* ---------------------------------------------------------------------------
   22 · Sichtbarer Tastaturfokus über der ganzen Seite
   --------------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 0; }
.skip-link { border-radius: 0; font-family: var(--stack-inter); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; }

/* Auswahl in Markenfarbe, aber lesbar. */
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------------------
   23 · Cookie-Banner an die dunkle Bühne angleichen (Rechtstext bleibt unberührt)
   NUR Fläche und Satz — Wortlaut, Reihenfolge und Gleichrangigkeit der beiden
   Schaltflächen bleiben unangetastet (s. partials/consent.php).
   --------------------------------------------------------------------------- */
.consent-banner { background: var(--surface); border-top: 1px solid var(--mg-linie-stark); box-shadow: none; }
.consent-banner__text {
  font-family: var(--font-body);
  color: var(--fg-muted);
  /* Ohne Deckel lief die Zeile über ~90 Zeichen — auf JEDER Seite, weil das
     Banner überall eingebunden ist. */
  max-width: 36rem;
}

/* Unter 480px passten „Nur erforderliche" und „Alle akzeptieren" nicht mehr
   nebeneinander: der zweite Knopf wurde am rechten Rand abgeschnitten und las
   sich als „ALLE AK". Gestapelt bleiben beide gleich groß und gleich sichtbar —
   die Gleichrangigkeit ist Pflicht, nicht Geschmack. */
@media (max-width: 700px) {
  /* Auf dem Handy nahm das Banner ein Drittel der ersten Ansicht ein und
     verdeckte beide Schaltflächen des Heros. Kompakter gesetzt bleibt der
     Rechtstext vollständig und die Gleichrangigkeit unangetastet — es ändert
     sich nur, wie eng er gesetzt ist. */
  .consent-banner { padding: 0.9rem var(--gutter) 1rem; }
  .consent-banner__inner { gap: 0.75rem; }
  .consent-banner__text {
    font-size: 0.82rem;
    line-height: 1.45;
  }
  /* Beide Knöpfe nebeneinander, exakt gleich breit: gestapelt kosteten sie
     allein 120 px Höhe. Gleiche Spalte, gleiche Größe, gleiche Sichtbarkeit. */
  .consent-banner__aktionen {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
  }
  .consent-banner__aktionen .btn {
    width: 100%;
    white-space: normal;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    padding: 0.75em 0.6em;
  }
}

/* ---------------------------------------------------------------------------
   24 · Satzbreite und Wortüberlauf — zwei Regeln, die für die ganze Seite gelten
   --------------------------------------------------------------------------- */
/* Formularhinweise laufen sonst über die volle Formularbreite (~100 Zeichen). */
.mg-feld__hinweis, .mg-zustimmung label { max-width: 36rem; }

/* Deutsche Komposita werden NICHT umbrochen (s. Abschnitt 2) — dann muss der
   Kasten aber mindestens so breit sein wie das längste Wort, sonst ragt es
   heraus („Datenschutzerklärung" über eine Zeile von 16ch). min-width gewinnt in
   CSS gegen max-width und deckelt genau diesen Fall, ohne die Zeilenlänge sonst
   anzutasten. */
.mg-pagehead h1,
.mg-kopf__text h1, .mg-kopf__text h2,
.mg-grenze__satz, .mg-anriss h2, .mg-abschluss h2, .mg-satz h3 {
  min-width: min-content;
}

/* ---------------------------------------------------------------------------
   25 · Startseite — Positionierung, Nutzen, Projekte, Schrittleiste
   Vier Bausteine, die bewusst NICHT alle gleich aussehen: ein breites Textband,
   eine gesetzte Liste mit hängender Zahl, drei Kacheln mit Materialkante und
   eine flache Schrittleiste. Kein gemeinsames Kartenraster — die Reihe
   identischer Kästen ist genau das, was eine Seite beliebig aussehen lässt.
   --------------------------------------------------------------------------- */

/* --- Positionierung: Label in der Spur, Text in der Lesespur daneben. ------ */
.mg-position__innen {
  display: grid;
  grid-template-columns: var(--mg-spur) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
}
.mg-position__satz {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  letter-spacing: -0.038em;
  line-height: 1.04;
  max-width: 20ch;
  min-width: min-content;
}
.mg-position__satz + .mg-fliess { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
.mg-position__weiter { margin-top: clamp(1.4rem, 3vh, 2.2rem); }
@media (max-width: 760px) {
  .mg-position__innen { grid-template-columns: 1fr; gap: var(--space-sm); }
}

/* --- Register: die Kurzform als hängende Spur vor dem Namen. --------------- */
.mg-reg__kurz {
  grid-column: 1;
  align-self: start;
  font-family: var(--stack-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mg-rauch);
  padding-top: 0.55em;
  transition: color var(--dur-base) var(--ease);
}
.mg-reg:hover .mg-reg__kurz { color: var(--accent); }
/* Mit der Kurzform vorn braucht die Zeile eine Spalte mehr. */
.mg-register .mg-reg {
  grid-template-columns: var(--mg-spur) minmax(0, 1.1fr) minmax(0, 1.35fr) auto;
}
@media (max-width: 860px) {
  .mg-register .mg-reg { grid-template-columns: minmax(0, 1fr) auto; }
  .mg-reg__kurz { grid-column: 1; padding-top: 0; }
  .mg-reg__name { grid-column: 1 / -1; }
  .mg-reg__pfeil { grid-column: 2; grid-row: 1; align-self: start; }
  .mg-reg__text { grid-column: 1 / -1; }
}

/* --- Nutzen: gesetzte Liste, Zahl hängt außen in der Spur. ----------------- */
.mg-nutzen__liste {
  list-style: none;
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vh, 3rem) clamp(2rem, 6vw, 5rem);
}
.mg-nutzen__punkt {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.35rem clamp(0.9rem, 2vw, 1.4rem);
  padding-top: clamp(1rem, 2.2vh, 1.5rem);
  border-top: 1px solid var(--mg-linie);
}
.mg-nutzen__zahl {
  grid-row: 1 / span 2;
  font-family: var(--stack-inter);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding-top: 0.3em;
}
.mg-nutzen__punkt h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.18;
  min-width: min-content;
}
.mg-nutzen__punkt p {
  font-family: var(--font-body);
  color: var(--fg-muted);
  line-height: 1.6;
  max-width: 42ch;
}
@media (max-width: 760px) {
  .mg-nutzen__liste { grid-template-columns: 1fr; }
}

/* --- Projekte: Kacheln mit Materialkante statt Bildplatzhalter. ------------
   Es gibt noch keine Projektbilder. Statt graue Rechtecke zu zeigen, trägt
   jede Kachel eine schmale Metallkante — dieselbe Sprache wie das Zeichen.
   Sobald Bilder da sind, ersetzt ein <img> die Kante (s. EDITING-GUIDE.md). */
/* Die Spalte muss so breit sein, dass „Geschäftsausstattung" als ein Wort
   hineinpasst — deutsche Komposita werden nicht umbrochen (s. Abschnitt 2), ein
   zu schmales Raster schiebt den Titel sonst über die Kachelkante hinaus. */
.mg-projekte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.mg-projekt {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--mg-linie);
  color: inherit;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.mg-projekt:hover { border-color: var(--mg-linie-gold); }
/* Die Materialkante: oben eine Lichtkante aus Gold, die auf Hover durchläuft. */
.mg-projekt__marke {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mg-gold-tief), var(--mg-gold-licht) 40%, var(--mg-silber) 78%, transparent);
  opacity: 0.34;
  transform-origin: left;
  transform: scaleX(0.32);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease);
}
.mg-projekt:hover .mg-projekt__marke,
.mg-projekt:focus-visible .mg-projekt__marke { transform: scaleX(1); opacity: 0.8; }
.mg-projekt__status {
  justify-self: start;
  font-family: var(--stack-inter);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mg-rauch);
  border: 1px solid var(--mg-linie);
  padding: 0.3em 0.7em;
}
.mg-projekt--eigen .mg-projekt__status { color: var(--accent); border-color: var(--mg-linie-gold); }
.mg-projekt__kategorie {
  font-family: var(--stack-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mg-rauch);
  margin-top: 0.4rem;
}
.mg-projekt__titel {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  min-width: min-content;
  transition: color var(--dur-base) var(--ease);
}
.mg-projekt:hover .mg-projekt__titel { color: var(--mg-gold-licht); }
.mg-projekt__text {
  font-family: var(--font-body);
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: 1.62;
}

/* --- Schrittleiste: sechs Marken auf einer Linie, flach und ruhig. --------- */
.mg-schrittleiste {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: clamp(2rem, 5vh, 3.5rem);
  border-top: 1px solid var(--mg-linie);
}
.mg-schrittleiste li {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1rem, 2.4vh, 1.5rem) 0.6rem clamp(1rem, 2.4vh, 1.5rem) 0;
  position: relative;
}
/* Die Marke auf der Linie — kein Punkt, ein Strich. */
.mg-schrittleiste li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 1.6rem;
  height: 1px;
  background: var(--accent);
}
.mg-schrittleiste__zahl {
  font-family: var(--stack-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--mg-rauch);
}
.mg-schrittleiste__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
@media (max-width: 860px) {
  .mg-schrittleiste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .mg-schrittleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mg-mehr { margin-top: clamp(1.6rem, 3.5vh, 2.4rem); }

/* --- Zweite Schaltfläche: feine Goldkante statt gefüllter Fläche. ----------
   Der EINE gefüllte Goldknopf pro Ansicht bleibt „Projekt anfragen". Diese
   hier steht gleichberechtigt daneben, ohne ihm die Aufmerksamkeit zu nehmen. */
.btn--rand {
  background: transparent;
  color: var(--fg);
  /* Kräftiger als die Trennlinien der Seite: auf Schwarz verschwindet eine
     55-prozentige Goldkante, die Schaltfläche sah dadurch schwarz umrandet aus. */
  border: 1px solid color-mix(in srgb, var(--accent) 78%, transparent);
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.btn--rand:hover, .btn--rand:focus-visible {
  border-color: var(--accent);
  color: var(--mg-gold-licht);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---------------------------------------------------------------------------
   26 · Leistungsbereiche — sieben Abschnitte, sieben eigene Anschauungen
   Sieben gleiche Karten wären der Baukasten-Look. Stattdessen wechselt die
   Seite die Seiten (Text links / Bild rechts und zurück), und jede Anschauung
   kommt aus ihrem Gegenstand: Markenraster, Papier, Fensterrahmen, Körper,
   Formattafel, Oberflächengerüst, Ablaufkette. Alles aus Tokens gebaut.
   --------------------------------------------------------------------------- */
.mg-bereich { padding-block: var(--mg-block); border-top: 1px solid var(--mg-linie); }
.mg-bereich:first-child { border-top: 0; }
/* Jeder zweite Bereich steht auf der ruhigen Fläche — das gibt der langen Seite
   einen Takt, ohne dass ein einziges Element bunt werden müsste. */
.mg-bereich:nth-child(even) { background: var(--surface); }
.mg-bereich__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.mg-bereich:nth-child(even) .mg-bereich__bild { order: -1; }
/* Die Anschauung bleibt stehen, während der Text daneben läuft. Ohne das
   klebte bei den langen Bereichen (Web, Geschäftsausstattung) ein kurzes Bild
   oben und darunter stand eine halbe Bildschirmhöhe Leere. Die Kopfzeile ist
   4,75rem hoch — der Abstand hält das Bild frei darunter. */
@media (min-width: 901px) {
  .mg-bereich__bild { position: sticky; top: 6.5rem; }
}

.mg-bereich__spur { display: flex; align-items: baseline; gap: 0.9rem; }
.mg-bereich__nr {
  font-family: var(--stack-inter);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--accent);
}
.mg-bereich__text h2 {
  font-family: var(--font-display);
  font-weight: 200;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-top: clamp(0.7rem, 1.6vh, 1.1rem);
  min-width: min-content;
}
.mg-bereich__text .lead { margin-top: clamp(0.9rem, 2vh, 1.4rem); }
.mg-bereich__text .mg-fliess { margin-top: clamp(0.9rem, 2vh, 1.4rem); }

/* Der Ablauf im Webbereich: nummerierte Schritte, hängende Zahl. */
.mg-bereich__ablauf {
  list-style: none;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  display: grid;
  gap: 0.55rem;
}
.mg-bereich__ablauf li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0.8rem;
  font-family: var(--font-body);
  color: var(--fg-muted);
  line-height: 1.5;
  padding-top: 0.55rem;
  border-top: 1px solid var(--mg-linie);
}
.mg-bereich__ablauf li span {
  font-family: var(--stack-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--mg-rauch);
  padding-top: 0.28em;
}

/* Umfang: zweispaltige Aufzählung mit feinem Strich statt Punkt oder Icon. */
/* Zweispaltig, aber erst ab genug Platz: „Unternehmenspräsentationen" ist ein
   einziges Wort, und deutsche Komposita werden nicht umbrochen (s. Abschnitt 2).
   Bei starren zwei Spalten ragte genau dieses Wort auf Tablet-Breite über die
   Seitenkante hinaus. Mit auto-fit fällt die Liste vorher auf eine Spalte. */
.mg-bereich__umfang {
  list-style: none;
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  gap: 0.45rem clamp(1.2rem, 3vw, 2.4rem);
}
.mg-bereich__umfang li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--fg-muted);
}
.mg-bereich__umfang li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.75rem;
  height: 1px;
  background: var(--mg-linie-gold);
}
@media (max-width: 620px) {
  .mg-bereich__umfang { grid-template-columns: 1fr; }
}

.mg-bereich__hinweis {
  margin-top: clamp(1.4rem, 3vh, 2.2rem);
  padding-left: clamp(0.9rem, 2vw, 1.3rem);
  border-left: 2px solid var(--mg-linie-gold);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 52ch;
}

/* Der Verweis auf die technische Umsetzung. Er darf nicht wie Fremdwerbung
   aussehen — deshalb dieselbe Fläche und dieselben Kanten wie der Rest. */
.mg-may {
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  border: 1px solid var(--mg-linie);
  border-top: 2px solid var(--mg-linie-gold);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.mg-may__titel {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
  line-height: 1.2;
  min-width: min-content;
}
.mg-may__text {
  margin-top: 0.7rem;
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 56ch;
}
.mg-may__link { margin-top: 1rem; display: inline-block; }
.mg-may__offen {
  margin-top: 1rem;
  font-family: var(--stack-inter);
  font-size: var(--step--1);
  color: var(--mg-rauch);
}
.mg-may__offen code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--fg-muted);
}

/* --- Gemeinsamer Rahmen aller Anschauungen -------------------------------- */
.mg-schau {
  position: relative;
  border: 1px solid var(--mg-linie);
  background: color-mix(in srgb, var(--accent-ink) 40%, transparent);
  padding: clamp(1.2rem, 3vw, 2rem);
  min-height: 17rem;
}
.mg-bereich:nth-child(even) .mg-schau { background: color-mix(in srgb, var(--accent-ink) 55%, transparent); }

/* 1 · Markenraster: Zeichen mit Schutzraum, Farbproben, Schriftgrad. */
.mg-schau--marke { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); align-content: center; }
.mg-schau--marke__zeichen { position: relative; padding: 12%; }
.mg-schau--marke__zeichen img { width: 100%; height: auto; display: block; }
/* Der Schutzraum ist eine echte Regel aus dem Styleguide, kein Dekor. */
.mg-schau--marke__raum {
  position: absolute;
  inset: 6%;
  border: 1px dashed var(--mg-linie-stark);
}
.mg-schau--marke__werte { display: flex; align-items: center; gap: 0.6rem; }
.mg-schau__probe { width: 2.4rem; height: 2.4rem; border: 1px solid var(--mg-linie); }
.mg-schau__probe--gold { background: linear-gradient(140deg, var(--mg-gold-licht), var(--mg-gold-tief)); }
.mg-schau__probe--silber { background: linear-gradient(140deg, color-mix(in srgb, var(--mg-silber) 55%, white), var(--mg-silber)); }
.mg-schau__probe--tief { background: var(--accent-ink); }
.mg-schau__grad {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 200;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--fg-muted);
}

/* 2 · Papier: drei Blätter, räumlich gestaffelt. Sie liegen still. */
/* Die Bühne bekommt ein festes Seitenverhältnis, und die Blätter richten sich
   nach ihrer HÖHE (width: auto + aspect-ratio). An der Breite bemessen liefen
   die Hochformate sonst oben und unten aus dem Rahmen. overflow: clip hält den
   Rest drin, ohne die weichen Schatten abzuschneiden wie ein hidden mit
   Scrollkontext es täte. */
.mg-schau--papier {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  min-height: 18rem;
  perspective: 1100px;
  overflow: clip;
}
.mg-blatt {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 1rem;
  background: linear-gradient(160deg, var(--mg-papier-hell), var(--mg-papier-tief));
  box-shadow: 0 18px 40px -18px var(--mg-3d-schattenton);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mg-blatt--brief { height: 68%; width: auto; aspect-ratio: 1 / 1.414; transform: rotateY(15deg) rotateX(6deg) translate3d(-46%, -8%, 0); }
.mg-blatt--rechnung { height: 62%; width: auto; aspect-ratio: 1 / 1.414; transform: rotateY(11deg) rotateX(4deg) translate3d(22%, 4%, 40px); }
.mg-blatt--karte { height: 22%; width: auto; aspect-ratio: 85 / 55; transform: rotateY(7deg) rotateX(11deg) translate3d(6%, 118%, 95px); }
.mg-schau--papier:hover .mg-blatt--brief { transform: rotateY(15deg) rotateX(6deg) translate3d(-48%, -11%, 0); }
.mg-schau--papier:hover .mg-blatt--karte { transform: rotateY(7deg) rotateX(11deg) translate3d(8%, 114%, 105px); }
.mg-blatt__marke { width: 26%; height: 0.5rem; background: var(--mg-gold-tief); }
.mg-blatt__zeile { height: 3px; background: var(--mg-druck-blass); }
.mg-blatt__zeile--kurz { width: 58%; }
.mg-blatt__kopf { height: 0.55rem; width: 40%; background: var(--mg-druck); }
.mg-blatt__reihe { height: 3px; background: var(--mg-druck-blass); }
.mg-blatt__summe { height: 5px; width: 46%; justify-self: end; background: var(--mg-gold-tief); }
.mg-blatt__karte-name { height: 4px; width: 52%; background: var(--mg-druck); }
/* QR als Muster, nicht als Bild: ein echter Code wäre eine Falschangabe. */
.mg-blatt__qr {
  width: 2.2rem; height: 2.2rem; justify-self: end; margin-top: auto;
  background: conic-gradient(from 0deg at 50% 50%, var(--mg-druck-voll) 0 25%, transparent 0 50%, var(--mg-druck-voll) 0 75%, transparent 0);
  background-size: 33% 33%;
  border: 2px solid var(--mg-druck-voll);
}

/* 3 · Fensterrahmen: die Struktur einer Seite, keine Attrappe eines Screenshots. */
.mg-schau--fenster { padding: 0; overflow: hidden; }
.mg-fenster__leiste {
  display: flex; gap: 0.4rem; align-items: center;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--mg-linie);
}
.mg-fenster__leiste span { width: 0.5rem; height: 0.5rem; border: 1px solid var(--mg-linie-stark); }
.mg-fenster__inhalt { display: grid; gap: 1rem; padding: clamp(1rem, 2.6vw, 1.7rem); }
.mg-fenster__nav { display: flex; gap: 0.9rem; }
.mg-fenster__nav i { height: 4px; width: 2.6rem; background: var(--mg-linie-stark); }
.mg-fenster__nav i:first-child { background: var(--accent); width: 1.6rem; }
.mg-fenster__held { display: grid; gap: 0.6rem; padding-block: clamp(0.8rem, 2vh, 1.4rem); }
.mg-fenster__held b { height: 1.5rem; width: 76%; background: linear-gradient(90deg, var(--mg-silber), transparent 88%); opacity: 0.5; }
.mg-fenster__held em { height: 0.55rem; width: 52%; background: var(--mg-linie-stark); }
.mg-fenster__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.mg-fenster__raster s { display: block; height: 3.4rem; border: 1px solid var(--mg-linie); }
.mg-fenster__raster s:first-child { border-top: 2px solid var(--mg-linie-gold); }

/* 4 · Der Körper: dasselbe Verfahren wie im Hero, klein.
   overflow: clip ist hier PFLICHT: beim Aufbau kommen die Teile von außerhalb
   ihrer Ruhelage herein (das G aus 15 % rechts). Im Hero fängt das
   overflow: hidden der Sektion das ab — hier gäbe es sonst für die anderthalb
   Sekunden des Aufbaus einen waagerechten Überlauf der ganzen Seite.
   overflow-clip-margin lässt den weichen Schatten trotzdem austreten. */
.mg-schau--koerper {
  display: grid;
  place-items: center;
  padding: clamp(1.6rem, 4vw, 3rem);
  overflow: clip;
  overflow-clip-margin: 1.25rem;
}
.mg-schau--koerper .mg-zeichen3d { width: 100%; }

/* 5 · Formattafel: dieselbe Gestaltung in sechs Zuschnitten. */
.mg-schau--formate {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
  align-items: start;
}
.mg-format {
  position: relative;
  display: block;
  border: 1px solid var(--mg-linie-stark);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%);
}
.mg-format i {
  position: absolute;
  left: 0.4rem;
  bottom: 0.35rem;
  font-family: var(--stack-inter);
  font-style: normal;
  /* 0,55rem war mit knapp 9 px auch für eine Beschriftung zu klein zum Lesen. */
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.mg-format--hoch { grid-column: span 2; aspect-ratio: 9 / 16; }
.mg-format--quadrat { grid-column: span 2; aspect-ratio: 1; }
.mg-format--quer { grid-column: span 2; aspect-ratio: 16 / 9; }
.mg-format--breit { grid-column: span 3; aspect-ratio: 3 / 1; }
.mg-format--schmal { grid-column: span 1; aspect-ratio: 1 / 3; }
.mg-format--klein { grid-column: span 2; aspect-ratio: 4 / 3; }

/* 6 · Oberflächengerüst: Seitenspalte, Kennzahlen, Tabelle, Feld. */
.mg-schau--oberflaeche { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.9rem; }
.mg-ui__spalte { display: grid; align-content: start; gap: 0.6rem; padding-right: 0.9rem; border-right: 1px solid var(--mg-linie); }
.mg-ui__spalte i { height: 0.5rem; background: var(--mg-linie-stark); }
.mg-ui__spalte i:first-child { background: var(--accent); }
.mg-ui__haupt { display: grid; gap: 0.9rem; align-content: start; }
.mg-ui__kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.mg-ui__kennzahlen b { height: 2.8rem; border: 1px solid var(--mg-linie); border-top: 2px solid var(--mg-linie-gold); display: block; }
.mg-ui__tabelle { display: grid; gap: 0.45rem; }
.mg-ui__tabelle u { display: block; height: 0.55rem; background: var(--mg-linie); text-decoration: none; }
.mg-ui__tabelle u:nth-child(2) { width: 82%; }
.mg-ui__tabelle u:nth-child(3) { width: 91%; }
.mg-ui__tabelle u:nth-child(4) { width: 66%; }
.mg-ui__feld { height: 2.1rem; border: 1px solid var(--mg-linie-stark); border-bottom: 2px solid var(--accent); }

/* 7 · Ablaufkette: kein Roboter, kein Gehirn — ein Prozess mit Verzweigung. */
.mg-schau--ablaufbild { display: grid; align-content: center; }
.mg-kette { list-style: none; display: grid; }
.mg-kette li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0 0.75rem 1.6rem;
}
/* Die Verbindungslinie läuft durch alle Glieder, der Marker sitzt darauf. */
.mg-kette li::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mg-linie-stark);
}
.mg-kette li:first-child::before { top: 50%; }
.mg-kette li:last-child::before { bottom: 50%; }
.mg-kette li::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% - 0.32rem);
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--mg-linie-stark);
  background: var(--bg);
}
.mg-kette--ziel::after { border-color: var(--accent); background: var(--accent); }
.mg-kette span {
  font-family: var(--stack-inter);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border: 1px solid var(--mg-linie);
  padding: 0.45em 0.8em;
}
.mg-kette--zweig span + span { border-style: dashed; color: var(--mg-rauch); }
.mg-kette--ziel span { border-color: var(--mg-linie-gold); color: var(--accent); }

@media (max-width: 900px) {
  .mg-bereich__innen { grid-template-columns: 1fr; }
  /* Auf schmalen Schirmen steht die Anschauung IMMER zuerst — sie ist der
     Einstieg, der Text folgt. Der Seitenwechsel ergibt hier keinen Sinn mehr. */
  .mg-bereich:nth-child(even) .mg-bereich__bild { order: 0; }
  .mg-bereich__bild { order: -1; }
  .mg-schau { min-height: 13rem; }
  .mg-schau--papier { min-height: 15rem; }
}

/* ---------------------------------------------------------------------------
   27 · Restliche Bausteine — Datei-Feld, Projekte-Seite, Kategorienband
   --------------------------------------------------------------------------- */

/* Das Datei-Feld. Der native Knopf ist hellgrau und bringt seinen eigenen
   Baukasten-Look mit — ::file-selector-button holt ihn in die Sprache der
   Seite: Kante statt Fläche, Versalie statt Systemschrift. */
.mg-datei {
  font-family: var(--font-body);
  color: var(--fg-muted);
  padding-block: 0.55rem;
}
.mg-datei::file-selector-button {
  font-family: var(--stack-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  border-radius: 0;
  padding: 0.6em 1.1em;
  margin-right: 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease),
              background var(--dur-base) var(--ease);
}
.mg-datei::file-selector-button:hover {
  border-color: var(--accent);
  color: var(--mg-gold-licht);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Kategorienband der Projekte-Seite: eine Aufzählung dessen, was es gibt —
   bewusst KEIN Filter. Ein Filter über sechs Konzeptkacheln wäre Bedienung
   ohne Nutzen. */
.mg-kategorien {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  padding-bottom: clamp(1.2rem, 3vh, 1.8rem);
  border-bottom: 1px solid var(--mg-linie);
}
.mg-kategorien span {
  font-family: var(--stack-inter);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mg-rauch);
}

/* Projekte auf der eigenen Seite: größere Kacheln, mehr Luft. Auf der
   Startseite stehen dieselben Kacheln kleiner im Dreier-Anriss. */
.mg-projekt--gross { padding: clamp(1.7rem, 3.5vw, 2.6rem); min-height: 15rem; }
.mg-projekt--gross .mg-projekt__titel { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.mg-projekte__fuss {
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--mg-rauch);
  max-width: 62ch;
}

/* Ein <article> ist kein Link — die Kacheln auf der Projekte-Seite sind Inhalt,
   keine Ziele. Nur der Anriss auf der Startseite verlinkt hierher. */
.mg-projekt--gross { cursor: default; }