/* Schriften fuer den Text im Foto: Roundo Variable = Headline der Kunden-Website, Jost = freie Naeherung an futura-pt (Adobe-Kit der Kundin, domaingebunden) */
@font-face { font-family: "Roundo Variable"; src: url("https://cdn.prod.website-files.com/6a9c7ff8be059c1c8b1efc01/fonts/6ab0f3b854a959212d6eab92-Roundo-Variable.ttf") format("truetype"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("https://cdn.prod.website-files.com/6a9c7ff8be059c1c8b1efc01/fonts/6ab0f3b8c9c04381f7303c63-Jost-Variable.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* ---------- Intro: eine gepinnte Buehne. Text blendet aus, Foto blendet hinter der Figur ein ---------- */
  .section_case-eichhorn { position: relative; height: calc(100svh + var(--eh-travel, 110svh) + var(--eh-hold, 70svh) + var(--eh-zoom, 0svh)); }
  .eh-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--_eichhorn---white); }

  /* Das MacBook liegt hinter dem Bildschirm; der Bildschirm ist das Loch im Mockup und
     enthaelt die ganze Seite. Bei z=0 ist das Loch der Viewport, das Geraet also ausserhalb. */
  .eh-device { position: absolute; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; }
  .eh-device_img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; }
  .eh-device_notch { position: absolute; left: 0; top: 0; z-index: 2; background: #0b0b0c; pointer-events: none; visibility: hidden; }
  .eh-screen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; background: var(--_eichhorn---white); }
  /* Groesse schon im CSS: das Skript startet erst nach dem Laden von three.js (1-2s) und setzt sie dann in px.
     Ohne sie waere der Container bis dahin so schmal wie sein Inhalt und alles klebte links. */
  .eh-screen_inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }

  .eh-photo { position: absolute; inset: 0; z-index: 1; opacity: 0; background: #3a3128; will-change: opacity; }
  .eh-photo_plate { position: absolute; left: 0; top: 0; width: 1920px; height: 1077px; transform-origin: 0 0; }
  .eh-photo_img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; }
  .eh-photo_fig, .eh-photo_shadow { position: absolute; left: 1000px; top: 220px; width: 520px; height: 580px; max-width: none; opacity: 0; }
  .eh-photo_shade { position: absolute; inset: 0; background: rgb(46 41 31 / .714); display: none; }

  .eh-hero { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; }
  .eh-hero .padding-global { width: 100%; }
  .eh-hero_content { max-width: 58.75rem; display: flex; flex-direction: column; align-items: flex-start; }
  .projekte_tag.is-eh-hero { color: var(--_eichhorn---black); background-color: #ffffffb3; }
  .heading-style-h2.is-eh-hero { color: var(--_eichhorn---black); text-transform: uppercase; margin-top: .875rem; }
  .eh-hero_brand { color: var(--_eichhorn---beige); }
  .case-hero_url.is-eh-hero { color: var(--_eichhorn---black); margin-top: 1.5rem; margin-bottom: 0; font-size: 1rem; }

  .eh-figure { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
  .eh-figure.is-ready { opacity: 1; }
  .eh-figure_canvas { position: absolute; left: 0; top: 0; display: block; }  /* Groesse und Lage setzt das Skript */
  .eh-figure_shadow { position: absolute; left: 0; top: 0; width: 400px; height: 108px; transform-origin: 0 0; 
    /* Zwei Lagen ohne filter (der waere auf dem Handy teuer): ein dunkler Kern dort, wo die Figur aufsteht,
       leicht nach vorne gerueckt, und ein breiter Halbschatten mit gaussartigem Auslauf, der nach hinten laeuft. */
    background:
      radial-gradient(ellipse 30% 34% at 47% 60%, rgb(20 22 21 / .34), rgb(20 22 21 / .2) 38%, rgb(20 22 21 / .07) 72%, rgb(20 22 21 / 0)),
      radial-gradient(ellipse 48% 48% at 50% 50%, rgb(20 22 21 / .2), rgb(20 22 21 / .15) 22%, rgb(20 22 21 / .09) 44%, rgb(20 22 21 / .04) 64%, rgb(20 22 21 / .012) 82%, rgb(20 22 21 / 0)); }

  .eh-phototext { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #fff; --r: 0; }
  .eh-phototext_title { position: absolute; left: 8.75rem; top: 32%; font-family: "Roundo Variable", Arial, sans-serif; font-weight: 300; font-size: 5.9rem; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
  .eh-phototext_line { display: block; overflow: hidden; padding-bottom: .08em; }
  .eh-phototext_line span { display: block; transform: translateY(calc((1 - var(--r)) * 110%)); }
  .eh-phototext_line:nth-child(2) span { transform: translateY(calc((1 - min(1, var(--r) * 1.25)) * 110%)); }
  .eh-phototext_rule { position: absolute; left: 8.75rem; top: 74.6%; width: 78.5rem; max-width: calc(100% - 17.5rem); height: 1px; background: #ffffff59; transform-origin: 0 50%; transform: scaleX(var(--r)); }
  .eh-phototext_sub { position: absolute; left: 8.75rem; top: 77.4%; font-family: Jost, "Futura", Arial, sans-serif; font-size: 1.5rem; line-height: 1.4; opacity: var(--r); margin: 0; }

  /* Projektangaben neben dem Geraet (Figma 952:1437 / 952:1445): links Kunde, Link, Jahr - rechts die Tools.
     Das Skript legt den Kasten auf die Endlage des Geraets und blendet ihn am Ende des Zooms ein. */
  .eh-meta { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 6; opacity: 0; pointer-events: none; will-change: opacity;
    display: flex; justify-content: space-between; align-items: flex-end; padding: 0 var(--eh-meta-pad, 7.3vw); box-sizing: border-box; color: #000; }
  .eh-meta_col { display: flex; flex-direction: column; gap: 2.6rem; }   /* beide Spalten stehen unten buendig mit dem Geraet */
  .eh-meta_col.is-tools { gap: 1.25rem; }
  .eh-meta_label { font-size: 1.125rem; line-height: 1.2; letter-spacing: -.02em; color: #201d1d; opacity: .5; }
  .eh-meta_value { display: block; margin-top: .75rem; font-size: 1.25rem; line-height: 1.35; font-weight: 500; color: #000; text-decoration: none; }
  .eh-meta.is-on .eh-meta_value.is-link { pointer-events: auto; }
  .eh-meta_tools { display: flex; flex-direction: column; gap: .75rem; }
  .eh-meta_tool { width: 5rem; height: 5rem; display: block; }
  @media screen and (max-width: 1279px) { .eh-meta_value { font-size: 1rem; } .eh-meta_label { font-size: .9375rem; } .eh-meta_tool { width: 3.5rem; height: 3.5rem; } .eh-meta { --eh-meta-pad: 2.5rem; } }

  .eh-after { height: 120svh; display: flex; align-items: center; justify-content: center; font: 500 1.25rem/1.4 system-ui, sans-serif; color: #141615; }

  @media screen and (max-width: 991px) {
    .eh-phototext_title, .eh-phototext_rule, .eh-phototext_sub { left: 2.5rem; }
    .eh-phototext_rule { max-width: calc(100% - 5rem); }
    .eh-phototext_title { font-size: 4rem; }
  }
  @media screen and (max-width: 991px), screen and (max-aspect-ratio: 6/5) {
    .eh-hero { align-items: flex-start; padding-top: max(7rem, 16svh); }
    .eh-hero_content { align-items: center; text-align: center; max-width: 42rem; margin: 0 auto; }
    .eh-hero_tags { justify-content: center; }
    .heading-style-h2.is-eh-hero { font-size: 3.5rem; }
  }
  @media screen and (max-width: 767px) {
    .eh-hero { padding-top: 25svh; }
    .eh-hero_content { max-width: 21.25rem; }
    .projekte_tag.is-eh-hero { padding: .25rem .625rem; font-size: .625rem; line-height: 1.1; }
    .heading-style-h2.is-eh-hero { font-size: 1.75rem; margin-top: .75rem; }
    .case-hero_url.is-eh-hero { font-size: .9375rem; margin-top: 1.25rem; color: #555; }
    .eh-photo_shade { display: block; }
    .eh-phototext_title, .eh-phototext_rule, .eh-phototext_sub { left: .9375rem; }
    .eh-phototext_title { top: 41%; font-size: 2.35rem; line-height: 1.22; }
    .eh-phototext_rule { top: 88.6%; width: auto; right: .9375rem; max-width: none; }
    .eh-phototext_sub { top: 90.6%; right: .9375rem; font-size: 1rem; line-height: 1.35; }
  }