/* Forn B2B site v2 · home hero F «Ein Tag mit Forn». Linked on index.html only. Uses the tokens of site.css. */
.hf{--ease-io:cubic-bezier(.65,0,.35,1);position:relative;height:clamp(740px,calc(100vh - var(--hdr)),880px);background:var(--paper);overflow:hidden}

/* photos of the day */
.hf-media{position:absolute;left:0;right:0;top:0;bottom:150px;overflow:hidden;background:var(--band)}
.hf-ph{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.hf-ph.on{opacity:1}
.hf-ph img{width:100%;max-width:none;height:100%;object-fit:cover;transform:scale(1.07);will-change:transform}
.hf-ph.on img,.hf-ph.out img{transform:scale(1);transition:transform 9s linear}
.hf-ph.out img{transform:scale(.99)}
.hf-ph.reset img{transition:none}

/* headline panel */
.hf-panel{position:absolute;z-index:3;left:max(var(--gut),calc((100% - var(--w))/2));top:40px;width:560px;background:var(--paper);border-radius:var(--r-l);padding:38px 44px 34px}
.hf h1.hf-h{font-size:clamp(44px,4.6vw,66px);line-height:1;letter-spacing:-.018em}
.hf-h .l1{display:block}
/* Turkish runs longer («Paket servisleri için.»): one step smaller so it stays inside the panel */
html[lang="tr"] .hf h1.hf-h{font-size:clamp(38px,3.8vw,54px)}
/* languages with longer words (7-language site): smaller headline, no automatic hyphenation inside words */
html[lang="fr-CH"] .hf h1.hf-h,html[lang="ro"] .hf h1.hf-h,html[lang="sq"] .hf h1.hf-h,html[lang="it-CH"] .hf h1.hf-h{font-size:clamp(38px,3.8vw,54px)}
.hf h1.hf-h{hyphens:manual}
.hf-rot{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.hf-rot > span{grid-area:1/1;white-space:nowrap;transform:translateY(108%);transition:transform .8s var(--ease-io)}
.hf-rot > span.on{transform:none}
.hf-rot > span.out{transform:translateY(-108%)}
.hf-rot > span:not(.on):not(.out){transition:none;visibility:hidden}
.hf-rot .w{position:relative;display:inline-block}
.hf-rot .w::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.065em;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.hf-rot > span.on .w::after{transform:scaleX(1);transition-delay:.35s}
.hf-rot > span.out .w::after{transform:scaleX(1)}
.hf-sub{margin-top:20px;font:600 clamp(22px,2vw,30px)/1.15 var(--f-d);letter-spacing:-.008em;color:var(--ink)}
.hf-lead{margin-top:12px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.hf-panel .btns{margin-top:26px}

/* bottom strip: caption, fact, scrubber */
.hf-strip{position:absolute;z-index:2;left:0;right:0;bottom:0;height:150px;background:var(--paper)}
.hf-strip .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px;padding-top:24px}
.hf-txt{grid-column:1/5}
.hf-tl{grid-column:5/12}  /* the site's chat button sits bottom right; the last stop stays clear of it */
.hf-now{display:grid}
.hf-now p{grid-area:1/1;font-size:16px;line-height:1.45;color:var(--ink-2);opacity:0;transform:translateY(6px);transition:opacity .4s ease,transform .6s var(--ease)}
.hf-now p.on{opacity:1;transform:none;transition-delay:.12s}
.hf-now b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.hf-fact{display:grid;margin-top:10px}
.hf-fact p{grid-area:1/1;display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.4;color:var(--ink);opacity:0;transition:opacity .4s ease}
.hf-fact p.on{opacity:1;transition-delay:.28s}
.hf-fact .ic{width:18px;height:18px;margin-top:1px;color:var(--ok)}
.hf-hint{margin-top:2px;font-size:13px;line-height:1.4;color:var(--ink-3)}
.hf-scroll{position:relative}
.hf-track{position:relative;height:70px;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;border-radius:10px}
.hf-track:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.hf-in{position:absolute;left:34px;right:50px;top:0;bottom:0}
.hf-rail{position:absolute;left:0;right:20%;top:11px;height:2px;background:var(--line-2)}
.hf-gap{position:absolute;left:80%;right:0;top:11px;height:0;border-top:2px dashed var(--line-2)}
.hf-fill{position:absolute;left:0;right:0;top:11px;height:2px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--ease)}
.hf-stops{margin:0;padding:0;list-style:none}
.hf-stop{position:absolute;top:0;width:0}
.hf-stop button{position:absolute;left:0;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0 6px 4px;cursor:pointer;color:var(--ink-3);white-space:nowrap;font:inherit}
.hf-stop .dot{width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);margin:6px 0 9px;transition:background-color .3s,border-color .3s}
.hf-stop.is-done .dot{background:var(--ink);border-color:var(--ink)}
.hf-stop .t{font-size:12.5px;line-height:1.2;font-variant-numeric:tabular-nums}
.hf-stop .n{font:600 14px/1.3 var(--f-b);color:var(--ink-2)}
.hf-stop.on .t,.hf-stop.on .n,.hf-stop button:hover .n{color:var(--ink)}
.hf-knob{position:absolute;left:-12px;top:0;width:24px;height:24px;border-radius:50%;background:var(--ink);border:5px solid var(--paper);box-shadow:0 0 0 1px var(--ink),0 4px 10px -2px rgba(18,22,32,.35);transition:transform .8s var(--ease);cursor:grab;touch-action:none}
.hf-track.drag .hf-knob,.hf-track.drag .hf-fill{transition:none}
.hf-track.drag,.hf-track.drag .hf-knob{cursor:grabbing}

/* the bon */
.hf-bons{position:absolute;z-index:3;right:max(var(--gut),calc((100% - var(--w))/2));top:32px;display:grid;width:264px}
.hf-bon{grid-area:1/1;align-self:start;opacity:0;transform:translateY(28px);transition:opacity .45s ease,transform .8s var(--ease);pointer-events:none}
.hf-bon.on{opacity:1;transform:none;transition-delay:.1s}
.hf-bon.gone{transform:translateY(-18px)}
.hf-paper{background:var(--paper);border:1px solid var(--line);border-bottom:0;padding:16px 18px 12px;font:400 12.5px/1.48 var(--f-b);font-variant-numeric:tabular-nums;color:var(--ink);box-shadow:0 1px 2px rgba(18,22,32,.05),0 18px 36px -18px rgba(18,22,32,.22)}
.hf-paper .bh{font:600 14px/1.3 var(--f-b)}
.hf-paper .bs{display:block;color:var(--ink-3)}
.hf-paper .bs.ind{padding-left:22px}
.hf-paper .r{display:flex;justify-content:space-between;gap:12px}
.hf-paper .r.bs{display:flex}
.hf-paper hr{border:0;border-top:1px dashed var(--line-2);margin:8px 0}
.hf-paper .tot{font-weight:600;font-size:14px}
.hf-paper .log{margin:0;padding:0;list-style:none}
.hf-paper .log li{display:flex;gap:10px;opacity:.26;transition:opacity .45s ease}
.hf-paper .log li.on{opacity:1;transition-delay:.35s}
.hf-paper .log time{color:var(--ink-3);flex:none;width:38px}
.hf-edge{display:block;width:100%;height:10px;margin-top:-1px}

/* real screen card */
.hf-card{position:absolute;z-index:4;right:calc(max(var(--gut),calc((100% - var(--w))/2)) + 288px);bottom:170px;width:340px;margin:0;background:var(--paper);border-radius:14px;padding:8px 8px 12px;box-shadow:var(--sh-float);transform-origin:100% 100%;transition:transform .45s var(--ease)}
.hf-card:hover,.hf-card:focus-visible{transform:scale(1.045)}
.hf-stack{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#fff}
.hf-crop{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;opacity:0;transition:opacity .9s ease}
.hf-crop.on{opacity:1}
.hf-crop img{position:absolute;max-width:none;height:auto}
.hf-card figcaption{display:grid;margin:10px 6px 0}
.hf-card figcaption span{grid-area:1/1;font-size:13px;line-height:1.35;color:var(--ink-2);opacity:0;transition:opacity .4s ease}
.hf-card figcaption span.on{opacity:1;transition-delay:.2s}
.hf-card figcaption b{color:var(--ink);font-weight:600}

/* 1024–1279: bon a little smaller, screen card under it */
@media (max-width:1279px){
  .hf-panel{width:480px;padding:32px 34px 30px}
  .hf h1.hf-h{font-size:clamp(44px,5.2vw,64px)}
  .hf-bons{transform:scale(.72);transform-origin:100% 0;top:24px}
  .hf-card{width:244px;right:var(--gut);top:316px;bottom:auto;transform-origin:100% 0}
  /* two rows: scrubber on top (clear of the chat button), caption and fact below */
  .hf-media{bottom:210px}
  .hf-strip{height:210px}
  .hf-strip .wrap{padding-top:20px}
  .hf-tl{grid-column:1/13;grid-row:1;margin-right:180px}
  .hf-txt{grid-column:1/13;grid-row:2;margin-top:10px}
  .hf-fact{margin-top:6px}
}
/* phone: photo, headline, swipeable timeline, caption, bon, screen */
@media (max-width:760px){
  .hf{height:auto;overflow:visible}
  .hf-media{position:relative;inset:auto;aspect-ratio:4/5}
  .hf-panel{position:relative;left:auto;top:auto;width:auto;margin:-36px 0 0;border-radius:var(--r-l) var(--r-l) 0 0;padding:26px var(--gut) 8px}
  .hf-panel .btns .btn{flex:1 1 100%}
  .hf-strip{position:static;height:auto}
  .hf-strip .wrap{display:flex;flex-direction:column-reverse;padding-top:8px}
  .hf-txt{margin-top:16px}
  .hf-tl{margin-right:0}
  .hf-scroll{overflow-x:auto;scrollbar-width:none;margin:14px calc(-1*var(--gut)) 0;padding:0 var(--gut)}
  .hf-scroll::-webkit-scrollbar{display:none}
  .hf-track{width:640px}
  .hf-hint{margin-top:4px}
  .hf-bons{position:static;transform:none;width:min(300px,calc(100% - 2*var(--gut)));margin:32px auto 0}
  .hf-card{position:static;width:auto;margin:20px var(--gut) 48px}
  .hf-card:hover,.hf-card:focus-visible{transform:none}
}
/* off-screen: CSS motion pauses with the JS loop */
.hf.is-off *,.hf.is-off *::before,.hf.is-off *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .hf *,.hf *::before,.hf *::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
}