/* Zwei Hefte auf der Startseite. Seiten in em (1 em = Seitenbreite / 24), Szene per magazin.js */

/* Tisch: dunkler Stein mit Korn, Licht von oben, Ränder laufen ins Schwarz der Seite */
.mags{position:relative;overflow-x:clip;padding-block:var(--section);
  background:radial-gradient(70% 55% at 50% 42%,#38332e 0%,#1d1a17 45%,#0b0a09 75%,var(--bg) 100%)}
.mags::before{content:"";position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;pointer-events:none;
  -webkit-mask:radial-gradient(70% 55% at 50% 42%,#000 40%,transparent 100%);mask:radial-gradient(70% 55% at 50% 42%,#000 40%,transparent 100%);
  background: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mags__grid{--gap:clamp(2rem,5vw,5rem);position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.mag__table{position:relative;aspect-ratio:1/.86}
.mag{display:flex;flex-direction:column}
.mag__cap{position:relative;order:1;max-width:34rem}  /* im HTML vor den Seiten (Überschriften-Reihenfolge), sichtbar darunter */
.mag__cap .lede{margin:1rem 0 0}
.mag__act{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin:1.6rem 0 0}
.mag__open:not(:focus-visible){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;border:0}  /* Tippen aufs Heft öffnet es; der Knopf erscheint nur für die Tastatur */
.mz-pages{display:none}
@media (max-width:759px){
  .mags__grid{--gap:3.5rem;grid-template-columns:1fr}
  .mag__table{aspect-ratio:1/1.02}
}

/* Bühne: zu in ihrer Zelle, aufgeschlagen über beide Tischhälften (is-open), in der Hand über der ganzen Seite (is-held) */
.mz-stage{position:absolute;inset:0;perspective:calc(var(--P,100px) * 4);perspective-origin:50% 50%;cursor:pointer;transition:opacity .5s}
.mz-stage.is-open{z-index:2;cursor:default;touch-action:pan-y}  /* quer wischen blättert, hoch und runter scrollt die Seite */
@media (min-width:760px){
  .mag:first-child .mz-stage.is-open,.mag:first-child .mag__table > .mz-bar{right:calc(-100% - var(--gap))}
  .mag:last-child .mz-stage.is-open,.mag:last-child .mag__table > .mz-bar{left:calc(-100% - var(--gap))}
}
.mz-stage.is-held{position:fixed;z-index:60;cursor:default;touch-action:none;transition:perspective-origin .5s var(--ease),scale .5s var(--ease)}
.mag.is-aside .mz-stage{opacity:.45;pointer-events:none}
.mz-cam{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;transition:transform .5s var(--ease)}
.is-held .mz-cam{transition:transform .5s var(--ease),left .5s var(--ease),top .5s var(--ease)}
.mz-book{--H:calc(var(--P) * 1.5);position:absolute;left:0;top:0;width:calc(var(--P) * 2);height:var(--H);transform-style:preserve-3d;font-size:calc(var(--P) / 24);transition:translate .3s var(--ease)}
@media (hover:hover){.mz-stage:not(.is-held,.is-open):hover .mz-book{translate:0 0 1.4em}}
.mz-now .mz-stage,.mz-now .mz-cam,.mz-now .mz-base,.mz-now .mz-book{transition:none!important}

/* Abdunkeln, Leiste und Schliessen, solange ein Heft in der Hand ist */
.mz-backdrop{position:fixed;inset:0;z-index:58;background:rgb(1 1 1 / .96);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.mz-bar{position:fixed;inset:auto 0 0;z-index:61;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1rem;
  padding:10px var(--gutter) max(12px,env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mz-close{position:fixed;top:14px;right:var(--gutter);z-index:61;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.mags.is-holding .mz-backdrop,.mags.is-holding .mz-bar,.mags.is-holding .mz-close{opacity:1;visibility:visible}
.mag__table > .mz-bar{position:absolute;inset:auto 0 0;z-index:3;padding:0 0 .4rem;opacity:1;visibility:visible}  /* aufgeschlagen: unter dem Heft auf dem Tisch */
.mags.is-diving .mz-bar,.mags.is-diving .mz-close{opacity:0;visibility:hidden}
.mz-btn,.mz-close,.mz-dive__close{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;background:rgb(1 1 1 / .5);cursor:pointer;color:var(--text);transition:border-color .2s}
.mz-btn{font:400 1.5rem/1 var(--f-display)}
.mz-btn:hover:not(:disabled),.mz-close:hover{border-color:var(--accent)}
.mz-btn:disabled{opacity:.3;cursor:default}
.mz-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1px solid var(--line-strong);border-radius:999px;background:rgb(1 1 1 / .5);cursor:pointer;
  font:500 .78rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--text);transition:border-color .2s}
.mz-pill:hover{border-color:var(--accent)}
.mz-pill[hidden],.mz-shut{display:none}
.mag__table > .mz-bar .mz-shut{display:inline-flex}
.mz-count{margin:0;min-width:12em;text-align:center;font:500 .8rem/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase}
.mz-hint{flex-basis:100%;margin:0;text-align:center;font-size:.8rem;line-height:1.3;color:var(--text-3)}
.mz-hint--narrow{display:none}
@media (max-width:759px){.mz-hint--wide{display:none}.mz-hint--narrow{display:inline}}

/* Schatten auf dem Tisch und Blattstapel (Kanten) */
.mz-base{position:absolute;top:0;left:0;width:calc(var(--P) * 2);height:var(--H);background:#000;
  box-shadow:0 .4em 1em rgb(0 0 0 / .7),0 1.6em 3.5em rgb(0 0 0 / .55),0 4em 7em rgb(0 0 0 / .35);transition:left .5s var(--ease),width .5s var(--ease)}
.mz-book[data-state="start"] .mz-base{left:var(--P);width:var(--P)}
.mz-book[data-state="end"] .mz-base{width:var(--P)}
.mz-block{position:absolute;top:0;width:var(--P);height:var(--H);transform-style:preserve-3d;pointer-events:none}
.mz-block--l{left:0;--t:var(--tl)}
.mz-block--r{left:var(--P);--t:var(--tr)}
.mz-book[data-state="start"] .mz-block--l,.mz-book[data-state="end"] .mz-block--r{display:none}
.mz-wall{position:absolute;transform-origin:0 0;backface-visibility:hidden;background:#cfc8bc repeating-linear-gradient(to bottom,#ebe5da 0 1px,#b3ab9e 1px 2px)}
.mz-wall--front{left:0;top:var(--H);width:var(--P);height:var(--t);transform:translateZ(var(--t)) rotateX(-90deg)}
.mz-wall--back{left:0;top:0;width:var(--P);height:var(--t);transform:rotateX(90deg)}
.mz-wall--out{top:0;width:var(--t);height:var(--H);background-image:repeating-linear-gradient(to right,#ebe5da 0 1px,#b3ab9e 1px 2px)}
.mz-block--l .mz-wall--out{left:0;transform:rotateY(-90deg)}
.mz-block--r .mz-wall--out{left:var(--P);transform:translateZ(var(--t)) rotateY(90deg)}

/* Liegende Seiten und Blatt */
.mz-side{position:absolute;top:0;width:var(--P);height:var(--H)}
.mz-side--l{left:0;transform:translateZ(var(--tl))}
.mz-side--r{left:var(--P);transform:translateZ(var(--tr))}
.is-held .mz-side{cursor:pointer}
.mz-cast{position:absolute;top:0;bottom:0;width:0;opacity:0;pointer-events:none}
.mz-side--r .mz-cast{left:0;background:linear-gradient(to right,rgb(0 0 0 / .6),rgb(0 0 0 / .25) 55%,transparent)}
.mz-side--l .mz-cast{right:0;background:linear-gradient(to left,rgb(0 0 0 / .6),rgb(0 0 0 / .25) 55%,transparent)}
.mz-leaf{position:absolute;left:0;top:0;width:var(--P);height:var(--H);transform-style:preserve-3d;pointer-events:none}
.mz-strip{position:absolute;top:0;height:100%;transform-style:preserve-3d;transform-origin:0 50%}
.mz-face{position:absolute;top:0;left:0;width:calc(100% + 2px);height:100%;overflow:hidden;backface-visibility:hidden}
.mz-face--back{transform:rotateY(180deg)}
.mz-shade{position:absolute;inset:0;background:#000;opacity:0}

/* Seiten */
.pg{position:absolute;top:0;left:0;width:var(--P);height:var(--H);overflow:hidden;background:#010101;color:#ece6dc;line-height:1.4;user-select:none;-webkit-user-select:none}
.pg::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07)}
.pg--r::after{background:linear-gradient(to right,rgb(0 0 0 / .42),rgb(0 0 0 / .12) 4%,transparent 10%),linear-gradient(118deg,transparent 35%,rgb(255 255 255 / .05) 52%,transparent 68%)}
.pg--l::after{background:linear-gradient(to left,rgb(0 0 0 / .42),rgb(0 0 0 / .12) 4%,transparent 10%),linear-gradient(118deg,transparent 35%,rgb(255 255 255 / .04) 52%,transparent 68%)}
.pg--paper{background:#ece6dc;color:#0d0d0d}
.pg--paper::before{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pg :where(p,h3){margin:0}
.pg img{display:block;max-width:none}
.pg img[data-big]{cursor:zoom-in}
.pg img[data-big]:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mag.is-bw .pg img{filter:grayscale(1) contrast(1.08);transition:filter .5s var(--ease)}
.mag.is-bw .is-held .pg img[data-big]:is(:hover,:focus-visible){filter:none}
.pg__bleed{position:absolute;inset:0}
.pg__bleed img{width:100%;height:100%;object-fit:cover}
.pg__folio{position:absolute;bottom:1.1em;font:500 .55em/1 var(--f-display);letter-spacing:.2em;opacity:.7}
.pg--l .pg__folio{left:1.6em}
.pg--r .pg__folio{right:1.6em}
.pg--full .pg__folio{color:#ece6dc;text-shadow:0 0 .4em #000}
.pg__run{position:absolute;top:1.6em;left:1.6em;right:1.6em;font:500 .5em/1 var(--f-display);letter-spacing:.26em;text-transform:uppercase;opacity:.55}
.pg--r .pg__run{text-align:right}
.pg .serif{display:block;font-weight:400}

/* Umschlag */
.pg--cover::after{background:linear-gradient(to right,rgb(0 0 0 / .35),transparent 6%),linear-gradient(118deg,transparent 30%,rgb(255 255 255 / .1) 48%,transparent 62%)}
.cv{position:absolute;inset:0;display:flex;flex-direction:column;padding:1em 1.1em 1.3em;color:#ece6dc;
  background:linear-gradient(to bottom,rgb(0 0 0 / .5),transparent 24%,transparent 58%,rgb(0 0 0 / .65))}
.cv__mast{font:700 10.4em/.78 var(--f-display);letter-spacing:-.02em;text-align:center}
.cv__issue{margin-top:.7em;font:500 .62em/1 var(--f-display);letter-spacing:.3em;text-transform:uppercase;text-align:center}
.cv__lines{margin:auto 0 0;padding:0;list-style:none;font:500 .8em/1.5 var(--f-display);letter-spacing:.16em;text-transform:uppercase}
.cv__price{position:absolute;right:1.1em;top:12.6em;display:grid;place-items:center;width:4.6em;height:4.6em;border-radius:50%;
  background:var(--accent);color:#0a0a0a;font:700 .75em/1.05 var(--f-display);text-align:center;text-transform:uppercase;transform:rotate(12deg)}
.cv__h{margin-top:.35em;font:700 2.7em/.95 var(--f-display);text-transform:uppercase}

/* Text und Inhalt */
.tx{position:absolute;inset:3.6em 1.6em 2.8em;display:flex;flex-direction:column}
.tx__kicker{margin-bottom:.9em;font:500 .62em/1 var(--f-display);letter-spacing:.26em;text-transform:uppercase;color:#c4500c}
.tx__h{margin-bottom:.7em;font:700 2.15em/.98 var(--f-display);text-transform:uppercase}
.tx__body{columns:2;column-gap:1.1em;font:300 .66em/1.55 var(--f-body);hyphens:auto}
.tx__body p{margin:0 0 .8em}
.tx__body p:first-child::first-letter{float:left;margin:.08em .1em 0 0;font:700 3.1em/.8 var(--f-display);color:#c4500c}
.tx__img{width:58%;margin:auto 0 0 auto}
.tx__img img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.toc{margin:0;padding:0;list-style:none;border-top:1px solid rgb(13 13 13 / .25)}
.toc li{display:grid;grid-template-columns:2.2em 1fr auto;align-items:baseline;gap:.6em;padding:.9em 0;border-bottom:1px solid rgb(13 13 13 / .25)}
.toc__no,.toc__pg{font:500 .7em/1 var(--f-display);letter-spacing:.2em;color:#c4500c}
.toc__name{font:700 1.5em/1 var(--f-display);text-transform:uppercase}
.toc__name small{display:block;margin-top:.45em;font:300 .42em/1.4 var(--f-body);text-transform:none}

/* Kapitel */
.op{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:2em 1.8em 3.4em}
.op__no{font:700 11em/.8 var(--f-display);color:var(--accent);margin-bottom:.12em}
.op__h{margin-bottom:.45em;font:700 4.2em/.9 var(--f-display);text-transform:uppercase}
.op__t{max-width:16em;font:300 .9em/1.45 var(--f-body);color:rgb(236 230 220 / .8)}
.op__link{align-self:flex-start;margin-top:1.4em;font:500 .62em/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#ece6dc;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:.4em}

/* Zwei Bilder, versetzt */
.duo{position:absolute;inset:3.4em 1.6em 2.8em;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:.8em;align-items:start}
.duo__img img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;box-shadow:0 .2em .6em rgb(0 0 0 / .25)}
.duo__img:nth-child(2){margin-top:4.2em}
.duo__cap{grid-column:1 / -1;align-self:end;font:700 2.2em/.9 var(--f-display);text-transform:uppercase}

/* Zitat */
.qt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;margin:0;padding:3em 2em}
.qt p{font:700 2.5em/1 var(--f-display);text-transform:uppercase}
.qt p .serif{margin-top:.45em;font-size:.62em;line-height:1.1}
.qt p::before{content:"«";display:block;font-size:2em;line-height:.6;color:#c4500c}
.qt cite{margin-top:2.2em;font:500 .6em/1 var(--f-display);letter-spacing:.26em;text-transform:uppercase;opacity:.6}

/* Rückseite */
.pg--back::after{background:linear-gradient(to left,rgb(0 0 0 / .4),transparent 7%),linear-gradient(118deg,transparent 30%,rgb(255 255 255 / .07) 48%,transparent 62%)}
.bk{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:2.4em 2em 2em}
.bk__h{margin-bottom:.5em;font:700 3.6em/.92 var(--f-display);text-transform:uppercase}
.bk__t{max-width:17em;margin-bottom:1.6em;font:300 .85em/1.5 var(--f-body);color:rgb(236 230 220 / .8)}
.bk__cta{align-self:flex-start;padding:.85em 1.3em;background:var(--accent);color:#0a0a0a;font:700 .8em/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.bk__more{align-self:flex-start;margin-top:1.4em;font:500 .62em/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:#ece6dc;text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:.4em}
.bk__foot{position:absolute;left:2em;right:2em;bottom:1.8em;display:flex;align-items:flex-end;gap:.8em;font:500 .55em/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;color:rgb(236 230 220 / .7)}
.bk__foot img{width:3.6em;height:auto}
.bk__code{margin-left:auto;width:9em;height:4.4em;background:#ece6dc repeating-linear-gradient(90deg,#0a0a0a 0 .12em,transparent .12em .3em,#0a0a0a .3em .36em,transparent .36em .5em,#0a0a0a .5em .72em,transparent .72em .86em);
  background-clip:content-box;padding:.4em .5em .9em;box-sizing:border-box}

/* Grosses Bild nach dem Hineinfahren (immer in Farbe) */
.mz-dive{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:#010101;opacity:0;transition:opacity .2s}
.mz-dive.is-on{opacity:1}
.mz-dive[hidden]{display:none}
.mz-dive img{width:min(94vw,60dvh);height:auto;aspect-ratio:2/3;object-fit:cover;cursor:zoom-out}
.mz-dive__close{position:absolute;top:14px;right:var(--gutter)}

@media (prefers-reduced-motion:reduce){
  .mz-stage,.mz-cam,.mz-base,.mz-book,.mz-backdrop,.mz-dive{transition:none!important}
}