/* Marius Höfinger v8 – Startseite „Regal“: drei Magazine auf einem beleuchteten Brett. */
@import url(../fonts/fonts.css);
:root{--wand:#1b1916;--wand2:#262320;--ink:#f3efe8;--mute:#a59d92;--orange:#ff9400;--holz1:#6b4a2f;--holz2:#4a311d;--holz3:#2e1d10;
  --serif:'Fraunces',Georgia,serif;--sans:'Inter Tight',system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--wand);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-image:radial-gradient(90% 70% at 50% 18%,#3a342d 0%,rgba(58,52,45,0) 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
img{display:block;max-width:100%}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,3vw,40px)}
/* Logo (14.10.2026, Wunsch Marius): groß, freigestellt (weiß-orange auf der dunklen Wand), liegt HINTER den Heften (z-index unter dem Regal) */
:root{--logo:clamp(104px,15.5vh,150px);--logo-l:clamp(16px,3vw,40px)}
.marke-logo{position:fixed;z-index:1;top:12px;left:var(--logo-l);width:var(--logo);line-height:0}
.marke-logo img{width:100%;height:auto;filter:drop-shadow(0 4px 16px rgba(0,0,0,.35))}
.marke{display:flex;align-items:center;text-decoration:none;padding-left:calc(var(--logo) + 20px)}
.marke b{font:500 19px/1.15 var(--sans);letter-spacing:-.005em}.marke small{display:block;margin-top:4px;font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.kopf-r{display:flex;align-items:center;gap:18px;font:500 13px var(--sans)}
.kopf-r a{text-decoration:none;color:var(--ink);opacity:.85}.kopf-r a:hover{opacity:1}
.pille{border:1px solid rgba(243,239,232,.35);border-radius:99px;padding:9px 16px}
.pille:hover{border-color:var(--orange);color:var(--orange)!important}

/* Raum mit Spots */
.raum{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:110px clamp(16px,4vw,60px) 0;overflow:hidden}
.spots{position:absolute;inset:0;pointer-events:none}
.spots i{position:absolute;top:-10%;width:34%;height:120%;background:radial-gradient(50% 60% at 50% 0%,rgba(255,226,180,.16) 0%,rgba(255,226,180,.05) 45%,rgba(255,226,180,0) 70%);filter:blur(4px)}
.spots i:nth-child(1){left:3%}.spots i:nth-child(2){left:33%}.spots i:nth-child(3){left:63%}
.intro{position:relative;z-index:2;max-width:1400px;margin:0 auto;width:100%;text-align:center}
.kicker{font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.intro h1{font:300 clamp(46px,7.4vw,124px)/.92 var(--serif);letter-spacing:-.035em;margin:0}
.intro h1 em{color:var(--orange);font-weight:300}
.intro .lead{font:300 italic clamp(18px,1.6vw,24px)/1.4 var(--serif);color:#cfc7bb;margin:18px 0 0}

/* Regal */
.regal{position:relative;z-index:2;max-width:1400px;width:100%;margin:clamp(30px,5vh,70px) auto 0;perspective:1600px}
.brett-reihe{display:grid;grid-template-columns:repeat(3,auto);justify-content:center;gap:clamp(28px,5vw,90px);align-items:end;padding:0 clamp(10px,3vw,50px)}
.mag{width:min(26vw,calc((100svh - 400px) * .737),420px)}
.brett{height:34px;margin:0 -2vw;position:relative;border-radius:2px;
  background:linear-gradient(180deg,#8a6644 0%,var(--holz1) 18%,var(--holz2) 70%,var(--holz3) 100%);
  box-shadow:0 30px 50px rgba(0,0,0,.65),0 6px 10px rgba(0,0,0,.5),inset 0 2px 0 rgba(255,220,170,.25)}
.brett::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1px,rgba(0,0,0,0) 1px 9px,rgba(255,255,255,.12) 9px 10px,rgba(0,0,0,0) 10px 23px)}
.brett::after{content:"";position:absolute;left:0;right:0;top:100%;height:60px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}

/* Magazin */
.mag{position:relative;display:block;text-decoration:none;color:#fff;transform-style:preserve-3d;transform-origin:50% 100%;
  transform:rotateX(4deg) rotateY(var(--dreh,0deg)) translateZ(0);transition:transform .7s var(--ease)}
.mag.m0{--dreh:9deg}.mag.m1{--dreh:0deg}.mag.m2{--dreh:-9deg}
.mag-cover{position:relative;display:block;aspect-ratio:21/28.5;overflow:hidden;background:#111;border-radius:2px 4px 4px 2px;container-type:inline-size;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,-3px 0 0 rgba(0,0,0,.35) inset,0 2px 3px rgba(0,0,0,.4),0 30px 50px -20px rgba(0,0,0,.85)}
.c-bilder{position:absolute;inset:0}
.c-bild{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.c-bild.aktiv{opacity:1}
/* Bildformat 14.10.2026 (Wunsch Marius): Cover-Foto ganz, im Originalformat, auf dem dunklen Umschlag (Passepartout) – kein Zuschnitt, kein Zoom */
.c-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 46%}
/* Querformat: als Abzug im Fenster zwischen Kopf und Titel (Ränder = Satzspiegel), damit der Titel nicht ins Foto ragt */
.c-bild.quer{inset:31cqi 6cqi 48cqi 7cqi}.m2 .c-bild.quer{bottom:36cqi}
.c-bild.quer img{object-position:50% 50%;filter:drop-shadow(0 .8cqi 2cqi rgba(0,0,0,.6))}
.mag-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.82) 100%)}
.mag-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4%;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.18) 55%,rgba(0,0,0,0))}
.c-kopf{position:absolute;z-index:2;top:5cqi;left:7cqi;right:6cqi}
.c-mast{display:block;font:600 17.5cqi/.8 var(--serif);letter-spacing:-.04em;white-space:nowrap;text-transform:uppercase}
.c-zeile{display:flex;justify-content:space-between;font:500 2.7cqi var(--sans);letter-spacing:.18em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.7);margin-top:3cqi;padding-top:2.6cqi}
.c-unten{position:absolute;z-index:2;left:7cqi;right:6cqi;bottom:6cqi}
.c-titel{display:block;font:300 12.5cqi/.95 var(--serif);letter-spacing:-.03em}
.c-titel em{color:var(--orange);font-weight:300}
.c-lines{list-style:none;margin:4cqi 0 0;padding:3cqi 0 0;border-top:1px solid rgba(255,255,255,.5);display:flex;flex-wrap:wrap;gap:1cqi 3.4cqi;font:500 2.9cqi var(--sans);letter-spacing:.08em;text-transform:uppercase}
.c-lines li::before{content:"● ";color:var(--orange);font-size:.7em;vertical-align:.15em}
.c-glanz{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:screen;opacity:.8;transition:transform 1.2s var(--ease);
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.2) 42%,rgba(255,255,255,.04) 50%,rgba(255,255,255,0) 62%);transform:translateX(-30%)}
.mag-schatten{position:absolute;left:4%;right:4%;bottom:-6px;height:18px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.75),rgba(0,0,0,0));filter:blur(4px);z-index:-1;transition:.7s var(--ease)}
.mag-schild{position:absolute;left:0;right:0;top:calc(100% + 46px);text-align:center;opacity:0;transform:translateY(-6px);transition:.5s var(--ease)}
.mag-schild b{display:block;font:300 22px/1.1 var(--serif)}.mag-schild b em{color:var(--orange);font-weight:300}
.mag-schild small{font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.mag-schild i{font-style:normal}
@media (hover:hover){
  .mag:hover,.mag:focus-visible{transform:translateY(-22px) rotateX(0deg) rotateY(calc(var(--dreh) * -.4)) scale(1.04)}
  
  .mag:hover .c-glanz{transform:translateX(30%)}
  .mag:hover .mag-schatten{opacity:.35;transform:scale(.8)}
  .mag:hover .mag-schild,.mag:focus-visible .mag-schild{opacity:1;transform:none}
  .brett-reihe:hover .mag:not(:hover){filter:brightness(.6)}
}
.mag{transition:transform .7s var(--ease),filter .5s}
.mag:focus-visible{outline:2px solid var(--orange);outline-offset:8px}
/* Aufschlagen: Heft fliegt nach vorne, bevor die Magazinseite lädt */
.mag.auf{transform:translateY(-10vh) rotateY(-28deg) scale(1.25)!important;transition:transform .55s cubic-bezier(.6,0,.4,1)!important;z-index:10}
.raum.weg .intro,.raum.weg .mag:not(.auf){opacity:0;transition:opacity .4s}

.wisch{display:none}
.fuss{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;padding:120px 20px 34px;font:500 12.5px var(--sans);color:var(--mute);letter-spacing:.04em}
.fuss a{text-decoration:none;color:#d8d0c4}.fuss a:hover{color:var(--orange)}
.fuss .klein{width:100%;text-align:center;font-size:11px;opacity:.6}

/* Handy: Hefte zum Wischen, eines groß in der Mitte */
@media (max-width:760px){
  .kopf-r a:not(.pille){display:none}.marke b small{display:none}
  :root{--logo:64px}
  .marke-logo{z-index:21;top:10px}
  .marke{padding-left:calc(var(--logo) + 12px)}.marke b{font-size:16.5px}
  .raum{padding-top:96px;justify-content:flex-start}
  .intro h1{font-size:clamp(40px,12vw,60px)}
  .regal{margin-top:34px;perspective:none}
  .brett-reihe{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 12vw 0;margin:0 -16px;scrollbar-width:none}
  .brett-reihe::-webkit-scrollbar{display:none}
  .mag{flex:0 0 76vw;width:76vw;scroll-snap-align:center;transform:none!important}
  .mag-schild{display:none}
  .c-mast{font-size:17.5cqi}
  .brett{margin:-6px -16px 0;height:22px}
  .wisch{display:block;text-align:center;font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:14px 0 0}
  .fuss{padding-top:60px}
}
@media (prefers-reduced-motion:reduce){.mag,.mag-cover img,.c-glanz{transition:none!important}}

/* Desktop: alles auf einen Blick – kein Scrollen, Hefte passen sich der Fensterhöhe an */
@media (min-width:761px){
  html,body{height:100%;overflow:hidden}
  .raum{height:100svh;min-height:0;justify-content:center;padding:clamp(70px,10vh,110px) clamp(16px,4vw,60px) clamp(54px,8vh,84px)}
  .kicker{margin-bottom:1.4vh}
  .intro h1{font-size:clamp(38px,min(6.2vw,9vh),118px)}
  .intro .lead{margin-top:1.2vh;font-size:clamp(16px,min(1.5vw,2.4vh),24px)}
  .regal{margin-top:clamp(16px,4vh,56px)}
  .mag{width:min(24vw,calc((64svh - 150px) * .737),440px)}
  .mag-schild{top:calc(100% + 26px)}
  .fuss{position:fixed;left:0;right:0;bottom:0;padding:12px 20px 14px;gap:6px 26px;font-size:12px;z-index:3}
  .fuss .klein{width:auto;text-align:left;font-size:12px;opacity:.85}
}
@media (min-width:761px) and (max-height:700px){.intro .lead{display:none}.mag-schild{display:none}}
@media (min-width:761px){.regal{width:fit-content;max-width:100%}.brett{margin:0 -60px}}