/* fasannet.at Referenzen (referenz-*.html): the fasannet.com components these pages need on top of at.css and
   ../../../fasannet-com/planning/design/assets/case.css. Copied from fasannet-com/planning/design/assets/site.css
   (hero showcase: browser + phone with auto-scroll) and from entwicklung.css (header language switch).
   Keep in step with the .com file when those components change there. */

/* header language switch (motion.js copies .wrap > .lang into the mobile menu) */
.nav .wrap > .lang{font-size:13px;font-weight:600;text-decoration:none}
@media (max-width:1040px){.nav .wrap > .lang{display:none}}
.nav-panel .lang{font-size:15px;font-weight:600}

/* hero lead, as on fasannet.com */
.case-hero .lead{font-size:18px;line-height:1.5;max-width:46ch;margin:0}
.case-hero .display{font-size:clamp(36px,4.4vw,52px);line-height:1.05}

/* Hero showcase: one browser + one phone */
.showcase{position:relative;padding:0 0 64px 96px}
.showcase figure{margin:0}
.browser{position:relative;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--silver);box-shadow:0 30px 70px -30px rgba(16,20,70,.35)}
.browser .bar{display:flex;align-items:center;gap:6px;height:34px;padding:0 14px;background:#f6f6f8;border-bottom:1px solid var(--silver)}
.browser .bar i{width:10px;height:10px;border-radius:50%;background:#dcdce2}
.browser .bar .u{display:flex;align-items:center;min-width:0;margin-left:8px;flex:0 1 320px;height:20px;border-radius:6px;background:#fff;border:1px solid var(--silver);font:12px/18px var(--sans);color:var(--muted);padding:0 10px;overflow:hidden;white-space:nowrap}
.browser img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.phone{position:absolute;left:0;bottom:0;width:25%;padding:7px;border-radius:30px;background:#0e0f14;box-shadow:0 30px 60px -20px rgba(16,20,70,.45)}
.phone .screen{position:relative;overflow:hidden;border-radius:23px;background:#04397f;line-height:0}
.phone .island{position:absolute;z-index:2;top:2.2%;left:50%;width:30%;height:3.2%;min-height:9px;transform:translateX(-50%);border-radius:99px;background:#0e0f14}
.phone img{display:block;width:100%;height:auto}
.phone .sbar{position:relative;z-index:1}
.phone .vp{aspect-ratio:390/712;overflow:hidden}
@media (max-width:900px){.showcase{padding:0 0 40px 32px}.phone{width:32%;border-radius:22px;padding:5px}.phone .screen{border-radius:17px}}
@media (max-width:600px){.browser .bar .u{margin-left:6px}}
@media (prefers-reduced-motion:no-preference){
  .js .showcase .browser{animation:sc-rise .9s var(--ease) .1s both}
  .js .showcase .phone{animation:sc-rise-l .9s var(--ease) .35s both}
  .phone .long{animation:ph-scroll 20s ease-in-out 2s infinite}
  .phone:hover .long{animation-play-state:paused}
}
@keyframes sc-rise{from{opacity:0;transform:translateY(28px)}}
@keyframes sc-rise-l{from{opacity:0;transform:translate(-28px,28px)}}
/* scroll distance: --end = -(image height - 712) / image height, set per image */
@keyframes ph-scroll{0%,10%{transform:translateY(0)}45%,58%{transform:translateY(var(--end,-72.6%))}90%,100%{transform:translateY(0)}}
.case-hero .wrap>*{min-width:0}