/* Eichhorn Case Study - Hero, Handy-Fassung (bis 767px). Laedt NACH eichhorn-hero.css und
   ueberschreibt dort, wo die Handy-Fassung anders gebaut ist.

   Grundsatz: Scrollen loest Zustaende aus (Landung, Zoom), gezeichnet wird nichts pro Scrollbild.
   Jede sichtbare Bewegung ist eine CSS-Transition auf opacity/transform einer eigenen Ebene,
   d.h. der Compositor des Geraets fuehrt sie ohne JavaScript aus. Keine Gruppen-Deckkraft
   (kein Container mit opacity < 1 und eigenen Ebenen darin), kein rundes Beschneiden,
   kein Overlay: die Abdunklung des Fotos ist in den Handy-Bildern fest eingebacken.

   Zustaende an der Section:  is-landed  (Foto da, Hero-Text weg)
                              is-figure  (Foto-Figur sichtbar, 3D-Canvas ausgeblendet)
                              is-text    (Foto-Text eingelaufen)
                              is-zoomed  (Seite ins iPhone gezoomt) */
@media screen and (max-width: 767px) {
  .section_case-eichhorn.is-m { --eh-ease: cubic-bezier(.65, 0, .35, 1); --eh-ease-out: cubic-bezier(.2, .7, .2, 1); }

  /* Bildschirm: kein Loch mehr, keine Rundung. Das iPhone liegt als Bild mit ausgeschnittenem
     Display OBEN auf und deckt alles ab, was neben den Bildschirm ragt. */
  .is-m .eh-screen { overflow: visible; background: none; border-radius: 0; }
  .is-m .eh-screen_inner { transform: var(--eh-m-inner0, none); transition: transform 1s var(--eh-ease); }   /* Lage und Groesse (= Display-Loch) setzt das Skript */
  .is-m.is-clip .eh-screen_inner { overflow: hidden; border-radius: var(--eh-m-r); }
  .is-m .eh-screen_inner > .eh-photo, .is-m .eh-screen_inner > .eh-figure, .is-m .eh-screen_inner > .eh-phototext {
    inset: auto; left: var(--eh-m-ox, 0px); top: var(--eh-m-oy, 0px); width: var(--eh-m-w, 100%); height: var(--eh-m-h, 100%); }
  .is-m.is-zoomed .eh-screen_inner { transform: var(--eh-m-inner); }

  /* Safari (iOS) faerbt die Leisten oben/unten nach Ebenen ein, die in einer stehenden Buehne an den Bildschirmrand
     reichen - auch nach unsichtbaren. Das schwarze iPhone-Gehaeuse liegt im Ruhezustand genau dort und machte die
     Leisten schwarz. Deshalb ist das Geraet ausserhalb des Zooms gar nicht im Layout (wie die Transition-Ebene der Site). */
  .section_case-eichhorn .eh-device, .section_case-eichhorn .eh-device_notch { display: none; }
  .is-m.is-clip .eh-device { display: block; z-index: 5; }
  .is-m .eh-device_img { transform: var(--eh-m-dev0); opacity: 0; will-change: transform, opacity;
    transition: transform 1s var(--eh-ease), opacity .3s ease .55s; }
  .is-m.is-zoomed .eh-device_img { transform: var(--eh-m-dev1); opacity: 1; transition: transform 1s var(--eh-ease), opacity .3s ease; }

  /* Foto: der Container bleibt voll deckend, es blendet nur das Bild selbst (eine Ebene) */
  .is-m .eh-photo { opacity: 1; background: none; will-change: auto; }
  .is-m .eh-photo_shade { display: none; }
  .is-m .eh-photo_img { opacity: 0; will-change: opacity; transition: opacity .9s ease-out; }
  .is-m.is-landed .eh-photo_img { opacity: 1; }
  .is-m .eh-photo_shadow { opacity: 0; transition: opacity .6s ease .35s; }
  .is-m.is-landed .eh-photo_shadow { opacity: 1; }
  .is-m .eh-photo_fig { opacity: 0; }            /* ohne Transition: springt exakt in dem Bild um, in dem die 3D-Figur zu blenden beginnt */
  .is-m.is-figure .eh-photo_fig { opacity: 1; }
  /* Erst wenn das Foto voll da ist, bekommt der Container eine deckende dunkle Farbe: nicht fuers Auge
     (die Platte verdeckt sie), sondern fuer die Nav-Farberkennung des Site-Skripts, die nach der ersten
     deckenden Hintergrundfarbe unter dem Logo sucht. Waehrend der Einblendung bleibt sie weg, sonst
     blendete das Foto ueber Dunkel statt ueber der hellen Buehne ein. */
  .is-m.is-figure .eh-photo { background: #3a3128; }
  .is-m.is-nofig3d .eh-photo_fig { transition: opacity .9s ease-out; }   /* Modell noch nicht geladen: Figur blendet mit dem Foto ein */

  /* Hero-Text: nur so gross wie sein Inhalt, damit die Ueberblendung keine bildschirmgrosse Ebene ist */
  .is-m .eh-hero { inset: auto; left: var(--eh-m-ox, 0px); top: var(--eh-m-oy, 0px); width: var(--eh-m-w, 100%); height: auto; padding-top: 25svh; padding-bottom: 1rem;
    will-change: opacity, transform; transition: opacity .5s ease, transform .5s ease; }
  .is-m.is-landed .eh-hero { opacity: 0; transform: translate3d(0, -1.5rem, 0); visibility: hidden;
    transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s; }

  .is-m .eh-figure_canvas { transition: opacity .3s ease; }
  .is-m.is-figure .eh-figure_canvas { opacity: 0; }
  .is-m .eh-figure_shadow { will-change: transform, opacity; transition: opacity .6s ease; }
  .is-m.is-landed .eh-figure_shadow { opacity: 0; }

  /* Foto-Text: laeuft nach der Landung ein */
  .is-m .eh-phototext_line span { transform: translate3d(0, 110%, 0); transition: transform .9s var(--eh-ease-out); }
  .is-m .eh-phototext_line:nth-child(2) span { transform: translate3d(0, 110%, 0); transition-delay: .12s; }
  .is-m.is-text .eh-phototext_line span, .is-m.is-text .eh-phototext_line:nth-child(2) span { transform: translate3d(0, 0, 0); }
  .is-m .eh-phototext_rule { transform: scaleX(0); transition: transform .9s var(--eh-ease-out) .25s; }
  .is-m.is-text .eh-phototext_rule { transform: scaleX(1); }
  .is-m .eh-phototext_sub { opacity: 0; transition: opacity .7s ease .35s; }
  .is-m.is-text .eh-phototext_sub { opacity: 1; }

  /* Zurueck (hochscrollen): kurz und ohne Verzoegerungen */
  .is-m:not(.is-text) .eh-phototext_line span, .is-m:not(.is-text) .eh-phototext_rule, .is-m:not(.is-text) .eh-phototext_sub { transition-duration: .3s; transition-delay: 0s; }
  .is-m:not(.is-landed) .eh-photo_img { transition-duration: .7s; }
  .is-m:not(.is-landed) .eh-photo_shadow { transition-delay: 0s; transition-duration: .3s; }
  .is-m:not(.is-landed) .eh-hero { transition-delay: .25s; }

  /* Projektangaben: unter dem Geraet, links die drei Angaben, rechts die Tools in einer Reihe */
  .section_case-eichhorn .eh-meta { height: auto; align-items: flex-start; --eh-meta-pad: .9375rem; transform: translate3d(0, .75rem, 0);
    transition: opacity .25s ease, transform .25s ease; }
  .section_case-eichhorn.is-zoomed .eh-meta { opacity: 1; transform: none; transition: opacity .5s ease .65s, transform .6s var(--eh-ease-out) .65s; }
  .section_case-eichhorn.is-zoomed .eh-meta_value.is-link { pointer-events: auto; }
  .section_case-eichhorn .eh-meta_col { gap: .5rem; padding-bottom: 0; }
  .section_case-eichhorn .eh-meta_col.is-tools { gap: .5rem; align-items: flex-end; }
  .section_case-eichhorn .eh-meta_label { font-size: .6875rem; }
  .section_case-eichhorn .eh-meta_value { font-size: .8125rem; margin-top: .125rem; line-height: 1.25; }
  .section_case-eichhorn .eh-meta_tools { flex-direction: column; align-items: flex-end; gap: .375rem; }
  .section_case-eichhorn .eh-meta_tool { width: 1.75rem; height: 1.75rem; }

  /* Pills im Hero: die vier passen in eine Zeile, der Marquee des Site-Skripts (fuer umbrechende Reihen
     auf anderen Seiten gedacht) ist hier unnoetig. Spur anhalten, Klone weg, Randmaske weg. */
  .section_case-eichhorn .eh-hero_tags.is-marquee { overflow: visible; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .section_case-eichhorn .eh-hero_tags .projekte_tags-track { animation: none; transform: none; padding-right: 0; flex-wrap: wrap; justify-content: center; }
  .section_case-eichhorn .eh-hero_tags .projekte_tag[aria-hidden="true"] { display: none; }

  .is-m.is-reduce * { transition-duration: 0s !important; transition-delay: 0s !important; }
}