/* ════════════════════════════════════════════════════════════════
   UNIVERSAL HERO RESPONSIVE v3.0.1
   ────────────────────────────────────────────────────────────────
   Themenübergreifend für alle Marstaller-Universum-Sites:
   · gklickt.de            (.gk-hero, .gk-eyebrow, .gk-brand-mark)
   · zeitweisezeitreisende (.zzr-hero, .zzr-eyebrow)
   · textilimprofil.de     (.tmp-hero, .tmp-eyebrow)
   · gregor-marstaller.de  (.ghz-hero, .ghz-eyebrow)
   · gregormarstaller.de   (.gm-hero, .gm-eyebrow)
   · theater-fluegelschuh  (.tf-hero, .tf-eyebrow)
   · juliamarstaller.de    (.jm-hero, .jm-eyebrow)

   Strategie: Attribut-Selektoren [class*="-hero"] etc. greifen
   automatisch auf jedes Theme-Prefix. Spezifische Theme-Klassen
   zusätzlich für Edge-Cases.

   Getestet auf:
   · iPhone SE (375), iPhone 16 (390), iPhone 16 Pro Max (430)
   · Pixel 8 Pro (412), Samsung S24 Ultra (412)
   · iPad Mini portrait (768), iPad Pro 11 landscape (1194)
   ═══════════════════════════════════════════════════════════════ */

/* ─── COVER + HERO-CONTAINER: Positioning-Context ──────────────── */
html body .wp-block-cover[class*="-hero"],
html body .wp-block-cover.gk-hero,
html body .wp-block-cover.tf-hero,
html body .wp-block-cover.gm-hero,
html body .wp-block-cover.tmp-hero,
html body .wp-block-cover.ghz-hero,
html body .wp-block-cover.jm-hero,
html body .wp-block-cover.zzr-hero,
html body .wp-block-group[class*="zzr-hero"],
html body .wp-block-group[class*="tmp-hero"],
html body .wp-block-group[class*="ghz-hero"],
html body .wp-block-group[class*="jm-hero"] {
  position: relative !important;
  isolation: isolate;
  contain: layout style;
}

/* ═══════════════════════════════════════════════════════════════
   TABLET + MOBILE (≤ 900 px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ─── COVER: Vollbild, am unteren Rand verankert ──────────── */
  html body .wp-block-cover[class*="-hero"],
  html body .wp-block-cover.gk-hero,
  html body .wp-block-cover.tf-hero,
  html body .wp-block-cover.gm-hero,
  html body .wp-block-cover.tmp-hero,
  html body .wp-block-cover.ghz-hero,
  html body .wp-block-cover.jm-hero {
    min-height: 100svh !important;
    min-height: 100dvh !important;
    height: auto !important;
    align-items: flex-end !important;
    padding: 0 !important;
    background-color: #0e0b08 !important;
  }

  /* Bild: Gesicht oben sichtbar */
  html body .wp-block-cover[class*="-hero"] img.wp-block-cover__image-background,
  html body .wp-block-cover[class*="-hero"] .wp-block-cover__image-background {
    object-position: center 24% !important;
    z-index: 0 !important;
  }

  /* Atmosphärischer Doppel-Gradient für Lesbarkeit */
  html body .wp-block-cover[class*="-hero"]::after,
  html body .wp-block-cover.gk-hero::after,
  html body .wp-block-cover.tf-hero::after,
  html body .wp-block-cover.gm-hero::after,
  html body .wp-block-cover.tmp-hero::after,
  html body .wp-block-cover.ghz-hero::after,
  html body .wp-block-cover.jm-hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 48%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.88) 100%),
      radial-gradient(ellipse 80% 40% at 20% 100%, rgba(0,0,0,0.5), transparent 70%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* Inner-Container: Inhalt am unteren Rand */
  html body .wp-block-cover[class*="-hero"] > .wp-block-cover__inner-container,
  html body .wp-block-cover[class*="-hero"] .wp-block-cover__inner-container,
  html body .wp-block-cover.gk-hero > .wp-block-cover__inner-container,
  html body .wp-block-cover.tf-hero > .wp-block-cover__inner-container,
  html body .wp-block-cover.gm-hero > .wp-block-cover__inner-container {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    padding: max(1.25rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(2rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px)) !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ═══ CARDS aller Themes: position static, transparent ══════ */
  html body .wp-block-cover[class*="-hero"] [class*="-hero__card"],
  html body .wp-block-cover[class*="-hero"] [class*="-hero-card"],
  html body .wp-block-cover.gk-hero .gk-hero__card,
  html body .wp-block-cover.gk-hero .wp-block-group.gk-hero__card,
  html body .wp-block-cover.tf-hero .tf-hero__card,
  html body .wp-block-cover.gm-hero .gm-hero__card,
  html body .wp-block-cover.tmp-hero .tmp-hero__card,
  html body .wp-block-cover.ghz-hero .ghz-hero__card,
  html body .wp-block-cover.jm-hero .jm-hero__card,
  html body [class*="-hero"] .wp-block-group[class*="-hero__card"] {
    position: static !important;
    transform: none !important;
    contain: none !important;
    isolation: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    animation: none !important;
    overflow: visible !important;
  }

  /* ═══ BRAND-MARKS aller Themes: oben links absolut ══════════ */
  html body .wp-block-cover[class*="-hero"] [class*="brand-mark"],
  html body .wp-block-cover[class*="-hero"] [class*="-brand"],
  html body .wp-block-cover.gk-hero .gk-brand-mark,
  html body .wp-block-cover.gk-hero p.gk-brand-mark,
  html body .wp-block-cover.tf-hero .tf-brand-mark,
  html body .wp-block-cover.gm-hero .gm-brand-mark,
  html body .wp-block-cover.tmp-hero .tmp-brand-mark,
  html body [class*="-hero"] [class*="-hero__card"] [class*="brand-mark"] {
    position: absolute !important;
    inset: max(1rem, env(safe-area-inset-top, 0px)) auto auto max(1.25rem, env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: calc(100% - 2.5rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    text-align: left !important;
    pointer-events: none;
    line-height: 1 !important;
    opacity: 0;
    animation: mup-hero-fade 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  }

  /* Brand-Name */
  html body .wp-block-cover[class*="-hero"] [class*="brand-mark"] [class*="brand-name"],
  html body .wp-block-cover.gk-hero .gk-brand-name {
    display: inline-block !important;
    color: rgba(248,242,230,0.96) !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.5);
    letter-spacing: -0.2px !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="brand-dot"] {
    color: #c9a84c !important;
    display: inline-block !important;
  }
  /* Brand-Sub (Untertitel-Zeile) */
  html body .wp-block-cover[class*="-hero"] [class*="brand-mark"] [class*="brand-sub"],
  html body .wp-block-cover.gk-hero .gk-brand-sub {
    display: block !important;
    color: rgba(248,242,230,0.7) !important;
    font-family: 'Jost', 'Helvetica Neue', sans-serif !important;
    font-style: normal !important;
    font-size: 0.46rem !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
    margin-top: 0.35rem !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  /* ═══ EYEBROWS aller Themes — KEIN Goldstrich mehr ═════════ */
  html body .wp-block-cover[class*="-hero"] [class*="-eyebrow"],
  html body .wp-block-cover[class*="-hero"] p[class*="-eyebrow"],
  html body .wp-block-cover.gk-hero .gk-eyebrow,
  html body .wp-block-cover.tf-hero .tf-eyebrow,
  html body .wp-block-cover.gm-hero .gm-eyebrow,
  html body .wp-block-cover.tmp-hero .tmp-eyebrow,
  html body .wp-block-cover.ghz-hero .ghz-eyebrow,
  html body .wp-block-cover.jm-hero .jm-eyebrow,
  html body [class*="-hero"] [class*="-eyebrow"] {
    position: static !important;
    color: #c9a84c !important;
    font-family: 'Jost', 'Helvetica Neue', sans-serif !important;
    font-style: normal !important;
    font-size: 0.6rem !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 0.7rem !important;
    padding: 0 !important;
    text-align: left !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    width: auto !important;
    max-width: 100% !important;
    opacity: 0;
    animation: mup-hero-fadeup 1s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
  }
  /* GOLDSTRICH-DEKORATION ENTFERNT — keine Pseudo-Linien mehr */
  html body .wp-block-cover[class*="-hero"] [class*="-eyebrow"]::before,
  html body .wp-block-cover.gk-hero .gk-eyebrow::before {
    content: none !important;
    display: none !important;
  }

  /* ═══ HEADLINES aller Themes ═══════════════════════════════ */
  html body .wp-block-cover[class*="-hero"] [class*="-hero__title"],
  html body .wp-block-cover[class*="-hero"] h1[class*="-hero__title"],
  html body .wp-block-cover[class*="-hero"] h1.wp-block-heading,
  html body .wp-block-cover.gk-hero h1.gk-hero__title,
  html body .wp-block-cover.tf-hero h1.tf-hero__title,
  html body .wp-block-cover.gm-hero h1.gm-hero__title,
  html body .wp-block-cover.tmp-hero h1.tmp-hero__title,
  html body .wp-block-cover.ghz-hero h1.ghz-hero__title,
  html body .wp-block-cover.jm-hero h1.jm-hero__title,
  html body [class*="-hero"] h1.wp-block-heading {
    position: relative !important;
    color: #fffaf0 !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: clamp(1.6rem, 6.4vw, 2.4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 0.6rem !important;
    padding: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
    text-shadow: 0 3px 22px rgba(0,0,0,0.55);
    text-wrap: balance;
    font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    animation: mup-hero-fadeup 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
  }

  /* ═══ TAGLINES + LEAD-Texte aller Themes ══════════════════ */
  html body .wp-block-cover[class*="-hero"] [class*="-hero__tagline"],
  html body .wp-block-cover[class*="-hero"] [class*="-hero__lead"],
  html body .wp-block-cover[class*="-hero"] p[class*="-tagline"],
  html body .wp-block-cover[class*="-hero"] p[class*="-lead"],
  html body .wp-block-cover.gk-hero .gk-hero__tagline,
  html body .wp-block-cover.tf-hero .tf-hero__tagline,
  html body .wp-block-cover.gm-hero .gm-hero__tagline,
  html body .wp-block-cover.tmp-hero .tmp-hero__lead {
    position: relative !important;
    color: rgba(248,242,230,0.92) !important;
    font-family: 'EB Garamond', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 32ch !important;
    text-align: left !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    text-wrap: pretty;
    opacity: 0;
    animation: mup-hero-fadeup 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
  }
}

/* ─── iPhone Pro Max + große Mobiles (≤ 480 px) ──────────────── */
@media (max-width: 480px) {
  html body .wp-block-cover[class*="-hero"] [class*="-hero__title"],
  html body .wp-block-cover[class*="-hero"] h1.wp-block-heading,
  html body [class*="-hero"] h1.wp-block-heading {
    font-size: clamp(1.5rem, 6.8vw, 1.95rem) !important;
    max-width: 95% !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="-hero__tagline"],
  html body .wp-block-cover[class*="-hero"] [class*="-hero__lead"] {
    font-size: 0.88rem !important;
    max-width: 95% !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="-eyebrow"] {
    font-size: 0.55rem !important;
    letter-spacing: 2px !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="brand-name"] {
    font-size: 0.88rem !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="brand-sub"] {
    font-size: 0.42rem !important;
    letter-spacing: 1.8px !important;
  }
}

/* ─── Sehr enge Mobiles (≤ 360 px) ─────────────────────────── */
@media (max-width: 360px) {
  html body .wp-block-cover[class*="-hero"] [class*="-hero__title"],
  html body .wp-block-cover[class*="-hero"] h1.wp-block-heading {
    font-size: 1.4rem !important;
    line-height: 1.05 !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="-hero__tagline"] {
    font-size: 0.82rem !important;
  }
}

/* ─── Tablet portrait (600–900 px) ───────────────────────────── */
@media (min-width: 600px) and (max-width: 900px) {
  html body .wp-block-cover[class*="-hero"] [class*="-hero__title"],
  html body .wp-block-cover[class*="-hero"] h1.wp-block-heading {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="-hero__tagline"],
  html body .wp-block-cover[class*="-hero"] [class*="-hero__lead"] {
    font-size: 1rem !important;
    max-width: 36ch !important;
  }
  html body .wp-block-cover[class*="-hero"] > .wp-block-cover__inner-container {
    padding: 2rem 2.5rem 3rem !important;
  }
  html body .wp-block-cover[class*="-hero"] [class*="brand-name"] { font-size: 1.05rem !important; }
  html body .wp-block-cover[class*="-hero"] [class*="brand-sub"] { font-size: 0.5rem !important; }
}

/* ─── ANIMATIONEN ───────────────────────────────────────────── */
@keyframes mup-hero-fade {
  to { opacity: 1; }
}
@keyframes mup-hero-fadeup {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── Reduce Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html body .wp-block-cover[class*="-hero"] *,
  html body .wp-block-cover[class*="-hero"] *::before,
  html body .wp-block-cover[class*="-hero"] *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── ANTI-OVERFLOW GUARD ─────────────────────────────────── */
@media (max-width: 900px) {
  html body .wp-block-cover[class*="-hero"] * {
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PER-ELEMENT SCHRIFTGRÖSSEN (Mobile · Tablet · Desktop)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  [data-mup-font-m] { font-size: var(--mup-font-m, inherit) !important; }
  [style*="--mup-line-m"] { line-height: var(--mup-line-m, inherit) !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  [data-mup-font-t] { font-size: var(--mup-font-t, inherit) !important; }
  [style*="--mup-line-t"] { line-height: var(--mup-line-t, inherit) !important; }
}
@media (min-width: 1025px) {
  [data-mup-font-d] { font-size: var(--mup-font-d, inherit) !important; }
  [style*="--mup-line-d"] { line-height: var(--mup-line-d, inherit) !important; }
}