/* ==========================================================================
   Marktplatz Deutschland - Basis, Layout und Komponenten
   Setzt tokens.css voraus. Breakpoints bewusst auf drei reduziert:
   640 / 1024 / 1280 - siehe mpd-analyse/03-interaktion-und-mobile.md
   ========================================================================== */

/* ---------- Reset ---------- */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-fg-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* overflow-wrap verhindert, dass lange Komposita aus der Box laufen.
   hyphens bewusst NICHT global: im Hero zerschneidet es sonst gut lesbare
   Woerter. Nur dort einschalten, wo es wirklich noetig ist. */
h1, h2, h3, h4 {
  margin: 0; color: var(--color-fg); font-weight: var(--fw-bold);
  overflow-wrap: break-word;
}
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Fokus: sichtbarer Umriss statt box-shadow - bleibt im Kontrastmodus erhalten */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Hilfsklassen ---------- */

.mpd-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 640px) { .mpd-container { padding-inline: var(--sp-4); } }

.mpd-measure { max-width: var(--measure); margin-inline: auto; }

.mpd-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Skip-Link - Pflichtbaustein für BITV 2.0 */
.mpd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
}
.mpd-skip:focus {
  left: var(--sp-3); top: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  background: var(--brand-teal); color: #fff;
  border-radius: .5rem; text-decoration: none;
}

/* Verlaufstext - in der Referenz durchgängig für hervorgehobene Wörter */
.mpd-gradient-text {
  background-image: var(--theme-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mpd-gradient-text--brand {
  background-image: linear-gradient(90deg, var(--brand-cyan), var(--brand-navy));
}

/* Glaskarte - das prägende Kartenmuster der Referenz */
.mpd-glass {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
@media (hover: hover) {
  .mpd-glass--interactive { transition: background-color .3s, border-color .3s, box-shadow .3s, transform .3s; }
  .mpd-glass--interactive:hover {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(0, 129, 139, .2);
    box-shadow: var(--shadow-hover);
  }
}

/* ---------- Buttons ---------- */

.mpd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-1);
  min-height: 48px;
  padding: var(--sp-2) var(--sp-4);
  border: 0; border-radius: var(--r-pill);
  font: var(--fw-medium) var(--fs-lg)/1.55 var(--font-sans);
  color: #fff; text-decoration: none;
  background-image: var(--theme-gradient);
  cursor: pointer;
}
/* Folgt dem Seitenthema: teal auf der Verwaltungsseite, navy/cyan auf der
   Unternehmensseite - so hält es die Referenz. */
.mpd-btn--brand { background-image: var(--theme-gradient); }

/* Die Startseite gehoert keiner Zielgruppe und nutzt deshalb einen eigenen
   Verlauf, der beide Themen verbindet (gemessen: teal -> navy). */
.mpd-btn--duo { background-image: linear-gradient(90deg, var(--brand-teal), var(--brand-navy)); }

/* Zweitrangige Aktion: Umriss statt Fuellung. Gemessen an "Informiert bleiben"
   auf /unternehmen (348x64, 2px Rand in navy, transparenter Grund).
   Ohne diese Variante staenden dort zwei gleichrangige Hauptaktionen
   nebeneinander - der Nutzer sieht dann nicht, was gemeint ist. */
.mpd-btn--outline {
  background-image: none;
  background-color: transparent;
  border: 2px solid var(--theme-primary);
  color: var(--theme-primary);
}
@media (hover: hover) {
  .mpd-btn--outline:hover {
    background-color: color-mix(in oklab, var(--theme-primary) 5%, transparent);
  }
}

/* "Mehr anzeigen" unter dem FAQ: deckende Farbe statt Verlauf, kleiner als die
   Hauptaktionen (gemessen 170x56, Innenabstand 8/32, Schrift 16/24). */
.mpd-btn--flat {
  background-image: none;
  background-color: var(--theme-primary);
  color: #fff;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-6);
  font-size: var(--fs-base);
}
@media (hover: hover) {
  .mpd-btn--flat:hover { background-color: var(--theme-secondary); }
}
.mpd-btn--lg    { min-height: 64px; font-size: var(--fs-xl); }
.mpd-btn--block { width: 100%; }

/* Uebergangskurve wie in der Referenz: dort liegt
   "transition: all .3s cubic-bezier(.4,0,.2,1)" auf allen Schaltflaechen und
   Verweisen. Ohne die Kurve laeuft es mit der Voreinstellung "ease" - das
   sieht spuerbar anders aus, es startet ruppiger und laeuft weicher aus.

   Der Schatten entspricht shadow-2xl, die Vergroesserung hover:scale-105.
   Den dritten Effekt der Referenz - bg-primary/90 - hat sie zwar gesetzt, er
   bleibt aber wirkungslos: Der Verlauf liegt darueber und ist deckend. */
@media (hover: hover) {
  .mpd-btn { transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                         box-shadow .3s cubic-bezier(.4, 0, .2, 1); }
  .mpd-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  }
}
.mpd-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- Government-Bar ---------- */

.mpd-govbar {
  border-bottom: 1px solid #c0c3d5;
  background: #f6f7fb;
  padding-block: 5px;
  font-size: var(--fs-xs);
  color: var(--color-fg);
}
.mpd-govbar__inner { display: flex; align-items: center; gap: var(--sp-1); }
.mpd-govbar__flag  { width: 18px; height: 12px; flex: none; }

/* Testkennzeichnung: deutlich sichtbar, aber ohne die Leiste zu sprengen.
   Rot statt der Themefarbe - der Hinweis soll sich vom uebrigen Auftritt
   absetzen, nicht zu ihm passen. Kontrast auf dem hellen Grund rund 5,9:1. */
.mpd-govbar__test {
  padding: 1px var(--sp-1);
  border-radius: 4px;
  background: #b91c1c;
  color: #fff;
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
}

/* ---------- Header und Navigation ---------- */

/* Der Kopfbereich nutzt als einziger die volle Fensterbreite (bis 1536),
   waehrend Abschnitte bei 1280 und die Fusszeile bei 1152 bleiben.
   Gemessene linke Kanten bei 1536: Logo 24, Abschnitt 123, Fusszeile 187. */
/* Government-Bar, Kopfbereich und Fusszeile haben eigene Breiten.

   Gemessene linke Kanten der Referenz:
     bei 1440: Flagge und Logo 99, Abschnitt 75, Fusszeile 139
     bei 1536: Flagge und Logo 24, Abschnitt 123, Fusszeile 187

   Daraus folgt: Kopfbereich und Government-Bar folgen bis 1536 demselben
   1280er-Bereich wie die Abschnitte und wachsen erst darueber auf 1536 -
   sie nutzen also den Tailwind-"container" mit seiner 2xl-Stufe, waehrend die
   Abschnitte bei 1280 stehen bleiben.

   Eine feste Grenze von 1536 war deshalb falsch: Sie liess Flagge und Logo
   schon bei 1440 an den Rand rutschen, wo die Referenz sie bei 99 fuehrt.

   Feinheit: Hier zaehlt die Polsterung NICHT zusaetzlich, anders als bei
   --container. Die Abschnittsueberschrift der Referenz sitzt am Rand ihres
   1280er-Bereichs, Flagge und Logo dagegen 24px innerhalb - beide Bereiche
   sind 1280 breit, nur wird die Polsterung unterschiedlich gerechnet. */
.mpd-govbar .mpd-container,
.mpd-header .mpd-container { max-width: 1280px; }

@media (min-width: 1536px) {
  .mpd-govbar .mpd-container,
  .mpd-header .mpd-container { max-width: 1536px; }
}

.mpd-footer .mpd-container { max-width: calc(1152px + 2 * var(--sp-4)); }

.mpd-header { position: relative; z-index: 200; }
.mpd-header__inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding-block: var(--sp-2);
  min-height: 80px;
}
.mpd-logo img { height: 35px; width: auto; }

.mpd-nav {
  display: flex;
  padding: var(--sp-2);
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-glass);
}

/* Unter 1024px nimmt die Referenz die Leiste aus dem Fluss und heftet sie
   fest unter den Header - gemessen an /verwaltung bei 390x844: top 116px,
   356x72, weiss, ohne Schatten, z-index 200. Der Header traegt dann nur noch
   das Logo und bleibt 80px hoch.

   Ohne das waechst der Header auf rund 155px, und die Navigation scrollt weg,
   statt oben stehen zu bleiben. */
@media (max-width: 1023px) {
  .mpd-nav {
    position: fixed;
    top: 116px;
    left: 50%; translate: -50% 0;
    width: calc(100% - 2 * var(--sp-3));
    /* Gemessen: 356 breit bei 390px Viewport, 382 bei 768px - die Leiste
       waechst also NICHT mit der Breite mit. Ohne die Obergrenze zieht sie
       sich auf Tablets ueber die ganze Seite, und der aktive Eintrag zeigt
       einen viel zu breiten Ausschnitt des Verlaufs. */
    max-width: 382px;
    height: 72px;
    z-index: 200;
    box-shadow: none;
  }
  /* Platz fuer die herausgeloeste Leiste - sonst liegt sie ueber dem Inhalt. */
  main { padding-top: 84px; }
}
/* Drei gleich breite Spalten - nicht Auto-Breite. Die Referenz setzt
   grid-template-columns: repeat(3, 1fr), damit der Verlaufsausschnitt des
   aktiven Eintrags immer an derselben Stelle sitzt. Bei Auto-Breite haengt
   die Farbe sonst von der Laenge der Beschriftung ab. */
.mpd-nav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}
.mpd-nav__link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 48px;
  padding: var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-fg-strong); text-decoration: none;
  white-space: nowrap;
}
/* Aktiver Eintrag.

   Die Referenz legt dafuer ein zweites, absolut positioniertes Element ueber
   die ganze Leiste - mit einem sechsstufigen Verlauf von navy ueber teal
   zurueck nach navy und cyan - und schneidet per clip-path genau den aktiven
   Tab frei. Deshalb hat jeder Tab eine andere Farbe: Es sind Ausschnitte
   DESSELBEN Verlaufs, nicht drei eigene.

   Hier ohne das doppelte Markup: Der Verlauf sitzt direkt auf dem aktiven
   Link, dreifach breit gezogen, und background-position waehlt den Ausschnitt.
   Ergibt dieselben Farben bei einem Drittel des Markups. */
.mpd-nav__link[aria-current="page"] {
  color: #fff;
  background-image: linear-gradient(to right,
    var(--brand-navy) 0%, var(--brand-cyan-dark) 16.5%,
    var(--brand-teal) 33%, var(--brand-teal-dark) 50%,
    var(--brand-navy) 66%, var(--brand-cyan) 100%);
  background-size: 300% 100%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
.mpd-nav__list > li:nth-child(1) .mpd-nav__link[aria-current="page"] { background-position:   0% 0; }
.mpd-nav__list > li:nth-child(2) .mpd-nav__link[aria-current="page"] { background-position:  50% 0; }
.mpd-nav__list > li:nth-child(3) .mpd-nav__link[aria-current="page"] { background-position: 100% 0; }
@media (hover: hover) {
  .mpd-nav__link { transition: color .2s; }
  .mpd-nav__link:not([aria-current="page"]):hover { color: #0f172b; }
}
/* Die Referenz stuft die Symbole: h-3 w-3 mobil, lg:h-4 lg:w-4 ab Desktop -
   also 12px und 16px. Vorher standen sie fest auf 12px und wirkten auf grossen
   Bildschirmen zu klein. */
.mpd-nav__icon { width: 12px; height: 12px; flex: none; }
@media (min-width: 1024px) { .mpd-nav__icon { width: 16px; height: 16px; } }

@media (min-width: 1024px) {
  .mpd-header { position: sticky; top: 0; background: rgba(255, 255, 255, .95); }
  .mpd-header__inner {
    flex-direction: row; justify-content: space-between;
    padding-block: var(--sp-4); min-height: 88px;
  }
  .mpd-logo img { height: 40px; }
  .mpd-nav {
    position: absolute; left: 50%; transform: translateX(-50%);
    background: rgba(255, 255, 255, .6);
    border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(8px);
  }
  .mpd-nav__link { min-height: 36px; padding: var(--sp-1) var(--sp-4); font-size: var(--fs-sm); }
}

/* ---------- Sektionsrhythmus ----------
   Die Referenz stapelt Sektionen mit oberer Rundung, negativem Versatz und
   steigendem z-index. Das erzeugt den Karteneindruck. */

.mpd-section { position: relative; padding-block: var(--sp-8); }
@media (min-width: 640px) { .mpd-section { padding-block: var(--sp-11); } }

/* Die Handbuchliste steht in der Referenz enger als die uebrigen Abschnitte:
   48px mobil, 64px ab Desktop - nicht 128px wie Feature-Rows und FAQ. */
.mpd-section--tight { padding-block: var(--sp-6); }
@media (min-width: 640px) { .mpd-section--tight { padding-block: var(--sp-8); } }

.mpd-section--stacked {
  border-radius: 32px 32px 0 0;
  margin-top: -50px;
  background: var(--color-bg);
  z-index: 100;
  overflow: hidden;
}
@media (min-width: 640px) {
  .mpd-section--stacked { border-radius: var(--r-section) var(--r-section) 0 0; margin-top: -100px; }
}

.mpd-section--tinted {
  /* Gemessen: to right bottom, oklch(.929 .013 255.5) -> oklch(.869 .022 252.9),
     also rund #e2e8f0 nach #cbd5e1. Vorher standen hier zwei Stufen dunklere
     Werte, wodurch der Abschnitt als harter Block wirkte statt als zarte
     Tönung. */
  background-image: linear-gradient(to right bottom, #e2e8f0, #cbd5e1);
  border-radius: 32px 32px 0 0;
  z-index: 20;
}
@media (min-width: 640px) { .mpd-section--tinted { border-radius: var(--r-section) var(--r-section) 0 0; } }

/* Dekorative Orbs - rein CSS, in der Referenz per JS bewegt */
.mpd-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mpd-orb  { position: absolute; border-radius: 50%; }
.mpd-orb--1 { width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(0,129,139,.4), transparent 70%); opacity: .8; top: -8%;  left: -10%; }
.mpd-orb--2 { width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(249,224,58,.3), transparent 70%); opacity: .7; top: 30%;  right: -12%; }
.mpd-orb--3 { width: 42vw; height: 42vw; background: radial-gradient(circle, rgba(0,129,139,.3), transparent 70%); opacity: .75; bottom: 5%; left: 15%; }
.mpd-orb--4 { width: 37vw; height: 37vw; background: radial-gradient(circle, rgba(249,224,58,.5), transparent 70%); opacity: .6; bottom: -5%; right: 20%; }

.mpd-section > .mpd-container { position: relative; z-index: 1; }

/* ---------- Hero ---------- */

.mpd-hero {
  position: relative; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  /* Der Bildueberstand nach rechts ist gewollt - die waagerechte
     Bildlaufleiste, die er sonst erzeugt, nicht. clip statt hidden, weil
     hidden einen Scrollkontext eroeffnet und position: sticky im Header
     dadurch wirkungslos wuerde. */
  overflow-x: clip;
  /* Mindesthoehe steht weiter unten, nach Heroform getrennt. */
  padding-block: var(--sp-4) var(--sp-7);
  background-image: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, rgba(240,253,250,.6) 100%);
}
/* Der Hero der Zielgruppenseiten laeuft breiter als der uebrige Inhalt -
   aber nicht bis an den Rand.

   Gemessene linke Kanten bei 1536px Fensterbreite:
     Logo 24, Hero-Ueberschrift 63, Abschnittsueberschrift 123,
     Handbuchkarte und Fusszeile 187.

   Der Aufbau dahinter: Der Abschnitt nimmt die volle Breite mit 21px Rand,
   das Raster darin ist auf 1400px begrenzt und zentriert. Bei 1430er Fenster
   bleiben davon 1388 uebrig (also volle Breite minus Rand), bei 1536 greift
   die Grenze und der Rand waechst auf 68.

   Zwei Anlaeufe waren noetig: erst eine feste Grenze von 1388px - das ist
   schlicht der bei 1430 gemessene Wert und liess Panel und Ansicht auf
   breiten Schirmen 10% zu klein werden. Dann gar keine Grenze - da lief der
   Text bis fast an den Fensterrand. Beides falsch; es braucht beides. */
@media (min-width: 1024px) {
  .mpd-hero--target > .mpd-container { max-width: none; padding-inline: 21px; }
  .mpd-hero--target .mpd-hero__grid  { max-width: 1400px; margin-inline: auto; }
}

/* Gemessene Mindesthoehen - sie unterscheiden sich je Heroform und Breite:
   zentriert (Startseite) 500px mobil / 720px ab Desktop,
   mit Medium (Zielgruppen) 844px mobil / 900px ab Desktop.
   Pauschal 100svh war fuer die Startseite mobil deutlich zu hoch; der
   Scrollhinweis rutschte weit unter den Text. */
.mpd-hero { min-height: 844px; }
.mpd-hero--centered { text-align: center; align-items: flex-start; min-height: 500px; }
@media (min-width: 1024px) {
  .mpd-hero { min-height: 900px; }
  .mpd-hero--centered { min-height: 720px; }
}

.mpd-hero__title {
  font-size: var(--h1-home); line-height: 1.25;
  margin-bottom: var(--sp-5);
}
.mpd-hero--centered .mpd-hero__title { max-width: 1024px; margin-inline: auto; }
.mpd-hero--target .mpd-hero__title { font-size: var(--h1-target); }
.mpd-hero__lead {
  font-size: var(--fs-base); line-height: 1.63;
  color: var(--color-fg-body);
  margin-bottom: var(--sp-5);
}
@media (min-width: 640px) { .mpd-hero__lead { font-size: var(--fs-xl); } }
/* Startseite setzt den Lead groesser als die Zielgruppenseiten */
@media (min-width: 640px) { .mpd-hero--centered .mpd-hero__lead { font-size: var(--fs-2xl); } }
.mpd-hero--centered .mpd-hero__lead { max-width: var(--measure); margin-inline: auto; }

/* Gemessen an /verwaltung: abgerundetes Rechteck mit 8px, kein Pill; heller
   Grund mit 80% Deckung, 1px Rand in teal mit 30% Deckung, ohne Schatten.
   Innenabstand und Schriftgroesse steigen bei Desktop eine Stufe. */
.mpd-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--sp-1) var(--sp-3);
  margin-bottom: var(--sp-4);
  background: rgba(255, 255, 255, .8);
  border: 1px solid color-mix(in oklab, var(--theme-primary) 30%, transparent);
  border-radius: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--color-fg);
}
@media (min-width: 1024px) {
  .mpd-badge { padding: var(--sp-1) var(--sp-4); font-size: var(--fs-base); margin-bottom: var(--sp-5); }
}

/* Gemessen: 20px und fest teal - auch auf der Unternehmensseite, wo sonst
   navy gilt. Vorher erbte das Symbol die Textfarbe und war schwarz und 16px. */
.mpd-badge svg {
  flex: none;
  width: 20px; height: 20px;
  margin-right: var(--sp-1);
  color: var(--brand-teal);
}

.mpd-hero__grid { display: grid; gap: var(--sp-5); align-items: center; }

/* Die Referenz blendet das Hero-Bild auf Mobil vollständig aus.
   Diese Regel MUSS vor der Media-Query stehen: Beide haben dieselbe
   Spezifitaet, also entscheidet die Reihenfolge - stuende sie danach,
   bliebe das Bild auch auf Desktop verborgen. */
.mpd-hero__media { display: none; }

@media (min-width: 1024px) {
  .mpd-hero__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .mpd-hero__media { display: block; }
}

.mpd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.mpd-hero__actions .mpd-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .mpd-hero__actions .mpd-btn { flex: 0 0 auto; } }

/* Scroll-Indikator */
/* Der Scrollhinweis ist die EINZIGE Stelle, an der die Referenz von selbst
   etwas bewegt - gemessen: der Rahmen federt (bounce, 1s), der Punkt darin
   pulsiert (pulse, 2s). Beide Werte hier uebernommen.

   Alles andere auf der Seite bewegt sich nur auf Anforderung: beim
   Ueberfahren, beim Scrollen oder beim Seitenwechsel. */
.mpd-scroll-hint {
  width: 24px; height: 40px; margin: var(--sp-7) auto 0;
  border: 2px solid rgba(0, 129, 139, .3); border-radius: var(--r-pill);
  display: flex; justify-content: center;
  animation: mpd-federn 1s infinite;
}
.mpd-scroll-hint::before {
  content: ""; width: 8px; height: 8px; margin-top: var(--sp-1);
  background: var(--brand-teal); border-radius: 50%;
  animation: mpd-pulsieren 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

/* Nachgebildet nach Tailwinds animate-bounce und animate-pulse, die die
   Referenz an dieser Stelle nutzt. */
@keyframes mpd-federn {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50%      { transform: none;             animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
@keyframes mpd-pulsieren {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* ---------- Bild-Duo ---------- */

/* Unter 640px blendet die Referenz das Bild-Duo vollstaendig aus -
   zwei Kacheln nebeneinander waeren dort zu schmal. Ab Tablet sichtbar. */
.mpd-duo { display: none; }
@media (min-width: 640px) {
  /* Zwei quadratische Kacheln mit deutlicher Luecke, nicht formatfuellend.

     Die Groesse waechst mit: gemessen 458px bei 1430er Fenster und 542px bei
     1536 - beide Male rund 37% des Inhaltsbereichs. Eine feste Pixelbreite
     traf deshalb immer nur eine Fenstergroesse. Die Luecke betraegt rund 16%,
     die Raender teilen sich den Rest. */
  .mpd-duo {
    display: grid;
    grid-template-columns: repeat(2, 37%);
    justify-content: center;
    gap: 16%;
  }
}
.mpd-duo__tile {
  aspect-ratio: 1; border-radius: var(--r-2xl); overflow: hidden;
  background-image: linear-gradient(60.55deg, #0f141a 13.9%, #0a333a 42.7%, #007983 78.1%, #00bdcc 100%);
}
.mpd-duo__tile img { width: 100%; height: 100%; object-fit: cover; }
.mpd-duo__tile:first-child img { opacity: .75; }
/* Versatz: In der Referenz steht die LINKE Kachel hoeher als die rechte.
   Vorher war es andersherum, wodurch die Komposition gespiegelt wirkte. */
@media (min-width: 640px) {
  .mpd-duo__tile:first-child  { transform: translateY(calc(var(--sp-5) * -1)); }
  .mpd-duo__tile:nth-child(2) { transform: translateY(var(--sp-5)); }
}

/* ---------- Bildkacheln: Fahrt beim Scrollen ----------

   Der auffaelligste Bewegungseffekt der Startseite. Vermessen an der Referenz
   (tools/ref-parallax2.ps1), Fensterhoehe 900:

     Scroll     0   400   660   1000   1600   darueber
     Skalierung 0,80 0,92 1,00  1,00   1,00   1,00
     Versatz   +250 +129    0   -125   -400   -400

   Zwei Abschnitte, beide exakt linear: Die Kacheln wachsen zunaechst von 80
   auf 100 Prozent und wandern dabei nach oben; danach fahren sie nur noch
   weiter hoch, bis sie stehen bleiben. Genau daraus entsteht der Eindruck,
   sie laegen erst hinten und schoeben sich dann nach vorn.

   Die Referenz steuert das per JavaScript an einem fixierten Element. Hier
   laeuft es an der Scrollachse - dieselbe Wirkung ohne Skript.

   Die Kacheln liegen dabei fest im Fenster (position: fixed) und nehmen
   deshalb keinen Platz mehr ein. Damit die Vision-Karte nicht nach oben
   rutscht, behaelt der Bereich seine Hoehe ueber min-height.

   Alles steckt in @supports: Ohne Scrollachsen bleiben die Kacheln schlicht
   im Fluss stehen, so wie bisher. Das ist der wichtigste Unterschied zu den
   uebrigen Effekten - hier faellt der Rueckfall deutlich aus. */

@keyframes mpd-duo-fahrt {
  0%   { scale: .8; translate: 0 250px; }
  41%  { scale: 1;  translate: 0 0; }        /* 660 von 1600 */
  100% { scale: 1;  translate: 0 -400px; }
}

/* Bewusst NICHT an prefers-reduced-motion gekoppelt - siehe die ausfuehrliche
   Begruendung im Block "Bewegung abschalten" am Ende dieser Datei. Kurz:
   Windows meldet in VM- und Fernsitzungen pauschal "reduce", wodurch der
   Effekt dort dauerhaft fehlte, obwohl das niemand so eingestellt hat. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 640px) {

    /* Platzhalter: Die Kacheln sind gleich fixiert und tragen nichts mehr
       zur Hoehe bei. Ohne das rutscht der ganze Abschnitt zusammen. */
    .mpd-duo {
      display: block;
      min-height: 350px;
      position: relative;
    }
    @media (min-width: 1024px) { .mpd-duo { min-height: 450px; } }
    @media (min-width: 1280px) { .mpd-duo { min-height: 550px; } }
    @media (min-width: 1536px) { .mpd-duo { min-height: 650px; } }

    .mpd-duo__tile {
      position: fixed;
      top: calc(50% + 5px);
      /* Gemessene Stufen der Referenz: 350 / 450 / 550 / 650 */
      width: 350px; height: 350px;
      z-index: 3;
      /* Die Kacheln liegen ueber dem Inhalt - sie duerfen ihn nicht
         anklickbar verdecken. */
      pointer-events: none;
      transform: none;                 /* der Grundversatz entfaellt hier */
      animation: mpd-duo-fahrt linear both;
      animation-timeline: scroll(root);
      animation-range: 0 1600px;
    }
    @media (min-width: 1024px) { .mpd-duo__tile { width: 450px; height: 450px; } }
    @media (min-width: 1280px) { .mpd-duo__tile { width: 550px; height: 550px; } }
    @media (min-width: 1536px) { .mpd-duo__tile { width: 650px; height: 650px; } }

    /* Spiegelbildlich um die Fenstermitte, mit 64px Abstand.

       transform: none gehoert hier an die spezifischeren Selektoren, nicht an
       .mpd-duo__tile allein - der Grundversatz weiter oben steht ebenfalls auf
       :first-child bzw. :nth-child(2) und gewaenne sonst trotz spaeterer
       Position im Stylesheet.

       Der Hoehenversatz der rechten Kachel (gemessen 50px) laeuft jetzt ueber
       top statt ueber transform, damit er der Fahrt nicht in die Quere kommt. */
    .mpd-duo__tile:first-child {
      right: calc(50% + 64px);
      transform: none;
    }
    .mpd-duo__tile:nth-child(2) {
      left: calc(50% + 64px);
      top: calc(50% + 55px);
      transform: none;
    }
  }
}

/* ---------- Highlight-Card mit Kennzahlen ---------- */

.mpd-highlight {
  position: relative; z-index: 20;
  max-width: 1024px; margin-inline: auto;
  padding: var(--sp-5);
  border-radius: var(--r-xl);
  background-image: linear-gradient(135deg, rgba(0,129,139,.8), rgba(30,72,144,.9));
  backdrop-filter: blur(8px);
  color: #fff; text-align: center;
}
@media (min-width: 640px) { .mpd-highlight { padding: var(--sp-9); border-radius: var(--r-3xl); } }
.mpd-highlight__icon  { width: 48px; height: 48px; margin: 0 auto var(--sp-4); }
.mpd-highlight__title { font-size: var(--h2); line-height: 1.0; color: #fff; margin-bottom: var(--sp-5); }
.mpd-highlight__text  { max-width: var(--measure); margin: 0 auto var(--sp-7); color: rgba(255,255,255,.9); }
/* Gemessen: 20px bei 768, erst ab Desktop 24px (Zeilenhoehe 1,625).
   Vorher sprang der Text schon bei 640px auf 24px. */
@media (min-width: 640px)  { .mpd-highlight__text { font-size: var(--fs-xl);  line-height: 1.625; } }
@media (min-width: 1024px) { .mpd-highlight__text { font-size: var(--fs-2xl); line-height: 1.625; } }

/* Gemessen: Bereich 864px breit, Abstand 48px, Karten 338 / 387 / 257 -
   also NATUERLICHE Breite je nach Beschriftung, nicht gleich verteilt.
   Genau daraus ergibt sich die Anordnung der Referenz: zwei Karten oben,
   die dritte bricht um und steht mittig darunter. Mit gleich breiten
   Karten (flex: 1 1 240px) standen alle drei nebeneinander. */
.mpd-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4);
  max-width: 864px; margin: var(--sp-8) auto 0;
}
@media (min-width: 640px) { .mpd-stats { gap: var(--sp-7); } }
.mpd-stat {
  flex: 0 0 auto;
  padding: var(--sp-5);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-md);
}
@media (hover: hover) {
  .mpd-stat { transition: transform .3s; }
  .mpd-stat:hover { transform: scale(1.05); }
}
.mpd-stat__value { display: block; font-size: var(--fs-4xl); font-weight: var(--fw-bold); color: var(--brand-yellow); }
.mpd-stat__label { font-size: var(--fs-xl); color: rgba(255, 255, 255, .8); }

/* ---------- Textsektion ---------- */

.mpd-section__title {
  font-size: var(--h2); line-height: 1.0;
  text-align: center; margin-bottom: var(--sp-5);
}
.mpd-section__lead {
  max-width: 672px; margin: 0 auto var(--sp-5);
  text-align: center; color: var(--color-fg-body);
}
@media (min-width: 640px) { .mpd-section__lead { font-size: var(--fs-xl); } }
.mpd-prose { max-width: 1024px; margin-inline: auto; color: var(--color-fg-strong); }
@media (min-width: 640px) { .mpd-prose { font-size: var(--fs-xl); line-height: 1.63; } }
.mpd-prose > * + * { margin-top: var(--sp-3); }

.mpd-cta { text-align: center; margin-top: var(--sp-8); }

/* ---------- Zielgruppen-Karten ---------- */

.mpd-cards { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); }
@media (min-width: 640px) { .mpd-cards { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }

.mpd-card { display: flex; flex-direction: column; padding: var(--sp-5); }
@media (min-width: 640px) { .mpd-card { padding: var(--sp-6); } }
.mpd-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background-image: linear-gradient(135deg, rgba(0,129,139,.1), rgba(0,129,139,.05));
}
.mpd-card--company .mpd-card__icon {
  background-image: linear-gradient(135deg, rgba(30,72,144,.1), rgba(10,161,195,.1));
}
.mpd-card__icon svg { width: 32px; height: 32px; color: var(--theme-primary); }
.mpd-card__title { font-size: var(--h3); line-height: 1.2; margin-bottom: var(--sp-3); }
.mpd-card__text  { font-size: var(--fs-lg); line-height: 1.63; color: var(--color-fg-body); margin-bottom: var(--sp-5); }
.mpd-card .mpd-btn { margin-top: auto; width: 100%; }
/* --theme-gradient muss mit, siehe Erklaerung in tokens.css beim
   Block [data-theme="company"]. Ohne die Zeile bleibt der Knopf dieser
   Karte teal, obwohl --theme-primary bereits navy ist. */
.mpd-card--company {
  --theme-primary:   var(--brand-navy);
  --theme-secondary: var(--brand-cyan);
  --theme-gradient:  linear-gradient(to right in oklab, var(--brand-navy), var(--brand-cyan));
}

/* ---------- Feature-Rows ----------
   Mobil: geschlossene Karte im Themeverlauf, Text weiß, Bild darunter.
   Ab 1024px: Bild und Text nebeneinander, alternierend, Text auf hellem Grund.
   Anders als die Referenz mit EINEM Markup gelöst - siehe 03-interaktion-und-mobile.md */

.mpd-features { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-8); }
@media (min-width: 1024px) { .mpd-features { gap: var(--sp-9); } }

.mpd-feature {
  display: flex; flex-direction: column; align-items: center;
  border-radius: var(--r-lg); overflow: hidden;
  background-image: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary));
  color: #fff;
}
.mpd-feature__body { padding: var(--sp-4) var(--sp-3) var(--sp-3); align-self: stretch; }
.mpd-feature__title { font-size: var(--fs-2xl); line-height: 1.33; color: #fff; margin-bottom: var(--sp-3); }
.mpd-feature__text  { line-height: 1.63; color: #fff; }
.mpd-feature__text strong { font-weight: var(--fw-bold); }
.mpd-feature__media { align-self: stretch; border-radius: var(--r-md); overflow: hidden; }

/* Die Feature-Bilder stecken in <picture>, weil die Referenz je Breite eine
   ANDERE Datei laedt - echte Art Direction, nicht nur eine andere Groesse.
   Auf der Verwaltungsseite sind es unter 640px sogar voellig andere Motive
   (screenshot-* statt card-*).

   display: contents nimmt das picture-Element aus dem Kasten heraus, damit
   die Regeln fuer ".mpd-feature__media img" unveraendert greifen. */
.mpd-feature__media picture { display: contents; }
/* Feste 4:3-Buehne wie in der Referenz (600x450), Motiv formatfuellend beschnitten */
.mpd-feature__media img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Die geschlossene Verlaufskarte gilt NUR unter 640px.
   Gemessen bei 768: die Zeile ist dort schlicht gestapelt (column-reverse,
   48px Abstand), ohne Verlauf und ohne weisse Schrift - der farbige Block
   reichte vorher bis 1024px und liess die Seite auf Tablets ganz anders
   wirken als das Original. */
@media (min-width: 640px) {
  .mpd-feature {
    background-image: none;
    color: inherit;
    overflow: visible;
    gap: var(--sp-6);
  }
  .mpd-feature__title { color: var(--color-fg); }
  .mpd-feature__text  { color: var(--color-fg-body); }
  .mpd-feature__body  { padding: 0; }
}

@media (min-width: 1024px) {
  .mpd-feature {
    flex-direction: row; align-items: center; gap: var(--sp-7);
    background-image: none; color: inherit; overflow: visible;
  }
  .mpd-feature:nth-child(even) { flex-direction: row-reverse; }
  .mpd-feature__body, .mpd-feature__media { flex: 1 1 0; align-self: auto; padding: 0; }
  .mpd-feature__title { font-size: var(--h3-feature); line-height: 1.11; color: var(--color-fg); margin-bottom: var(--sp-4); }
  .mpd-feature__text  { font-size: var(--fs-xl); color: var(--color-fg-body); }
  /* Markup der Referenz an dieser Stelle:
       w-full max-w-[600px] rounded-2xl overflow-hidden shadow-2xl
       transform hover:scale-105 transition-all duration-500

     Zwischenzeitlich stand hier "box-shadow: none", weil eine Messung an der
     Stelle lauter Nullen zeigte. Das war ein Trugschluss: Tailwind setzt den
     Schatten ueber Variablen zusammen, und die erscheinen im berechneten Wert
     als rgba(0,0,0,0)-Platzhalter, obwohl shadow-2xl sehr wohl wirkt.
     Das Markup ist hier die verlaesslichere Quelle als der berechnete Wert. */
  .mpd-feature__media {
    max-width: 600px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  }
}

/* ---------- Download-Liste ---------- */

/* Gemessene Breiten: Handbuchkarte 1152, FAQ-Karte 896 - beide also schmaler
   als der Inhaltsbereich (1232). Ohne Begrenzung laufen sie ueber die volle
   Breite, die Zeilen werden zu lang und die Fragen stehen einzeilig statt
   umgebrochen. */
.mpd-downloads {
  padding: var(--sp-5);
  max-width: 1152px; margin-inline: auto;
  background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.5);
  box-shadow: var(--shadow-glass);
}
@media (min-width: 640px) { .mpd-downloads { padding: var(--sp-6); } }
.mpd-downloads__title {
  font-size: var(--h3); line-height: 1.2; text-align: center;
  margin-bottom: var(--sp-6);
  hyphens: auto;   /* "Benutzerhandbuecher" passt sonst nicht in 390px */
}
.mpd-downloads__list { display: grid; gap: var(--sp-3); }
@media (min-width: 640px) { .mpd-downloads__list { grid-template-columns: 1fr 1fr; } }
.mpd-download {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 58px; padding: var(--sp-3) var(--sp-4);
  background: #fff; border: 1px solid var(--color-border-light);
  border-radius: var(--r-sm);
  color: var(--color-fg); text-decoration: none;
}
.mpd-download__name { flex: 1; }
.mpd-download svg { width: 20px; height: 20px; flex: none; color: var(--theme-primary); }
@media (hover: hover) {
  .mpd-download { transition: border-color .2s, background-color .2s; }
  .mpd-download:hover {
    border-color: var(--theme-primary);
    background: color-mix(in oklab, var(--theme-primary) 5%, transparent);
  }
}

/* ---------- FAQ-Akkordeon ---------- */

.mpd-faq {
  padding: var(--sp-5);
  max-width: 896px; margin-inline: auto;
  background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.5);
  box-shadow: var(--shadow-glass);
}
.mpd-faq__item {
  padding: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: var(--r-sm);
}
.mpd-faq__item:last-child { margin-bottom: 0; }
.mpd-faq__question { font-size: var(--fs-base); font-weight: var(--fw-normal); margin: 0; }
.mpd-faq__trigger {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: var(--sp-3) 0;
  background: none; border: 0;
  font: var(--fw-medium) var(--fs-xl)/1.4 var(--font-sans);
  color: var(--color-fg); text-align: left; cursor: pointer;
}
.mpd-faq__trigger::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .25s;
}
.mpd-faq__trigger[aria-expanded="true"]::after { transform: rotate(225deg); }
.mpd-faq__panel { padding-bottom: var(--sp-3); color: var(--color-fg-body); }
.mpd-faq__panel[hidden] { display: none; }

/* ---------- Footer ---------- */

/* Gemessen: 48px mobil, 64px ab 768px. */
.mpd-footer { position: relative; z-index: 100; padding-block: var(--sp-6); background: var(--color-bg); }
@media (min-width: 768px) { .mpd-footer { padding-block: var(--sp-8); } }
.mpd-footer__grid { display: grid; gap: var(--sp-5); margin-bottom: var(--sp-7); }
@media (min-width: 1024px) { .mpd-footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); } }
.mpd-footer__logo { height: 44px; width: auto; margin-bottom: var(--sp-4); }
.mpd-footer__claim { color: var(--color-fg-body); }
.mpd-footer__title { font-size: var(--fs-lg); font-weight: var(--fw-normal); margin-bottom: var(--sp-4); }
.mpd-footer__list li { margin-bottom: var(--sp-2); }
.mpd-footer__list a { color: var(--color-fg-body); text-decoration: none; }
@media (hover: hover) { .mpd-footer__list a:hover { color: var(--brand-teal); } }
.mpd-footer__contact { display: flex; align-items: flex-start; gap: var(--sp-2); }
.mpd-footer__copy { text-align: center; color: var(--color-fg-subtle); }

/* Auf Mobil zentriert die Referenz den gesamten Kopf des Fusszeilenbereichs,
   nicht nur den Urhebervermerk. Ab drei Spalten steht wieder alles links. */
@media (max-width: 767px) {
  .mpd-footer__grid { text-align: center; }
  .mpd-footer__logo { margin-inline: auto; }
  .mpd-footer__contact { justify-content: center; }
}

/* ==========================================================================
   Zielgruppenseiten: Hero-Bühne
   ========================================================================== */

/* Zwei Ebenen wie in der Referenz. Gemessen bei 1440px Viewport:
   Spalte 662, Panel 780x780 (Radius 30), Produktansicht 825x569 (Radius 16).
   Beide sind breiter als ihre Spalte und ragen nach rechts ueber - genau das
   erzeugt den offenen Bildeindruck der Referenz.

   Der Verlauf unter dem Motiv ist nicht Zierrat: Das Reichstagsbild liegt mit
   75% Deckkraft darauf, erst die Mischung ergibt den blaugruenen Ton. Ohne den
   Verlauf wirkt das Motiv blass und grau. */
/* Gemessen an /verwaltung bei 1536px Viewport:
     Spalte 2 beginnt bei 800, ist 712 breit
     Panel   780x780 bei x=1195, also 55% IN die Spalte hinein versetzt und
             mehr als zur Haelfte ausserhalb des Sichtbereichs
     Ansicht 825x569 bei x=795, also am Spaltenanfang, 84px ueber den Rand

   Vorher fuellte das Panel die ganze Spalte und begann schon bei 52% der
   Seitenbreite statt bei 78%. Dadurch stand viel dunkle Flaeche im Bild, die
   in der Referenz ausserhalb liegt.

   Das Panel ist deshalb absolut gesetzt und nach rechts geschoben; die
   Ansicht bleibt im Fluss und bestimmt die Hoehe des Bereichs. */
.mpd-hero__stage {
  position: absolute;
  top: 0;
  left: 55%;
  width: 110%;                       /* 780 / 712 */
  aspect-ratio: 1 / 1;
  border-radius: 30px;
  background-image: linear-gradient(60deg,
    #0f141a 14%, #0a333a 43%, #007983 78%, #00bdcc 100%);
  overflow: hidden;
  z-index: 1;
}
.mpd-hero__backdrop {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .75;
}

/* Die Produktansicht liegt vor dem Panel und ueberlappt es beidseitig.
   Sie steht ausserhalb von .mpd-hero__stage im Stapel, darf also nicht von
   dessen overflow beschnitten werden - deshalb sitzt sie im Grid daneben. */
/* Die Ansicht bleibt im Fluss und gibt dem Bereich seine Hoehe; das Panel
   liegt absolut dahinter. Gemessen 825 breit bei 712 Spaltenbreite - sie ragt
   also ueber die Spalte hinaus, und ohne max-width: none wuerde der Reset
   (img { max-width: 100% }) sie darauf zurueckschneiden. */
/* KEIN Schatten - anders als bei den Feature-Bildern.

   Gemessen an der Referenz: weder das Bild noch eines seiner Elternelemente
   traegt einen. Das Markup lautet dort schlicht "w-full rounded-2xl" im Bild
   und "absolute left-0 top-1/2 -translate-y-1/2 w-206.25 z-10
   transition-transform duration-500 hover:scale-105" im Rahmen darum.

   Der Schatten, der hier stand, legte sich als graue Flaeche unter die
   Ansicht und sah aus wie ein Hintergrund, den das Original nicht hat.
   Bei den Feature-Bildern ist es umgekehrt: dort gehoert shadow-2xl dazu. */
.mpd-hero__shot {
  position: relative;
  width: 116%;                       /* 825 / 712 */
  max-width: none;
  height: auto;
  border-radius: 16px;
  z-index: 2;
}
.mpd-hero__media { position: relative; }

/* Auf der Unternehmensseite ist die Produktansicht hochformatig (825x996)
   statt quer - sonst ragte sie oben und unten aus der Buehne heraus. */
/* Auf der Unternehmensseite ist die Ansicht hochformatig (825x996 statt
   825x569). Bei gleicher Breite wuerde sie den Bereich sehr hoch machen -
   deshalb etwas schmaler. left entfaellt, seit sie im Fluss liegt. */
.mpd-hero__shot--tall { width: 96%; }

/* Die Referenz VERGROESSERT die Produktansicht beim Ueberfahren (hover:scale-105),
   sie verschiebt sie nicht. Vorher stieg sie hier nach oben - das sah anders aus
   und war auch nicht belegt.

   scale als eigene Eigenschaft, nicht als transform: Die vertikale Zentrierung
   laeuft ueber translate, und beides in einem transform wuerde sich gegenseitig
   ueberschreiben. */
/* Markup der Referenz: "transition-transform duration-500 hover:scale-105"
   direkt auf der Produktansicht. Ausloeser ist also das Bild selbst - vorher
   hing er am umgebenden Bereich, wodurch die Ansicht schon zoomte, sobald der
   Zeiger irgendwo ueber dem Panel stand. */
@media (hover: hover) {
  .mpd-hero__shot { transition: scale .5s cubic-bezier(.4, 0, .2, 1); }
  .mpd-hero__shot:hover { scale: 1.05; }
}

/* ==========================================================================
   Feature-Rows und FAQ: Fly-over
   ========================================================================== */

/* Beim Ueberfahren waechst der GANZE Rahmen samt Schatten - nicht das Motiv
   innerhalb eines stehenden Rahmens. Genau das macht die Referenz mit
   "transform hover:scale-105 transition-all duration-500" auf dem Rahmen.

   Der Unterschied ist deutlich sichtbar: Bei Bildern mit eigener Flaeche
   (etwa die blauen Produktansichten) waechst diese Flaeche mit, bei Motiven
   mit hellem Rand wirkt es, als wachse nur das Bild. Beides ist dasselbe CSS.

   Ausloeser ist der Rahmen selbst, nicht die ganze Zeile - sonst zoomt das
   Bild schon, wenn der Zeiger ueber dem Text daneben steht. */
@media (hover: hover) {
  .mpd-feature__media { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
  .mpd-feature__media:hover { transform: scale(1.05); }
}

/* Entspricht glass-card-hover der Referenz: hellerer Grund, teal getönter
   Rand, weicher Schlagschatten. */
@media (hover: hover) {
  .mpd-faq__item {
    transition: background-color .25s, border-color .25s, box-shadow .25s;
  }
  .mpd-faq__item:hover {
    background: rgba(255, 255, 255, .8);
    border-color: rgba(0, 129, 139, .2);
    box-shadow: 0 20px 60px rgba(0, 129, 139, .15);
  }
}

.mpd-faq__more { margin-top: var(--sp-5); text-align: center; }

/* Die FAQ-Sektion der Referenz ist weiss mit stark gerundeter Oberkante und
   liegt ueber dem Vorherigen. Der zarte Farbschimmer darin stammt von Orbs
   innerhalb der Sektion, nicht vom Hintergrund - deshalb overflow: hidden. */
.mpd-section--faq {
  background: #fff;
  border-radius: 32px 32px 0 0;
  position: relative; z-index: 100;
  overflow: hidden;
}
@media (min-width: 640px) { .mpd-section--faq { border-radius: var(--r-section) var(--r-section) 0 0; } }

/* ==========================================================================
   Bildlaufleiste, Textauswahl, Übergänge
   Werte aus dem Stylesheet der Referenz übernommen (assets/index-*.css).
   ========================================================================== */

/* Der Farbverlauf von Teal nach Gelb ist ein prägendes Detail der Referenz.

   ACHTUNG - hier stand zuerst zusätzlich scrollbar-color auf html. Das war ein
   Fehler: Chrome unterstützt die Eigenschaft seit Version 121 und gibt ihr
   Vorrang vor den ::-webkit-Regeln. Der einfarbige Firefox-Rückfall hat damit
   genau den Verlauf überschrieben, um den es geht.

   Deshalb steht scrollbar-color nur noch dort, wo es die einzige Möglichkeit
   ist - in Browsern ohne ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: var(--brand-teal) rgba(255, 255, 255, .1);
    scrollbar-width: thin;
  }
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, .1); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, var(--brand-teal), var(--brand-yellow));
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, var(--brand-teal-dark), var(--brand-yellow));
}

::selection {
  background-color: color-mix(in srgb, var(--brand-teal) 30%, transparent);
  color: var(--brand-teal);
}

/* Die Referenz legt diesen Übergang pauschal auf alle Schaltflächen und Links.
   Bewusst nicht "all": Das würde auch Layouteigenschaften animieren und beim
   Umschalten der Breakpoints sichtbar ruckeln. */
@media (hover: hover) {
  button, a {
    transition: color .3s cubic-bezier(.4, 0, .2, 1),
                background-color .3s cubic-bezier(.4, 0, .2, 1),
                border-color .3s cubic-bezier(.4, 0, .2, 1),
                opacity .3s cubic-bezier(.4, 0, .2, 1);
  }
}

/* Klickzustand: kurzes Einsinken. In der Referenz nicht messbar - sie nutzt
   den pauschalen Übergang oben -, aber ohne Rückmeldung beim Drücken wirken
   die Schaltflächen auf Touchgeräten tot. */
.mpd-btn:active { transform: scale(.97); }

/* ==========================================================================
   Produktansichten auf der Startseite (Collage)
   ========================================================================== */

/* Gemessen: Container 1248x846, flex, oben buendig, mittig; beide Ansichten
   maximal 800px breit bei 16px Radius. Zusammen 1600px auf 1248px Flaeche -
   sie ueberlappen also um rund 28% ihrer Breite. Das Hochformat liegt vorn. */
.mpd-collage-wrap {
  padding-block: var(--sp-7) var(--sp-8);
  border-radius: 56px 56px 0 0;
  position: relative; z-index: 10;
  /* Siehe .mpd-hero: Ueberstand ja, Bildlaufleiste nein. */
  overflow-x: clip;
}
.mpd-collage {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
/* flex: none ist der Kern: Zwei Ansichten a 800px ergeben 1600px in einem
   1248px breiten Bereich. Ohne die Angabe schrumpfen sie auf die Flaeche
   zusammen; mit ihr ragen sie beidseitig hinaus - genau der offene
   Bildeindruck der Referenz. */
/* Gemessen bei 1536er Fenster: beide Ansichten 1000px breit, Ueberlappung
   136px, zusammen 1864px auf 1488px Inhaltsflaeche - sie ragen also rund
   165px ueber JEDE Seite hinaus. Vorher standen hier 800px und 3vw
   Ueberlappung; die Collage blieb dadurch fast vollstaendig im Bild und
   verlor die raumgreifende Wirkung der Referenz.

   max-width: none, weil der Reset (img { max-width: 100% }) sonst auf die
   Containerbreite zurueckschneidet. */
/* KEIN Schatten - wie bei der Hero-Ansicht und anders als bei den
   Feature-Bildern. Gemessen an der Referenz: nur 16px Radius, weder auf dem
   Bild noch auf dem umgebenden <picture>.

   Der Schatten, der hier stand, legte sich als graue Flaeche unter beide
   Produktansichten und sah aus wie ein Hintergrund. Dieselbe Ursache wie
   zuvor im Hero. */
.mpd-collage img {
  flex: none;
  width: min(1000px, 65vw);
  max-width: none;
  height: auto;
  border-radius: 16px;
}
.mpd-collage img + img {
  margin-left: -9vw;                 /* 136 / 1536 */
  position: relative; z-index: 2;
}

/* Unter 640px stapeln statt ueberlappen - nebeneinander bliebe von beiden
   Ansichten zu wenig uebrig, um etwas zu erkennen. */
@media (max-width: 639px) {
  .mpd-collage { flex-direction: column; align-items: center; gap: var(--sp-4); }
  .mpd-collage img { width: 100%; }
  .mpd-collage img + img { margin-left: 0; }
}

/* Der Flugeffekt: Beim Hereinscrollen steigt das Hochformat auf und schiebt
   sich ueber die Querformat-Ansicht. In der Referenz steuert das JavaScript;
   hier laeuft es an der Scroll-Fortschrittsachse und braucht kein Skript.
   Browser ohne Unterstuetzung zeigen die Collage schlicht statisch. */
@supports (animation-timeline: view()) {
  @media (min-width: 640px) {
    .mpd-collage img + img {
      animation: mpd-collage-flug linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
  }
}
@keyframes mpd-collage-flug {
  from { transform: translateY(90px) scale(.94); }
  to   { transform: none; }
}

/* ==========================================================================
   Dialog "Informationen anfordern"
   Gemessen an der Referenz: 448 breit, Radius 24, weisser Grund.
   ========================================================================== */

.mpd-dialog {
  width: min(448px, calc(100vw - 2 * var(--sp-3)));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--color-fg-body);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.mpd-dialog::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }

.mpd-dialog__form { position: relative; padding: var(--sp-5); }

.mpd-dialog__schliessen {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--color-fg-body);
  cursor: pointer;
}
@media (hover: hover) {
  .mpd-dialog__schliessen:hover { background: var(--color-border-light); color: var(--color-fg); }
}

.mpd-dialog__titel {
  font-size: var(--fs-2xl); line-height: 1.3;
  margin-bottom: var(--sp-3); padding-right: var(--sp-6);
}
.mpd-dialog__text { margin-bottom: var(--sp-4); }

.mpd-dialog__feld  { margin-bottom: var(--sp-4); }
.mpd-dialog__label { display: block; margin-bottom: var(--sp-1); font-weight: var(--fw-medium); color: var(--color-fg); }
.mpd-dialog__eingabe {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-sm);
  font: inherit; color: var(--color-fg);
}
.mpd-dialog__eingabe:focus-visible { border-color: var(--theme-primary); }

/* Rahmen und Innenabstand von fieldset zuruecksetzen - sonst bringt der
   Browser einen eigenen Kasten mit, der hier nicht ins Bild passt. */
.mpd-dialog__gruppe {
  margin: 0 0 var(--sp-4);
  padding: 0;
  border: 0;
}
.mpd-dialog__legende { padding: 0; margin-bottom: var(--sp-1); font-weight: var(--fw-medium); color: var(--color-fg); }
.mpd-dialog__hinweis { margin-bottom: var(--sp-2); font-size: var(--fs-sm); }

.mpd-dialog__wahl {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: 1.5;
  cursor: pointer;
}
.mpd-dialog__wahl input {
  flex: none;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--theme-primary);
}

.mpd-dialog__aktionen {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: flex-end;
  margin-top: var(--sp-5);
}

/* ==========================================================================
   Seitenwechsel
   ========================================================================== */

/* Die Referenz ist eine Einzelseitenanwendung: Beim Wechsel zwischen Vision,
   Verwaltung und Unternehmen wird nichts neu geladen, der Inhalt blendet um.
   TYPO3 liefert dagegen echte Seitenaufrufe - ohne Vorkehrung blitzt der
   Browser weiss auf.

   Die View-Transitions-API schliesst die Luecke ohne JavaScript und ohne
   Einzelseitenanwendung. Browser ohne Unterstuetzung ignorieren die Regel und
   wechseln wie gewohnt hart - kein Rueckschritt gegenueber vorher. */
@view-transition { navigation: auto; }

/* Nicht an prefers-reduced-motion gekoppelt: Der Wechsel dauert weniger als
   drei Zehntelsekunden, laeuft nur auf Klick und ersetzt ein hartes
   Weissaufblitzen. Ausfuehrliche Begruendung im Block "Bewegung abschalten"
   am Ende der Datei. */
@media all {
  ::view-transition-old(root) {
    animation: mpd-seite-raus .18s cubic-bezier(.4, 0, 1, 1) both;
  }
  ::view-transition-new(root) {
    animation: mpd-seite-rein .28s cubic-bezier(0, 0, .2, 1) both;
  }
}

@keyframes mpd-seite-raus { to   { opacity: 0; } }
@keyframes mpd-seite-rein { from { opacity: 0; } }

/* Kopf- und Fusszeile sind auf allen Seiten gleich und sollen beim Wechsel
   ruhig stehen bleiben, statt mit auszublenden - genau der Eindruck, den die
   Einzelseitenanwendung erzeugt. */
.mpd-govbar { view-transition-name: mpd-govbar; }
.mpd-header { view-transition-name: mpd-header; }
.mpd-footer { view-transition-name: mpd-footer; }

/* Die gleitende Pille - der eigentliche Uebergangseffekt der Referenz.

   Gemessen: Beim Seitenwechsel blendet die Referenz den Inhalt NICHT ueber
   (Deckung bleibt 1, kein Transform). Auffaellig ist etwas anderes - die
   Markierung des aktiven Eintrags wandert zum neuen Tab.

   In einer Einzelseitenanwendung ist das einfach: Das Element bleibt dasselbe
   und bekommt eine neue Position. Bei echten Seitenaufrufen ist es nach dem
   Wechsel ein anderes Element - es kann nichts "wandern".

   Genau dafuer gibt es view-transition-name: Traegt das Element auf beiden
   Seiten denselben Namen, erkennt der Browser es als dasselbe wieder und
   bewegt es zwischen den Positionen. Damit laesst sich der Effekt auch ohne
   Einzelseitenanwendung nachbauen.

   Der Name darf je Dokument nur einmal vorkommen - das ist hier gegeben,
   weil immer nur ein Eintrag aria-current traegt. */
.mpd-nav__link[aria-current="page"] { view-transition-name: mpd-nav-pille; }

@media all {
  ::view-transition-old(mpd-nav-pille),
  ::view-transition-new(mpd-nav-pille) {
    /* Nur bewegen, nicht ein- und ausblenden - sonst blitzt die Pille auf,
       statt zu gleiten. */
    animation: none;
    mix-blend-mode: normal;
  }
  ::view-transition-group(mpd-nav-pille) {
    animation-duration: .35s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

/* ==========================================================================
   Nachbesserungen aus dem Abgleich mit der Referenz
   ========================================================================== */

/* Feature-Rows auf Mobil: In der Referenz steht in der Verlaufskarte zuerst
   der Text, darunter das Bild. Das Markup fuehrt das Bild zuerst, weil auf
   Desktop die Zeilen abwechselnd gespiegelt werden - dort stimmt die Folge.
   Unter 1024px wird sie hier umgekehrt. */
@media (max-width: 1023px) {
  .mpd-feature { flex-direction: column-reverse; }
}

/* Mobile Feinmasse, gemessen bei 390px:
   Sektion der Handbuecher 48px statt 64px Innenabstand, Karte 24px bei 16px
   Radius, FAQ-Karte 16px, FAQ-Eintrag 8px/12px bei 14px Radius, Ausloeser
   16px/24px statt 20px. */
@media (max-width: 639px) {
  .mpd-downloads { padding: var(--sp-4); border-radius: 16px; }
  .mpd-download  { padding: var(--sp-3) var(--sp-4); }

  .mpd-faq { padding: var(--sp-3); border-radius: 16px; }
  .mpd-faq__item {
    padding: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-2);
    border-radius: 14px;
  }
  .mpd-faq__trigger { font-size: var(--fs-base); line-height: 1.5; }
}

/* Zwei Handlungsaufforderungen im Hero stehen auf Mobil untereinander und
   nehmen je die volle Breite (gemessen 348x64). Nebeneinander bleiben bei
   390px nur rund 166px je Schaltflaeche - der Text bricht um. */
@media (max-width: 639px) {
  .mpd-hero__actions { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .mpd-hero__actions .mpd-btn { width: 100%; }
}

/* Der Footer steht in der Referenz schon ab 768px dreispaltig. */
@media (min-width: 768px) {
  .mpd-footer__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
}

/* Links im Fliesstext waren bisher nur am Mauszeiger zu erkennen - der Reset
   setzt color: inherit und es gab keine Gegenregel. Das verstoesst gegen
   WCAG 1.4.1 und trifft ausgerechnet die Rechtstexte, die fast nur aus
   Fliesstext mit Verweisen bestehen. */
.mpd-prose a {
  color: var(--theme-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) {
  .mpd-prose a:hover { color: var(--theme-secondary); }
}

/* Abstaende im Fliesstext - ohne sie klebt der Rechtstext zusammen. */
.mpd-prose > * + * { margin-top: var(--sp-3); }
.mpd-prose h2 { margin-top: var(--sp-6); font-size: var(--h3); line-height: 1.25; }
.mpd-prose h3 { margin-top: var(--sp-5); font-size: var(--fs-2xl); line-height: 1.3; }
.mpd-prose h4 { margin-top: var(--sp-4); font-size: var(--fs-xl); line-height: 1.4; }
.mpd-prose ul { padding-left: var(--sp-4); list-style: disc; }
.mpd-prose li { margin-bottom: var(--sp-1); }
.mpd-prose li::marker { color: var(--theme-primary); }

/* Echte deaktivierte Schaltflaechen kennzeichnen - bisher war nur
   aria-disabled abgedeckt, nicht das native Attribut. */
.mpd-btn:disabled, button:disabled { opacity: .5; pointer-events: none; }

/* ==========================================================================
   Windows-Kontrastmodus
   ========================================================================== */

/* In diesem Modus entfernt der Browser alle Hintergrundbilder. Betroffen sind
   zwei tragende Bauteile:

   - .mpd-gradient-text faerbt Text ueber background-clip und setzt color auf
     transparent. Ohne Hintergrundbild bleibt unsichtbarer Text - es
     verschwinden genau die hervorgehobenen Worte jeder Ueberschrift.
   - .mpd-btn setzt weisse Schrift auf einen Verlauf. Ohne den Verlauf steht
     Weiss auf Weiss.

   Beides wird hier auf Systemfarben zurueckgesetzt. Die Referenz hat dafuer
   keine Vorsorge; das ist eine bewusste Abweichung zu ihren Gunsten. */
@media (forced-colors: active) {
  .mpd-gradient-text {
    background-image: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }

  .mpd-btn,
  .mpd-nav__link[aria-current="page"] {
    background-image: none;
    background-color: ButtonFace;
    color: ButtonText;
    border: 2px solid ButtonText;
    forced-color-adjust: none;
  }

  /* Der aktive Eintrag braucht ein Merkmal, das den Modus ueberlebt. */
  .mpd-nav__link[aria-current="page"] {
    background-color: Highlight;
    color: HighlightText;
  }

  /* Die Verlaufskarte der Feature-Rows auf Mobil traegt weisse Schrift. */
  .mpd-feature {
    background-image: none;
    border: 1px solid CanvasText;
    color: CanvasText;
  }
  .mpd-feature__title, .mpd-feature__text { color: CanvasText; }

  /* Glasflaechen verlieren ihre Abgrenzung, wenn die Transparenz entfaellt. */
  .mpd-glass, .mpd-faq__item, .mpd-download { border: 1px solid CanvasText; }
}

/* ==========================================================================
   Bewegung abschalten, wenn der Nutzer das wünscht.
   Die Referenz behandelt das nur an einer Stelle - hier global.
   ========================================================================== */

/* Was hier abgeschaltet wird - und was bewusst nicht.
   ---------------------------------------------------

   ABGESCHALTET wird alles, was von SELBST laeuft, ohne dass jemand etwas tut:
   der federnde Scrollhinweis, der pulsierende Punkt darin, weiches Scrollen.
   Genau darauf zielt die Einstellung.

   NICHT abgeschaltet werden Bewegungen, die der Nutzer selbst ausloest und
   jederzeit beendet - der Zoom beim Ueberfahren - sowie die an den Scrollweg
   gekoppelten Effekte: die Fahrt der Bildkacheln und der Flug der Collage.

   Diese zweite Entscheidung ist eine bewusste Abweichung von der ueblichen
   Empfehlung und verdient eine Begruendung:

   1. Die Effekte laufen nicht von selbst. Sie folgen dem Scrollweg und stehen
      still, sobald der Nutzer stillhaelt - er behaelt die Kontrolle.
   2. Die Referenz schaltet nichts davon ab. Ein Nachbau, der weniger zeigt,
      waere kein Nachbau.
   3. Ausschlaggebend war die Praxis: Windows meldet in VM- und Fernsitzungen
      pauschal "reduce", weil es dort Fensteranimationen abschaltet. Auf einem
      Arbeitsplatz in der VM waren damit ALLE Bewegungen dauerhaft weg -
      niemand hatte das so eingestellt, und niemand konnte es dort aendern.
      Die Einstellung traf damit nicht die Absicht, sondern die Umgebung.

   FUER DEN PRODUKTIVBETRIEB gehoert das erneut abgewogen. Wer echte
   Empfindlichkeit gegenueber Bewegung hat, stellt "reduce" bewusst ein und
   erwartet zu Recht Ruhe. Dann waere der richtige Weg, die Kachelfahrt in
   abgeschwaechter Form laufen zu lassen - etwa nur die Skalierung ohne die
   grosse Verschiebung - statt sie ganz zu streichen oder ganz zu zeigen. */

@media (prefers-reduced-motion: reduce) {
  /* Kein Stern-Selektor mehr: "animation-duration: .01ms !important" haette
     auch die an den Scrollweg gekoppelten Effekte zerstoert - dort steuert
     nicht die Dauer den Fortschritt, sondern die Scrollachse. */
  html { scroll-behavior: auto !important; }

  /* Selbstlaeufer anhalten. */
  .mpd-scroll-hint,
  .mpd-scroll-hint::before { animation: none !important; }
}