/* OLORI - weiss wie ein Modehaus, winzige Schrift, der Stoff ist der Held. */
:root{
  --weiss:#FFFFFF;--tinte:#111111;--leise:#7A7A7A;--linie:#E6E6E6;--gold:#B8924A;
  --serif:'Newsreader',Georgia,serif;--sans:'Red Hat Text',system-ui,sans-serif;
  --rand:clamp(16px,2.4vw,44px);--kurve:cubic-bezier(.2,.7,.1,1)
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
body{background:var(--weiss);color:var(--tinte);font:400 15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-style:italic}
.klein{font:500 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}

/* Kopf */
.kopf{position:fixed;z-index:30;inset:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px var(--rand);mix-blend-mode:difference;color:#fff}
.kopf__marke{font:300 22px/1 var(--serif);letter-spacing:.32em;padding-left:.32em}
.kopf__links{display:flex;gap:22px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.kopf__links--rechts{justify-content:flex-end}

/* Das Tuch liegt fix ueber allem, klickt nicht */
.tuch{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;transition:opacity .2s}

/* I  Held */
.held{position:relative}
html.wow .held{height:900svh}
.held__buehne{position:relative;height:100svh;overflow:hidden}
html.wow .held__buehne{position:sticky;top:0}
.wort{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);font:200 clamp(120px,27vw,560px)/.8 var(--serif);letter-spacing:.06em;padding-left:.06em;color:#F1EEE9;white-space:nowrap;z-index:1;user-select:none}
.held__satz{position:absolute;left:var(--rand);top:22vh;z-index:6;font:300 clamp(22px,1.9vw,38px)/1.15 var(--serif);max-width:12em}
.held__satz em{color:var(--leise)}
.etikett{position:absolute;left:var(--rand);bottom:clamp(24px,5vh,48px);z-index:6}
.etikett__nr{font:500 11px/1 var(--sans);letter-spacing:.1em;color:var(--leise);margin-bottom:12px}
.etikett__name{font:300 clamp(40px,4.4vw,92px)/.9 var(--serif);letter-spacing:.02em;margin-bottom:10px}
.etikett__sub{font:500 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.held__hinweis{position:absolute;right:var(--rand);bottom:clamp(24px,5vh,48px);z-index:6;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.held__hinweis::after{content:"";display:block;width:1px;height:46px;margin:12px 0 0 auto;background:var(--tinte);transform-origin:top;animation:linie 2s infinite var(--kurve)}
@keyframes linie{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
html:not(.drei-d) .held__buehne{background:url(stoff/26028-blau.webp) center/min(60vh,70vw) no-repeat}

/* II  Satz */
.satz{position:relative;z-index:6;background:var(--weiss);padding:clamp(120px,22vh,260px) var(--rand);display:grid;grid-template-columns:1fr 2.4fr;gap:30px}
.satz__text{font:300 clamp(30px,3.6vw,76px)/1.08 var(--serif);letter-spacing:-.01em;max-width:18em}
.satz__text .w{display:inline-block;margin-right:.24em}

/* III  Kollektion */
.kollektion{position:relative;z-index:6;background:var(--weiss);padding:0 0 clamp(80px,14vh,160px)}
.kollektion__kopf{display:flex;justify-content:space-between;padding:0 var(--rand) 18px}
.kollektion__kopf a{color:var(--leise)}
.raster{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.karte{position:relative}
.karte__bild{position:relative;aspect-ratio:3/4;overflow:hidden;background:#F5F4F2}
.karte__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s,transform 1.2s var(--kurve)}
.karte__bild img + img{opacity:0}
.karte:hover .karte__bild img + img{opacity:1;transform:scale(1.04)}
.karte__text{display:flex;justify-content:space-between;gap:10px;padding:10px var(--rand) 26px 10px}
.karte__text b{font:500 11px/1.4 var(--sans);letter-spacing:.08em}
.karte__text span{font:400 11px/1.4 var(--sans);color:var(--leise);text-align:right}

/* IV  Muehle */
.muehle{position:relative;z-index:6;background:var(--weiss);display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,6vw,120px);align-items:end;padding:clamp(80px,14vh,160px) var(--rand);border-top:1px solid var(--linie)}
.muehle__zahl b{display:block;font:200 clamp(140px,20vw,420px)/.8 var(--serif);letter-spacing:-.03em;margin-bottom:14px}
.muehle__zahl .klein{color:var(--leise)}
.muehle h2{font:300 clamp(32px,3.2vw,64px)/1.05 var(--serif);margin:14px 0 22px}
.muehle h2 em{color:var(--gold)}
.muehle__text > p:not(.klein){max-width:44ch;color:#444}
.muehle__zert{margin-top:26px;color:var(--leise)}

/* V  Circle */
.kreis{position:relative;z-index:6;background:var(--weiss);text-align:center;padding:clamp(80px,14vh,160px) var(--rand);border-top:1px solid var(--linie)}
.kreis h2{font:300 clamp(40px,5vw,110px)/1 var(--serif);margin:16px 0 34px}
.kreis h2 em{color:var(--gold)}
.knopf{display:inline-flex;align-items:center;min-height:50px;padding:0 30px;background:var(--tinte);color:var(--weiss);font:500 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;transition:background .3s}
.knopf:hover{background:var(--gold)}

/* Fuss */
.fuss{position:relative;z-index:6;background:var(--weiss);padding:0 var(--rand) 22px;overflow:hidden}
.fuss__wort{font:200 clamp(90px,24vw,520px)/.8 var(--serif);letter-spacing:.06em;color:#F1EEE9;text-align:center;margin-bottom:20px}
.fuss__zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--leise);border-top:1px solid var(--linie);padding-top:16px}

@media (max-width:860px){
  .kopf{grid-template-columns:auto 1fr;padding:14px var(--rand)}
  .kopf__links:first-child{display:none}
  .kopf__marke{font-size:18px}
  .kopf__links{gap:14px}
  html.wow .held{height:760svh}
  .wort{font-size:34vw;top:46%}
  .held__satz{top:12vh;font-size:22px}
  .etikett__name{font-size:40px}
  .held__hinweis{display:none}
  .satz{grid-template-columns:1fr}
  .raster{grid-template-columns:1fr 1fr}
  .karte__text{flex-direction:column;gap:2px;padding:8px 8px 20px}
  .karte__text span{text-align:left}
  .muehle{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}