:root { --ink: #ece6dc; --muted: #9a9288; --bg: #0c0b0a; --paper: #f4f1ea; }
  html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
  body { font-family: 'Cormorant Garamond', Georgia, serif; color: var(--ink); }
  canvas#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
  .brand { position: fixed; top: 28px; left: 0; right: 0; text-align: center; pointer-events: none;
           letter-spacing: .32em; text-transform: uppercase; font-size: 19px; color: #c9a35a; }
  .brand b { display: block; font-weight: 400; font-size: 34px; letter-spacing: .14em; margin-top: 8px; }
  .label { position: fixed; bottom: 74px; left: 0; right: 0; text-align: center; pointer-events: none;
           font-size: 22px; font-style: italic; transition: opacity .4s; opacity: 0; }
  .label small { display: block; font-style: normal; font-size: 13px; letter-spacing: .25em;
                 text-transform: uppercase; color: var(--muted); margin-top: 6px; }
  .foot { position: fixed; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; justify-content: center;
          padding: 0 22px; background: #0a0908; border-top: 1px solid rgba(201,163,90,.16); color: #cbb68c;
          font-size: 13px; letter-spacing: .22em; text-transform: uppercase; transition: opacity .9s ease; }
  .hint { pointer-events: none; transition: opacity .6s; }
  .gold, .brand b.gold { background: linear-gradient(100deg, #a8823f 0%, #e9cf8f 38%, #c9a35a 55%, #f3e2b0 72%, #b08a46 100%);
          -webkit-background-clip: text; background-clip: text; color: transparent;
          filter: drop-shadow(0 1px 2px rgba(0,0,0,.85)); }
  .brand, .label, .label small { color: #d6b673; }
  .imprint { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); }
  .imprint button { font: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; padding: 4px; color: inherit; }
  .links { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); }
  .links a, .links span { color: inherit; text-decoration: none; padding: 4px; }
  #imprint h3 { margin: 26px 0 10px; font-weight: 400; font-size: 21px; letter-spacing: .12em; text-transform: uppercase; }
  #imprint { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10,9,8,.85); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
  #imprint.on { opacity: 1; pointer-events: auto; }
  #imprint .box { position: relative; max-width: 520px; width: 100%; max-height: 80vh; overflow: auto; padding: 36px 34px 30px; border: 1px solid rgba(201,163,90,.35); background: #12100e; color: #d9d0c2; font-size: 18px; line-height: 1.55; }
  #imprint h2 { margin: 0 0 18px; font-weight: 400; font-size: 26px; letter-spacing: .14em; text-transform: uppercase; }
  #imprint p { margin: 0 0 14px; }
  #imprint a { color: #d6b673; text-decoration: none; border-bottom: 1px solid rgba(214,182,115,.35); }
  #imprint a:hover { border-bottom-color: #d6b673; }
  #imprint .x { position: absolute; top: 10px; right: 12px; font: inherit; font-size: 24px; background: none; border: 0; cursor: pointer; color: #d6b673; }
  .rd { position: fixed; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
  .rd.on { opacity: 1; pointer-events: auto; }
  button.rd { font: inherit; background: none; border: 0; cursor: pointer; padding: 6px 10px; color: #d6b673; }
  .brand { transition: opacity .9s ease; }
  body.reading .brand, body.reading .foot { opacity: 0; pointer-events: none; }
  #rback { top: 26px; left: 22px; font-size: 18px; letter-spacing: .12em; }
  #rcount { bottom: 30px; left: 0; right: 0; text-align: center; font-size: 15px; letter-spacing: .25em; pointer-events: none; }
  #rcount.on { pointer-events: none; }
  #rhint { bottom: 58px; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; pointer-events: none; }
  #rhint.on { pointer-events: none; }
  button.rd.arrow { top: 50%; transform: translateY(-50%); font-size: 64px; line-height: 1; font-weight: 400; }
  #prev { left: 14px; } #next { right: 14px; }
  canvas#gl { touch-action: none; }
  #focus { position: fixed; inset: 0; background: rgba(10,9,8,.97); opacity: 0; pointer-events: none; transition: opacity .6s ease; touch-action: none; overflow: hidden; }
  #focus.on { opacity: 1; pointer-events: auto; }
  #fstage { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; display: flex; will-change: transform; box-shadow: 0 14px 50px rgba(0,0,0,.55); }
  #fstage img { display: block; user-select: none; -webkit-user-drag: none; background: #f5f2ea; }
  #fstage img.blank { visibility: hidden; }
  #focus button { position: absolute; font: inherit; background: none; border: 0; cursor: pointer; padding: 8px 12px; color: #d6b673; }
  #focus #fclose { top: 16px; right: 16px; font-size: 30px; }
  #focus #fprev, #focus #fnext { top: 50%; transform: translateY(-50%); font-size: 72px; line-height: 1; }
  #focus #fprev { left: 10px; } #focus #fnext { right: 10px; }
  #fcount { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 15px; letter-spacing: .25em; pointer-events: none; }
  @media (max-width: 700px) { button.rd.arrow { font-size: 48px; } #focus #fprev, #focus #fnext { top: auto; bottom: 4px; transform: none; font-size: 46px; } #focus #fcount { bottom: 20px; } #rback { font-size: 15px; } .brand { font-size: 14px; } .brand b { font-size: 24px; } .foot { height: auto; flex-direction: column; gap: 8px; padding: 14px 16px; font-size: 11px; letter-spacing: .18em; } .imprint { position: static; transform: none; } .links { position: fixed; top: 96px; left: 0; right: 0; transform: none; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 6px rgba(0,0,0,.8); } .label { bottom: 108px; } }
  #rtoc { top: 30px; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
  #focus #ftoc { top: 22px; left: 18px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
  #dots { position: fixed; left: 0; right: 0; bottom: 92px; display: flex; justify-content: center; gap: 12px; opacity: 0; pointer-events: none; transition: opacity .5s; }
  .carr { position: fixed; top: 50%; transform: translateY(-50%); font: 54px/1 'Cormorant Garamond', serif; background: none; border: 0; padding: 10px 12px; color: #d6b673; opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 2; }
  .carr.on { opacity: 1; pointer-events: auto; } #cprev { left: 2px; } #cnext { right: 2px; }
  #dots i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #c9a35a; transition: background .3s; }
  #dots i.on { background: #c9a35a; }
  #mreader { position: fixed; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #f6f3ec; color: #24221d; opacity: 0; pointer-events: none; transition: opacity .6s ease; z-index: 4; }
  #mreader.on { opacity: 1; pointer-events: auto; }
  /* während des Sprungs zum Inhaltsverzeichnis-Eintrag keine Eingaben (Daumen bricht sonst die Fahrt ab) */
  #mreader.busy { overflow-y: hidden; }
  #mreader.busy::after { content: ''; position: fixed; inset: 0; z-index: 5; }
  #mreader.wv { font-family: 'Open Sans', 'Nanum Myeongjo', sans-serif; }
  #mreader.poems { font-family: 'EB Garamond', 'Nanum Myeongjo', serif; }
  #mreader .bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #0a0908; }
  #mreader .bar button { font: 14px 'Cormorant Garamond', serif; letter-spacing: .14em; text-transform: uppercase; color: #cbb68c; background: none; border: 0; padding: 8px; }
  .mhead { padding: 40px 22px 22px; text-align: center; border-bottom: 1px solid #e2dccf; }
  .mhead h1 { margin: 0; font-weight: 400; font-size: 27px; }
  .mhead div { margin-top: 6px; color: #8a8174; font-style: italic; }
  #mbody section { position: relative; padding: 30px 22px 18px; border-bottom: 1px solid #e2dccf; }
  #mbody .pn { position: absolute; top: 9px; right: 14px; font-size: 11px; letter-spacing: .12em; color: #a8823f; }
  #mbody h2 { margin: 0 0 14px; font-size: 20px; font-weight: 600; line-height: 1.3; }
  #mreader.poems #mbody h2 { font-weight: 500; font-size: 22px; }
  #mbody p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.62; hyphens: auto; -webkit-hyphens: auto; }
  #mreader.poems #mbody p { font-size: 18.5px; }
  #mbody .poem p { margin: 0; line-height: 1.75; }
  #mbody figure { margin: -12px -22px 14px; }
  #mbody figure img { display: block; width: 100%; height: auto; background: #ebe6db; }
  #mbody figcaption { padding: 10px 22px 0; font-size: 13.5px; line-height: 1.45; color: #4d4840; }
  #mbody figcaption i { font-style: italic; }
  #mbody .hintz { color: #a8823f; font-size: 12px; letter-spacing: .08em; }
  .mtoc { list-style: none; margin: 0; padding: 0; }
  .mtoc button { display: flex; width: 100%; justify-content: space-between; align-items: baseline; gap: 12px; text-align: left; font: inherit; font-size: 16px; line-height: 1.35; color: #24221d; background: none; border: 0; border-bottom: 1px solid #e7e1d5; padding: 11px 0; }
  .mtoc small { display: block; font-size: 13px; font-style: italic; color: #8a7448; margin-top: 2px; }
  .mtoc em { font-style: normal; color: #8a7448; font-size: 14px; }
  #mscroll { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 9px 16px; border-radius: 20px;
             background: rgba(10,9,8,.82); color: #e3cf9f; font: 13px 'Cormorant Garamond', serif; letter-spacing: .16em; text-transform: uppercase;
             white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
  #mscroll.on { opacity: 1; }
  #mscroll b { display: inline-block; margin-left: 6px; font-weight: 400; animation: bob 1.4s ease-in-out infinite; }
  @keyframes bob { 50% { transform: translateY(4px); } }
  #mlight { position: fixed; inset: 0; z-index: 6; background: rgba(10,9,8,.97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s; touch-action: none; overflow: hidden; }
  #mlight.on { opacity: 1; pointer-events: auto; }
  #mlight img { max-width: 100%; max-height: 100%; transform-origin: center; will-change: transform; user-select: none; -webkit-user-drag: none; }
  #mlight button { position: absolute; top: 12px; right: 12px; font: 28px serif; color: #cbb68c; background: none; border: 0; padding: 8px 12px; }
  .toast { position: fixed; bottom: 90px; left: 0; right: 0; text-align: center; font-size: 22px; font-style: italic; opacity: 0; transition: opacity .6s; pointer-events: none; }
  /* deckt die ganze Seite ab, bis Schriften, Buchtexturen und das erste Bild fertig sind (app.js blendet aus) */
  .loading { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
             color: #d6b673; letter-spacing: .32em; font-size: 15px; text-transform: uppercase; transition: opacity .8s; }
  .loading svg { width: min(230px, 58vw); height: auto; overflow: visible; }

  /* Ladeanimation: sechs Formen nacheinander in je einer Farbe gezeichnet, jede wird schwarz, bevor die nächste beginnt;
     danach verschwimmt die Zeichnung ins weiße Papier und es beginnt von vorn (15 s) */
  .l-paper { fill: #f5f2ea; stroke: rgba(201,163,90,.35); stroke-width: .4; }
  .l-sh { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.05; stroke-width: 1.6; }
  .l-tri { animation: l-tri 15s infinite; }
  @keyframes l-tri { 0%,2.00%{stroke-dashoffset:1.05; stroke:#c8463a} 11.33%{stroke-dashoffset:0; stroke:#c8463a} 14.67%,100%{stroke-dashoffset:0; stroke:#1a1714} }
  .l-cir { animation: l-cir 15s infinite; }
  @keyframes l-cir { 0%,15.33%{stroke-dashoffset:1.05; stroke:#3b6fb6} 24.67%{stroke-dashoffset:0; stroke:#3b6fb6} 28.00%,100%{stroke-dashoffset:0; stroke:#1a1714} }
  .l-sqr { animation: l-sqr 15s infinite; }
  @keyframes l-sqr { 0%,28.67%{stroke-dashoffset:1.05; stroke:#d9a62a} 38.00%{stroke-dashoffset:0; stroke:#d9a62a} 41.33%,100%{stroke-dashoffset:0; stroke:#1a1714} }
  .l-dia { animation: l-dia 15s infinite; }
  @keyframes l-dia { 0%,42.00%{stroke-dashoffset:1.05; stroke:#3f8a63} 51.33%{stroke-dashoffset:0; stroke:#3f8a63} 54.67%,100%{stroke-dashoffset:0; stroke:#1a1714} }
  .l-hex { animation: l-hex 15s infinite; }
  @keyframes l-hex { 0%,55.33%{stroke-dashoffset:1.05; stroke:#7a4fa0} 64.67%{stroke-dashoffset:0; stroke:#7a4fa0} 68.00%,100%{stroke-dashoffset:0; stroke:#1a1714} }
  .l-semi { animation: l-semi 15s infinite; }
  @keyframes l-semi { 0%,68.67%{stroke-dashoffset:1.05; stroke:#d07a2c} 78.00%{stroke-dashoffset:0; stroke:#d07a2c} 81.33%,100%{stroke-dashoffset:0; stroke:#1a1714} }
  .l-drawing { animation: l-fade 15s infinite; }
  @keyframes l-fade { 0%,86.67%{opacity:1; filter:blur(0)} 96.67%,100%{opacity:0; filter:blur(3px)} }
  /* ohne Bewegung: fertiges Blatt mit allen sechs Formen */
  @media (prefers-reduced-motion: reduce) {
    .loading * { animation: none !important; }
    .l-sh { stroke-dashoffset: 0; stroke: #1a1714; }
  }