/* =====================================================================
   archivisu — blaetterbares Exposé, Doppelseiten-Logik

   Aufbau wie in einem echten Heft: Deckblatt allein, danach immer zwei
   Seiten nebeneinander, am Ende gegebenenfalls die letzte Seite allein.
   Das umschlagende Blatt dreht sich um den Falz in der Mitte; seine
   Rueckseite ist die Seite, die danach links steht - so wie im Druck.

   Das Heft passt immer vollstaendig ins Fenster: die Breite wird aus
   der verfuegbaren Hoehe gerechnet, nie umgekehrt. Kein Scrollbalken.
   ===================================================================== */

:root{
  --bg:#FAFAFA; --fg:#151515; --muted:#5E5E5E;
  --accent:#991B35; --accent-hover:#700E23;
  --invert-bg:#0E0E0E; --invert-fg:#F2F2F2; --invert-muted:#A3A3A3;
  --invert-line:#2E2E2E;
  --display:'Poppins',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --label:'Poppins',system-ui,sans-serif;
  --gut:clamp(14px,3.5vw,26px);
  /* Kopfzeile + Bedienleiste + Luft. Hieraus ergibt sich die Heftgroesse. */
  --chrome:188px;
  --papier:#EDE9E3;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{overflow-x:clip}
body{margin:0;background:#141414;color:var(--invert-fg);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
p{margin:0}
a{color:inherit;text-decoration:none}
.wrap{max-width:1600px;margin:0 auto;
  padding-left:max(var(--gut),env(safe-area-inset-left,0px));
  padding-right:max(var(--gut),env(safe-area-inset-right,0px))}

/* ---------- Kopfzeile ---------- */
header{position:relative;z-index:40;background:var(--invert-bg);border-bottom:1px solid var(--invert-line)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:12px}
.logo{display:flex;align-items:flex-end;gap:8px;color:var(--invert-fg);flex:0 0 auto}
.logo img{width:74px;height:auto}
.htitle{min-width:0;display:flex;flex-direction:column;gap:1px;text-align:center;flex:1 1 auto}
.htitle b{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htitle span{font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8A8A8A}
.hback{font-family:var(--label);font-size:13px;color:#CFCFCF;flex:0 0 auto;transition:color .2s}
.hback:hover{color:#fff}
@media (max-width:760px){.htitle{display:none}}

/* ---------- Buehne ---------- */
.fb{padding-block:clamp(14px,2vw,26px)}
/* overflow:hidden faengt die halbe Seite ab, die beim Deckblatt und bei
   der letzten Seite seitlich heraussteht - sonst entsteht ein
   waagrechter Scrollbalken. Die 3D-Ebene bleibt davon unberuehrt. */
.fb-stage{position:relative;margin-inline:auto;overflow:hidden;
  width:min(100%, calc((100dvh - var(--chrome)) * 2.828));
  perspective:3000px}
@supports not (height:100dvh){
  .fb-stage{width:min(100%, calc((100vh - var(--chrome)) * 2.828))}
}
/* Das Heft ist immer zwei Seiten breit; bei Deckblatt und letzter Seite
   rutscht es um eine halbe Seite zur Seite, damit das einzelne Blatt
   in der Mitte steht. */
/* Das Heft wird angefasst und gezogen. pan-y laesst senkrechtes Wischen
   weiterhin die Seite scrollen, waagrechtes gehoert dem Blaettern. */
.fb-book{position:relative;width:100%;aspect-ratio:2.828/1;transform-style:preserve-3d;
  transition:transform .66s cubic-bezier(.55,.02,.45,1);
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.fb.zieht .fb-book{cursor:grabbing;transition:none}
/* Die Bilder duerfen den Zeiger nicht abfangen und sich nicht mitziehen
   lassen - sonst startet der Browser sein eigenes Bild-Ziehen. */
.fb-book img{pointer-events:none;-webkit-user-drag:none}
.fb-book.only-right{transform:translateX(-25%)}
.fb-book.only-left{transform:translateX(25%)}

.sheet{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--papier);
  box-shadow:0 22px 54px rgba(0,0,0,.55)}
.sheet.left{left:0}
.sheet.right{left:50%}
.sheet.leer{background:none;box-shadow:none}
.sheet img{width:100%;height:100%;object-fit:contain;background:var(--papier)}
/* Falzschatten zur Mitte hin */
.sheet.left::after,.sheet.right::after{content:"";position:absolute;top:0;bottom:0;width:30px;
  pointer-events:none;z-index:2}
.sheet.left::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.26),transparent)}
.sheet.right::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.26),transparent)}
.sheet.leer::after{display:none}

/* ---------- Das umschlagende Blatt ---------- */
.leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:5;
  transition:transform .66s cubic-bezier(.55,.02,.45,1)}
.leaf.vor{left:50%;transform-origin:left center}
.leaf.zurueck{left:0;transform-origin:right center}
.leaf.vor.go{transform:rotateY(-180deg)}
.leaf.zurueck.go{transform:rotateY(180deg)}
.leaf .f{position:absolute;inset:0;overflow:hidden;background:var(--papier);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 22px 54px rgba(0,0,0,.55)}
.leaf .f img{width:100%;height:100%;object-fit:contain;background:var(--papier)}
.leaf .f.back{transform:rotateY(180deg)}
.leaf .f.leer{background:var(--papier)}
/* Der wandernde Schatten auf dem Blatt.
   Die Deckkraft steuert das Skript Bild fuer Bild: null am Anfang, voll in
   der Mitte, null am Ende. Mit einem Uebergang ginge das nicht - der
   Schatten waere am Schluss am staerksten und verschwaende dann schlagartig,
   sobald das Blatt aus dem Dokument genommen wird. */
.leaf .sh{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0}
.leaf.vor .f.front .sh{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 42%,transparent 70%)}
.leaf.vor .f.back  .sh{background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 42%,transparent 70%)}
.leaf.zurueck .f.front .sh{background:linear-gradient(270deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 42%,transparent 70%)}
.leaf.zurueck .f.back  .sh{background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 42%,transparent 70%)}

/* Der Schatten, den das aufgestellte Blatt auf die Seite darunter wirft.
   Er haengt an der freien Kante des Blattes und wandert mit ihr - Lage und
   Breite setzt das Skript Bild fuer Bild, die Richtung steht hier. */
.us{position:absolute;top:0;bottom:0;z-index:3;opacity:0;pointer-events:none;left:50%;width:0}
.us.vor{background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.16) 42%,transparent 100%)}
.us.zurueck{background:linear-gradient(270deg,rgba(0,0,0,.62),rgba(0,0,0,.16) 42%,transparent 100%)}

/* ---------- Blaettern ---------- */
/* Die Pfeilflaeche reicht ueber die ganze Hoehe, faengt den Zeiger aber
   nicht ab - sonst liesse sich die Blattecke, an der man natuerlich
   zugreift, nicht anfassen. Anklickbar ist nur der runde Knopf. */
.fb-arrow{position:absolute;top:0;bottom:0;width:clamp(44px,5.5%,78px);z-index:8;border:0;padding:0;
  background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#fff;opacity:0;transition:opacity .22s;pointer-events:none}
.fb-arrow span{pointer-events:auto}
.fb-arrow.l{left:0}
.fb-arrow.r{right:0}
.fb-stage:hover .fb-arrow,.fb-arrow:focus-visible{opacity:1}
.fb-arrow:disabled{opacity:0 !important;cursor:default}
.fb-arrow span{width:44px;height:44px;border-radius:50%;background:rgba(12,12,12,.55);
  border:1px solid rgba(255,255,255,.34);display:grid;place-items:center;
  transition:background-color .2s,transform .2s}
.fb-arrow:hover span{background:var(--accent);border-color:var(--accent);transform:scale(1.07)}
.fb-arrow svg{width:18px;height:18px}
@media (max-width:1180px),(hover:none){.fb-arrow{opacity:.9}}

/* ---------- Bedienleiste ---------- */
.fb-bar{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1vw,12px);
  flex-wrap:wrap;margin-top:clamp(12px,1.6vw,20px)}
.fb-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--label);font-size:13px;
  color:#D8D8D8;background:transparent;border:1px solid #4A4A4A;padding:9px 14px;cursor:pointer;
  transition:border-color .2s,color .2s,background-color .2s}
.fb-btn:hover{border-color:#9A9A9A;color:#fff}
.fb-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.fb-btn:disabled{opacity:.3;cursor:default}
.fb-btn:disabled:hover{border-color:#4A4A4A;color:#D8D8D8}
.fb-btn svg{width:16px;height:16px;flex:0 0 auto}
.fb-count{font-family:var(--label);font-size:13px;color:#CFCFCF;font-variant-numeric:tabular-nums;
  min-width:86px;text-align:center;-webkit-user-select:none;user-select:none}
@media (max-width:620px){.fb-btn .t{display:none}.fb-btn{padding:10px 12px}}

/* ---------- Seitenuebersicht ---------- */
.fb-thumbs{display:none;gap:9px;flex-wrap:wrap;justify-content:center;
  margin-top:clamp(14px,1.8vw,22px);padding-top:clamp(14px,1.8vw,22px);border-top:1px solid var(--invert-line)}
.fb-thumbs.open{display:flex}
.fb-thumbs button{border:1px solid #333;background:none;padding:0;cursor:pointer;position:relative;
  width:96px;transition:border-color .2s,transform .2s}
.fb-thumbs button:hover{border-color:#9A9A9A;transform:translateY(-2px)}
.fb-thumbs button[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 2px rgba(153,27,53,.55)}
.fb-thumbs img{width:100%;height:auto;display:block}
.fb-thumbs i{position:absolute;right:0;bottom:0;font-style:normal;font-family:var(--label);
  font-size:10px;padding:2px 5px;background:rgba(10,10,10,.78);color:#fff}

/* ---------- Vollbild ---------- */
.fb:fullscreen{background:#0A0A0A;padding:14px;--chrome:118px;
  display:flex;flex-direction:column;justify-content:center}
.fb:-webkit-full-screen{background:#0A0A0A}

.fb-note{max-width:64ch;margin:clamp(18px,2.4vw,32px) auto 0;text-align:center;
  font-size:14px;color:var(--invert-muted);line-height:1.6}
.fb-note a{color:#E8456A;text-decoration:underline;text-underline-offset:3px}

footer{border-top:1px solid var(--invert-line);margin-top:clamp(26px,4vw,52px)}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-block:18px;font-size:12.5px;color:#8A8A8A}
.fbar a{color:#8A8A8A;transition:color .2s}
.fbar a:hover{color:#fff}

/* Am Handy sind Doppelseiten unlesbar - dort eine Seite nach der anderen.
   Das Skript schaltet dafuer in den Einzelmodus (Klasse .einzel). */
@media (max-width:760px){
  :root{--chrome:196px}
  .fb-arrow span{width:38px;height:38px}
  .fb-count{min-width:72px;font-size:12px}
}
.fb.einzel .fb-stage{width:min(100%, calc((100dvh - var(--chrome)) * 1.414))}
@supports not (height:100dvh){
  .fb.einzel .fb-stage{width:min(100%, calc((100vh - var(--chrome)) * 1.414))}
}
.fb.einzel .fb-book{aspect-ratio:1.414/1}
.fb.einzel .fb-book.only-right,.fb.einzel .fb-book.only-left{transform:none}
.fb.einzel .sheet{width:100%;left:0}
.fb.einzel .sheet.left{display:none}
.fb.einzel .sheet.left::after,.fb.einzel .sheet.right::after{display:none}
.fb.einzel .leaf{width:100%;left:0}

@media (prefers-reduced-motion:reduce){
  .leaf,.leaf .sh,.fb-book{transition:none}
}