/* ═══════════════════════════════════════════════════════════════════════════
   /mitpullen/ — [tp_mitpullen] · Sektionsdatei zum Fundament (neuaufbau.css)
   Stand: 2026-08-13 · Seiten-Agent full-pull + mitpullen

   MATERIAL-RHYTHMUS:
     Kopfleiste + Hero       dunkel  (Fundament)
     1 Anmeldung & Termin    --light   Papier mit Rasterlinien
     2 In 4 Schritten        --dark    Maschinenblau, Licht von oben
     3 Gewichtsklassen       --sand    tieferes Papier
     4 Was du brauchst       --photo   randabfallendes Foto + Veil  ← Zäsur
     5 Technik               --light   Papier
     6 Sicherheit & Haftung  --sand    tieferes Papier
     7 Veranstalter + CTA    --ink     fast schwarz

   ACHSE: Mitte. Der Termin-/Preis-Block stand vorher als Spalte NEBEN dem
   Text (zwei Achsen) — er läuft jetzt als Band unter dem Kopf auf derselben
   Achse. Innerhalb der Bänder/Karten gilt eine gemeinsame linke Kante.

   ACHTUNG (aus der Vorgeschichte): Diese Klassen nutzen den EINFACHEN
   Bindestrich — .tp-mp-class, .tp-mp-card, NICHT BEM. Selektoren wie
   [class*="__class"] greifen hier nicht.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1 · KAPITEL 1 — ANMELDUNG, TERMIN, PREIS (Papier) ══════ */

.tp-mp-hero{ text-align: center; }
.tp-mp-hero__text{ max-width: 760px; margin-inline: auto; }

.tp-mp .tp-mp-hero__eye{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s1);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  margin: 0 0 var(--tp-s3);
}
.tp-mp .tp-pl-intro__dot{
  width: 7px; height: 7px;
  background: var(--tp-red);
  border-radius: 50%;
  flex: none;
}
.tp-mp .tp-mp-hero__h{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d2);
  line-height: var(--tp-lh-display);
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--tp-ink);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
  text-wrap: balance;
}
.tp-mp .tp-mp-hero__h::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s4) auto var(--tp-s5);
}
.tp-mp .tp-mp-hero__lead{
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--tp-ink-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto var(--tp-s5);
  text-wrap: pretty;
}
.tp-mp .tp-mp-hero__lead strong{ color: var(--tp-ink); font-weight: 600; }

/* Der eveeno-Knopf — beide Ausführungen in der Sprache des Fundaments */
.tp-mp .tp-mp-cta,
.tp-mp .tp-mp-cta:link,
.tp-mp .tp-mp-cta:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tp-s2);
  min-height: var(--tp-tap);
  padding: 19px 34px;
  background: var(--tp-red);
  border: 1px solid var(--tp-red);
  border-radius: var(--tp-r-ui);
  color: #fff;
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  transition: background var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease), transform var(--tp-dur) var(--tp-ease);
}
.tp-mp .tp-mp-cta:hover{
  background: var(--tp-red-dark);
  border-color: var(--tp-red-dark);
  color: #fff;
  transform: translateY(-2px);
}
.tp-mp .tp-mp-cta:active{ transform: translateY(-1px); }
.tp-mp .tp-mp-cta:focus-visible{ outline: 2px solid var(--tp-red); outline-offset: 3px; }
.tp-mp .tp-mp-cta--big{ padding: 23px 44px; }

.tp-mp .tp-mp-hero__hint{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.6;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
  max-width: 46em;
  margin: var(--tp-s3) auto 0;
}

/* Termin- und Preis-Band — vier Felder, gleiche Achse wie der Kopf */
.tp-mp-datecard{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  max-width: 900px;
  margin: var(--tp-s7) auto 0;
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  background: var(--tp-surface);
  overflow: hidden;
  text-align: center;
}
.tp-mp .tp-mp-datecard__eye{
  grid-column: 1 / -1;
  padding: var(--tp-s3) var(--tp-s3) 0;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-ink);
}
.tp-mp-datecard__days,
.tp-mp-datecard__month,
.tp-mp-datecard__time,
.tp-mp-datecard__price{
  padding: var(--tp-s4) var(--tp-s3);
  border-left: 1px solid var(--tp-hair-l);
}
.tp-mp-datecard__days{ border-left: 0; }
.tp-mp-datecard__days,
.tp-mp-datecard__month{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ink);
}
.tp-mp .tp-mp-datecard__time{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.6;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-2);
}
.tp-mp-datecard__price{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tp-s1);
}
.tp-mp .tp-mp-datecard__price strong{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  color: var(--tp-red-ink);
}
.tp-mp .tp-mp-datecard__price span{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.6;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
}
@media (max-width: 760px){
  .tp-mp-datecard{ grid-template-columns: repeat(2, 1fr); }
  .tp-mp-datecard__month,
  .tp-mp-datecard__price{ border-left: 1px solid var(--tp-hair-l); }
  .tp-mp-datecard__time{ border-left: 0; }
  .tp-mp-datecard__time,
  .tp-mp-datecard__price{ border-top: 1px solid var(--tp-hair-l); }
}


/* ═══════════════ 2 · KAPITEL 2 — VIER SCHRITTE (Maschinenblau) ═════════ */

.tp-mp-track__head{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--tp-s7);
}
.tp-mp .tp-mp-track__eye{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s1);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ondark-3);
}
.tp-mp .tp-mp-track__head h3{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
  margin: 0;
}
.tp-mp .tp-mp-track__head h3::before{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s3) auto var(--tp-s3);
}

.tp-mp-track__rail{ position: relative; padding-top: var(--tp-s6); }
/* Linie exakt auf Höhe der Schritt-Punkte (Punkt 40 px hoch, Mitte = 20 px) */
.tp-mp-track__line,
.tp-mp-track__line--fill{
  position: absolute;
  top: calc(var(--tp-s6) + 20px);
  left: 0; right: 0;
  height: 2px;
  background: var(--tp-hair-d);
}
.tp-mp-track__line--fill{
  right: auto;
  width: 0;
  background: var(--tp-red);
}
.tp-mp-track__tractor{
  position: absolute;
  top: calc(var(--tp-s6) + 20px);
  left: 0;
  transform: translate(-50%, -50%);
  color: var(--tp-ondark);
  display: grid; place-items: center;
  width: 48px; height: 40px;
}
html.tp-anim .tp-mp-track__line--fill{ transition: width 1.6s var(--tp-ease); }
html.tp-anim .tp-mp-track__tractor{ transition: left 1.6s var(--tp-ease); }
.tp-mp-track.is-live .tp-mp-track__line--fill{ width: 100%; }
.tp-mp-track.is-live .tp-mp-track__tractor{ left: calc(100% - 22px); }
html:not(.tp-anim) .tp-mp-track__line--fill{ width: 100%; }
html:not(.tp-anim) .tp-mp-track__tractor{ left: calc(100% - 22px); }

.tp-mp-track__steps{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tp-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.tp-mp-track__steps li{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tp-s2);
}
.tp-mp .tp-mp-track__dot{
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tp-red);
  color: #fff;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1;
  letter-spacing: 0;
}
.tp-mp .tp-mp-track__steps strong{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
}
.tp-mp .tp-mp-track__steps li > span:last-child{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  max-width: 22em;
}
@media (max-width: 860px){
  .tp-mp-track__steps{ grid-template-columns: repeat(2, 1fr); row-gap: var(--tp-s6); }
  .tp-mp-track__line,
  .tp-mp-track__line--fill,
  .tp-mp-track__tractor{ display: none; }
  .tp-mp-track__rail{ padding-top: 0; }
}
@media (max-width: 480px){
  .tp-mp-track__steps{ grid-template-columns: 1fr; }
}


/* ═══════════════ 3 · KAPITEL 3 — GEWICHTSKLASSEN (Sand) ═══════════════ */

.tp-mp-classes{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tp-gap);
}
@media (max-width: 1000px){ .tp-mp-classes{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){
  /* Eine Spalte, aber kompakt — acht Karten dürfen kein halbes Handy füllen */
  .tp-mp-classes{ grid-template-columns: 1fr; gap: var(--tp-s2); }
  .tp-mp-class{ gap: var(--tp-s1); padding: var(--tp-s3); }
}

.tp-mp-class{
  display: flex;
  flex-direction: column;
  gap: var(--tp-s3);
  padding: var(--tp-s4);
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  transition: transform var(--tp-dur) var(--tp-ease), box-shadow var(--tp-dur) var(--tp-ease);
}
.tp-mp-class:hover{ transform: translateY(-4px); box-shadow: var(--tp-shadow-card); }
.tp-mp .tp-mp-class__num{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-ink);
}
.tp-mp-class__body{ display: flex; flex-direction: column; gap: var(--tp-s1); }
.tp-mp .tp-mp-class__range{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ink);
}
.tp-mp .tp-mp-class__tag{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.5;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ink-3);
}


/* ═══════════════ 4 · KAPITEL 4 — WAS DU BRAUCHST (Foto) ═══════════════ */

/* Tieferer Veil als der Standard: hier steht Fließtext über dem Foto. */
.tp-mpc--docs{
  background-image:
    linear-gradient(180deg, rgba(15,17,21,.90) 0%, rgba(15,17,21,.82) 45%, rgba(15,17,21,.93) 100%),
    var(--tp-photo, none);
  background-size: auto, cover;
  background-position: center, center 45%;
}

.tp-mp-grid-cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tp-gap);
}
@media (max-width: 1000px){ .tp-mp-grid-cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .tp-mp-grid-cards{ grid-template-columns: 1fr; } }

.tp-mp-card{
  --tp-red-ink: var(--tp-red-lift);
  display: flex;
  flex-direction: column;
  gap: var(--tp-s3);
  padding: var(--tp-s4);
  background: rgba(15,17,21,.72);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
  transition: transform var(--tp-dur) var(--tp-ease), border-color var(--tp-dur) var(--tp-ease);
}
.tp-mp-card:hover{ transform: translateY(-4px); border-color: rgba(243,239,232,.34); }
.tp-mp .tp-mp-card__icon{
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--tp-r-ui);
  background: var(--tp-red);
  color: #fff;
}
.tp-mp .tp-mp-card h3{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
  margin: 0;
}
.tp-mp .tp-mp-card p{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  margin: 0;
  max-width: none;
}


/* ═══════════════ 5 · KAPITEL 5 — TECHNIK (Papier) ═══════════════ */

.tp-mp-tech{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
  background: var(--tp-surface);
  overflow: hidden;
}
/* Zentrierung mit Doppelklasse absichern: das Kadence-Theme setzt
   `.single-content ul, .single-content ol { margin: 0 0 X }` (0,2,0) und
   schlug damit das `margin: 0 auto` oben (0,1,0) — die Liste hing links,
   336 px Loch rechts unter einer zentrierten Überschrift. */
.tp-mp ul.tp-mp-tech{ margin-inline: auto; }
.tp-mp .tp-mp-tech li{
  display: grid;
  grid-template-columns: 260px 1fr;
  align-items: baseline;
  gap: var(--tp-s4);
  padding: var(--tp-s4);
  border-top: 1px solid var(--tp-hair-l);
}
.tp-mp .tp-mp-tech li:first-child{ border-top: 0; }
.tp-mp .tp-mp-tech strong{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.6;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-ink);
  font-weight: 400;
}
.tp-mp .tp-mp-tech span{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
}
@media (max-width: 700px){
  .tp-mp .tp-mp-tech li{ grid-template-columns: 1fr; gap: var(--tp-s2); }
}


/* ═══════════════ 6 · KAPITEL 6 — SICHERHEIT & HAFTUNG (Sand) ══════════ */

.tp-mp-safety{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: grid;
  gap: var(--tp-s2);
}
/* dito — sonst hängt auch die Sicherheitsliste links (siehe oben). */
.tp-mp ol.tp-mp-safety{ margin-inline: auto; }
.tp-mp .tp-mp-safety li{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--tp-s3);
  padding: var(--tp-s4);
  background: var(--tp-surface);
  border: 1px solid var(--tp-hair-l);
  border-radius: var(--tp-r-fl);
}
.tp-mp .tp-mp-safety__num{
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.6;
  letter-spacing: var(--tp-ls-mono);
  color: var(--tp-red-ink);
}
.tp-mp .tp-mp-safety__txt{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink);
}
.tp-mp .tp-mp-safety__txt strong{ font-weight: 600; }

.tp-mp .tp-mp-liability{
  max-width: 900px;
  margin: var(--tp-s5) auto 0;
  padding: var(--tp-s4);
  border-left: 3px solid var(--tp-red);
  background: rgba(22,24,28,.04);
  border-radius: 0 var(--tp-r-ui) var(--tp-r-ui) 0;
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ink-2);
}
.tp-mp .tp-mp-liability strong{ color: var(--tp-ink); font-weight: 600; }


/* ═══════════════ 7 · KAPITEL 7 — VERANSTALTER + SCHLUSS (Tinte) ═══════ */

.tp-mp-org{
  max-width: 900px;
  margin: 0 auto var(--tp-s7);
  padding-bottom: var(--tp-s6);
  border-bottom: 1px solid var(--tp-hair-d);
  text-align: center;
}
.tp-mp .tp-mp-org__eye{
  display: inline-block;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-ondark-3);
  margin-bottom: var(--tp-s2);
}
.tp-mp .tp-mp-org h3{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
  margin: 0;
}
.tp-mp .tp-mp-org__unit{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  margin: var(--tp-s1) auto 0;
}
.tp-mp-org__meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tp-s2) var(--tp-s5);
  margin-top: var(--tp-s4);
}
.tp-mp .tp-mp-org__meta span{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
}
.tp-mp .tp-mp-org__meta strong{ color: var(--tp-ondark); font-weight: 600; }
.tp-mp .tp-mp-org__meta a{ color: var(--tp-red-lift); text-decoration: underline; text-underline-offset: 3px; }
.tp-mp .tp-mp-org__meta a:hover{ color: var(--tp-ondark); }

.tp-mp-final{ text-align: center; }
.tp-mp-final__head{ max-width: 760px; margin: 0 auto var(--tp-s6); }
.tp-mp .tp-mp-final__eye{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s1);
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-lift);
  margin-bottom: var(--tp-s3);
}
.tp-mp .tp-mp-final h2{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d2);
  line-height: var(--tp-lh-display);
  letter-spacing: var(--tp-ls-display);
  text-transform: uppercase;
  color: var(--tp-ondark);
  max-width: var(--tp-measure-head);
  margin: 0 auto;
}
.tp-mp .tp-mp-final h2::after{
  content: "";
  display: block;
  width: 56px; height: 2px;
  background: var(--tp-red);
  margin: var(--tp-s4) auto var(--tp-s5);
}
.tp-mp .tp-mp-final__head p{
  font-size: var(--tp-fs-lead);
  line-height: var(--tp-lh-lead);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure-lead);
  margin: 0 auto;
}
.tp-mp .tp-mp-final__head p strong{ color: var(--tp-ondark); font-weight: 600; }
.tp-mp .tp-mp-final__hint{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure);
  margin: var(--tp-s4) auto 0;
}
.tp-mp .tp-mp-final__hint a{ color: var(--tp-red-lift); text-decoration: underline; text-underline-offset: 3px; }
.tp-mp .tp-mp-final__hint a:hover{ color: var(--tp-ondark); }

/* Besucher-Abzweig am Seitenende — spiegelbildlich zum Starter-Kapitel auf
   /tickets/ (.tp-tk-starter): gleiche Karte, gleiche Kontur-Handlung.
   Wer die eine Seite kennt, erkennt den Block auf der anderen wieder. */
.tp-mp .tp-mp-visitor{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tp-s5);
  padding: var(--tp-s5);
  margin-top: var(--tp-s5);
  background: var(--tp-d2);
  border: 1px solid var(--tp-hair-d);
  border-radius: var(--tp-r-fl);
}
.tp-mp .tp-mp-visitor__text{ flex: 1 1 420px; }
.tp-mp .tp-mp-visitor__eye{
  display: inline-block;
  font-family: var(--tp-font-mono);
  font-size: var(--tp-fs-mono);
  line-height: 1.4;
  letter-spacing: var(--tp-ls-mono);
  text-transform: uppercase;
  color: var(--tp-red-lift);
  margin: 0 0 var(--tp-s2);
}
.tp-mp .tp-mp-visitor__h{
  font-family: var(--tp-font-display);
  font-weight: 400;
  font-size: var(--tp-fs-d3);
  line-height: 1.08;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tp-ondark);
  margin: 0 0 var(--tp-s2);
}
.tp-mp .tp-mp-visitor__p{
  font-size: var(--tp-fs-body);
  line-height: var(--tp-lh-body);
  color: var(--tp-ondark-2);
  max-width: var(--tp-measure);
  margin: 0;
}
.tp-mp .tp-mp-visitor__p strong{ color: var(--tp-ondark); font-weight: 600; }
.tp-mp .tp-mp-visitor__btn,
.tp-mp .tp-mp-visitor__btn:link,
.tp-mp .tp-mp-visitor__btn:visited{
  display: inline-flex;
  align-items: center;
  gap: var(--tp-s2);
  flex: none;
  min-height: var(--tp-tap);
  padding: 16px 28px;
  background: transparent;
  border: 1px solid var(--tp-ondark-2);
  border-radius: var(--tp-r-ui);
  color: var(--tp-ondark);
  font-family: var(--tp-font-text);
  font-size: var(--tp-fs-body);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--tp-dur) var(--tp-ease),
              border-color var(--tp-dur) var(--tp-ease),
              color var(--tp-dur) var(--tp-ease);
}
.tp-mp .tp-mp-visitor__btn:hover{
  background: var(--tp-ondark);
  border-color: var(--tp-ondark);
  color: var(--tp-d0);
}
.tp-mp .tp-mp-visitor__arrow{ transition: transform var(--tp-dur) var(--tp-ease); }
.tp-mp .tp-mp-visitor__btn:hover .tp-mp-visitor__arrow{ transform: translateX(3px); }

@media (max-width: 720px){
  .tp-mp .tp-mp-visitor{
    flex-direction: column;
    align-items: flex-start;
    padding: var(--tp-s4) var(--tp-s3);
  }
  /* flex-basis würde in der Spalte zur HÖHE — sonst klafft ein Loch. */
  .tp-mp .tp-mp-visitor__text{ flex: 0 1 auto; }
  .tp-mp .tp-mp-visitor__btn,
  .tp-mp .tp-mp-visitor__btn:link,
  .tp-mp .tp-mp-visitor__btn:visited{ width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  .tp-mp .tp-pl-intro__dot{ animation: none; }
}