/* ============================================================
   MOBILE EXPERIENCE – Audio-gesteuerte Vollbild-Kartensequenz
   Aktiv nur wenn JS #m-exp einblendet (≤ 768px / Touch)
   ============================================================ */

#m-exp {
  display: none; /* Per JS eingeblendet */
  position: fixed;
  /* Langform statt inset (inset erst ab iOS 14.5!) */
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 500;
  background: #0d1a0a;
  color: #f5f0e8;
  font-family: inherit;
  overflow: hidden;
}

/* ── Hero-Screen ─────────────────────────────────────────────────────── */

#m-hero {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(15vh + env(safe-area-inset-bottom, 0px));
}

/* Hero-Hintergrund (Idle-Video, 9:16 mobile / 16:9 desktop): bildschirmfüllend.
   Ungedimmt – das Hero-Bild soll voll zur Wirkung kommen, die Schrift
   ist per schwarzem Rand/Schatten lesbar. */
#m-hero-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Desktop: Portal im Hero horizontal nachjustiert. Das 16:9-Desktop-Video
   (1424×640) wird bei object-fit:cover links/rechts beschnitten; da das
   Portal im Bild minimal aus der Mitte liegt, verschieben wir den
   Zuschnitt auf 53%, damit das Portal zentriert sitzt. Nur Desktop,
   weil das 9:16-Mobilvideo oben/unten beschnitten wird (kein Effekt). */
@media (min-width: 768px) {
  #m-hero-bg {
    object-position: 54% center;
  }
}

#m-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  width: 100%;
}

#m-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 700;
  color: #5b7c31;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0 0 20px rgba(0,0,0,0.9);
  margin-bottom: 0.6rem;
}

#m-hero p {
  font-size: 1rem;
  opacity: 0.9;
  font-style: italic;
  margin-bottom: 2rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

/* Start-Button in der Glas-Optik der ursprünglichen Desktop-Seite
   (.btn-start-guide in portal.css): durchsichtig, Hero bleibt sichtbar */
#m-play-start {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px); /* iOS Safari */
  backdrop-filter: blur(10px);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 1.2rem 2rem;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

#m-play-start:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
}

.m-fade-out {
  animation: mFadeOut 0.6s ease forwards;
}

@keyframes mFadeOut {
  to { opacity: 0; transform: scale(1.04); }
}

/* Portal-Übergang (beginTour): Hero-Text/Button blenden aus, das Idle-Video
   läuft sichtbar weiter, bis das Entry-Video nahtlos anschließt */
#m-hero-content,
#m-scroll-hint {
  transition: opacity 0.8s ease;
}

#m-hero.m-arming #m-hero-content,
#m-hero.m-arming #m-scroll-hint {
  opacity: 0;
  pointer-events: none;
  animation: none; /* evtl. laufende Hinweis-Animation stoppen */
}

/* ── Sequenz-Container ───────────────────────────────────────────────── */

#m-seq {
  display: none;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /* Controls liegen als Overlay mit z-index:9999 drüber – kein toter Streifen */
}

/* ── Einzelne Karte ─────────────────────────────────────────────────── */

.m-card {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 2.5rem;
  /* Guided Mode: kein Scrollen (Video bleibt fixiert); Text-Modus siehe unten */
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
  text-align: center;
  scroll-behavior: smooth;
}

.m-card.m-active {
  opacity: 1 !important;
  transform: translateY(0);
  pointer-events: auto;
}

/* Portal-Durchgang: Entry-Karte liegt transparent ÜBER dem Hero – das
   laufende Idle-Video bleibt sichtbar, bis das Entry-Video (pausiert auf
   Frame 1) darüber eingeblendet ist. Kein Einschieben, kein schwarzer
   Kartenhintergrund. Klasse bleibt bis zum Kartenwechsel (_stopVideo).
   WICHTIG: 3 Klassen! .m-card.m-bg-video { background-color:#000 } steht
   weiter unten in der Datei und würde bei gleicher Spezifität gewinnen
   (Ursache des "schwarzer Layer nach Klick"-Bugs). */
.m-card.m-bg-video.m-xfade {
  transition-duration: 1.1s;
  transform: none;
  background-color: transparent;
}

/* Das Entry-Video spannt dabei über den GANZEN Viewport – exakt dieselbe
   Box wie #m-hero-bg. In der 72px kürzeren #m-seq-Box würde object-fit:cover
   minimal anders zoomen → sichtbarer Versatz beim Kreuzblenden.
   Langform statt inset (iOS < 14.5)! */
.m-card.m-xfade .m-bg-video-el {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

/* Im Text-Modus dürfen lange Inhalte gescrollt werden */
.m-show-texts .m-card {
  overflow-y: auto;
}

/* Text-Modus: Text ans untere Drittel kleben, obere 2/3 für Video frei.
   justify-content ändert sich NUR bei eingeblendeten Texten; im reinen
   Video-Modus bleibt center (Text ist ohnehin unsichtbar).
   mc-end (Abschluss mit CTA-Buttons) und Wesenskräfte bleiben zentriert. */
.m-show-texts .m-card {
  justify-content: flex-end;
  padding-bottom: 6rem; /* Platz für Controls (Overlay unten) */
}

.m-show-texts #mc-end,
.m-show-texts #mc-wesenskraefte {
  justify-content: center;
}

/* Hintergrundbild-Variante */
.m-card.m-bg {
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Lesbarkeits-Layer für reine Bild-Karten (ohne m-bg-video) – gleicher
   Gradient von unten wie bei Video-Karten, via ::after damit es nicht
   mit dem ::before der Video-Karten kollidiert */
.m-show-texts .m-card.m-bg:not(.m-bg-video)::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top,
    rgba(10, 20, 8, 0.88) 0%,
    rgba(10, 20, 8, 0.72) 25%,
    rgba(10, 20, 8, 0) 55%);
  z-index: 1;
  pointer-events: none;
}

/* ── Video-Hintergründe (Mobile Guided Tour) ──────────────────────────────── */

.m-card.m-bg-video {
  /* KEIN position: relative! Das würde das position:absolute von .m-card
     überschreiben und die Karte auf Inhaltshöhe schrumpfen lassen
     (Ursache des "Mini-Video"-Bugs). .m-card ist selbst positioniert und
     dient dem absoluten Video als Bezugsrahmen. */
  /* Kein Standbild im Guided Mode – das Video ist der einzige Hintergrund.
     Verhindert das kurze "Bild ploppt vor Video"-Flackern. */
  background-image: none;
  background-color: #000;
  /* Video randlos – Padding nur im Text-Modus (Video liegt absolut dahinter) */
  padding: 0;
}

.m-show-texts .m-card.m-bg-video {
  padding: 2rem 1.5rem 6rem; /* unten Platz für Controls (wie Sequenz-Texte bei bottom:6rem) */
}

.m-show-texts .m-card.m-bg-video {
  background-image: none;
}

/* Fade-to-Black Overlay für Kartenübergänge (global, per JS geschaltet) */
#m-fade {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 600; /* über den Karten, unter #m-ctrl */
}

#m-fade.on {
  opacity: 1;
}

/* Video-Element: HINTER dem Inhalt (z-index 0), damit Texte,
   SVG-Grafiken und CTA-Buttons nicht verdeckt werden.
   object-fit: cover – die M-Videos sind für Hochkant komponiert und
   füllen den Bildschirm vollständig (NICHT verkleinern/letterboxen). */
.m-bg-video video {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  display: block;
  visibility: visible;
  transition: opacity 0.35s ease;
}

/* Tour-Start-Video (mc-introvideo): gleiche horizontale Justierung wie das
   Hero-Idle-Video (54%), damit das Portal beim Übergang Hero → Tour nicht
   springt. Beide Videos haben identische Abmessungen (1424×640) und dasselbe
   Portal-Motiv, daher muss die object-position übereinstimmen. Nur Desktop. */
@media (min-width: 768px) {
  #mc-introvideo video {
    object-position: 54% center;
  }
}

/* Ausgeblendetes Video: Sequenz-Wechsel (schwarz halten, bis das nächste
   Video Bilder liefert) und Fade-to-Black nach dem letzten Durchlauf,
   während das Audio weiterläuft. Karten-Hintergrund ist #000. */
.m-bg-video video.m-vid-hidden {
  opacity: 0;
}

/* Kreuzblenden (Portal-Entry über Idle-Video): langsamere Opacity-Transition
   für das echte Dissolve zweier Video-Layer */
.m-bg-video video.m-vid-slow {
  transition-duration: 1.2s;
}

/* Kreuzblende in Video-Sequenzen: das einblendende Standby-Video liegt ÜBER
   dem laufenden (Karten-Inhalte bleiben mit z-index 2 darüber) */
.m-bg-video video.m-vid-top {
  z-index: 1;
}

/* Text-Overlay an gesprochener Stelle (per JS .m-ov-on, siehe overlayAt):
   immer sichtbar, unabhängig vom Text-Toggle.
   WICHTIG: ID-Selektor! .m-card.m-bg-video > :not(video) (0,2,1) setzt
   position:relative und schlug .m-card .m-ov (0,2,0) – der Text lag dadurch
   im Textfluss hinter den unsichtbaren Absätzen außerhalb des sichtbaren
   Bereichs ("Text bleibt unsichtbar"-Bug). */
#m-exp .m-card .m-ov {
  position: absolute;
  margin: 0;
  left: 1.5rem;
  right: 1.5rem;
  top: 42%;
  transform: translateY(-50%);
  text-align: center;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 1.5s ease;
  pointer-events: none;
  z-index: 2;
}

#m-exp .m-card .m-ov.m-ov-on {
  opacity: 1;
}

/* Alle Kinder-Elemente über dem Video positionieren.
   :not(video), damit das Video seinen absoluten Vollbild-Layer behält.
   (Sicher, seit .m-card nicht mehr auf Inhaltshöhe kollabiert –
   der frühere "Mini-Video"-Bug kam von .m-card.m-bg-video { position: relative }.) */
.m-bg-video > :not(video),
.m-card.m-bg-video > :not(video) {
  position: relative;
  z-index: 2;
}

/* Abdunkelungs-Overlay für Video-Hintergründe (nur wenn Texte an sind).
   Einheitlicher Gradient von unten: nur das untere Drittel abdunkeln, damit
   die Videos in den oberen 2/3 sichtbar bleiben.
   ::before, damit es nicht mit anderen Pseudo-Elementen kollidiert.
   mc-introvideo (reines Video, kein Text) bleibt ausgenommen. */
.m-show-texts .m-card.m-bg-video::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(to top,
    rgba(10, 20, 8, 0.88) 0%,
    rgba(10, 20, 8, 0.72) 25%,
    rgba(10, 20, 8, 0) 55%);
  z-index: 1;
  pointer-events: none;
}

/* Intro-Video hat keinen Text – keine Abdunkelung nötig */
.m-show-texts #mc-introvideo::before {
  content: none;
}

/* Typografie */
.m-card h1,
.m-card h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  color: #5b7c31;
  margin-bottom: 1rem;
  line-height: 1.3;
  /* Standardmäßig ausgeblendet für bessere Bildwirkung */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.m-card p {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  line-height: 1.85;
  margin-bottom: 1.2rem;
  color: #f0ebe0;
  max-width: 560px;
  /* Standardmäßig ausgeblendet für bessere Bildwirkung */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.m-frage {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  line-height: 1.6;
  color: #f5f0e8;
  font-style: italic;
  max-width: 480px;
  /* Standardmäßig ausgeblendet für bessere Bildwirkung */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Texte einblenden (via User-Toggle) */
.m-show-texts .m-card h1,
.m-show-texts .m-card h2,
.m-show-texts .m-card p,
.m-show-texts .m-frage {
  opacity: 1;
}

/* Sequenz-Texte: pro Video-Wechsel wird der passende Text-Teil sichtbar.
   Karte trägt data-vid-index="N" (per JS bei dissolve aktualisiert).
   p[data-show-vid] / div[data-show-vid] ist nur sichtbar, wenn der Index passt.
   Überschreibt die opacity:1 oben für Karten MIT Sequenz-Texten. */
.m-card[data-vid-index] p[data-show-vid],
.m-card[data-vid-index] div[data-show-vid] {
  opacity: 0;
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 6rem;
  transition: opacity 0.5s ease;
}

/* Text-Toggle aus: Sequenz-Texte unsichtbar (wie normale Texte) */
.m-card[data-vid-index] p[data-show-vid],
.m-card[data-vid-index] div[data-show-vid] {
  opacity: 0;
}

/* Text-Toggle an: nur das Fragment mit passendem Video-Index sichtbar.
  Attribut-Selektor: [data-vid-index="0"] [data-show-vid="0"] etc.
  -1 = Pre-Video-Phase (z.B. Logo/Siegel-Animation, Intro-Text) */
.m-show-texts .m-card[data-vid-index="-1"] [data-show-vid="-1"],
.m-show-texts .m-card[data-vid-index="0"] [data-show-vid="0"],
.m-show-texts .m-card[data-vid-index="1"] [data-show-vid="1"],
.m-show-texts .m-card[data-vid-index="2"] [data-show-vid="2"],
.m-show-texts .m-card[data-vid-index="3"] [data-show-vid="3"],
.m-show-texts .m-card[data-vid-index="4"] [data-show-vid="4"],
.m-show-texts .m-card[data-vid-index="5"] [data-show-vid="5"],
.m-show-texts .m-card[data-vid-index="6"] [data-show-vid="6"] {
  opacity: 1;
}

/* Texte standardmäßig ausblenden (für bessere Bildwirkung) */
.m-card h1,
.m-card h2,
.m-card p,
.m-frage {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Immer sichtbar: Wesenskräfte-Animation und CTA am Ende */
.m-btn-cta,
.wesenskraefte,
.m-cta-btns {
  opacity: 1 !important;
}

/* Inhaltsgrafiken (Logo, Weltkarte, Produktreise) im Guided Mode ausblenden –
   die Videos sind die Bühne. Sichtbar nur mit Text-Toggle. */
.m-logo,
.weltkarte-container,
.m-produktreise {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.m-show-texts .m-logo,
.m-show-texts .weltkarte-container,
.m-show-texts .m-produktreise {
  opacity: 1;
}

.m-compass-title {
  font-family: var(--font-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 600;
  color: #5b7c31 !important;
}

/* Logo */
.m-logo {
  width: min(150px, 45vw);
  margin: 1.5rem auto 0;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Wesenskräfte-Karte */
#mc-wesenskraefte {
  background: radial-gradient(ellipse at center, rgba(91, 124, 49, 0.08) 0%, transparent 70%);
}

#mc-wesenskraefte .wesenskraefte {
  margin: 0 auto;
}

/* Harmonie-Karte: Logo und Empfehlungssiegel blenden nacheinander sanft
   ein und aus, während der Sprecher sie erwähnt – danach startet Video 21M
   (vidDelay 9,5s in guided-tour.js). Animation startet mit .m-active und
   läuft bei jedem Kartenbesuch neu. Zeiten: Logo 0,4–5,4s, Siegel 5,2–10,2s */
#mc-harmonie .m-harmonie-marken {
  position: absolute;
  /* Langform statt inset (iOS < 14.5!) */
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 2;
}

#mc-harmonie .m-hm {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  width: min(220px, 55vw);
  opacity: 0;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.55));
}

/* Logo: rundes Logo mit transparentem Hintergrund (WebP mit alpha).
   Desktop größer (wie früher der drehende Wesenskräfte-Kreis in Szene 7),
   Mobil bleibt es bei 220px damit es im Hochformat nicht den Rahmen sprengt. */
#mc-harmonie .m-hm-logo {
  width: min(220px, 55vw);
}
@media (min-width: 768px) {
  #mc-harmonie .m-hm,
  #mc-harmonie .m-hm-logo {
    width: min(440px, 45vw);
  }
}

#mc-harmonie.m-active .m-hm-logo {
  animation: hmFade 5s ease 0.4s forwards;
}

#mc-harmonie.m-active .m-hm-siegel {
  animation: hmFade 5s ease 5.2s forwards;
}

@keyframes hmFade {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Weltkarte-Karte */
#mc-weltkarte .weltkarte-container {
  width: 100%;
  max-width: 480px;
}

#mc-weltkarte .weltkarte-container svg,
#mc-weltkarte .weltkarte-container img {
  width: 100%;
  height: auto;
}

/* Produktreise */
.m-produktreise {
  width: 100%;
  max-width: 360px;
  margin: 0 auto 1rem;
  display: block;
}

/* Abschlusskarte */
#mc-end {
  gap: 1rem;
}

#mc-end h2 {
  margin-bottom: 0.5rem;
}

/* CTA-Texte am Ende immer sichtbar (unabhängig vom Text-Toggle) */
#mc-end h2,
#mc-end p {
  opacity: 1 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.m-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  max-width: 300px;
  margin-top: 1.5rem;
}

.m-btn-cta {
  padding: 0.85rem 1.5rem;
  border-radius: 50px;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: block;
  transition: transform 0.15s;
}

.m-btn-cta:active { transform: scale(0.96); }

.m-btn-community {
  background: #5b7c31;
  color: #fff;
  border: none;
}

/* ── Controls (unten fixiert) ────────────────────────────────────────── */

#m-ctrl {
  display: none;
  position: absolute;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(16px);
  border-radius: 50px;
  padding: 10px 18px;
  gap: 10px;
  align-items: center;
  z-index: 9999;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

#m-ctrl button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

#m-ctrl button:active   { background: rgba(255, 255, 255, 0.25); }
#m-ctrl button:disabled { opacity: 0.3; pointer-events: none; }

/* Fortschrittsbalken */
#m-prog {
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}

#m-prog-fill {
  height: 100%;
  background: #5b7c31;
  border-radius: 2px;
  width: 0%;
  transition: width 0.4s ease;
}

#m-prog-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  min-width: 30px;
  text-align: center;
}

/* ── Manueller Scroll-Modus (Bilderreise) ────────────────────────────── */

#m-scroll {
  display: none; /* Per JS eingeblendet */
  position: absolute;
  /* Langform statt inset (inset erst ab iOS 14.5!) */
  top: 0; right: 0; bottom: 0; left: 0;
  background: #0d1a0a;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* proximity statt mandatory: erlaubt freies Scrollen, rastet sanft ein */
  scroll-snap-type: y proximity;
  z-index: 550; /* über den Tour-Karten, unter #m-fade (600) */
}

.ms-card {
  position: relative;
  height: 100%; /* Container ist absolut positioniert → 100% = Viewport */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2rem 1.5rem calc(3rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: #000;
}

.ms-img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Lesbarkeits-Gradient unten – nur auf Karten mit Text */
.ms-card:has(.ms-text)::after {
  content: '';
  position: absolute;
  right: 0; bottom: 0; left: 0;
  height: 65%;
  background: linear-gradient(transparent, rgba(10, 20, 8, 0.82));
  pointer-events: none;
}

/* Fallback für Browser ohne :has() (iOS < 15.4): Gradient auf allen Karten */
@supports not selector(:has(*)) {
  .ms-card::after {
    content: '';
    position: absolute;
    right: 0; bottom: 0; left: 0;
    height: 65%;
    background: linear-gradient(transparent, rgba(10, 20, 8, 0.82));
    pointer-events: none;
  }
}

.ms-text {
  position: relative;
  z-index: 1;
  max-width: 560px;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ms-card.ms-visible .ms-text {
  opacity: 1;
  transform: translateY(0);
}

/* Typografie: immer sichtbar (unabhängig vom Text-Toggle der Tour) */
.ms-text h2 {
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: #5b7c31;
  line-height: 1.3;
  margin-bottom: 0.8rem;
  opacity: 1;
  text-shadow:
    -1px -1px 0 #000, 1px -1px 0 #000,
    -1px  1px 0 #000, 1px  1px 0 #000,
    0 0 20px rgba(0, 0, 0, 0.9);
}

.ms-text p {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #f0ebe0;
  opacity: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}

.ms-frage {
  font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
  line-height: 1.6 !important;
  font-style: italic;
}

.ms-closing {
  font-size: 1.15rem !important;
  font-weight: 600;
}

.ms-text .m-compass-title {
  opacity: 1;
}

.ms-text .m-cta-btns {
  margin: 1rem auto 0;
}

/* Schließen-Buttons: Bilderreise (#m-scroll-close) und Guided Tour
   (#m-tour-exit) – Siblings von #m-scroll/#m-seq, bleiben fixiert */
#m-scroll-close,
#m-tour-exit {
  display: none; /* Per JS zusammen mit dem jeweiligen Modus eingeblendet */
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 560;
  backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  transition: top 0.3s ease;
}

#m-scroll-close:active,
#m-tour-exit:active { background: rgba(255, 255, 255, 0.2); }

/* Scroll-Hinweis auf dem Hero (dezent, mittig unten):
   Scrollen/Wischen startet die Bilderreise – der Pfeil deutet es nur an.
   Tippen auf den Pfeil funktioniert ebenfalls. */
#m-scroll-hint {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  margin-left: -22px; /* statt translateX (Animation nutzt transform) */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
  animation: mScrollHint 2.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

/* CSS-gezeichneter Chevron (rendert überall identisch, kein Font-Glyph) */
#m-scroll-hint::before {
  content: '';
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(255, 255, 255, 0.8);
  border-bottom: 2px solid rgba(255, 255, 255, 0.8);
  transform: rotate(45deg);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

@keyframes mScrollHint {
  0%, 100% { transform: translateY(0);   opacity: 0.55; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ============================================================
   HEADER-EINBLENDUNG (body.gt-chrome, per JS geschaltet)
   Hebt den schlanken Seiten-Header (z-index 100) und den
   Menü-Button (200) über das Tour-Overlay (#m-exp, 500).
   Aktiv: Hero-Screen, Pause, Abschlusskarte, Bilderreise
   beim Zurückscrollen.
   ============================================================ */

:root { --gt-header-h: 80px; }               /* Höhe des beigen Streifens (Desktop) */
@media (max-width: 768px) {
  :root { --gt-header-h: 60px; }             /* Mobile: kompakter Streifen */
}

body.gt-chrome .header {
  z-index: 700;
  animation: gtChromeIn 0.35s ease;
}

body.gt-chrome .menu-toggle-btn {
  z-index: 710;
  animation: gtChromeIn 0.35s ease;
}

@keyframes gtChromeIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ✕-Buttons weichen dem beigen Header-Streifen aus,
   wenn beide gleichzeitig sichtbar sind (Pause / Bilderreise) */
body.gt-chrome #m-scroll-close,
body.gt-chrome #m-tour-exit {
  top: calc(var(--gt-header-h) + 14px + env(safe-area-inset-top, 0px));
}

/* ============================================================
   DESKTOP (≥ 769px) – gemeinsame Engine mit 16:9-Medien
   (Standard; ?tour=old zeigt die alte Portal-Experience)
   ============================================================ */

@media (min-width: 769px) {
  /* Mehr Raum für Text auf großen Bildschirmen */
  .m-card p       { max-width: 680px; font-size: 1.15rem; }
  .m-frage        { max-width: 620px; font-size: 1.6rem; }
  .ms-text        { max-width: 680px; }
  .ms-text p      { font-size: 1.1rem; }
  .ms-card        { padding-bottom: 4rem; }

  /* Hero: Buttons nebeneinander statt gestapelt */
  #m-hero h1      { font-size: clamp(2rem, 3.5vw, 2.6rem); }
  #m-hero p       { font-size: 1.15rem; }

  /* CTA-Buttons dürfen breiter sein */
  .m-cta-btns     { max-width: 340px; }
}

/* Hover-States nur für echte Zeiger (Maus/Trackpad) */
@media (hover: hover) and (pointer: fine) {
  #m-play-start:hover           { background: rgba(255, 255, 255, 0.2);
                                  border-color: rgba(255, 255, 255, 0.5);
                                  transform: translateY(-3px);
                                  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3); }
  .m-btn-community:hover        { background: rgba(107, 144, 58, 0.95); transform: translateY(-1px); }
  #m-ctrl button:hover          { background: rgba(255, 255, 255, 0.22); }
  #m-scroll-close:hover,
  #m-tour-exit:hover            { background: rgba(255, 255, 255, 0.2); }
}