/* ==============================================================================================
   mitovo - Stylesheet der neuen Seiten (Absprache mit Sascha, 11.10.2026).
   Farbwelt "Petrol & Kupfer", abgeleitet aus dem Logo assets/mitovo.svg. Eigenes Plain-CSS mit
   Praefix "mv-", kein Tailwind. Die frueheren Dateien bleiben unberuehrt daneben liegen:
   assets/style.css = alte "Vertrauen"-Startseite (Terrakotta), assets/tdg-style.css = TdG-Kopie.

   Aufbau: 1 Grundlagen  2 Bausteine (Logo, Ring, Button)  3 Hero mit Kopfzeile
           4 Persoenlichkeiten  5 Trust-Zeile  6 Fusszeile  7 Breite Bildschirme (Startseite)
           8 Registrierung (mit eigenem Block fuer breite Bildschirme)
   Mobile-first: alles gilt zuerst fuers Handy, die Bloecke "breite Bildschirme" erweitern.
   ============================================================================================== */

/* ---------- 1 Grundlagen ---------- */

@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --mv-tiefpetrol: #0F2327;      /* dunkle Flaechen (Hero, Fusszeile) */
  --mv-petrol: #203D42;          /* Logo-Petrol: Schrift auf Hell, Trust-Zeile */
  --mv-kupfer: #B87552;          /* Logo-Kupfer: Ring, Punkt */
  --mv-kupfer-flaeche: #C98660;  /* Buttons auf Dunkel (heller als Logo-Kupfer, damit dunkle Schrift gut lesbar ist) */
  --mv-kupfer-text: #9A5A38;     /* Links auf Hell */
  --mv-sand: #F3ECE1;            /* helle Flaechen, Schrift auf Dunkel */
  --mv-sand-hell: #FBF7F1;       /* Sprechblasen auf Sand */
  --mv-nebel: #A9BCBC;           /* gedaempfte Schrift auf Dunkel */
  --mv-grau-petrol: #55696C;     /* gedaempfte Schrift auf Hell */
  --mv-linie-dunkel: rgba(243, 236, 225, 0.14);
  --mv-linie-hell: rgba(32, 61, 66, 0.16);
  --mv-rand: 20px;               /* Seitenrand */
  --mv-font: "Outfit", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Ausgeblendetes bleibt ausgeblendet, auch wenn eine Regel sonst "display" setzt (z. B. img). */
[hidden] {
  display: none !important;
}

/* Damit sich der Fortschritts-Ring der Registrierung weich fuellt statt zu springen. Der
   Ausgangswert 1 = voller Ring, wie ueberall, wo nichts anderes gesetzt ist. */
@property --mv-ring-fill {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--mv-font);
  font-size: 16px;
  line-height: 1.5;
  background: var(--mv-tiefpetrol);
  color: var(--mv-sand);
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--mv-kupfer);
  outline-offset: 3px;
}

.mv-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: var(--mv-rand);
  padding-right: var(--mv-rand);
}

/* ---------- 2 Bausteine ---------- */

.mv-logo {
  display: block;
  height: 26px;
  width: auto;
}

/* Der offene Ring ist das Zeichen aus dem Logo (die beiden "o") und markiert jede
   KI-Persoenlichkeit. Groesse ueber --mv-ring-size, Staerke ueber --mv-ring-width. Ohne Bild im
   Inneren ist es nur das Zeichen (wie vor dem Namen im Hero). */
.mv-ring {
  position: relative;
  flex: none;
  display: block;
  width: var(--mv-ring-size, 56px);
  aspect-ratio: 1;
}

.mv-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 152deg, var(--mv-kupfer) 0 calc(322deg * var(--mv-ring-fill, 1)), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--mv-ring-width, 3px)), #000 calc(100% - var(--mv-ring-width, 3px) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--mv-ring-width, 3px)), #000 calc(100% - var(--mv-ring-width, 3px) + 0.5px));
}

/* Ablaufender Ring im Hero (Absprache mit Sascha, 11.10.2026): assets/start.js setzt
   --mv-ring-fill von 1 (voll) bis 0 (leer) im Takt des laufenden Persona-Videos - ist der Ring
   leer, kommt die naechste Persona. Darunter bleibt eine blasse Spur stehen, damit die Form auch
   kurz vor dem Wechsel erkennbar ist. Ohne Skript oder bei reduzierter Bewegung bleibt er voll. */
.mv-ring-timer::before {
  background:
    conic-gradient(from 152deg, var(--mv-kupfer) 0 calc(322deg * var(--mv-ring-fill, 1)), transparent 0),
    conic-gradient(from 152deg, rgba(184, 117, 82, 0.3) 0 322deg, transparent 0);
}

.mv-ring img {
  position: absolute;
  inset: calc(var(--mv-ring-width, 3px) + var(--mv-ring-gap, 3px));
  width: calc(100% - 2 * (var(--mv-ring-width, 3px) + var(--mv-ring-gap, 3px)));
  height: calc(100% - 2 * (var(--mv-ring-width, 3px) + var(--mv-ring-gap, 3px)));
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 16%;
  background: rgba(32, 61, 66, 0.12);
}

.mv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 16.5px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}

.mv-btn-kupfer {
  background: var(--mv-kupfer-flaeche);
  color: var(--mv-tiefpetrol);
}

.mv-btn-kupfer:hover {
  background: #D39370;
}

/* ---------- 3 Hero mit Kopfzeile ---------- */

.mv-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 680px;
  min-height: min(760px, 100svh);
  overflow: hidden;
  background: var(--mv-tiefpetrol);
}

/* Bildflaeche: Startfoto, darueber zwei Video-Ebenen, darueber der Verlauf fuer die Lesbarkeit. */
.mv-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mv-hero-photo,
.mv-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 12%;
}

.mv-hero-video {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.mv-hero-video.is-on {
  opacity: 1;
}

/* Das neu eingeblendete Video liegt oben - das alte bleibt darunter voll sichtbar, bis das neue
   ganz da ist (kein Durchscheinen des Startfotos beim Wechsel). */
.mv-hero-video.is-top {
  z-index: 1;
}

.mv-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(15, 35, 39, 0.62) 0%,
    rgba(15, 35, 39, 0.06) 24%,
    rgba(15, 35, 39, 0.5) 50%,
    var(--mv-tiefpetrol) 86%);
}

/* Logo links, ausgeschrieben "Anmelden" rechts. Kein Menue: die Seite ist kurz, alle weiteren
   Links stehen in der Fusszeile. Das fruehere "Powered by TdG" neben dem Logo ist seit 11.10.2026
   entfernt. */
.mv-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.mv-brand {
  display: block;
}

.mv-login {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.mv-login:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Der Textblock steht unten: wechselt die Persona und ihr Text ist laenger oder kuerzer, bleibt
   der Button an seinem Platz - nur die obere Kante des Texts wandert. */
.mv-hero-body {
  position: relative;
  z-index: 3;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 30px;
}

.mv-hero-inner {
  max-width: 560px;
}

.mv-hero-text {
  transition: opacity 0.26s ease;
}

.mv-hero-text.is-changing {
  opacity: 0;
}

.mv-persona-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
}

.mv-persona-line .mv-ring {
  --mv-ring-size: 20px;
  --mv-ring-width: 4.5px;
}

.mv-headline {
  margin: 0 0 14px;
  font-size: 35px;
  line-height: 1.1;
  font-weight: 550;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.mv-bubble {
  display: inline-block;
  max-width: 320px;
  margin: 0 0 22px;
  padding: 11px 16px;
  border: 1px solid var(--mv-linie-dunkel);
  border-radius: 18px 18px 18px 4px;
  background: rgba(24, 52, 58, 0.88);
  font-size: 15.5px;
  line-height: 1.4;
}

.mv-hero .mv-btn {
  display: flex;
  width: 100%;
}

.mv-trust {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--mv-nebel);
  text-align: center;
}

/* ---------- 4 Persoenlichkeiten zum Durchblaettern ---------- */

.mv-people {
  padding: 44px 0 40px;
  background: var(--mv-sand);
  color: var(--mv-petrol);
}

.mv-people-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.mv-h2 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.14;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.mv-sub {
  max-width: 40ch;
  margin: 0;
  color: var(--mv-grau-petrol);
}

/* Filter und Pfeile brauchen JavaScript - ohne bleiben sie ausgeblendet, die Reihe laesst sich
   trotzdem wischen. */
.mv-arrows,
.mv-chips {
  display: none;
}

.js .mv-chips {
  display: flex;
  gap: 8px;
  margin: 22px 0 6px;
}

.mv-chip {
  min-height: 40px;
  padding: 0 18px;
  border: 1.5px solid var(--mv-linie-hell);
  border-radius: 999px;
  background: transparent;
  color: var(--mv-petrol);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.mv-chip[aria-pressed="true"] {
  border-color: var(--mv-petrol);
  background: var(--mv-petrol);
  color: var(--mv-sand);
}

.mv-arrow {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--mv-petrol);
  border-radius: 50%;
  background: transparent;
  color: var(--mv-petrol);
  cursor: pointer;
}

.mv-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.mv-arrow svg {
  width: 20px;
  height: 20px;
}

/* Die Reihe laeuft ueber die volle Breite; die naechste Karte ist immer angeschnitten zu sehen -
   das zeigt ohne Button, dass es weitergeht. */
.mv-voices {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 18px var(--mv-rand) 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--mv-rand);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.mv-voices::-webkit-scrollbar {
  display: none;
}

.mv-voice {
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-snap-align: start;
}

.mv-voice[hidden] {
  display: none;
}

.mv-voice .mv-ring {
  --mv-ring-size: 150px;
  --mv-ring-width: 5px;
  --mv-ring-gap: 5px;
  margin-bottom: 14px;
}

.mv-voice-name {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 550;
}

.mv-voice-job {
  margin: 1px 0 12px;
  font-size: 15px;
  color: var(--mv-grau-petrol);
}

.mv-voice-says {
  margin: 0;
  padding: 12px 15px;
  border: 1px solid var(--mv-linie-hell);
  border-radius: 4px 18px 18px 18px;
  background: var(--mv-sand-hell);
  font-size: 15.5px;
  line-height: 1.4;
}

.mv-voice-go {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 4px;
  font-size: 15.5px;
  font-weight: 550;
  color: var(--mv-kupfer-text);
  text-underline-offset: 4px;
}

.mv-more-ring {
  display: grid;
  place-items: center;
  width: 150px;
  aspect-ratio: 1;
  margin-bottom: 14px;
  border: 2px dashed rgba(32, 61, 66, 0.3);
  border-radius: 50%;
  font-size: 34px;
  font-weight: 550;
  letter-spacing: -0.02em;
}

/* ---------- 5 Trust-Zeile ---------- */

.mv-trustband {
  padding: 26px 0;
  background: var(--mv-petrol);
  color: var(--mv-sand);
}

.mv-trustband ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
}

.mv-trustband li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

/* der Kupfer-Punkt ist der i-Punkt aus dem Logo */
.mv-trustband li::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mv-kupfer);
  transform: translateY(-1px);
}

/* ---------- 6 Fusszeile ---------- */

.mv-footer {
  padding: 38px 0 22px;
  background: var(--mv-tiefpetrol);
  color: var(--mv-sand);
}

.mv-footer .mv-logo {
  height: 30px;
}

.mv-footer-tagline {
  margin: 12px 0 28px;
  font-size: 15px;
  color: var(--mv-nebel);
}

.mv-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 28px;
}

.mv-footer-cols h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 550;
}

.mv-footer-cols ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-footer-cols a {
  display: inline-block;
  padding: 5px 0;
  font-size: 15px;
  color: var(--mv-nebel);
  text-decoration: none;
}

.mv-footer-cols a:hover {
  color: var(--mv-sand);
}

.mv-footer-bottom {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--mv-linie-dunkel);
  font-size: 12.5px;
  color: var(--mv-nebel);
}

/* ---------- schmale Handys ---------- */

@media (max-width: 374px) {
  .mv-headline {
    font-size: 31px;
  }
}

/* ---------- 7 Breite Bildschirme (Tablet quer, Desktop) ---------- */

@media (min-width: 900px) {
  :root {
    --mv-rand: 40px;
  }

  .mv-logo {
    height: 34px;
  }

  .mv-header {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .mv-login {
    font-size: 17px;
  }

  .mv-hero {
    min-height: 720px;
    min-height: min(780px, 100svh);
  }

  /* Die Videos sind hochkant (3:4). Formatfuellend wuerden sie auf breiten Bildschirmen extrem
     angeschnitten, deshalb stehen sie als Flaeche rechts und laufen nach links ins Petrol aus. */
  .mv-hero-media {
    left: auto;
    width: clamp(560px, 58vw, 900px);
  }

  .mv-hero-photo,
  .mv-hero-video {
    object-position: 50% 16%;
  }

  .mv-hero-media::after {
    background:
      linear-gradient(90deg, var(--mv-tiefpetrol) 0%, rgba(15, 35, 39, 0.78) 26%, rgba(15, 35, 39, 0) 64%),
      linear-gradient(180deg, rgba(15, 35, 39, 0.72) 0%, rgba(15, 35, 39, 0) 24%, rgba(15, 35, 39, 0) 70%, var(--mv-tiefpetrol) 100%);
  }

  .mv-hero-body {
    padding-bottom: 92px;
  }

  .mv-persona-line {
    font-size: 16px;
  }

  .mv-persona-line .mv-ring {
    --mv-ring-size: 22px;
  }

  .mv-headline {
    margin-bottom: 20px;
    font-size: 60px;
    line-height: 1.04;
  }

  .mv-bubble {
    max-width: 400px;
    margin-bottom: 28px;
    padding: 13px 18px;
    font-size: 17px;
  }

  .mv-hero .mv-btn {
    display: inline-flex;
    width: auto;
    min-height: 58px;
    padding: 0 36px;
    font-size: 18px;
  }

  .mv-trust {
    font-size: 15px;
    text-align: left;
  }

  .mv-people {
    padding: 76px 0 64px;
  }

  .mv-h2 {
    font-size: 40px;
  }

  .mv-sub {
    font-size: 18px;
  }

  /* Pfeile nur auf breiten Bildschirmen - auf dem Handy wird gewischt. */
  .js .mv-arrows {
    display: flex;
    flex: none;
    gap: 8px;
  }

  .mv-voices {
    gap: 26px;
    padding-left: max(var(--mv-rand), calc((100vw - 1160px) / 2 + var(--mv-rand)));
    padding-right: var(--mv-rand);
    scroll-padding-left: max(var(--mv-rand), calc((100vw - 1160px) / 2 + var(--mv-rand)));
  }

  .mv-voice {
    flex-basis: 258px;
  }

  .mv-voice .mv-ring {
    --mv-ring-size: 172px;
  }

  .mv-more-ring {
    width: 172px;
  }

  .mv-trustband {
    padding: 30px 0;
  }

  .mv-trustband ul {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-size: 17px;
  }

  .mv-footer {
    padding: 60px 0 26px;
  }

  .mv-footer-top {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
}

/* Sanftes Blaettern nur, wenn der Nutzer Bewegung nicht reduziert hat. */
@media (prefers-reduced-motion: no-preference) {
  .mv-voices {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-hero-video,
  .mv-hero-text {
    transition: none;
  }
}

/* ==============================================================================================
   8 Registrierung (registrieren.php, Absprache mit Sascha 11.10.2026, nach dem abgenommenen
   Entwurf). Helle Seite auf Sand, eine Frage pro Bildschirm, der Ring um das Portrait ist der
   Fortschritt (--mv-ring-fill, gesetzt von assets/registrieren.js).
   ============================================================================================== */

body.mv-light {
  background: var(--mv-sand);
  color: var(--mv-petrol);
}

.mv-reg {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.mv-reg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.mv-reg-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  padding-bottom: 28px;
}

/* Persona mit Fortschritts-Ring */
.mv-reg-who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 26px;
}

.mv-reg-who .mv-ring {
  --mv-ring-size: 88px;
  --mv-ring-width: 5px;
  --mv-ring-gap: 4px;
  transition: --mv-ring-fill 0.5s ease;
}

/* ohne Persona steht "120+" im Ring */
.mv-reg-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 550;
  letter-spacing: -0.02em;
}

.mv-reg-who-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 550;
}

.mv-reg-who-sub {
  margin: 3px 0 0;
  font-size: 14.5px;
  color: var(--mv-grau-petrol);
}

/* das Zitat der Persona gibt es nur auf breiten Bildschirmen, siehe unten */
.mv-reg-quote {
  display: none;
}

/* Frage und Antwortfelder */
.mv-reg-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -10px 0 4px -4px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--mv-grau-petrol);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.mv-reg-back svg {
  width: 18px;
  height: 18px;
}

.mv-reg-q {
  margin: 0 0 18px;
  font-size: 29px;
  line-height: 1.12;
  font-weight: 550;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* die Frage bekommt beim Schrittwechsel den Fokus (fuer Screenreader) - ohne sichtbaren Rahmen */
.mv-reg-q:focus {
  outline: none;
}

.mv-reg-q2 {
  margin: 26px 0 12px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 550;
}

.mv-choices {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mv-choices-2 {
  grid-template-columns: 1fr 1fr;
}

.mv-choice {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 0 20px;
  border: 1.5px solid var(--mv-linie-hell);
  border-radius: 18px;
  background: var(--mv-sand-hell);
  color: var(--mv-petrol);
  font: inherit;
  font-size: 18px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

/* Hover nur mit Maus: auf dem Handy bleibt "hover" nach dem Antippen haengen, und das Feld an
   derselben Stelle im naechsten Schritt saehe schon wie ausgewaehlt aus. */
@media (hover: hover) {
  .mv-choice:hover {
    border-color: var(--mv-petrol);
  }
}

.mv-choice[aria-pressed="true"] {
  border-color: var(--mv-petrol);
  background: var(--mv-petrol);
  color: var(--mv-sand);
}

/* letzter Schritt: Zugang */
.mv-field {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
}

.mv-field label {
  font-size: 15px;
  font-weight: 500;
}

.mv-input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border: 1.5px solid var(--mv-linie-hell);
  border-radius: 14px;
  background: var(--mv-sand-hell);
  color: var(--mv-petrol);
  font: inherit;
  font-size: 17px;
}

.mv-input::placeholder {
  color: #8A9799;
}

.mv-input:focus {
  outline: 2px solid var(--mv-kupfer);
  outline-offset: 1px;
  border-color: var(--mv-petrol);
}

.mv-input[aria-invalid="true"] {
  border-color: #A63A2B;
}

.mv-field-fehler {
  margin: 0;
  font-size: 14px;
  color: #A63A2B;
}

.mv-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 20px;
  font-size: 15px;
  line-height: 1.4;
}

.mv-check input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--mv-petrol);
}

.mv-check a {
  color: var(--mv-kupfer-text);
  text-underline-offset: 3px;
}

.mv-btn-petrol {
  width: 100%;
  background: var(--mv-petrol);
  color: var(--mv-sand);
}

.mv-btn-petrol:hover {
  background: #18343A;
}

.mv-btn-petrol:disabled {
  opacity: 0.35;
  cursor: default;
}

.mv-reg-after {
  margin: 12px 0 0;
  font-size: 14.5px;
  color: var(--mv-grau-petrol);
  text-align: center;
}

/* Hinweis im Formular (z. B. solange die Anmeldung noch nicht freigeschaltet ist) */
.mv-reg-hinweis {
  margin: 16px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--mv-linie-hell);
  border-radius: 14px;
  background: var(--mv-sand-hell);
  font-size: 15px;
  line-height: 1.4;
}

.mv-reg-foot {
  margin: 26px 0 0;
  font-size: 15px;
  color: var(--mv-grau-petrol);
}

.mv-reg-foot a {
  color: var(--mv-kupfer-text);
  font-weight: 550;
  text-underline-offset: 3px;
}

/* Registrierung auf breiten Bildschirmen: Persona gross links mit Zitat, Fragen rechts */
@media (min-width: 900px) {
  .mv-reg-header {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  .mv-reg-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    padding-top: 30px;
    padding-bottom: 80px;
  }

  .mv-reg-who {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    margin: 0;
  }

  .mv-reg-who .mv-ring {
    --mv-ring-size: 300px;
    --mv-ring-width: 9px;
    --mv-ring-gap: 9px;
  }

  .mv-reg-count {
    font-size: 64px;
  }

  .mv-reg-who-title {
    font-size: 34px;
  }

  .mv-reg-who-sub {
    font-size: 17px;
  }

  .mv-reg-quote {
    display: inline-block;
    max-width: 360px;
    margin: 14px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--mv-linie-hell);
    border-radius: 4px 18px 18px 18px;
    background: var(--mv-sand-hell);
    font-size: 16.5px;
    line-height: 1.4;
  }

  .mv-reg-steps {
    max-width: 440px;
  }

  .mv-reg-q {
    margin-bottom: 24px;
    font-size: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mv-reg-who .mv-ring {
    transition: none;
  }
}