:root{
    --dark:#22211F; --ink:#1A1A1A; --paper:#FAF9F5;
    --gold:#997D47; --goldl:#C8A96E; --mute:#8A8374;
    --ui:#E8E3D8;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{background:var(--dark);color:var(--ui);
    font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
    display:flex;flex-direction:column;overflow:hidden}

  header{display:flex;align-items:center;justify-content:space-between;
    padding:14px clamp(14px,3vw,30px);gap:16px;flex:0 0 auto}
  header img.logo{height:26px;width:auto;display:block}
  header .titel{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--goldl);
    text-align:right;line-height:1.6}

  main{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;
    padding:0 clamp(8px,2vw,24px);min-height:0}

  /* ---------- Heft ---------- */
  #buehne{position:relative;perspective:2600px;display:flex;align-items:center;justify-content:center}
  #spread{position:relative;display:flex;align-items:center;justify-content:center}
  #spread .seite{display:block;height:auto;background:#141413;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  #spread .seite img{display:block;width:100%;height:100%;object-fit:contain}
  /* Bundsteg-Schatten */
  #spread::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:46px;
    transform:translateX(-50%);pointer-events:none;
    background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.34),rgba(0,0,0,0));
    opacity:var(--bund,1)}

  /* ---------- Blätter-Animation ---------- */
  #flip{position:absolute;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.03,.3,1);
    pointer-events:none;z-index:5}
  #flip .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#141413}
  #flip .face img{width:100%;height:100%;object-fit:contain;display:block}
  #flip .hinten{transform:rotateY(180deg)}

  /* ---------- Bedienung ---------- */
  .pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:9;
    width:46px;height:46px;border-radius:50%;border:1px solid rgba(232,227,216,.28);
    background:rgba(34,33,31,.72);color:var(--ui);font-size:19px;line-height:1;
    display:flex;align-items:center;justify-content:center;cursor:pointer;
    transition:background .2s,border-color .2s;backdrop-filter:blur(4px)}
  .pfeil:hover{background:var(--gold);border-color:var(--gold);color:#fff}
  .pfeil[disabled]{opacity:.25;cursor:default}
  #zurueck{left:clamp(4px,1.5vw,20px)} #vor{right:clamp(4px,1.5vw,20px)}

  footer{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4vw,26px);
    padding:12px clamp(14px,3vw,30px) calc(12px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .zaehler{font-size:12px;letter-spacing:.14em;color:var(--mute);min-width:98px;text-align:center}
  .knopf{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--goldl);
    border:1px solid rgba(200,169,110,.45);background:none;border-radius:40px;padding:8px 16px;
    cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
  .knopf:hover{background:var(--goldl);color:var(--dark)}

  /* ---------- Seitenübersicht ---------- */
  #uebersicht{position:fixed;inset:0;background:rgba(18,17,16,.97);z-index:30;display:none;
    overflow-y:auto;padding:22px clamp(14px,4vw,40px) 40px}
  #uebersicht.auf{display:block}
  #uebersicht h2{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--goldl);
    margin-bottom:18px;font-weight:600}
  #raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:14px}
  #raster figure{cursor:pointer}
  #raster img{width:100%;display:block;border:1px solid rgba(232,227,216,.14)}
  #raster figcaption{font-size:10px;color:var(--mute);text-align:center;padding-top:5px;letter-spacing:.1em}
  #raster figure:hover img{border-color:var(--goldl)}
  #zu{position:absolute;top:18px;right:clamp(14px,4vw,40px);background:none;border:none;
    color:var(--ui);font-size:26px;cursor:pointer;line-height:1}

  @media (max-width:860px){
    header .titel{font-size:9px}
    .pfeil{width:40px;height:40px}
  }