/* TOMORIS Managed GAL, landing page and security page (SPEC section 28).
   Redesign (BA-471): editorial and calm instead of the dark stage with glow and line grid. The page stands on the light ground of the
   brand (Cloud White), Core Blue is the ink and the colour of the two dark bands (the steps and the closing call) and of the panel
   behind the product picture, Fusion Orange only points: the main button, the step markers, the index of a section. Headlines in
   Nunito Sans capitals (brand manual, "Schriftdefinition"), the last line of the main headline light; small labels and indices in the
   mono face. Hairlines instead of shadows and boxes; the picture of the stage is the product itself (Pages/Landing/_Fenster.cshtml).
   Loaded only by the landing layout (Pages/Landing/_LandingLayout.cshtml), so no other page changes. Embedded in the assembly and
   served as /css/landing.css only on the customer host with the function LandingPage on (Pages/Landing/Stylesheet), never as a static
   file. Same rules as managedgal.css: only TOMORIS.Design tokens (no hex colours, no copied tokens, no own font-face or font family,
   no .tm-* rules); translucent colours are color-mix() of a token; own classes carry the prefix mg-lp-. Colour never carries a
   meaning alone: a word or an icon always stands next to it. Everything that moves is behind prefers-reduced-motion: no-preference. */

/* ---------- Page ---------- */
html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.mg-lp-body {
  --mg-lp-breite: 78rem;
  --mg-lp-rand: clamp(1.25rem, 5vw, 3rem);
  --mg-lp-linie: color-mix(in srgb, var(--tm-text-1) 11%, transparent);
  --mg-lp-linie-stark: color-mix(in srgb, var(--tm-text-1) 26%, transparent);
  --mg-lp-bandlinie: color-mix(in srgb, var(--tm-stage-ink) 16%, transparent);
  --mg-lp-eck: 6px;
  /* The panel behind the product picture: Core Blue; in the dark scheme the second stage tone (see below). */
  --mg-lp-feld: var(--tm-stage);
  margin: 0;
  min-height: 100vh;
  display: grid;
  /* minmax(0, 1fr): the column never grows to the widest unbreakable content (no sideways scroll at 390 px). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  background-color: var(--tm-bg);
  color: var(--tm-text-1);
  font-family: var(--tm-font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mg-lp-main { min-width: 0; }
.mg-lp-body a { color: var(--tm-accent-text); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.mg-lp-body h1,
.mg-lp-body h2,
.mg-lp-body h3 { margin: 0; color: inherit; line-height: 1.1; }
.mg-lp-unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Visible focus, at least 3 px; the token can only make it thicker. White on the dark bands. */
.mg-lp-body :where(a, button, summary, [tabindex]):focus-visible {
  outline: max(3px, var(--tm-focus-width)) solid var(--tm-focus-color, var(--tm-accent-text));
  outline-offset: var(--tm-focus-offset);
}
.mg-lp-band :focus-visible,
.mg-lp-schluss :focus-visible,
.mg-lp-fuss :focus-visible { outline-color: var(--tm-stage-ink); }

/* ---------- Header ---------- */
.mg-lp-kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: color-mix(in srgb, var(--tm-bg) 88%, transparent);
  border-bottom: 1px solid var(--mg-lp-linie);
  backdrop-filter: saturate(1.3) blur(16px);
}
.mg-lp-kopf__innen {
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: .85rem var(--mg-lp-rand);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mg-lp-marke,
.mg-lp-fuss__marke {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  flex: none;
  text-decoration: none;
}
.mg-lp-body .mg-lp-marke { color: var(--tm-text-1); }
.mg-lp-marke img,
.mg-lp-fuss__marke img { height: 1.7rem; width: auto; }
.mg-lp-marke__produkt {
  padding-left: .8rem;
  border-left: 1px solid var(--mg-lp-linie-stark);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
}
.mg-lp-marke__produkt span { color: var(--tm-accent-2-text); }

.mg-lp-kopf__nav { display: none; gap: 2rem; margin-inline: auto; }
.mg-lp-body .mg-lp-kopf__nav a {
  position: relative;
  color: var(--tm-text-2);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.mg-lp-body .mg-lp-kopf__nav a:hover { color: var(--tm-text-1); }
.mg-lp-kopf__nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 -.35rem 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
.mg-lp-kopf__nav a:hover::after { transform: scaleX(1); }
.mg-lp-kopf__aktionen { display: flex; align-items: center; gap: .5rem; flex: none; }
@media (min-width: 64rem) {
  .mg-lp-kopf__nav { display: flex; }
}

/* Language switch DE/EN (release 1.9.0, only while the English pages exist) and the note that portal and registration are German. */
.mg-lp-sprache { display: flex; align-items: center; gap: .15rem; margin-right: .35rem; }
.mg-lp-body .mg-lp-sprache a {
  padding: .3rem .4rem;
  border-radius: .25rem;
  color: var(--tm-text-2);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}
.mg-lp-body .mg-lp-sprache a:hover { color: var(--tm-text-1); }
.mg-lp-body .mg-lp-sprache a[aria-current="page"] { color: var(--tm-text-1); box-shadow: inset 0 -2px 0 currentColor; }
.mg-lp-sprachhinweis { margin-top: 1rem; color: var(--tm-text-2); font-size: .875rem; }

/* ---------- Buttons and links ---------- */
.mg-lp-body .mg-lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--mg-lp-eck);
  font: inherit;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
/* The main action in Fusion Orange. The fill stays an opaque colour: contrast checks measure background-color. */
.mg-lp-body .mg-lp-btn--haupt {
  background-color: var(--tm-accent-2);
  color: var(--tm-accent-2-ink);
}
.mg-lp-body .mg-lp-btn--haupt:hover { background-color: color-mix(in srgb, var(--tm-accent-2) 86%, var(--tm-text-1)); }
/* The second action next to it: an outline in the ink of the page. */
.mg-lp-body .mg-lp-btn--geist {
  background-color: transparent;
  border-color: var(--mg-lp-linie-stark);
  color: var(--tm-text-1);
}
.mg-lp-body .mg-lp-btn--geist:hover { border-color: var(--tm-text-1); }
/* A quiet action on the page: the edge that carries 3:1 (border-elevated). */
.mg-lp-body .mg-lp-btn--leise {
  background-color: transparent;
  border-color: var(--tm-border-elevated);
  color: var(--tm-text-1);
}
.mg-lp-body .mg-lp-btn--leise:hover { border-color: var(--tm-text-1); background-color: var(--tm-surface); }
.mg-lp-body .mg-lp-btn--klein {
  min-height: 2.5rem;
  padding: .45rem 1.05rem;
  font-size: .78rem;
  letter-spacing: .06em;
}

.mg-lp-body .mg-lp-textlink {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: .15rem;
  border-bottom: 1px solid currentColor;
  color: var(--tm-text-1);
  font-weight: 800;
  text-decoration: none;
}
.mg-lp-schluss .mg-lp-textlink { color: var(--tm-stage-ink); }

/* ---------- Eyebrow and index ---------- */
.mg-lp-eyebrow {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
  color: var(--tm-text-2);
  font-family: var(--tm-font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
/* Without an index the eyebrow starts with a short orange rule. */
.mg-lp-eyebrow:not(:has(.mg-lp-index))::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background-color: var(--tm-accent-2);
}
.mg-lp-index {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  color: var(--tm-accent-2-text);
  font-weight: 700;
}
.mg-lp-index::after {
  content: "";
  width: 2rem;
  height: 1px;
  background-color: var(--mg-lp-linie-stark);
}

/* ---------- Stage: light, the product on a Core Blue panel ---------- */
.mg-lp-buehne {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--tm-text-1);
  background-color: var(--tm-bg);
}
.mg-lp-buehne__innen {
  position: relative;
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) var(--mg-lp-rand) clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
.mg-lp-buehne__text { min-width: 0; }

/* Sized by the column, not by the window: the longest word must fit the text column. No automatic hyphenation; "Firmen-adressbuch"
   carries its one soft hyphen for narrow screens. The last line is light: the contrast of weight carries the accent, not a glow. */
.mg-lp-buehne h1 {
  margin: 0 0 1.75rem;
  color: var(--tm-text-1);
  font-size: clamp(2.2rem, .8rem + 5vw, 4rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: manual;
}
.mg-lp-zeile { display: block; }
.mg-lp-zeile--akzent { color: var(--tm-accent-text); font-weight: 300; letter-spacing: -.02em; }
.mg-lp-lead {
  max-width: 36rem;
  margin: 0 0 2.25rem;
  color: var(--tm-text-2);
  font-size: clamp(1.05rem, .98rem + .3vw, 1.2rem);
  line-height: 1.6;
}
.mg-lp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* The picture: on a phone a Core Blue panel of its own under the text. */
.mg-lp-szene {
  position: relative;
  min-width: 0;
  margin-inline: calc(-1 * var(--mg-lp-rand));
  padding: 2rem var(--mg-lp-rand) 2.5rem;
  background-color: var(--mg-lp-feld);
  box-shadow: inset 0 1px 0 var(--tm-stage-border), inset 0 -1px 0 var(--tm-stage-border);
}

/* The facts below the stage, on the surface, numbers light and large. */
.mg-lp-eckdaten-band {
  position: relative;
  z-index: 1;
  background-color: var(--tm-surface);
  border-top: 1px solid var(--mg-lp-linie);
  border-bottom: 1px solid var(--mg-lp-linie);
}
.mg-lp-eckdaten {
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: 0 var(--mg-lp-rand);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mg-lp-eckdaten li {
  min-width: 0;
  padding: 1.6rem 1.25rem 1.7rem 0;
}
.mg-lp-eckdaten strong {
  display: block;
  color: var(--tm-text-1);
  font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.9rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mg-lp-eckdaten span {
  display: block;
  margin-top: .5rem;
  color: var(--tm-text-2);
  font-family: var(--tm-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------- The product window (Pages/Landing/_Fenster.cshtml) ---------- */
.mg-lp-fenster { margin: 0; width: 100%; max-width: 46rem; margin-inline: auto; }
.mg-lp-fenster__weg {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.25rem;
  color: var(--tm-stage-text-2);
  font-family: var(--tm-font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mg-lp-fenster__dienst { color: var(--tm-stage-ink); font-weight: 700; }
.mg-lp-fenster__linie {
  position: relative;
  flex: 1;
  min-width: 1rem;
  height: 1px;
  background-color: color-mix(in srgb, var(--tm-stage-ink) 28%, transparent);
}
.mg-lp-fenster__punkt {
  position: absolute;
  top: -3px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--tm-stage-accent);
}
.mg-lp-fenster__rahmen {
  overflow: hidden;
  border-radius: 12px;
  background-color: var(--tm-surface);
  color: var(--tm-text-1);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tm-stage-ink) 12%, transparent),
    0 30px 60px -30px color-mix(in srgb, var(--tm-text-1) 70%, transparent);
  font-size: .8rem;
  line-height: 1.35;
}
.mg-lp-fenster__titel {
  display: flex;
  align-items: center;
  gap: .4rem;
  height: 2.3rem;
  padding: 0 .9rem;
  border-bottom: 1px solid var(--tm-border);
  background-color: var(--tm-surface-2);
}
.mg-lp-fenster__titel i { width: .55rem; height: .55rem; border-radius: 50%; background-color: var(--tm-border-strong); }
.mg-lp-fenster__titel span {
  margin-inline: auto;
  padding-right: 1.65rem;
  color: var(--tm-text-2);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.mg-lp-fenster__koerper { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 17rem; }
.mg-lp-fenster__ordner {
  display: none;
  flex-direction: column;
  gap: .15rem;
  padding: 1rem .65rem;
  border-right: 1px solid var(--tm-border);
  background-color: var(--tm-surface-2);
}
.mg-lp-fenster__gruppe {
  padding: 0 .55rem .55rem;
  color: var(--tm-text-3);
  font-family: var(--tm-font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mg-lp-fenster__eintrag {
  display: flex;
  font-size: .78rem;
  justify-content: space-between;
  gap: .5rem;
  padding: .45rem .55rem;
  border-radius: 4px;
  color: var(--tm-text-2);
  white-space: nowrap;
}
.mg-lp-fenster__eintrag--aktiv {
  background-color: var(--tm-accent-soft);
  box-shadow: inset 2px 0 0 var(--tm-accent-2);
  color: var(--tm-accent-soft-ink);
  font-weight: 800;
}
.mg-lp-fenster__eintrag b { font-family: var(--tm-font-mono); font-size: .66rem; font-weight: 500; }
.mg-lp-fenster__liste { margin: 0; padding: .55rem; list-style: none; display: grid; align-content: start; gap: .1rem; }
.mg-lp-fenster__person {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  padding: .5rem .6rem;
  border-radius: 6px;
}
.mg-lp-fenster__person--aktiv { background-color: var(--tm-surface-3); }
.mg-lp-fenster__kreis {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--tm-accent-soft);
  color: var(--tm-accent-soft-ink);
  font-family: var(--tm-font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.mg-lp-fenster__person:nth-child(3n+2) .mg-lp-fenster__kreis { background-color: var(--tm-accent-2-soft); color: var(--tm-accent-2-soft-ink); }
.mg-lp-fenster__person:nth-child(3n) .mg-lp-fenster__kreis { background-color: var(--tm-surface-3); color: var(--tm-text-1); }
.mg-lp-fenster__name { min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-lp-fenster__name small { display: block; margin-top: .1rem; color: var(--tm-text-2); font-size: .7rem; font-weight: 400; }
.mg-lp-fenster__karte {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.25rem 1.2rem;
  border-left: 1px solid var(--tm-border);
}
.mg-lp-fenster__kreis--gross { width: 3.2rem; height: 3.2rem; margin-bottom: .8rem; font-size: .85rem; }
.mg-lp-fenster__karte strong { font-size: .98rem; font-weight: 800; }
.mg-lp-fenster__rolle { margin-top: .15rem; color: var(--tm-text-2); font-size: .72rem; }
.mg-lp-fenster__karte dl { width: 100%; margin: 1rem 0 0; }
.mg-lp-fenster__karte dl div { padding: .45rem 0; border-top: 1px solid var(--tm-border-weak); }
.mg-lp-fenster__karte dt {
  color: var(--tm-text-3);
  font-family: var(--tm-font-mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mg-lp-fenster__karte dd { margin: .1rem 0 0; font-size: .76rem; white-space: nowrap; }
.mg-lp-fenster__status {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-top: 1px solid var(--tm-border);
  background-color: var(--tm-surface-2);
  color: var(--tm-text-2);
  font-size: .7rem;
}
.mg-lp-fenster__ok { width: .45rem; height: .45rem; border-radius: 50%; background-color: var(--tm-ok); }
.mg-lp-fenster__quelle { display: none; margin-left: auto; color: var(--tm-text-3); font-family: var(--tm-font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Sections ---------- */
.mg-lp-abschnitt {
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) var(--mg-lp-rand);
}
.mg-lp-abschnittkopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 4rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.mg-lp-abschnittkopf h2 {
  font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.mg-lp-fuehrung { max-width: 34rem; margin: 0; color: var(--tm-text-2); font-size: 1.08rem; }
.mg-lp-weiter { margin: 2.25rem 0 0; }

/* The symbols: a fine line in the ink of the text, without a coloured tile. */
.mg-lp-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--mg-lp-linie-stark);
  border-radius: 50%;
}
.mg-lp-symbol svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: var(--tm-text-1);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 01: what it does, as numbered lines with hairlines. */
.mg-lp-zeilen { margin: 0; padding: 0; list-style: none; counter-reset: mg-lp-zeile; }
.mg-lp-zeilen .mg-lp-karte {
  counter-increment: mg-lp-zeile;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .4rem 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--mg-lp-linie);
}
.mg-lp-zeilen .mg-lp-karte:last-child { border-bottom: 1px solid var(--mg-lp-linie); }
.mg-lp-zeilen .mg-lp-symbol { grid-row: span 2; }
.mg-lp-zeilen h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.25; }
.mg-lp-zeilen h3::before {
  content: counter(mg-lp-zeile, decimal-leading-zero);
  content: counter(mg-lp-zeile, decimal-leading-zero) / "";
  margin-right: .8rem;
  color: var(--tm-accent-2-text);
  font-family: var(--tm-font-mono);
  font-size: .75rem;
  font-weight: 500;
  vertical-align: .2em;
}
.mg-lp-zeilen p { margin: 0; color: var(--tm-text-2); max-width: 40rem; }

/* 02: the steps on the dark band. */
.mg-lp-band {
  color: var(--tm-stage-ink);
  background-color: var(--tm-stage);
  box-shadow: inset 0 1px 0 var(--tm-stage-border), inset 0 -1px 0 var(--tm-stage-border);
}
.mg-lp-band .mg-lp-eyebrow { color: var(--tm-stage-text-2); }
.mg-lp-band .mg-lp-index { color: var(--tm-stage-accent); }
.mg-lp-band .mg-lp-index::after { background-color: var(--mg-lp-bandlinie); }
.mg-lp-band .mg-lp-fuehrung { color: var(--tm-stage-text-2); }
.mg-lp-body .mg-lp-band a { color: var(--tm-stage-ink); }
.mg-lp-schritte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 3rem;
}
.mg-lp-schritte .mg-lp-karte {
  position: relative;
  min-width: 0;
  padding: 1.75rem 0 2.5rem;
  border-top: 1px solid var(--mg-lp-bandlinie);
}
/* The marker on the line: one orange square per step. */
.mg-lp-schritte .mg-lp-karte::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  background-color: var(--tm-stage-accent);
}
.mg-lp-schritte .mg-lp-symbol { display: none; }
.mg-lp-nummer {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--tm-stage-accent);
  font-family: var(--tm-font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
}
.mg-lp-schritte h3 { margin-bottom: .6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; }
.mg-lp-schritte p { margin: 0; color: var(--tm-stage-text-2); }

/* 03: what goes where, three columns; the middle one is TOMORIS and dark. */
.mg-lp-fluss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.mg-lp-fluss__box {
  position: relative;
  min-width: 0;
  padding: 1.75rem 1.6rem 1.6rem;
  border: 1px solid var(--mg-lp-linie);
  border-radius: var(--mg-lp-eck);
  background-color: var(--tm-surface);
}
.mg-lp-fluss__box--dienst {
  border-color: var(--tm-stage-border);
  background-color: var(--tm-stage);
  color: var(--tm-stage-ink);
}
.mg-lp-fluss__kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--mg-lp-linie); }
.mg-lp-fluss__kopf h3 {
  color: var(--tm-text-2);
  font-family: var(--tm-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mg-lp-fluss__kopf p { margin: .2rem 0 0; color: var(--tm-text-1); font-size: 1.05rem; font-weight: 800; }
.mg-lp-fluss__box--dienst .mg-lp-fluss__kopf { border-bottom-color: var(--mg-lp-bandlinie); }
.mg-lp-fluss__box--dienst .mg-lp-fluss__kopf h3 { color: var(--tm-stage-text-2); }
.mg-lp-fluss__box--dienst .mg-lp-fluss__kopf p { color: var(--tm-stage-ink); }
.mg-lp-fluss__box--dienst .mg-lp-symbol { border-color: var(--mg-lp-bandlinie); }
.mg-lp-fluss__box--dienst .mg-lp-symbol svg { stroke: var(--tm-stage-ink); }
.mg-lp-fluss ul,
.mg-lp-kasten ul,
.mg-lp-hinweise { margin: 0; padding: 0; list-style: none; color: var(--tm-text-2); }
.mg-lp-fluss li,
.mg-lp-kasten li,
.mg-lp-hinweise li { position: relative; margin: .55rem 0; padding-left: 1.4rem; }
.mg-lp-fluss li::before,
.mg-lp-kasten li::before,
.mg-lp-hinweise li::before {
  content: "";
  position: absolute;
  top: .78em;
  left: 0;
  width: .6rem;
  height: 1px;
  background-color: var(--tm-accent-2);
}
.mg-lp-fluss__box--dienst ul { color: var(--tm-stage-text-2); }
.mg-lp-fluss__box--dienst li::before { background-color: var(--tm-stage-accent); }

/* 04: prices on the surface band. */
.mg-lp-flaeche {
  background-color: var(--tm-surface);
  border-top: 1px solid var(--mg-lp-linie);
  border-bottom: 1px solid var(--mg-lp-linie);
}
.mg-lp-tarife {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.mg-lp-tarif {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: 2rem 1.75rem;
  border: 1px solid var(--mg-lp-linie);
  border-radius: var(--mg-lp-eck);
  background-color: var(--tm-bg);
}
.mg-lp-tarif__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.mg-lp-tarif__laufzeit {
  color: var(--tm-text-2);
  font-family: var(--tm-font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mg-lp-tarif h3 { margin-top: .5rem; font-size: 1.6rem; font-weight: 800; letter-spacing: -.015em; overflow-wrap: anywhere; }
.mg-lp-tarif p { margin: 0; color: var(--tm-text-2); }
.mg-lp-tarif__dienst { font-size: .9rem; }
.mg-lp-tarif__preis .mg-lp-tarif__betrag {
  color: var(--tm-text-1);
  display: block;
  margin-bottom: .2rem;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.mg-lp-tarif__notiz { font-size: .9rem; }
/* The cards of a row are equally high and their buttons stand on one line. */
.mg-lp-tarif > p:last-of-type { margin-bottom: 1rem; }
.mg-lp-tarif__wahl { margin-top: auto; }
.mg-lp-staffel {
  width: 100%;
  margin: .75rem 0 .35rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mg-lp-staffel caption {
  padding: 0 0 .5rem;
  color: var(--tm-text-2);
  font-size: .8125rem;
  text-align: start;
}
.mg-lp-staffel th {
  padding: .45rem .5rem .45rem 0;
  border-bottom: 1px solid var(--mg-lp-linie-stark);
  color: var(--tm-text-2);
  font-family: var(--tm-font-mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-align: start;
  text-transform: uppercase;
}
.mg-lp-staffel td {
  padding: .7rem .5rem .7rem 0;
  border-bottom: 1px solid var(--mg-lp-linie);
  color: var(--tm-text-2);
  vertical-align: top;
}
.mg-lp-staffel td:first-child { width: 44%; }
.mg-lp-staffel td + td { color: var(--tm-text-1); font-weight: 800; }
/* The first subscription is the recommended one: the card in Core Blue. */
.mg-lp-tarif--abo:first-child {
  border-color: var(--tm-stage-border);
  background-color: var(--tm-stage);
  color: var(--tm-stage-ink);
}
.mg-lp-tarif--abo:first-child p,
.mg-lp-tarif--abo:first-child .mg-lp-tarif__laufzeit,
.mg-lp-tarif--abo:first-child .mg-lp-staffel caption,
.mg-lp-tarif--abo:first-child .mg-lp-staffel th,
.mg-lp-tarif--abo:first-child .mg-lp-staffel td { color: var(--tm-stage-text-2); }
.mg-lp-tarif--abo:first-child .mg-lp-staffel td + td,
.mg-lp-tarif--abo:first-child .mg-lp-tarif__betrag { color: var(--tm-stage-ink); }
.mg-lp-tarif--abo:first-child .mg-lp-staffel th { border-bottom-color: color-mix(in srgb, var(--tm-stage-ink) 35%, transparent); }
.mg-lp-tarif--abo:first-child .mg-lp-staffel td { border-bottom-color: var(--mg-lp-bandlinie); }
.mg-lp-tarif--abo:first-child :focus-visible { outline-color: var(--tm-stage-ink); }
.mg-lp-hinweise { margin-top: 2.25rem; max-width: 62rem; font-size: .95rem; }
.mg-lp-hinweis {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--mg-lp-linie);
  border-radius: var(--mg-lp-eck);
  background-color: var(--tm-bg);
}
.mg-lp-hinweis p { margin: 0; color: var(--tm-text-2); }

/* The free trial above the prices, when /start offers one: the first way in. */
.mg-lp-testband {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 2.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  padding: 1.6rem 1.75rem;
  border: 1px solid var(--mg-lp-linie);
  border-left: 3px solid var(--tm-accent-2);
  border-radius: 0 var(--mg-lp-eck) var(--mg-lp-eck) 0;
  background-color: var(--tm-accent-2-soft);
}
.mg-lp-testband p { margin: 0; color: var(--tm-text-2); max-width: 62ch; }
.mg-lp-testband .mg-lp-testband__titel { margin-bottom: .35rem; color: var(--tm-text-1); font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
@media (min-width: 48rem) {
  .mg-lp-testband { grid-template-columns: minmax(0, 1fr) auto; }
}

/* 05: security in short, four points under a strong rule. */
.mg-lp-punkte {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem 2rem;
}
.mg-lp-punkte li { min-width: 0; padding-top: 1.35rem; border-top: 2px solid var(--tm-text-1); }
.mg-lp-punkte strong { display: block; margin-bottom: .55rem; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.mg-lp-punkte span { color: var(--tm-text-2); }
.mg-lp-punkte .tm-mono { color: var(--tm-text-1); }

/* 06: questions as an index of lines that open. */
.mg-lp-fragen { display: grid; }
.mg-lp-kasten { border-top: 1px solid var(--mg-lp-linie); }
.mg-lp-kasten:last-child { border-bottom: 1px solid var(--mg-lp-linie); }
.mg-lp-kasten summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  color: var(--tm-text-1);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.mg-lp-kasten summary::-webkit-details-marker { display: none; }
.mg-lp-kasten summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--mg-lp-linie-stark);
  border-radius: 50%;
  color: var(--tm-text-1);
  font-family: var(--tm-font-mono);
  font-size: 1rem;
  font-weight: 400;
}
.mg-lp-kasten summary:hover::after { border-color: var(--tm-text-1); }
.mg-lp-kasten[open] summary::after { transform: rotate(45deg); }
.mg-lp-kasten > :not(summary) { margin: 0 0 1.35rem; }
.mg-lp-kasten p { margin: 0 0 .75rem; color: var(--tm-text-2); max-width: 70ch; }
/* The honest box opens the list in the soft orange of the brand. */
.mg-lp-kasten--ehrlich {
  margin-bottom: 1rem;
  padding: 0 1.5rem;
  border: 0;
  border-left: 2px solid var(--tm-accent-2);
  border-radius: 0 var(--mg-lp-eck) var(--mg-lp-eck) 0;
  background-color: var(--tm-accent-2-soft);
}
.mg-lp-kasten--ehrlich summary { color: var(--tm-accent-2-soft-ink); }
.mg-lp-kasten--ehrlich + .mg-lp-kasten { border-top: 1px solid var(--mg-lp-linie); }

/* ---------- Closing band ---------- */
.mg-lp-schluss {
  color: var(--tm-stage-ink);
  background-color: var(--tm-stage);
  box-shadow: inset 0 1px 0 var(--tm-stage-border);
}
.mg-lp-schluss__innen {
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) var(--mg-lp-rand);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  align-items: end;
}
.mg-lp-schluss h2 {
  color: var(--tm-stage-ink);
  font-size: clamp(2rem, 1rem + 3.4vw, 3.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.mg-lp-schluss h2 span { display: block; }
.mg-lp-schluss .mg-lp-zeile--akzent { color: var(--tm-stage-accent); font-weight: 300; }

/* ---------- Security page ---------- */
.mg-lp-buehne--seite .mg-lp-buehne__innen { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.mg-lp-buehne--seite { border-bottom: 1px solid var(--mg-lp-linie); }
.mg-lp-dok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem 4rem; align-items: start; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.mg-lp-dok__inhalt { min-width: 0; padding-top: 1rem; border-top: 2px solid var(--tm-text-1); }
.mg-lp-dok__inhalt h2 {
  margin-bottom: .9rem;
  color: var(--tm-text-2);
  font-family: var(--tm-font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mg-lp-dok__inhalt ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .5rem; }
.mg-lp-dok__inhalt li::marker { color: var(--tm-accent-2-text); font-family: var(--tm-font-mono); font-size: .8rem; }
.mg-lp-body .mg-lp-dok__inhalt a { color: var(--tm-text-1); font-weight: 700; text-decoration: none; }
.mg-lp-body .mg-lp-dok__inhalt a:hover { color: var(--tm-accent-text); text-decoration: underline; }
.mg-lp-dok__text { min-width: 0; display: grid; }
.mg-lp-dok__teil { min-width: 0; padding: 2.25rem 0 2.5rem; border-top: 1px solid var(--mg-lp-linie); }
.mg-lp-dok__teil:first-child { padding-top: 0; border-top: 0; }
.mg-lp-dok__teil .mg-lp-eyebrow { margin-bottom: .75rem; }
.mg-lp-dok__teil h2 { margin-bottom: 1.1rem; font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.2rem); font-weight: 800; line-height: 1.1; letter-spacing: -.015em; }
.mg-lp-dok__teil p { max-width: 72ch; margin: 0 0 1rem; color: var(--tm-text-2); }
.mg-lp-dok__teil > :last-child { margin-bottom: 0; }
.mg-lp-dok__recht { margin: .5rem 0 0; color: var(--tm-text-2); }
.mg-lp-liste { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; color: var(--tm-text-2); max-width: 80ch; }
.mg-lp-liste li::marker { color: var(--tm-accent-2); }

/* Permissions and fields: name and meaning on the left, the use on the right; one column on a narrow screen. */
.mg-lp-facts { margin: 0 0 1rem; display: grid; }
.mg-lp-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid var(--mg-lp-linie);
}
.mg-lp-facts > div:first-child { border-top: 0; padding-top: 0; }
.mg-lp-facts dt { font-weight: 700; overflow-wrap: anywhere; }
.mg-lp-facts dt .mg-hint { font-weight: 400; margin-top: 2px; }
.mg-lp-facts dd { margin: 0; color: var(--tm-text-2); }

.mg-lp-route { margin: 0; padding-left: 1.4rem; display: grid; gap: .9rem; color: var(--tm-text-2); max-width: 80ch; }
.mg-lp-route li::marker { color: var(--tm-accent-2-text); font-weight: 900; }
.mg-lp-route__weg { display: block; color: var(--tm-text-1); font-weight: 800; }

/* ---------- Footer ---------- */
.mg-lp-fuss { background-color: var(--tm-stage); color: var(--tm-stage-text-2); font-size: .9rem; }
.mg-lp-fuss__innen {
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: 3.5rem var(--mg-lp-rand) 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  border-top: 1px solid var(--mg-lp-bandlinie);
}
.mg-lp-fuss .mg-lp-fuss__marke { color: var(--tm-stage-ink); }
.mg-lp-fuss .mg-lp-marke__produkt { border-left-color: var(--mg-lp-bandlinie); }
.mg-lp-fuss .mg-lp-marke__produkt span { color: var(--tm-stage-accent); }
.mg-lp-fuss p { max-width: 30rem; margin: .9rem 0 0; }
.mg-lp-fuss nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .6rem 1.5rem;
}
.mg-lp-body .mg-lp-fuss nav a { color: var(--tm-stage-ink); font-weight: 700; text-decoration: none; }
.mg-lp-body .mg-lp-fuss nav a:hover { color: var(--tm-stage-accent); text-decoration: underline; }
.mg-lp-fuss__zeile {
  max-width: var(--mg-lp-breite);
  margin: 0 auto;
  padding: 1.1rem var(--mg-lp-rand) 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--tm-stage-ink) 10%, transparent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  font-family: var(--tm-font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* The colour scheme switch of TOMORIS.Design keeps its own type. */
.mg-lp-fuss__farbe { font-family: var(--tm-font); font-size: .8125rem; font-weight: 600; letter-spacing: normal; text-transform: none; }
/* On the footer, which is dark in both schemes, the switch takes the stage tokens (review finding: in the light scheme it was the
   light pill of the component, and the white focus ring of the footer stood on it at about 1.1:1). Its edge has 3:1 against the
   footer, its words more than 8:1, the white focus ring more than 13:1 against the pill; the pressed button is lighter and white. */
.mg-lp-fuss .mg-lp-farbschalter { background-color: var(--tm-stage-2); border-color: var(--tm-stage-border); }
.mg-lp-fuss .mg-lp-farbschalter > button { color: var(--tm-stage-text-2); }
.mg-lp-fuss .mg-lp-farbschalter > button[aria-pressed="true"] {
  background-color: color-mix(in srgb, var(--tm-stage-link) 50%, var(--tm-stage-2));
  color: var(--tm-stage-ink);
}
.mg-lp-fuss .mg-lp-farbschalter > button:hover:not([aria-pressed="true"]) { color: var(--tm-stage-ink); }

/* ---------- Wider screens ---------- */
@media (min-width: 36rem) {
  .mg-lp-fenster__koerper { grid-template-columns: 9rem minmax(0, 1fr); }
  .mg-lp-fenster__ordner { display: flex; }
  .mg-lp-fenster__quelle { display: inline; }
}
@media (min-width: 48rem) {
  .mg-lp-eckdaten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mg-lp-eckdaten li + li { padding-left: 1.5rem; border-left: 1px solid var(--mg-lp-linie); }
  .mg-lp-schritte,
  .mg-lp-punkte,
  .mg-lp-tarife { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-lp-fuss__innen { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .mg-lp-facts > div { grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); }
}
@media (min-width: 56rem) {
  .mg-lp-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-lp-schluss__innen { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 64rem) {
  .mg-lp-buehne__innen { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3.5rem; min-height: 38rem; }
  .mg-lp-buehne--seite .mg-lp-buehne__innen { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .mg-lp-buehne--seite h1 { font-size: clamp(2.4rem, 1rem + 3.6vw, 4rem); }
  /* The stage splits: text on the light ground, the product on a Core Blue panel that starts at the picture column and runs to the
     right edge of the window (clipped by the stage; the facts band lies above it). */
  .mg-lp-szene { align-self: stretch; display: flex; align-items: center; margin: 0; padding: 3.5rem 0 3.5rem 3rem; background: none; box-shadow: none; }
  .mg-lp-szene::before {
    content: "";
    position: absolute;
    inset: -14rem -100vw -14rem 0;
    z-index: -1;
    background-color: var(--mg-lp-feld);
    box-shadow: inset 1px 0 0 var(--tm-stage-border);
  }
  .mg-lp-abschnittkopf { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  /* 01 and 06: the head stays on the left while the lines pass on the right. */
  .mg-lp-abschnitt--seitlich { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5rem; align-items: start; }
  .mg-lp-abschnitt--seitlich .mg-lp-abschnittkopf { position: sticky; top: 7rem; grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: 0; }
  .mg-lp-fluss { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem; }
  /* The arrow between the columns says the direction. */
  .mg-lp-fluss__box:not(:last-child)::after {
    content: "→";
    content: "→" / "";
    position: absolute;
    top: 2.6rem;
    right: -2.3rem;
    color: var(--tm-accent-2-text);
    font-family: var(--tm-font-mono);
    font-size: 1.6rem;
    line-height: 1;
  }
  .mg-lp-tarife { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-lp-punkte { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mg-lp-dok { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  .mg-lp-dok__inhalt { position: sticky; top: 6.5rem; }
}

/* In the dark scheme the stage is nearly the ground (way B of TOMORIS.Design: the edge carries it), so the panel behind the product
   takes the second stage tone: the picture keeps its place. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="hell"]) .mg-lp-body { --mg-lp-feld: var(--tm-stage-2); }
}
[data-theme="dunkel"] .mg-lp-body { --mg-lp-feld: var(--tm-stage-2); }

@media (min-width: 80rem) {
  .mg-lp-fenster__koerper { grid-template-columns: 9rem minmax(0, 1fr) 12.5rem; }
  .mg-lp-fenster__karte { display: flex; }
}

/* ---------- Phones ---------- */
@media (max-width: 47.99rem) {
  .mg-lp-eckdaten li:nth-child(2n) { padding-left: 1.25rem; border-left: 1px solid var(--mg-lp-linie); }
  .mg-lp-eckdaten li:nth-child(-n+2) { border-bottom: 1px solid var(--mg-lp-linie); }
}
@media (max-width: 34rem) {
  .mg-lp-kopf__innen { gap: .5rem; padding-block: .6rem; }
  /* The brand stacks (logo over the product name), so both ways in fit next to it. */
  .mg-lp-kopf .mg-lp-marke { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .mg-lp-kopf .mg-lp-marke img { height: 1.25rem; }
  .mg-lp-kopf .mg-lp-marke__produkt { padding-left: 0; border-left: 0; font-size: .68rem; letter-spacing: .1em; line-height: 1.2; }
  .mg-lp-kopf__aktionen { gap: .4rem; }
  .mg-lp-sprache { margin-right: 0; }
  .mg-lp-body .mg-lp-sprache a { padding: .25rem .2rem; font-size: .68rem; letter-spacing: .04em; }
  .mg-lp-body .mg-lp-kopf .mg-lp-btn--klein { min-height: 2.5rem; padding: .4rem .7rem; font-size: .72rem; letter-spacing: .04em; }
  .mg-lp-eckdaten li { padding-block: 1.2rem 1.3rem; }
  .mg-lp-tarif { padding: 1.5rem 1.25rem; }
  .mg-lp-staffel td,
  .mg-lp-staffel th { padding-right: .35rem; }
  .mg-lp-zeilen .mg-lp-karte { grid-template-columns: minmax(0, 1fr); }
  .mg-lp-zeilen .mg-lp-symbol { display: none; }
  .mg-lp-fenster__weg { gap: .45rem; font-size: .56rem; letter-spacing: .06em; }
}

/* ---------- Forced colours: the edges stay visible ---------- */
@media (forced-colors: active) {
  .mg-lp-body .mg-lp-btn--haupt,
  .mg-lp-fenster__rahmen,
  .mg-lp-fluss__box,
  .mg-lp-tarif,
  .mg-lp-kasten--ehrlich { border: 2px solid ButtonText; }
}

/* ---------- Motion, only on request ---------- */
@keyframes mg-lp-auftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* The end state does not clip to the line box: with line height .98 the accents of capitals reach above it. */
@keyframes mg-lp-zeile {
  from { opacity: 0; transform: translateY(.4em); clip-path: inset(-.5em -.2em 100% -.2em); }
  to { opacity: 1; transform: none; clip-path: inset(-.5em -.2em -.3em -.2em); }
}
@keyframes mg-lp-fahrt { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
@keyframes mg-lp-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tm-ok) 45%, transparent); } 50% { box-shadow: 0 0 0 5px transparent; } }

@media (prefers-reduced-motion: no-preference) {
  .mg-lp-body .mg-lp-btn,
  .mg-lp-kasten summary::after,
  .mg-lp-kopf__nav a::after,
  .mg-lp-pfeil {
    transition:
      transform var(--tm-dur-slow) var(--tm-ease),
      background-color var(--tm-dur-fast) var(--tm-ease),
      border-color var(--tm-dur-fast) var(--tm-ease);
  }
  .mg-lp-pfeil { display: inline-block; }
  .mg-lp-btn:hover .mg-lp-pfeil { transform: translate(3px, -3px); }
  .mg-lp-textlink:hover .mg-lp-pfeil { transform: translateX(4px); }

  .mg-lp-buehne h1 .mg-lp-zeile { animation: mg-lp-zeile .9s var(--tm-ease) both; }
  .mg-lp-buehne h1 .mg-lp-zeile:nth-child(2) { animation-delay: .1s; }
  .mg-lp-buehne h1 .mg-lp-zeile:nth-child(3) { animation-delay: .2s; }
  .mg-lp-buehne .mg-lp-eyebrow,
  .mg-lp-lead { animation: mg-lp-auftauchen .8s var(--tm-ease) .25s both; }
  .mg-lp-buehne .mg-lp-cta { animation: mg-lp-auftauchen .8s var(--tm-ease) .4s both; }
  .mg-lp-fenster__rahmen { animation: mg-lp-auftauchen 1s var(--tm-ease) .3s both; }
  .mg-lp-fenster__person { animation: mg-lp-auftauchen .6s var(--tm-ease) both; }
  .mg-lp-fenster__person:nth-child(1) { animation-delay: .7s; }
  .mg-lp-fenster__person:nth-child(2) { animation-delay: .8s; }
  .mg-lp-fenster__person:nth-child(3) { animation-delay: .9s; }
  .mg-lp-fenster__person:nth-child(4) { animation-delay: 1s; }
  .mg-lp-fenster__person:nth-child(5) { animation-delay: 1.1s; }
  .mg-lp-fenster__person:nth-child(6) { animation-delay: 1.2s; }
  .mg-lp-fenster__punkt { animation: mg-lp-fahrt 2.8s cubic-bezier(.6, 0, .4, 1) infinite; }
  .mg-lp-fenster__punkt--2 { animation-delay: 1.4s; }
  .mg-lp-fenster__ok { animation: mg-lp-puls 2.4s ease-in-out 3; }
}