/* ============================================================
   Smily Personal Training — Design für alle Elementor-Seiten
   (Startseite und Unterseiten). Vorlage: site/index.html
   (schwarz/Amber). Alle Regeln hängen an body.mty-page, damit
   andere Seiten der Installation unberührt bleiben.
   Das Präfix mty- ist der interne Arbeitsname und bleibt stabil.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --mty-bg: #0c0d10;
  --mty-surface: #14161b;
  --mty-surface-2: #1a1d24;
  --mty-line: rgba(244, 239, 233, .1);
  --mty-text: #f2efe9;
  --mty-muted: #a6a196;
  --mty-accent: #e8a33d;
  --mty-accent-ink: #171205;
  --mty-pill: 999px;
  --mty-pad: clamp(1.25rem, 4vw, 3rem);
  --mty-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ============ Grundlage ============ */
html:has(body.mty-page) { scroll-behavior: smooth; }

/* Das Theme blendet Elementor-Abschnitte per AOS ein und setzt sie dafür auf
   opacity 0. Auf dieser Seite übernimmt das die eigene Einblendung. */
body.mty-page .hostinger-elementor-aos { opacity: 1 !important; }

body.mty-page {
  margin: 0;
  background: var(--mty-bg);
  color: var(--mty-text);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.mty-page img { display: block; max-width: 100%; height: auto; }
body.mty-page a { color: inherit; }
body.mty-page ::selection { background: var(--mty-accent); color: var(--mty-accent-ink); }
body.mty-page :focus-visible { outline: 2px solid var(--mty-accent); outline-offset: 3px; border-radius: 2px; }

/* Elementor-Grundabstände auf null, Layout kommt aus diesem Stylesheet.
   gap und padding werden direkt gesetzt, weil Elementor die zugehörigen
   Variablen mit höherer Gewichtung selbst belegt. */
body.mty-page .e-con, body.mty-page .e-con-inner {
  --padding-block: 0px;
  --padding-inline: 0px;
  --gap: 0px;
  --align-items: stretch;
  gap: 0;
  padding: 0;
}
body.mty-page .elementor-widget-container { margin: 0; }
body.mty-page .elementor-widget:not(:last-child) { margin-block-end: 0; }
body.mty-page .elementor-element { --widgets-spacing: 0px 0px; }
body.mty-page p:last-child { margin-bottom: 0; }
body.mty-page .elementor-widget-text-editor p { margin: 0 0 1rem; }
body.mty-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Überschriften: Theme-Serifenschrift abwählen */
body.mty-page h1, body.mty-page h2, body.mty-page h3, body.mty-page h4,
body.mty-page .elementor-heading-title {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 640;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
  color: inherit;
}

body.mty-page .mty-wrap {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--mty-pad);
  width: 100%;
}
body.mty-page .mty-sec { padding-block: clamp(4.5rem, 9vw, 8.5rem); }
body.mty-page .mty-sec-top0 { padding-top: 0; }

/* ============ Textbausteine ============ */
body.mty-page .mty-h2 .elementor-heading-title {
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  font-stretch: 118%;
  font-weight: 740;
  letter-spacing: -.01em;
  line-height: 1.04;
  max-width: 18ch;
}
body.mty-page .mty-tilt { color: var(--mty-accent); font-style: italic; padding-bottom: .08em; }
body.mty-page .mty-accent { color: var(--mty-accent); }
/* Breitenbegrenzungen sitzen am Absatz, nicht am Widget: Elementor zwingt
   Widgets in Containern auf max-width 100%. */
body.mty-page .mty-lead { color: var(--mty-muted); margin-top: 1.2rem; }
body.mty-page .mty-lead p { color: var(--mty-muted); max-width: 56ch; }
body.mty-page .mty-display .elementor-heading-title {
  font-stretch: 122%;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .96;
}

/* ============ Buttons ============ */
body.mty-page .mty-btn .elementor-button,
body.mty-page .mty-chip .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--mty-accent);
  color: var(--mty-accent-ink);
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: .01em;
  padding: .95rem 1.7rem;
  border-radius: var(--mty-pill);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  fill: var(--mty-accent-ink);
  transition: transform .25s var(--mty-ease), background .25s, box-shadow .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
body.mty-page .mty-btn .elementor-button:hover {
  background: #f0b155;
  color: var(--mty-accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(232, 163, 61, .22);
}
body.mty-page .mty-btn .elementor-button:active { transform: scale(.97); }
body.mty-page .mty-btn .elementor-button-content-wrapper { display: flex; align-items: center; gap: .6rem; }
body.mty-page .mty-btn .elementor-button-icon { display: flex; align-items: center; }
body.mty-page .mty-btn .elementor-button-icon svg { width: 1.1em; height: 1.1em; }

body.mty-page .mty-btn-ghost .elementor-button {
  background: transparent;
  color: var(--mty-text);
  fill: var(--mty-text);
  border: 1px solid rgba(244, 239, 233, .35);
  backdrop-filter: blur(6px);
}
body.mty-page .mty-btn-ghost .elementor-button:hover {
  background: rgba(244, 239, 233, .1);
  color: var(--mty-text);
  box-shadow: none;
  border-color: rgba(244, 239, 233, .6);
}

/* ============ Navigation ============ */
body.mty-page .mty-nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  transition: background .35s, border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
body.mty-page .mty-nav.mty-solid {
  background: rgba(12, 13, 16, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--mty-line);
}
body.mty-page .mty-nav-inner {
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  height: 68px;
  align-items: center;
  --align-items: center;
  justify-content: flex-start;
  --justify-content: flex-start;
  gap: 1.9rem;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--mty-pad);
  width: 100%;
}
/* Menü und Schaltfläche sitzen wie im Entwurf zusammen am rechten Rand */
body.mty-page .mty-nav-links { margin-left: auto; }
body.mty-page .mty-brand .elementor-heading-title,
body.mty-page .mty-brand .elementor-heading-title a {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1;
  color: var(--mty-text);
}
body.mty-page .mty-brand .mty-dot { color: var(--mty-accent); }

body.mty-page .mty-nav-links { width: auto; }
body.mty-page .mty-nav-links .elementor-icon-list-items {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.mty-page .mty-nav-links .elementor-icon-list-item { margin: 0; }
body.mty-page .mty-nav-links .elementor-icon-list-item a { padding: 0; }
body.mty-page .mty-nav-links .elementor-icon-list-text {
  text-decoration: none;
  font-size: .95rem;
  font-weight: 520;
  color: #d3cfc5;
  transition: color .2s;
  padding: 0;
}
body.mty-page .mty-nav.mty-solid .mty-nav-links .elementor-icon-list-text { color: var(--mty-muted); }
body.mty-page .mty-nav-links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--mty-text); }
body.mty-page .mty-nav-cta .elementor-button { padding: .62rem 1.25rem; font-size: .92rem; }

/* ---- Aktuelle Seite ---- */
body.mty-page .mty-nav-links .mty-aktuell > a .elementor-icon-list-text,
body.mty-page .mty-nav.mty-solid .mty-nav-links .mty-aktuell > a .elementor-icon-list-text {
  color: var(--mty-text);
  text-decoration: underline;
  text-decoration-color: var(--mty-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---- Untermenü „Leistungen“ ----
   Die Liste liegt vor dem Umhängen durch maty.js noch neben der Hauptliste und
   ist deshalb schon hier absolut gesetzt und unsichtbar: kein Aufblitzen, kein
   Sprung im Layout. Sichtbar wird sie nur im Punkt .mty-has-sub. */
/* Elementor kappt jeden Widget-Inhalt (overflow:hidden am .elementor-widget-
   container). Die Klappe muss aber aus der Leiste herausragen. */
body.mty-page .mty-nav-links > .elementor-widget-container { overflow: visible; }
body.mty-page .mty-nav-links .mty-has-sub { position: relative; }
body.mty-page .mty-nav-links .mty-has-sub > a .elementor-icon-list-text::after {
  content: '';
  display: inline-block;
  width: .38em;
  height: .38em;
  margin-left: .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg);
  transition: transform .25s var(--mty-ease);
}
body.mty-page .mty-nav-links .mty-has-sub:hover > a .elementor-icon-list-text::after,
body.mty-page .mty-nav-links .mty-has-sub:focus-within > a .elementor-icon-list-text::after {
  transform: translateY(.06em) rotate(-135deg);
}
body.mty-page .mty-nav-links .mty-nav-sub {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  width: max-content;
  min-width: 230px;
  margin-top: 1.35rem;
  padding: .45rem 0;
  /* Deckende Fläche statt Blur: über hellen Fotos bliebe der Text sonst lesbar */
  background: var(--mty-surface);
  border: 1px solid var(--mty-line);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .22s, transform .22s var(--mty-ease), visibility .22s;
  z-index: 55;
}
/* Brücke über die Lücke zwischen Punkt und Klappe, sonst reißt der Hover ab */
body.mty-page .mty-nav-links .mty-nav-sub::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -1.35rem;
  height: 1.35rem;
}
body.mty-page .mty-nav-links .mty-has-sub:hover > .mty-nav-sub,
body.mty-page .mty-nav-links .mty-has-sub:focus-within > .mty-nav-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-items {
  display: block;
  gap: 0;
  height: auto;
}
body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-item a { display: block; padding: .5rem 1.25rem; line-height: 1.35; }
body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-text {
  font-size: .93rem;
  font-weight: 520;
  color: #d3cfc5;
  white-space: nowrap;
}
body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--mty-accent); }

.mty-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  /* mindestens 44 px in beide Richtungen, sonst trifft man ihn am Daumen vorbei */
  padding: .5rem;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  z-index: 60;
}
.mty-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mty-text);
  transition: transform .3s var(--mty-ease), opacity .2s;
}

/* ============ Hero ============ */
body.mty-page .mty-hero {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mty-bg);
  position: relative;
}
body.mty-page .mty-hero-copy {
  position: relative;
  z-index: 2;
  justify-content: center;
  --justify-content: center;
  align-items: flex-start;
  --align-items: flex-start;
  background:
    radial-gradient(90% 70% at 8% 0%, rgba(232, 163, 61, .13), transparent 62%),
    linear-gradient(165deg, #1b1e25 0%, #131519 52%, #0e1013 100%);
  padding: calc(68px + clamp(2rem, 6vh, 4rem)) clamp(1.5rem, 4vw, 4.5rem) clamp(2.5rem, 6vh, 4rem);
  padding-left: max(var(--mty-pad), calc((100vw - 1320px) / 2 + var(--mty-pad)));
}
body.mty-page .mty-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mty-accent);
  text-wrap: balance;
}
body.mty-page .mty-eyebrow .elementor-heading-title::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--mty-accent);
  flex: none;
}
body.mty-page .mty-h1 { margin-top: 1.3rem; }
body.mty-page .mty-h1 .elementor-heading-title {
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  font-stretch: 122%;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: -.015em;
  line-height: .96;
}
body.mty-page .mty-line { display: block; overflow: hidden; }
body.mty-page .mty-hero-lead {
  margin-top: 1.4rem;
  font-size: clamp(1.02rem, 1.25vw, 1.15rem);
}
body.mty-page .mty-hero-lead p { color: #cfcabf; max-width: 40ch; }
body.mty-page .mty-hero-cta {
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  --flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.1rem;
  width: auto;
}
body.mty-page .mty-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 1.1rem 1.4rem;
  max-width: 34rem;
  width: 100%;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--mty-line);
}
body.mty-page .mty-trust-num .elementor-heading-title {
  display: block;
  color: var(--mty-text);
  font-size: 1.3rem;
  font-stretch: 115%;
  font-weight: 740;
  line-height: 1.2;
}
body.mty-page .mty-trust-label .elementor-heading-title {
  font-size: .88rem;
  color: var(--mty-muted);
  line-height: 1.35;
  font-weight: 400;
}
body.mty-page .mty-hero-media { position: relative; overflow: hidden; }
body.mty-page .mty-hero-media .elementor-widget-image { position: absolute; inset: 0; }
body.mty-page .mty-hero-media .elementor-widget-image .elementor-widget-container { height: 100%; }
body.mty-page .mty-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 26% 50%;
  transform: scale(1.32);
  transform-origin: 50% 65%;
  animation: mty-hero-zoom 2.6s var(--mty-ease) both;
}
body.mty-page .mty-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(14, 16, 19, .85) 0%, rgba(14, 16, 19, .28) 11%, transparent 26%),
    linear-gradient(to top, rgba(12, 13, 16, .5) 0%, transparent 32%),
    /* Schatten hinter der Leiste. Er endet nicht auf einmal, sondern läuft weit
       aus — sonst zeichnet sich über einem hellen Himmel eine sichtbare Kante
       ab und es sieht aus wie ein schwarzer Streifen über dem Foto. */
    linear-gradient(to bottom, rgba(12, 13, 16, .5) 0, rgba(12, 13, 16, .3) 40px, rgba(12, 13, 16, .12) 82px, transparent 140px);
}
/* Solange die Leiste durchsichtig über dem Foto liegt, tragen Marke und Burger
   ihren eigenen Schatten. Dadurch kommt der Schleier darüber mit weniger
   Deckkraft aus und das Foto bleibt bis oben hin ein Foto. */
body.mty-page .mty-nav:not(.mty-solid) .mty-brand .elementor-heading-title {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 20px rgba(0, 0, 0, .7);
}
body.mty-page .mty-nav:not(.mty-solid) .mty-burger span {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 16px rgba(0, 0, 0, .7);
}
body.mty-page .mty-hero-tag {
  position: absolute;
  z-index: 3;
  left: clamp(1.4rem, 3vw, 2.6rem);
  bottom: clamp(1.4rem, 3vw, 2.8rem);
  width: auto;
}
body.mty-page .mty-hero-tag .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .82rem;
  font-weight: 600;
  background: rgba(12, 13, 16, .6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 239, 233, .18);
  border-radius: var(--mty-pill);
  padding: .5rem 1rem;
  line-height: 1.4;
}
body.mty-page .mty-hero-tag .elementor-heading-title::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mty-accent);
  flex: none;
}

/* Einblendungen im Hero */
.mty-js body.mty-page .mty-hero .mty-eyebrow { animation: mty-fade-up .9s var(--mty-ease) both; }
.mty-js body.mty-page .mty-line > span { display: inline-block; animation: mty-rise 1s var(--mty-ease) both; }
.mty-js body.mty-page .mty-line:nth-child(2) > span { animation-delay: .12s; }
.mty-js body.mty-page .mty-line:nth-child(3) > span { animation-delay: .24s; }
.mty-js body.mty-page .mty-hero-lead { animation: mty-fade-up 1s var(--mty-ease) .3s both; }
.mty-js body.mty-page .mty-hero-cta { animation: mty-fade-up 1s var(--mty-ease) .42s both; }
.mty-js body.mty-page .mty-trust { animation: mty-fade-up 1s var(--mty-ease) .55s both; }
.mty-js body.mty-page .mty-hero-tag { animation: mty-fade-up 1s var(--mty-ease) .7s both; }
.mty-js body.mty-page .mty-h1-fallback .elementor-heading-title { animation: mty-fade-up 1s var(--mty-ease) both; }

@keyframes mty-rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes mty-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes mty-hero-zoom { from { transform: scale(1.45); } to { transform: scale(1.32); } }

/* ============ Foto-Laufband ============ */
body.mty-page .mty-mq {
  border-block: 1px solid var(--mty-line);
  background: var(--mty-surface);
  overflow: clip;
  padding: 0;
}
body.mty-page .mty-mq .elementor-image-gallery .gallery {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  margin: 0;
  gap: clamp(.6rem, 1vw, 1rem);
  padding-block: clamp(.6rem, 1vw, 1rem);
}
.mty-js body.mty-page .mty-mq .elementor-image-gallery .gallery { animation: mty-mq 46s linear infinite; }
body.mty-page .mty-mq .gallery-item {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  flex: none;
}
body.mty-page .mty-mq .gallery-icon { line-height: 0; }
body.mty-page .mty-mq .gallery-item img {
  height: clamp(220px, 30vw, 340px);
  width: auto;
  max-width: none;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(.92);
  border: 0 !important;
}
body.mty-page .mty-mq .gallery-caption { display: none; }
@keyframes mty-mq { to { transform: translateX(calc(-50% - clamp(.3rem, .5vw, .5rem))); } }

/* ============ Für dich, wenn ============ */
body.mty-page .mty-wenn-grid {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
body.mty-page .mty-wenn-sticky { position: sticky; top: 98px; align-self: start; }
body.mty-page .mty-wenn-sticky img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 70%;
  transition: transform .8s var(--mty-ease), filter .5s var(--mty-ease);
}
/* Zeiger auf dem Foto: leichter Zoom, etwas mehr Farbe. Geschnitten wird im
   Widget-Container, der von Elementor ohnehin overflow: hidden hat — an
   .mty-wenn-sticky selbst darf kein overflow: hidden stehen, das würde das
   Mitlaufen (position: sticky) aushebeln. */
body.mty-page .mty-wenn-sticky .elementor-widget-image { overflow: clip; }
body.mty-page .mty-wenn-sticky:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.04); }
body.mty-page .mty-wenn-list { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
body.mty-page .mty-wenn-list .elementor-icon-list-items { margin: 0; padding: 0; list-style: none; }
body.mty-page .mty-wenn-list .elementor-icon-list-item {
  display: block;
  border-bottom: 1px solid var(--mty-line);
  padding: 1.35rem .25rem;
  font-size: clamp(1.12rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -.005em;
  transition: color .3s;
}
/* Der Zeiger schiebt nur den Text, nicht den Kasten.
   Vorher lag der Effekt auf padding-left des Listenpunkts. Das verkleinert die
   Textbreite, und bei manchen Fensterbreiten rutscht dadurch ein Wort in eine
   neue Zeile: Der Punkt wird 40 px höher, die ganze Liste wächst, und das
   mitlaufende Foto daneben (position: sticky) springt mit. Nachgewiesen bei
   16 Spaltenbreiten, am deutlichsten beim Punkt „du im Studio angemeldet
   bist…". transform verschiebt nur die Darstellung und rührt das Layout nicht
   an; der Platz dafür ist rechts fest reserviert, damit nichts anstößt. */
body.mty-page .mty-wenn-list .elementor-icon-list-text {
  display: block;
  padding: 0 1.15rem 0 0;
  color: inherit;
  font-weight: 600;
  font-size: inherit;
  transition: transform .3s var(--mty-ease);
}
@media (hover: hover) {
  body.mty-page .mty-wenn-list .elementor-icon-list-item:hover { color: var(--mty-accent); }
  body.mty-page .mty-wenn-list .elementor-icon-list-item:hover .elementor-icon-list-text { transform: translateX(1rem); }
}
body.mty-page .mty-wenn-note { margin-top: 1.6rem; }
body.mty-page .mty-wenn-note p { color: var(--mty-muted); max-width: 48ch; }

/* ============ Leistungen (Bento) ============ */
body.mty-page .mty-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.8rem, 1.4vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
body.mty-page .mty-cell {
  position: relative;
  /* Eigener Stapelkontext. Ohne ihn rutschen Foto und Schleier (negative
     Ebenen, siehe unten) hinter den Hintergrund der Kachel und sind weg. */
  isolation: isolate;
  overflow: hidden;
  background: var(--mty-surface);
  border: 1px solid var(--mty-line);
  min-height: 340px;
  justify-content: flex-end;
  --justify-content: flex-end;
  padding: clamp(1.4rem, 2.4vw, 2.2rem);
}
body.mty-page .mty-c7 { grid-column: span 7; }
body.mty-page .mty-c5 { grid-column: span 5; }
body.mty-page .mty-c12 { grid-column: span 12; }
body.mty-page .mty-cell-wide { min-height: 280px; }
/* Foto und Schleier liegen auf NEGATIVEN Ebenen, damit Überschrift und Text
   ohne eigene Ebene darüber stehen. Nur so lässt sich der Link der Überschrift
   später über die ganze Kachel dehnen — läge die Überschrift selbst auf einer
   Ebene, spannte sich das unsichtbare Klickfeld nur über die Überschrift. */
body.mty-page .mty-cell .elementor-widget-image { position: absolute; inset: 0; z-index: -2; }
body.mty-page .mty-cell .elementor-widget-image .elementor-widget-container { height: 100%; }
body.mty-page .mty-cell .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--mty-ease);
}
body.mty-page .mty-cell:hover .elementor-widget-image img { transform: scale(1.045); }
body.mty-page .mty-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(12, 13, 16, .93) 8%, rgba(12, 13, 16, .25) 55%, rgba(12, 13, 16, .05));
}
body.mty-page .mty-cell { cursor: pointer; }
body.mty-page .mty-cell .mty-h3 .elementor-heading-title {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-stretch: 115%;
  font-weight: 720;
}
body.mty-page .mty-cell .elementor-widget-text-editor { margin-top: .55rem; }
body.mty-page .mty-cell .elementor-widget-text-editor p { color: #d6d1c6; max-width: 44ch; }
/* Motiv nach rechts rücken.
   Die Fotos sind hochkant, die Kacheln breit — quer wird also nichts
   abgeschnitten, und object-position wirkt hier nur senkrecht. Damit sich das
   Motiv trotzdem seitlich verschieben lässt, wird das Bild breiter als die
   Kachel gemacht und bleibt links bündig: Sichtbar ist der linke Teil, das
   Motiv wandert nach rechts und steht nicht mehr hinter der Überschrift. */
body.mty-page .mty-schieb-rechts .elementor-widget-image img {
  width: 138%;
  max-width: none;
}
body.mty-page .mty-pos-top img { object-position: 50% 22%; }
body.mty-page .mty-pos-mid img { object-position: 50% 42%; }
body.mty-page .mty-pos-low img { object-position: 50% 62%; }
/* Breite Kachel auf einem Hochformat: trifft das Skyline-Band statt des Himmels. */
body.mty-page .mty-pos-skyline img { object-position: 50% 64%; }
/* Motiv liegt am Boden (Liegestütz): fast ganz unten, sonst sieht man nur Himmel. */
body.mty-page .mty-pos-boden img { object-position: 50% 88%; }
/* Tiefe Hocke im schmalen Band der breiten Kachel: Kopf, Kettlebell und Rumpf. */
body.mty-page .mty-pos-hocke img { object-position: 50% 74%; }
/* Waagerechtes Motiv (Liegestütz) im schmalen Band der breiten Kachel: etwas
   höher als mty-pos-boden, damit Kopf und Rumpf drin bleiben und nicht nur
   Hände und Asphalt zu sehen sind. */
body.mty-page .mty-pos-liegend img { object-position: 50% 80%; }
/* Stehende Figur in einer hohen, schmalen Kachel: ganz nach unten, damit die
   Person vollständig im Bild steht (Kniebeuge Firmenfitness). */
body.mty-page .mty-pos-unten img { object-position: 50% 90%; }

/* ============ Pakete ============ */
body.mty-page .mty-pakete {
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  border-top: 1px solid var(--mty-line);
}
body.mty-page .mty-paket {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr max-content;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 1.5rem .25rem;
  border-bottom: 1px solid var(--mty-line);
}
/* Jede Zeile ist ein eigenes Raster. Die dritte Spalte richtet sich nach dem
   Kennzeichen — „für Fortgeschrittene" ist breiter als „für Profis" —, dadurch
   fiel auch die erste Spalte je Zeile anders aus und der Beschreibungstext
   begann in jeder Zeile an einer anderen Stelle. Mit subgrid teilen sich alle
   Zeilen die Spalten der Liste, die dritte so breit wie das längste
   Kennzeichen. Ohne subgrid bleibt es beim bisherigen Verhalten. */
@supports (grid-template-columns: subgrid) {
  body.mty-page .mty-pakete {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 2fr max-content;
  }
  body.mty-page .mty-paket {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
}
body.mty-page .mty-paket .mty-h3 .elementor-heading-title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-stretch: 116%;
  font-weight: 730;
}
body.mty-page .mty-paket .elementor-widget-text-editor p { color: var(--mty-muted); max-width: 52ch; }
body.mty-page .mty-paket-tag { justify-self: end; }
body.mty-page .mty-paket-tag .elementor-heading-title {
  display: inline-block;
  white-space: nowrap;
  border: 1px solid rgba(232, 163, 61, .5);
  color: var(--mty-accent);
  border-radius: var(--mty-pill);
  padding: .35rem .9rem;
  font-size: .85rem;
  font-weight: 620;
  line-height: 1.4;
}

/* ============ Ablauf ============ */
body.mty-page .mty-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
}
body.mty-page .mty-step {
  border-top: 2px solid var(--mty-line);
  padding-top: 1.4rem;
  position: relative;
}
body.mty-page .mty-step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 56px;
  height: 2px;
  background: var(--mty-accent);
}
body.mty-page .mty-step-num .elementor-heading-title {
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(3.2rem, 5vw, 4.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--mty-accent);
}
body.mty-page .mty-step .mty-h3 { margin-top: .9rem; }
body.mty-page .mty-step .mty-h3 .elementor-heading-title { font-size: 1.35rem; font-stretch: 112%; }
body.mty-page .mty-step .elementor-widget-text-editor { margin-top: .6rem; }
body.mty-page .mty-step .elementor-widget-text-editor p { color: var(--mty-muted); }

/* ============ Mittel-CTA ============ */
/* Oben trägt der Abstand der vorigen Sektion, unten braucht der Kasten einen
   eigenen: Danach kommt das randlose Kontaktband, und ohne diesen Rand stieß
   die Unterkante des Kastens ohne einen Pixel Luft auf dessen Foto — auf jeder
   Unterseite, und es sah aus wie ein abgeschnittener Kasten. */
body.mty-page .mty-midcta { padding-block: 0 clamp(4rem, 8vw, 7.5rem); }
body.mty-page .mty-midcta-box {
  background: var(--mty-surface);
  border: 1px solid var(--mty-line);
  padding: clamp(2.2rem, 5vw, 4rem);
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  --flex-wrap: wrap;
  align-items: center;
  --align-items: center;
  justify-content: space-between;
  --justify-content: space-between;
  gap: 1.5rem;
}
body.mty-page .mty-midcta-text { width: auto; flex: 1 1 22rem; }
body.mty-page .mty-midcta-text .elementor-heading-title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-stretch: 115%;
  max-width: 22ch;
}
body.mty-page .mty-midcta-text .elementor-widget-text-editor { margin-top: .45rem; }
body.mty-page .mty-midcta-text .elementor-widget-text-editor p { color: var(--mty-muted); }
body.mty-page .mty-midcta-box > .elementor-widget-button { width: auto; }

/* ============ Über mich ============ */
body.mty-page .mty-about-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
body.mty-page .mty-about-copy .mty-about-lead { margin-top: 1.6rem; }
body.mty-page .mty-about-copy .mty-about-lead p { color: var(--mty-text); max-width: 56ch; }
body.mty-page .mty-about-copy .mty-rest { margin-top: 1.1rem; }
body.mty-page .mty-about-copy .mty-rest p { color: var(--mty-muted); }
body.mty-page .mty-principles { margin-top: 2.2rem; }
body.mty-page .mty-principles .elementor-icon-list-items {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mty-line);
}
body.mty-page .mty-principles .elementor-icon-list-item {
  display: flex;
  gap: .9rem;
  align-items: center;
  padding: .95rem 0;
  border-bottom: 1px solid var(--mty-line);
  font-weight: 620;
  font-size: 1.08rem;
  line-height: 1.65;
}
body.mty-page .mty-principles .elementor-icon-list-icon {
  color: var(--mty-accent);
  flex: none;
  display: flex;
  align-items: center;
  padding: 0;
}
body.mty-page .mty-principles .elementor-icon-list-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--mty-accent);
}
body.mty-page .mty-principles .elementor-icon-list-text {
  padding: 0;
  color: var(--mty-text);
  font-weight: 620;
  font-size: inherit;
}
body.mty-page .mty-about-btn { margin-top: 2.2rem; }
body.mty-page .mty-about-media { position: relative; }
body.mty-page .mty-about-main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}
body.mty-page .mty-about-small {
  position: absolute;
  left: -18%;
  bottom: -9%;
  width: 52%;
  z-index: 2;
}
body.mty-page .mty-about-small img {
  border: 6px solid var(--mty-bg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  object-position: 50% 26%;
  width: 100%;
}

/* ============ Orte ============ */
body.mty-page .mty-orte {
  background: var(--mty-surface);
  border-block: 1px solid var(--mty-line);
}
body.mty-page .mty-orte-row {
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: nowrap;
  --flex-wrap: nowrap;
  gap: clamp(.9rem, 1.5vw, 1.4rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: clamp(2rem, 4vw, 3rem) var(--mty-pad) .8rem;
  margin-inline: calc(-1 * var(--mty-pad));
  scrollbar-width: thin;
  scrollbar-color: var(--mty-accent) transparent;
}
body.mty-page .mty-ort {
  flex: 0 0 clamp(270px, 26vw, 340px);
  scroll-snap-align: start;
  background: var(--mty-bg);
  border: 1px solid var(--mty-line);
}
body.mty-page .mty-ort img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 55%;
}
/* Einzelne Karte höher ausschneiden (siehe startseite.js) */
body.mty-page .mty-ort.mty-ort-hoch img { object-position: 50% 30%; }
body.mty-page .mty-ort-body { padding: 1.3rem 1.4rem 1.5rem; }
body.mty-page .mty-ort-body .mty-h3 .elementor-heading-title { font-size: 1.18rem; font-stretch: 112%; }
body.mty-page .mty-ort-body .elementor-widget-text-editor { margin-top: .45rem; }
body.mty-page .mty-ort-body .elementor-widget-text-editor p { color: var(--mty-muted); font-size: .98rem; }

/* ============ FAQ ============ */
body.mty-page .mty-faq-wrap { max-width: 860px; margin-inline: auto; }
body.mty-page .mty-accordion { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
body.mty-page .mty-accordion .e-n-accordion { display: block; border-top: 1px solid var(--mty-line); }
body.mty-page .mty-accordion .e-n-accordion-item {
  border-bottom: 1px solid var(--mty-line);
  background: transparent;
}
body.mty-page .mty-accordion .e-n-accordion-item-title {
  color: var(--mty-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem .15rem;
  transition: color .2s;
  border: 0;
  background: transparent;
  position: relative;
}
body.mty-page .mty-accordion .e-n-accordion-item-title::-webkit-details-marker { display: none; }
body.mty-page .mty-accordion .e-n-accordion-item-title-header { flex: 1; }
body.mty-page .mty-accordion .e-n-accordion-item-title-text {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 640;
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
  color: inherit;
}
body.mty-page .mty-accordion .e-n-accordion-item-title:hover { color: var(--mty-accent); }
body.mty-page .mty-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title { color: var(--mty-accent); }
/* Plus-Zeichen, dessen senkrechter Strich sich beim Öffnen dreht */
body.mty-page .mty-accordion .e-n-accordion-item-title::before,
body.mty-page .mty-accordion .e-n-accordion-item-title::after {
  content: "";
  position: absolute;
  right: .15rem;
  top: 50%;
  background: var(--mty-accent);
  transition: transform .35s var(--mty-ease);
}
body.mty-page .mty-accordion .e-n-accordion-item-title::before {
  width: 14px;
  height: 2px;
  margin-top: -1px;
  margin-right: 4px;
}
body.mty-page .mty-accordion .e-n-accordion-item-title::after {
  width: 2px;
  height: 14px;
  margin-top: -7px;
  margin-right: 10px;
}
body.mty-page .mty-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::after { transform: rotate(90deg); }
body.mty-page .mty-accordion .e-n-accordion-item-title-icon { display: none; }
body.mty-page .mty-accordion .e-con.e-child { padding: 0 .15rem 1.4rem; }
body.mty-page .mty-accordion .mty-faq-a p { color: var(--mty-muted); max-width: 62ch; }

/* ============ Finale und Kontakt ============ */
body.mty-page .mty-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 13vw, 11rem);
}
body.mty-page .mty-final-media { position: absolute; inset: 0; }
body.mty-page .mty-final-media .elementor-widget-image,
body.mty-page .mty-final-media .elementor-widget-image .elementor-widget-container { height: 100%; }
/* Breiter als das Band und links bündig: dadurch rutscht Matthäus nach rechts,
   raus aus der dunklen Textseite. Siehe .mty-schieb-rechts — dasselbe Mittel. */
body.mty-page .mty-final-media img {
  width: 124%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}
body.mty-page .mty-final-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(12, 13, 16, .95) 25%, rgba(12, 13, 16, .55) 65%, rgba(12, 13, 16, .3));
}
body.mty-page .mty-final-inner { position: relative; z-index: 2; }
body.mty-page .mty-final-inner .mty-display .elementor-heading-title { font-size: clamp(2.3rem, 5vw, 4.5rem); }
body.mty-page .mty-final-lead { margin-top: 1.2rem; }
body.mty-page .mty-final-lead p { color: #cfcabf; max-width: 56ch; }
body.mty-page .mty-chips {
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  --flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.2rem;
}
body.mty-page .mty-chip .elementor-button {
  background: transparent;
  color: var(--mty-text);
  border: 1px solid rgba(244, 239, 233, .3);
  border-radius: var(--mty-pill);
  padding: .8rem 1.35rem;
  font-weight: 600;
  font-size: .98rem;
  backdrop-filter: blur(6px);
  box-shadow: none;
}
body.mty-page .mty-chip .elementor-button:hover {
  border-color: var(--mty-accent);
  color: var(--mty-accent);
  background: transparent;
  transform: translateY(-2px);
  box-shadow: none;
}
body.mty-page .mty-chip .elementor-button:active { transform: scale(.97); }
body.mty-page .mty-chip .elementor-button-icon svg { fill: var(--mty-accent); color: var(--mty-accent); }
body.mty-page .mty-note { margin-top: 1.4rem; }
body.mty-page .mty-note p { color: var(--mty-muted); font-size: .92rem; }
body.mty-page .mty-note em {
  font-style: normal;
  border-bottom: 1px dashed rgba(232, 163, 61, .6);
}
body.mty-page .mty-note a {
  color: var(--mty-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 163, 61, .5);
  transition: color .2s ease, border-color .2s ease;
}
body.mty-page .mty-note a:hover { color: var(--mty-accent); border-color: var(--mty-accent); }

/* ============ Footer ============ */
body.mty-page .mty-footer {
  border-top: 1px solid var(--mty-line);
  padding: 2.6rem 0 3rem;
  background: var(--mty-surface);
}
body.mty-page .mty-foot {
  display: grid;
  grid-template-columns: minmax(200px, 1.1fr) 2fr;
  gap: 2.5rem clamp(2rem, 5vw, 5rem);
  align-items: start;
  --align-items: start;
}
body.mty-page .mty-foot-claim { margin-top: .9rem; }
body.mty-page .mty-foot-claim p { color: var(--mty-muted); font-size: .93rem; max-width: 30ch; }
body.mty-page .mty-foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
body.mty-page .mty-foot-head .elementor-heading-title {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mty-muted);
  margin-bottom: .9rem;
}
body.mty-page .mty-foot-links .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.mty-page .mty-foot-links .elementor-icon-list-item { margin: 0; }
body.mty-page .mty-foot-links .elementor-icon-list-item a { padding: 0; }
body.mty-page .mty-foot-links .elementor-icon-list-text {
  color: #d3cfc5;
  text-decoration: none;
  font-size: .95rem;
  padding: 0;
  transition: color .2s;
}
body.mty-page .mty-foot-links .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--mty-accent); }
body.mty-page .mty-foot-copy {
  grid-column: 1 / -1;
  border-top: 1px solid var(--mty-line);
  padding-top: 1.4rem;
}
body.mty-page .mty-foot-copy p { color: var(--mty-muted); font-size: .88rem; }
body.mty-page .mty-foot .mty-brand .mty-dot { color: var(--mty-accent); }

/* ============ Kleine Bausteine, die auf mehreren Seiten vorkommen ============ */
/* Pfeil-Link "Mehr erfahren" (in Kacheln und Weiterlesen-Karten) */
body.mty-page .mty-more { margin-top: 1rem; }
body.mty-page .mty-more .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--mty-accent);
}
body.mty-page .mty-more .elementor-heading-title::after {
  content: "→";
  transition: transform .3s var(--mty-ease);
}
body.mty-page .mty-cell:hover .mty-more .elementor-heading-title::after,
body.mty-page .mty-rel:hover .mty-more .elementor-heading-title::after { transform: translateX(5px); }
/* Schaltflächen-Zeile unter einem Abschnitt */
body.mty-page .mty-more-row {
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  --flex-wrap: wrap;
  gap: .85rem;
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
body.mty-page .mty-btn-row {
  display: flex;
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  --flex-wrap: wrap;
  gap: .85rem;
  width: auto;
}
/* Abschnitt mit hellerem Grund */
body.mty-page .mty-alt { background: var(--mty-surface); border-block: 1px solid var(--mty-line); }

/* ============ Unterseiten: Kopf ============ */
body.mty-page .mty-phero { min-height: 0; }
body.mty-page .mty-phero .mty-hero-copy {
  padding-top: calc(68px + clamp(3rem, 8vh, 5.5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
}
body.mty-page .mty-phero .mty-hero-media { min-height: 460px; }
body.mty-page .mty-phero .mty-hero-media img {
  transform: none;
  animation: none;
  object-position: 50% 30%;
}
/* Ausschnitt je Seite verschieben (hero_focus in der Inhaltsdatei) */
body.mty-page .mty-phero.mty-pos-top .mty-hero-media img { object-position: 50% 15%; }
body.mty-page .mty-phero.mty-pos-low .mty-hero-media img { object-position: 50% 62%; }
body.mty-page .mty-phero.mty-pos-skyline .mty-hero-media img { object-position: 50% 58%; }
body.mty-page .mty-ph1 { margin-top: 1.3rem; }
body.mty-page .mty-ph1 .elementor-heading-title {
  /* Nicht größer werden lassen, als die schmale Textspalte trägt: Wörter wie
     „Aufmerksamkeit." liefen sonst ins Foto. */
  font-size: clamp(2rem, 3.3vw, 3.1rem);
  font-stretch: 116%;
  font-weight: 760;
  letter-spacing: -.012em;
  line-height: 1.04;
  max-width: 15ch;
  overflow-wrap: break-word;
}
.mty-js body.mty-page .mty-ph1 { animation: mty-fade-up 1s var(--mty-ease) .1s both; }

/* ============ Unterseiten: Fließtext ============ */
body.mty-page .mty-prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
body.mty-page .mty-prose-head { position: sticky; top: 98px; align-self: start; }
body.mty-page .mty-prose-body .mty-h2 + .mty-prose-text,
body.mty-page .mty-prose-body .mty-h2 + .mty-prose-lead { margin-top: 1.4rem; }
body.mty-page .mty-prose-lead p { color: var(--mty-text); font-size: clamp(1.12rem, 1.5vw, 1.3rem); max-width: 54ch; line-height: 1.55; }
body.mty-page .mty-prose-lead + .mty-prose-text { margin-top: 1.2rem; }
body.mty-page .mty-prose-text p { color: var(--mty-muted); font-size: 1.06rem; max-width: 62ch; }
body.mty-page .mty-prose-text p strong { color: var(--mty-text); font-weight: 650; }
body.mty-page .mty-prose-hat-bild .mty-prose-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
}
body.mty-page .mty-prose-hat-bild .mty-prose-media { position: sticky; top: 98px; align-self: start; }
body.mty-page .mty-prose-rechts .mty-prose-media { order: 2; }

/* ============ Unterseiten: Karten ============ */
body.mty-page .mty-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(.8rem, 1.4vw, 1.25rem);
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
body.mty-page .mty-card {
  background: var(--mty-bg);
  border: 1px solid var(--mty-line);
  padding: clamp(1.4rem, 2.4vw, 2rem);
  position: relative;
}
body.mty-page .mty-card::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--mty-accent);
  margin-bottom: 1.2rem;
}
body.mty-page .mty-card .mty-h3 .elementor-heading-title { font-size: 1.22rem; font-stretch: 112%; font-weight: 700; }
body.mty-page .mty-card .elementor-widget-text-editor { margin-top: .6rem; }
body.mty-page .mty-card .elementor-widget-text-editor p { color: var(--mty-muted); font-size: .98rem; }

/* ============ Unterseiten: Kollage ============ */
/* Vier Hochformate nebeneinander. Höhe und Versatz wechseln je Kachel, damit
   die Reihe wie eine Kollage wirkt und nicht wie eine Bildergalerie.
   Die Klassen mty-cg1…4 vergibt unterseite.js nach der Reihenfolge. */
body.mty-page .mty-collage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.45rem, 1vw, .95rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
body.mty-page .mty-collage-item { overflow: clip; background: var(--mty-surface); }
body.mty-page .mty-collage-item img {
  display: block;
  width: 100%;
  object-fit: cover;
  filter: saturate(.94);
  transition: transform .7s var(--mty-ease);
}
body.mty-page .mty-collage-item:hover img { transform: scale(1.045); }
body.mty-page .mty-cg1 img { aspect-ratio: 3 / 4.4; object-position: 50% 45%; }
body.mty-page .mty-cg2 img { aspect-ratio: 3 / 3.85; object-position: 50% 35%; }
body.mty-page .mty-cg3 img { aspect-ratio: 3 / 3.85; object-position: 50% 47%; }
body.mty-page .mty-cg4 img { aspect-ratio: 3 / 4.4; object-position: 50% 30%; }
body.mty-page .mty-cg2 { margin-top: clamp(1.5rem, 3.8vw, 3.2rem); }
body.mty-page .mty-cg3 { margin-top: clamp(.4rem, 1.1vw, .9rem); }
body.mty-page .mty-cg4 { margin-top: clamp(2.2rem, 5.4vw, 4.4rem); }

/* ============ Unterseiten: Zeilen (Titel + Text) ============ */
body.mty-page .mty-rows { border-top: 1px solid var(--mty-line); }
body.mty-page .mty-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: .6rem 2.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--mty-line);
}
body.mty-page .mty-row .mty-h3 .elementor-heading-title { font-size: 1.12rem; font-stretch: 112%; font-weight: 680; }
body.mty-page .mty-row .elementor-widget-text-editor p { color: var(--mty-muted); }

/* ============ Unterseiten: Kennzahlen ============ */
body.mty-page .mty-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 1.5rem 2rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-block: 1px solid var(--mty-line);
}
body.mty-page .mty-facts .mty-trust-num .elementor-heading-title { font-size: clamp(2rem, 3.4vw, 2.8rem); font-stretch: 120%; font-weight: 780; }
body.mty-page .mty-facts .mty-trust-label .elementor-heading-title { font-size: .95rem; margin-top: .3rem; }

/* ============ Unterseiten: Weiterlesen ============ */
body.mty-page .mty-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(.8rem, 1.4vw, 1.25rem);
  margin-top: 1.4rem;
}
body.mty-page .mty-rel {
  position: relative;
  background: var(--mty-surface);
  border: 1px solid var(--mty-line);
  padding: 1.5rem 1.6rem 1.4rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .3s, transform .3s var(--mty-ease);
  display: flex;
  --flex-direction: column;
  flex-direction: column;
}
/* Der Pfeil sitzt in jeder Karte unten, egal wie lang der Text ist. */
body.mty-page .mty-rel .mty-more { margin-top: auto; padding-top: 1rem; }
body.mty-page .mty-rel:hover { border-color: rgba(232, 163, 61, .55); transform: translateY(-2px); }

/* ---- Ganze Karte anklickbar ----
   Elementor rendert einen Link am Container NICHT als <a>. Der echte Link
   sitzt deshalb in der Überschrift (gut für Suchmaschinen und Tastatur), und
   ein unsichtbares Feld dehnt ihn über die ganze Karte. */
body.mty-page .mty-cell .mty-h3 .elementor-heading-title a,
body.mty-page .mty-rel .mty-rel-title .elementor-heading-title a {
  text-decoration: none;
  color: inherit;
}
/* Entscheidend: Elementor setzt auf JEDES Widget position: relative. Damit
   wäre die Überschrift der Bezugsrahmen und das Klickfeld nur so groß wie sie.
   Deshalb hier zurück auf static — dann ist die Karte der Bezugsrahmen und
   inset: 0 deckt sie ganz ab. overflow: visible dazu, damit nichts abgeschnitten
   wird (Elementor beschneidet Widget-Inhalte). */
body.mty-page .mty-cell .mty-h3,
body.mty-page .mty-cell .mty-h3 .elementor-widget-container,
body.mty-page .mty-rel .mty-rel-title,
body.mty-page .mty-rel .mty-rel-title .elementor-widget-container {
  position: static;
  overflow: visible;
}
body.mty-page .mty-cell .mty-h3 .elementor-heading-title a::after,
body.mty-page .mty-rel .mty-rel-title .elementor-heading-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Sichtbarer Fokusrahmen für die Tastaturbedienung */
body.mty-page .mty-cell .mty-h3 .elementor-heading-title a:focus-visible,
body.mty-page .mty-rel .mty-rel-title .elementor-heading-title a:focus-visible { outline: none; }
body.mty-page .mty-cell:has(.mty-h3 a:focus-visible),
body.mty-page .mty-rel:has(.mty-rel-title a:focus-visible) {
  outline: 2px solid var(--mty-accent);
  outline-offset: 3px;
}
body.mty-page .mty-rel-title .elementor-heading-title { font-size: 1.15rem; font-stretch: 112%; font-weight: 700; }
body.mty-page .mty-rel-text { margin-top: .5rem; }
body.mty-page .mty-rel-text p {
  color: var(--mty-muted);
  font-size: .95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ Rechtstexte ============ */
body.mty-page .mty-legal { padding: calc(68px + clamp(3rem, 8vh, 5rem)) 0 clamp(4rem, 8vw, 7rem); }
body.mty-page .mty-legal-wrap { max-width: 860px; }
body.mty-page .mty-legal-h1 { margin-top: 1rem; }
body.mty-page .mty-legal-hinweis {
  margin-top: 1.8rem;
  border: 1px solid var(--mty-line);
  border-left: 3px solid var(--mty-accent);
  background: var(--mty-surface);
  padding: 1.1rem 1.3rem;
}
body.mty-page .mty-legal-hinweis p { color: var(--mty-muted); font-size: .95rem; }
body.mty-page .mty-legal-hinweis strong { color: var(--mty-text); }
body.mty-page .mty-legal-sec { margin-top: 2.6rem; }
body.mty-page .mty-legal-h2 .elementor-heading-title { font-size: 1.3rem; font-stretch: 112%; font-weight: 700; }
body.mty-page .mty-legal-text { margin-top: .7rem; }
body.mty-page .mty-legal-text p { color: var(--mty-muted); max-width: 70ch; }
body.mty-page .mty-legal-text a { color: var(--mty-accent); }
body.mty-page .mty-ph { color: #d3cfc5; border-bottom: 1px dashed rgba(232, 163, 61, .7); }

/* ============ Einblenden beim Scrollen ============ */
.mty-js body.mty-page .mty-rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--mty-ease), transform .8s var(--mty-ease);
  transition-delay: var(--mty-d, 0s);
}
.mty-js body.mty-page .mty-rv.mty-in { opacity: 1; transform: none; }
body.mty-page .mty-d1 { --mty-d: .05s; }
body.mty-page .mty-d2 { --mty-d: .1s; }
body.mty-page .mty-d3 { --mty-d: .15s; }
body.mty-page .mty-d4 { --mty-d: .2s; }
body.mty-page .mty-d5 { --mty-d: .25s; }
/* Anker nicht unter die feste Leiste springen lassen */
body.mty-page .e-con[id] { scroll-margin-top: 76px; }
/* Im Elementor-Editor nichts verstecken */
body.elementor-editor-active .mty-rv,
body.elementor-editor-active .mty-hero .elementor-element {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
/* Das Untermenü der Leiste muss im Baukasten sichtbar und anklickbar bleiben */
body.elementor-editor-active .mty-nav-sub {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ============ Schmale Navigation ============ */
@media (max-width: 1080px) {
  body.mty-page .mty-nav-links {
    position: fixed;
    left: 0;
    right: 0;
    top: 68px;
    height: calc(100vh - 68px);
    height: calc(100dvh - 68px);
    /* deckend: bei .97 schimmerten helle Überschriften durch das offene Menü */
    background: var(--mty-bg);
    transform: translateY(-110%);
    transition: transform .45s var(--mty-ease);
    overflow: auto;
    width: auto;
  }
  body.mty-page .mty-nav-links .elementor-icon-list-items {
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 2rem;
  }
  body.mty-page .mty-nav-links .elementor-icon-list-text { font-size: 1.5rem; font-weight: 640; color: var(--mty-text); }
  body.mty-page .mty-nav.mty-open .mty-nav-links { transform: none; }
  body.mty-page .mty-nav.mty-open { background: var(--mty-bg); }
  body.mty-page .mty-nav.mty-open .mty-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.mty-page .mty-nav.mty-open .mty-burger span:nth-child(2) { opacity: 0; }
  body.mty-page .mty-nav.mty-open .mty-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.mty-page .mty-burger { display: flex; margin-left: auto; }
  body.mty-page .mty-nav-cta { display: none; }

  /* Im Burger stehen die Punkte linksbündig untereinander und die Liste scrollt,
     statt sich zu stauchen — sonst wird es mit dem Untermenü zu eng.
     Der Rand sitzt am Widget-Kasten: am <ul> setzt Elementor sein padding:0
     stärker durch, dort landet die Angabe nicht. */
  body.mty-page .mty-nav-links > .elementor-widget-container { padding: 2.6rem var(--mty-pad) 3.5rem; }
  body.mty-page .mty-nav-links .elementor-icon-list-items {
    justify-content: flex-start;
    align-items: flex-start;
    height: auto;
    /* kein min-height: 100% — sonst schiebt die Liste den Knopf aus dem Bild */
    min-height: 0;
    gap: 1.4rem;
    text-align: left;
    box-sizing: border-box;
  }
  /* Ohne display:block säße das Untermenü als Flex-Nachbar NEBEN „Leistungen“ */
  body.mty-page .mty-nav-links .elementor-icon-list-item { display: block; width: 100%; }
  /* Das Untermenü steht im Burger offen unter „Leistungen“, ohne zweiten Tipp. */
  body.mty-page .mty-nav-links .mty-has-sub > a .elementor-icon-list-text::after { display: none; }
  body.mty-page .mty-nav-links .mty-nav-sub {
    position: static;
    width: auto;
    min-width: 0;
    margin: 1rem 0 .3rem;
    padding: 0 0 0 1rem;
    background: none;
    border: 0;
    border-left: 1px solid var(--mty-line);
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  body.mty-page .mty-nav-links .mty-nav-sub::before { display: none; }
  body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: 0;
    min-height: 0;
  }
  body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-item a { padding: 0; }
  body.mty-page .mty-nav-links .mty-nav-sub .elementor-icon-list-text {
    font-size: 1.05rem;
    font-weight: 520;
    color: var(--mty-muted);
    white-space: normal;
  }
  /* Der Hauptknopf steht auf dem Handy als fester Balken am unteren Bildrand.
     maty.js hängt ihn dafür an den <body> — innerhalb der Leiste ginge kein
     position:fixed, weil deren backdrop-filter den Bezugsrahmen bildet. */
  body.mty-page .mty-nav-cta.mty-cta-fest {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    width: auto;
    max-width: none;
    margin: 0;
    padding: .65rem var(--mty-pad);
    padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
    background: rgba(12, 13, 16, .93);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--mty-line);
  }
  body.mty-page .mty-nav-cta.mty-cta-fest .elementor-widget-container { overflow: visible; }
  body.mty-page .mty-nav-cta.mty-cta-fest .elementor-button {
    width: 100%;
    justify-content: center;
    padding: .95rem 1.25rem;
    font-size: 1rem;
  }
  /* Platz für den Balken. Der kommt an die Fußzeile, nicht an den <body> —
     die Fußzeile hat eine eigene Fläche, ein Rand am body zeigte darunter
     einen Streifen in der dunkleren Seitenfarbe. */
  body.mty-page.mty-hat-fest-cta .mty-footer { padding-bottom: calc(7.4rem + env(safe-area-inset-bottom, 0px)); }
  body.mty-page.mty-hat-fest-cta .mty-legal { padding-bottom: calc(7.4rem + env(safe-area-inset-bottom, 0px)); }
  /* Im offenen Burger-Menü darf der Balken den letzten Punkt nicht überdecken. */
  body.mty-page.mty-hat-fest-cta .mty-nav-links > .elementor-widget-container { padding-bottom: 7.5rem; }

  body.mty-page .mty-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  body.mty-page .mty-hero-media { order: -1; height: clamp(340px, 56vw, 62dvh); }
  body.mty-page .mty-hero-media img {
    object-position: 46% 64%;
    transform: scale(1.04);
    transform-origin: 50% 42%;
    animation: none;
  }
  body.mty-page .mty-hero-media::after {
    background:
      linear-gradient(to top, rgba(12, 13, 16, .8) 0%, rgba(12, 13, 16, .18) 22%, transparent 45%),
      /* siehe oben: langer Auslauf statt harter Kante — auf dem Handy fiel der
         Streifen über hellen Kopfbildern am meisten auf. */
      linear-gradient(to bottom, rgba(12, 13, 16, .46) 0, rgba(12, 13, 16, .26) 40px, rgba(12, 13, 16, .1) 82px, transparent 140px);
  }
  body.mty-page .mty-hero-copy {
    padding-top: clamp(1.8rem, 5vw, 2.6rem);
    padding-inline: var(--mty-pad);
    padding-bottom: clamp(2.5rem, 7vw, 3.5rem);
  }
  body.mty-page .mty-hero-lead { max-width: 52ch; }
  body.mty-page .mty-trust { max-width: 40rem; }
  body.mty-page .mty-hero-tag { display: none; }
  /* Kopfbild der Unterseiten: etwas höheres Band und Ausschnitt weiter unten.
     Die Motive sind Hochformate mit viel Himmel; im flachen Band war oben
     leere Fläche und die Person wurde unten angeschnitten. */
  body.mty-page .mty-phero .mty-hero-media { min-height: 0; height: clamp(300px, 52vw, 440px); }
  body.mty-page .mty-phero .mty-hero-media img { object-position: 50% 58%; }
  body.mty-page .mty-phero.mty-pos-top .mty-hero-media img { object-position: 50% 32%; }
  body.mty-page .mty-phero.mty-pos-low .mty-hero-media img { object-position: 50% 74%; }
  body.mty-page .mty-phero.mty-pos-skyline .mty-hero-media img { object-position: 50% 86%; }
  body.mty-page .mty-phero .mty-hero-copy { padding-top: clamp(1.8rem, 5vw, 2.6rem); }
}

/* ============ Mobil ============ */
@media (max-width: 900px) {
  body.mty-page .mty-wenn-grid,
  body.mty-page .mty-about-grid { grid-template-columns: 1fr; }
  body.mty-page .mty-wenn-sticky { position: static; max-width: 480px; }
  body.mty-page .mty-c7,
  body.mty-page .mty-c5 { grid-column: span 12; }
  body.mty-page .mty-cell { min-height: 300px; }
  /* Das breite Band wird auf dem Handy zur normalen Kachel. Der Liegestütz
     liegt im Foto ganz unten; mit dem Ausschnitt für das breite Band sähe man
     hier fast nur Himmel. */
  body.mty-page .mty-pos-liegend img { object-position: 50% 96%; }
  body.mty-page .mty-steps { grid-template-columns: 1fr; gap: 2.2rem; }
  /* Untereinander braucht es keine gemeinsamen Spalten mehr — subgrid zurück. */
  body.mty-page .mty-pakete { display: block; }
  body.mty-page .mty-paket {
    grid-column: auto;
    grid-template-columns: 1fr;
    gap: .45rem;
    align-items: start;
    padding: 1.4rem .25rem 1.7rem;
  }
  /* Reihenfolge: erst der Name, dann das Kennzeichen, dann der Text. Vorher
     stand das Kennzeichen ganz oben („für Anfänger" vor „Starter") — man las
     die Einordnung vor der Sache und die drei Zeilen verloren ihre Ordnung. */
  body.mty-page .mty-paket .mty-h3 { order: 0; }
  body.mty-page .mty-paket-tag { order: 1; justify-self: start; margin-bottom: .35rem; }
  body.mty-page .mty-paket .elementor-widget-text-editor { order: 2; }
  /* Das kleine zweite Foto hängt unten aus dem großen heraus. Ohne Platz
     darunter legte es sich auf dem Handy über die Überschrift „Hi, ich bin
     Matthäus." — der Name war halb verdeckt. */
  body.mty-page .mty-about-media { order: -1; max-width: 480px; margin-bottom: clamp(3rem, 12vw, 4.2rem); }
  body.mty-page .mty-about-small { left: auto; right: 0; bottom: -9%; width: 46%; }
  body.mty-page .mty-midcta-box { flex-direction: column; align-items: flex-start; --align-items: flex-start; }
  /* untereinander wirkt die flex-basis als Höhe, deshalb hier zurücknehmen */
  body.mty-page .mty-midcta-text { flex: 0 1 auto; width: 100%; }
  body.mty-page .mty-prose-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  body.mty-page .mty-prose-head,
  body.mty-page .mty-prose-hat-bild .mty-prose-media { position: static; }
  body.mty-page .mty-prose-hat-bild .mty-prose-media { max-width: 480px; }
  /* Die Fotos sind Hochformate, in denen die Person unten steht und darüber
     viel Himmel liegt. Ein mittig ausgerichteter Querschnitt zeigte deshalb
     fast nur helle, leere Fläche. Etwas höheres Format, Ausschnitt nach unten. */
  body.mty-page .mty-prose-hat-bild .mty-prose-media img {
    aspect-ratio: 4 / 3.6;
    object-position: 50% 60%;
  }
  body.mty-page .mty-prose-rechts .mty-prose-media { order: 0; }
  body.mty-page .mty-row { grid-template-columns: 1fr; gap: .35rem; }
  /* Kollage: zwei Spalten, gleiche Höhe, kein Versatz.
     Der Wechselschritt aus der breiten Ansicht liest sich auf 390 px nicht als
     Absicht, sondern als verrutschtes Raster — die rechte Spalte begann 19 px
     tiefer und der Block endete unten ausgefranst. */
  body.mty-page .mty-collage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.55rem, 2.4vw, 1rem);
  }
  body.mty-page .mty-cg1,
  body.mty-page .mty-cg2,
  body.mty-page .mty-cg3,
  body.mty-page .mty-cg4 { margin-top: 0; }
  body.mty-page .mty-cg1 img,
  body.mty-page .mty-cg2 img,
  body.mty-page .mty-cg3 img,
  body.mty-page .mty-cg4 img { aspect-ratio: 3 / 3.7; object-position: 50% 62%; }
  /* Anrisstext ganz zeigen. Die Kürzung auf drei Zeilen traf mal mitten im
     Wort, mal genau hinter einem Satzpunkt — dann standen dort vier Punkte. */
  body.mty-page .mty-rel-text p { display: block; overflow: visible; }
  /* Fußzeilen-Verweise: Tippfläche auf 44 px bringen. */
  body.mty-page .mty-foot-links .elementor-icon-list-items { gap: 0; }
  body.mty-page .mty-foot-links .elementor-icon-list-item a { padding: .7rem 0; }
  body.mty-page .mty-foot { grid-template-columns: 1fr; gap: 2rem; }
  body.mty-page .mty-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }

  /* Trainingsorte: auf dem Handy kein Wischband mehr.
     Vier Karten in einer Reihe, die seitlich aus dem Bild lief — die erste
     klebte am linken Rand, die zweite war angeschnitten, und dass man wischen
     kann, sah man ihr nicht an. Untereinander als breite Karten mit dem Foto
     links liest es sich ohne Wischen und bleibt kurz. */
  body.mty-page .mty-orte-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex-wrap: wrap;
    --flex-wrap: wrap;
    gap: 1rem;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: clamp(1.8rem, 6vw, 2.6rem) 0 0;
    margin-inline: 0;
  }
  body.mty-page .mty-ort {
    display: grid;
    grid-template-columns: 37% minmax(0, 1fr);
    align-items: stretch;
    flex: 0 1 auto;
    scroll-snap-align: none;
  }
  body.mty-page .mty-ort .elementor-widget-image,
  body.mty-page .mty-ort .elementor-widget-image .elementor-widget-container { height: 100%; }
  body.mty-page .mty-ort img { height: 100%; min-height: 148px; aspect-ratio: auto; }
  body.mty-page .mty-ort-body { padding: 1rem 1.1rem 1.15rem; align-self: center; }
  body.mty-page .mty-ort-body .mty-h3 .elementor-heading-title { font-size: 1.08rem; }
  body.mty-page .mty-ort-body .elementor-widget-text-editor p { font-size: .93rem; }

  /* Kontaktband: quer laufender Schleier passt nur zum zweispaltigen Aufbau.
     Auf dem Handy stand der Trainer dadurch hell und frontal mitten hinter dem
     Text. Senkrechter Schleier, oben fast deckend — das Foto bleibt Stimmung
     (Parkdeck in der Dämmerung), der Text steht ruhig darauf. */
  body.mty-page .mty-final-media img { width: 100%; object-position: 50% 50%; }
  body.mty-page .mty-final-media::after {
    background: linear-gradient(to bottom,
      rgba(12, 13, 16, .95) 0%,
      rgba(12, 13, 16, .89) 34%,
      rgba(12, 13, 16, .74) 66%,
      rgba(12, 13, 16, .82) 100%);
  }
}

@media (max-width: 560px) {
  body.mty-page .mty-foot-cols { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  body.mty-page .mty-h1 .elementor-heading-title { font-size: clamp(1.95rem, 8.8vw, 2.6rem); }
  body.mty-page .mty-hero-lead { font-size: 1rem; }
  body.mty-page .mty-btn .elementor-button { padding: .9rem 1.4rem; font-size: .95rem; }
}

/* ============ Reduzierte Bewegung ============ */
@media (prefers-reduced-motion: reduce) {
  html:has(body.mty-page) { scroll-behavior: auto; }
  .mty-js body.mty-page .mty-hero-media img,
  .mty-js body.mty-page .mty-line > span,
  .mty-js body.mty-page .mty-hero-lead,
  .mty-js body.mty-page .mty-hero-cta,
  .mty-js body.mty-page .mty-eyebrow,
  .mty-js body.mty-page .mty-trust,
  .mty-js body.mty-page .mty-hero-tag { animation: none; }
  .mty-js body.mty-page .mty-mq .elementor-image-gallery .gallery { animation: none; flex-wrap: wrap; width: auto; }
  .mty-js body.mty-page .mty-rv { opacity: 1; transform: none; transition: none; }
  body.mty-page .mty-btn .elementor-button,
  body.mty-page .mty-chip .elementor-button,
  body.mty-page .mty-cell .elementor-widget-image img { transition: none; }
}