/* HOFER – freely designed demo for an invented farm-machinery workshop. Plain and useful like a real dealer's page: white, steel grey, black,
   one signal orange. The emergency number is the most important thing on it. Motion is robust and quick, like a ratchet: the digits of the
   phone number roll into place, headings are wiped in by an orange block, tiles snap in with a small bounce one after the other, photos
   drop down like a roller door, and an orange line at the very top shows how far the page is scrolled (--page, --in from demo.js). */
@font-face{font-family:Manrope;src:url('/assets/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
:root{--white:#fff;--steel:#eef0f2;--steel-2:#dfe3e6;--ink:#121416;--grey:#545b61;--signal:#f26a1b;--signal-ink:#a8440a;--rule:#12141626;--side:clamp(20px,5.5vw,96px);--snap:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--white);color:var(--ink);font:500 17px/1.6 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2{font-weight:800;letter-spacing:-.04em;text-wrap:balance}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:var(--ink)}
.skip{position:fixed;top:-60px;left:16px;z-index:60;padding:10px 16px;background:var(--ink);color:#fff}
.skip:focus{top:10px}

.progress{position:fixed;inset:0 0 auto;z-index:50;height:4px;background:var(--signal);transform:scaleX(var(--page,0));transform-origin:0 50%}
.alert{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;padding:10px var(--side);background:var(--ink);color:#fff;font-size:14px;font-variant-numeric:tabular-nums}
.alert b{color:var(--signal);font-weight:800}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;min-height:64px;padding:0 var(--side);background:#fffffff2;border-bottom:2px solid var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:.28em;min-height:44px;margin-right:auto;font-size:18px;text-decoration:none}
.brand b{font-weight:800;letter-spacing:.02em}
.bar nav{display:flex;gap:6px;font-size:15px;font-weight:600}
.bar nav a{padding:9px 14px;border-radius:4px;text-decoration:none;transition:background .15s,color .15s}
.bar nav a:hover{background:var(--ink);color:#fff}
.menu-toggle{display:none;min-height:44px;padding:0 16px;border:2px solid var(--ink);border-radius:4px;background:none;color:inherit;font:inherit;font-size:14px;font-weight:700;cursor:pointer}

.photo{position:relative;overflow:hidden;background:var(--steel-2);border-radius:4px;clip-path:inset(0 0 calc((1 - var(--in,1))*100%) 0)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo.no-photo img{visibility:hidden}
.photo.no-photo:after{content:'Foto folgt';position:absolute;right:16px;bottom:12px;font-size:12px;color:var(--grey)}

/* Opening: what we do in one sentence, the number to call in huge digits, the tractor beside it. */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(30px,4vw,70px);align-items:center;padding:clamp(40px,5vw,80px) var(--side) clamp(50px,6vw,90px);background:var(--steel)}
.hero h1{font-size:clamp(42px,6.2vw,100px);line-height:.98}
.block{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.animated .block{animation:block-text .9s steps(1) both}
.animated .block:after{content:'';position:absolute;inset:0;background:var(--signal);animation:block-wipe .9s cubic-bezier(.7,0,.2,1) both}
.animated .block+.block,.animated .block+.block:after{animation-delay:.16s}
@keyframes block-text{0%,49%{color:transparent}50%,100%{color:inherit}}
@keyframes block-wipe{0%{transform:translateX(-101%)}50%{transform:none}100%{transform:translateX(101%)}}
.hero-text p{max-width:520px;margin-top:24px;color:var(--grey);font-size:clamp(17px,1.3vw,20px)}
.hero-text .dial{max-width:none;margin-top:32px;font-size:clamp(34px,4.6vw,72px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--signal-ink)}
.dial>span{display:inline-flex;overflow:hidden;height:1em}
.dial i{display:block;font-style:normal}
.dial u{width:.28em}
.animated .dial i{animation:digit-roll 1.1s var(--snap) both}
.dial i:nth-of-type(2){animation-delay:.05s}.dial i:nth-of-type(3){animation-delay:.1s}.dial i:nth-of-type(4){animation-delay:.15s}.dial i:nth-of-type(5){animation-delay:.2s}.dial i:nth-of-type(6){animation-delay:.25s}.dial i:nth-of-type(7){animation-delay:.3s}.dial i:nth-of-type(8){animation-delay:.35s}.dial i:nth-of-type(9){animation-delay:.4s}.dial i:nth-of-type(10){animation-delay:.45s}.dial i:nth-of-type(11){animation-delay:.5s}
@keyframes digit-roll{from{transform:translateY(-120%)}to{transform:none}}
.hero-photo{aspect-ratio:4/3}

/* Headings are wiped in by an orange block the moment they arrive (demo.js removes .waiting). */
.wipe{font-size:clamp(28px,3.4vw,52px);line-height:1.05}
.wipe span{position:relative;display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.wipe span:after{content:'';position:absolute;inset:0;background:var(--signal);transform:translateX(101%);transition:transform .9s cubic-bezier(.7,0,.2,1)}
.wipe.waiting{opacity:1;transform:none}
.wipe.waiting span{color:transparent}
.wipe.waiting span:after{transform:translateX(-101%);transition:none}
.wipe span{transition:color 0s .42s}

.work{padding:clamp(70px,8vw,120px) var(--side)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.tiles li{padding:26px 24px 30px;border:2px solid var(--ink);border-radius:4px;background:#fff;transition:transform .55s var(--snap),opacity .3s,background .15s,color .15s}
.tiles li.waiting{opacity:0;transform:translateY(30px) scale(.94)}
.tiles li:nth-child(3n+2){transition-delay:.07s}
.tiles li:nth-child(3n){transition-delay:.14s}
.tiles b{display:block;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.tiles span{display:block;margin-top:10px;color:var(--grey);font-size:16px;transition:color .15s}
@media(hover:hover){.tiles li:hover{background:var(--ink);color:#fff;transition-delay:0s}
.tiles li:hover span{color:#d5d9dc}}

.parts,.shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(60px,7vw,110px) var(--side)}
.parts{background:var(--steel)}
.parts .photo,.shop .photo{aspect-ratio:4/3}
.parts p,.shop p{max-width:540px;margin-top:22px;color:var(--grey)}
.checks{margin-top:24px;border-top:2px solid var(--ink)}
.checks li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule);font-weight:700}
.checks li:before{content:'';flex:none;width:10px;height:10px;margin-top:.5em;background:var(--signal)}

.times{padding:clamp(60px,7vw,110px) var(--side);background:var(--ink);color:#fff}
.times dl{max-width:760px;margin-top:36px;border-top:1px solid #ffffff40}
.times dl div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;padding:15px 0;border-bottom:1px solid #ffffff40}
.times dd{font-variant-numeric:tabular-nums;color:#d5d9dc}
.times address{margin-top:26px;font-style:normal;color:#d5d9dc}

.studio{padding:clamp(60px,7vw,110px) var(--side);background:#080808;color:#f3f2ed;border-top:1px solid #ffffff2e}
.studio h2{max-width:900px;font:800 clamp(30px,4vw,60px)/1 DM,Manrope,Arial,sans-serif;letter-spacing:-.05em;text-transform:uppercase}
.studio p{max-width:560px;margin-top:22px;color:#c8c8c8;font-weight:400}
.studio-link{display:inline-flex;align-items:center;gap:26px;min-height:56px;margin-top:30px;padding:0 28px;border:1px solid #f3f2ed;border-radius:999px;text-decoration:none;font-weight:400;transition:background .3s,color .3s}
.studio-link svg{width:22px;height:22px}
.studio-link:hover{background:#f3f2ed;color:#080808}
.demo-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px var(--side) 22px;background:#080808;color:#a6a6a6;font-size:13px;font-weight:400;border-top:1px solid #ffffff2e}

.reveal{transition:opacity .45s,transform .55s var(--snap)}
.reveal.waiting{opacity:0;transform:translateY(24px)}
.still{scroll-behavior:auto}
.still *,.still *:before,.still *:after{animation:none!important;transition:none!important}
.still .waiting{opacity:1;transform:none}
.still .wipe.waiting span{color:inherit}
.still .wipe span:after{display:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.reveal.waiting,.tiles li.waiting{opacity:1;transform:none}
.wipe.waiting span{color:inherit}
.wipe span:after{display:none}}

@media(max-width:900px){.hero,.parts,.shop{grid-template-columns:minmax(0,1fr)}
.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.shop .photo{order:-1}}
@media(max-width:700px){.bar{flex-wrap:wrap;gap:0 12px;min-height:60px}
.menu-toggle{display:block}
.bar nav{display:grid;gap:0;width:100%;padding-bottom:10px;font-size:17px}
.bar nav a{padding:12px 0;border-radius:0;border-bottom:1px solid var(--rule)}
.tiles{grid-template-columns:minmax(0,1fr)}}