/* marcroth-fixes 1.0 · Mobile/Desktop-Korrekturen für Theme marcroth 1.2.x
   Lädt nach style.css des Themes. Beim nächsten Theme-Update in style.css übernehmen. */

/* 1. Bildcontainer: In Elementor-Flex-Containern kollabiert ein Widget, dessen Höhe nur aus aspect-ratio
      des Innen-Containers kommt, auf 0 (Elementor setzt .elementor-widget-container {height:100%}).
      Das Seitenverhältnis muss auf dem Widget selbst sitzen; der Innen-Container füllt es. */
.mr .mr-portrait, .mr .mr-photo-tall { aspect-ratio: 4 / 5; width: 100%; }
.mr .mr-photo-wide { aspect-ratio: 16 / 9; width: 100%; max-height: 78vh; }
@media (max-width: 860px) { .mr .mr-photo-wide { aspect-ratio: 4 / 5; max-height: none; } }
.mr .mr-portrait .elementor-widget-container,
.mr .mr-photo-tall .elementor-widget-container,
.mr .mr-photo-wide .elementor-widget-container { aspect-ratio: auto; height: 100% !important; max-height: none; }

/* 2. Horizontaler Overflow: Grid-Kinder dürfen schmaler als ihr Inhalt werden, SVGs skalieren mit. */
.mr-root .chart-grid > *, .mr-root .engines > *, .mr-root .fit > *, .mr-root .audit > *, .mr-root .laws-grid > * { min-width: 0; }
.mr-root .chart, .mr-root svg { max-width: 100%; height: auto; }
.mr-root .wrap { max-width: 100%; }
html, body { overflow-x: clip; }

/* 3. Mobil: Kapitel „Vier Ebenen" nicht pinnen. Statt 460vh Scroll-Strecke mit leerem Dunkel:
      alle vier Ebenen und alle vier Erklärungen stehen direkt untereinander. */
@media (max-width: 860px) {
  .mr-root .pin { height: auto !important; }
  .mr-root .pin-stage { position: static; height: auto; padding: clamp(56px, 10vw, 80px) 0 clamp(48px, 8vw, 64px); display: block; overflow: visible; }
  .mr-root .pin-grid { display: grid; gap: 40px; align-content: start; }
  .mr-root .steps-list { margin-top: 28px; }
  .mr-root .steps-list li,
  .mr-root .steps-list li:not(.on) { display: block !important; opacity: 1 !important; transform: none !important; padding-block: 16px; border-top: 1px solid color-mix(in oklab, var(--night-text) 14%, transparent); }
  .mr-root .steps-list li:first-child { border-top: 0; padding-top: 0; }
  .mr-root .steps-list .desc { grid-template-rows: 1fr !important; }
  .mr-root .layers { height: auto !important; gap: 8px; align-content: start; }
  .mr-root .layer { opacity: 1 !important; transform: none !important; justify-self: center; }
  .mr-root .layer span { display: block; }
  .mr-root .layer.active { background: color-mix(in oklab, var(--night-text) 9%, transparent); }
  .mr-root .layer-1.active, .mr-root .layer-1 { background: var(--night-accent); }
}

/* 4. Mobil: Hero-Rhythmus. Bild direkt nach den Buttons, mit Luft; Proof-Satz etwas kleiner. */
@media (max-width: 860px) {
  .mr .e-con.mr-hero { --padding-bottom: 0px; --padding-block-end: 0px; }
  .mr .mr-portrait-hero img { object-position: 50% 15%; }
  .mr-root .proof p, .mr-root.proof p { font-size: clamp(1.45rem, 7vw, 2rem); }
  .mr-root .logos { gap: 8px 22px; }
  .mr-root .logo-slot { font-size: 0.9rem; }
}

/* 5. Mobil: Zahlen-Kacheln kompakter, Report-Stapel ohne Überlauf, Buttons volle Breite. */
@media (max-width: 600px) {
  .mr-root .tile, .mr-root .result { min-height: 0; }
  .mr-root .tile-case { width: 82vw; min-height: 300px; gap: 28px; }
  .mr-root .report-page.back2 { display: none; }
  .mr .mr-actions .elementor-widget-button, .mr .mr-actions .elementor-button { width: 100%; }
  .mr .mr-actions .elementor-button { justify-content: center; }
  .mr-root .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  .mr-root .cinema-play { left: 16px; bottom: 16px; }
  .mr-root .gallery-nav { justify-content: flex-start; }
}

/* 6. Reveal-Sicherung: Elemente oberhalb des Viewports, die der Observer verpasst hat, werden per JS eingeblendet
      (Klasse .in). Ohne JS alles sichtbar. */
html:not(.js) .mr-reveal, html:not(.js) [data-reveal] { opacity: 1 !important; transform: none !important; }

/* 7. Desktop: Case-Kacheln ohne Leerraum, Kinofläche nicht höher als der Viewport. */
@media (min-width: 861px) {
  .mr-root .tile-case { min-height: 380px; }
  .mr-root .cinema { max-height: 72vh; }
}