/* ==========================================================
   Papa Interactive Studios - v0.40C / V160C Dev Autopilot Report Repair
   
   3D-FIX (GPT-Lösung):
   1. Kein opacity auf .card-inner (flattet preserve-3d!)
   2. Kein overflow auf demselben Element wie perspective
   3. perspective lokal am .book-scene (nicht weit oben)
   4. visibility statt opacity für show/hide
   5. is-open bleibt aktiv als Breiten-Halter wenn is-flipped
   ========================================================== */

:root {
  --bg:        #030303;
  --text:      #f2ece2;
  --muted:     #a99f91;
  --gold:      #d8bc7a;
  --red:       #b90013;
  --panel:     rgba(12,10,9,0.94);
  --radius:    22px;
  --font:      "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif:     Georgia, "Times New Roman", serif;

  --spine-w:   142px;
  --cover-w:   336px;
  --book-h:    516px;
  --speed:     560ms;
  --ease:      cubic-bezier(.22, .8, .25, 1);
}

*,*::before,*::after { box-sizing:border-box; }
html { background:var(--bg); scrollbar-width:none; }
html::-webkit-scrollbar { display:none; }

body {
  min-height:100vh; margin:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(82,78,69,0.14) 0,transparent 36rem),
    radial-gradient(circle at 14% 38%,rgba(125,0,12,0.10) 0,transparent 26rem),
    linear-gradient(180deg,#030303 0%,#050404 46%,#030303 100%);
  color:var(--text); font-family:var(--font); line-height:1.55;
  overflow-x:hidden; scrollbar-width:none;
  display:flex; flex-direction:column;
}
body::-webkit-scrollbar { display:none; }
body::before { content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at center,transparent 40%,rgba(0,0,0,0.56) 100%); }

button { font:inherit; cursor:pointer; }
button:disabled { opacity:0.54; cursor:not-allowed; }
a { color:inherit; text-decoration:none; }
img { display:block; }

.site-shell { width:min(100%,1920px);min-height:100vh;margin:0 auto;padding:18px clamp(16px,3vw,54px) 0;display:flex;flex-direction:column;flex:1; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position:sticky;top:12px;z-index:500;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border:1px solid rgba(255,255,255,0.07);border-radius:999px;background:rgba(4,4,4,0.66);box-shadow:0 16px 52px rgba(0,0,0,0.48);backdrop-filter:blur(20px); }
.header-logo-link { display:inline-flex;align-items:center;gap:10px;min-width:0; }
.header-p-img { width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.80)); }
.header-wordmark { font-size:clamp(0.64rem,1vw,0.84rem);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(245,238,225,0.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.header-actions { display:flex;align-items:center;gap:8px; }

/* BUTTONS */
.nav-btn,.footer-btn,.bc-btn,.book-flip-button,.btn-primary,.btn-ghost,.primary-btn,.ghost-btn,.login-button,.pis-lang-trigger-btn {
  border:1px solid rgba(255,255,255,0.12);border-radius:999px;
  background:rgba(255,255,255,0.046);color:rgba(245,238,225,0.88);
  min-height:38px;padding:9px 14px;font-size:0.82rem;
  transition:transform 150ms ease,border-color 150ms ease,background 150ms ease;
}
.nav-btn:hover,.footer-btn:hover,.bc-btn:hover,.book-flip-button:hover,.btn-primary:hover,.btn-ghost:hover,.primary-btn:hover,.ghost-btn:hover,.login-button:hover,.pis-lang-trigger-btn:hover { transform:translateY(-1px);border-color:rgba(216,188,122,0.42);background:rgba(255,255,255,0.082); }
.login-btn.logged-in { border-color:rgba(87,207,127,0.34);color:rgba(186,245,204,0.92); }
.btn-primary,.primary-btn,.bc-btn.bc-primary { border-color:rgba(185,0,19,0.55);background:linear-gradient(135deg,rgba(185,0,19,0.96),rgba(90,0,10,0.92));color:#fff7ec;font-weight:700; }
.bc-btn.bc-locked { border-color:rgba(216,188,122,0.24);background:rgba(216,188,122,0.07);color:rgba(216,188,122,0.72); }
.bc-btn.bc-ghost,.btn-ghost,.ghost-btn { background:rgba(255,255,255,0.03); }

/* LANG DROPDOWN */
.lang-dropdown { position:relative; }
.lang-menu { position:absolute;top:calc(100% + 8px);right:0;display:none;width:196px;margin:0;padding:7px;list-style:none;border:1px solid rgba(255,255,255,0.10);border-radius:18px;background:rgba(7,6,5,0.97);box-shadow:0 22px 64px rgba(0,0,0,0.84);overflow:auto;scrollbar-width:none;z-index:600; }
.lang-menu::-webkit-scrollbar { display:none; }
.lang-dropdown.is-open .lang-menu { display:block; }
.lang-menu li { padding:9px 12px;border-radius:11px;color:rgba(245,238,225,0.76);cursor:pointer;font-size:0.87rem; }

.lang-menu li:hover,.lang-menu li.is-active { background:rgba(185,0,19,0.22);color:#fff; }

/* V160C inherits V160B shell fix: stunde-null.html uses the newer PIS language dropdown classes. */
.pis-lang-custom-dropdown { position:relative;display:inline-flex;align-items:center; }
.pis-lang-trigger-btn { min-height:38px;border:1px solid rgba(255,255,255,0.09);border-radius:999px;background:rgba(255,255,255,0.035);color:rgba(245,238,225,0.78);padding:9px 13px;font:inherit;font-size:0.82rem;font-weight:750;letter-spacing:0.06em;cursor:pointer; }
.pis-lang-trigger-btn:hover,.pis-lang-trigger-btn:focus-visible { border-color:rgba(216,188,122,0.38);background:rgba(255,255,255,0.075);outline:none; }
.pis-lang-menu-list { position:absolute;top:calc(100% + 8px);right:0;display:none;width:196px;margin:0;padding:7px;list-style:none;border:1px solid rgba(255,255,255,0.10);border-radius:18px;background:rgba(7,6,5,0.97);box-shadow:0 22px 64px rgba(0,0,0,0.84);overflow:auto;scrollbar-width:none;z-index:700; }
.pis-lang-menu-list::-webkit-scrollbar { display:none; }
.pis-lang-custom-dropdown.is-open .pis-lang-menu-list { display:block; }
.pis-lang-menu-list li { margin:0;padding:9px 12px;border-radius:11px;color:rgba(245,238,225,0.76);cursor:pointer;font-size:0.87rem; }
.pis-lang-menu-list li:hover,.pis-lang-menu-list li.is-active { background:rgba(185,0,19,0.22);color:#fff; }

/* ============================================================
   HERO
   ============================================================ */
.site-main { padding:clamp(20px,4vw,60px) 0 0;flex:1; }
.branding-hero { text-align:center;margin-bottom:clamp(30px,5vw,60px);padding:0 16px; }
.hero-haupttitel { margin:0 0 12px;font-family:var(--serif);font-size:clamp(1.6rem,4vw,3.2rem);font-weight:400;letter-spacing:-0.02em;color:rgba(245,232,210,0.52);line-height:1; }
.hero-dachmarke { margin:0;font-size:0.80rem;letter-spacing:0.3em;text-transform:uppercase;color:rgba(255,255,255,0.34);font-weight:400; }

/* ============================================================
   SHELF
   ============================================================ */
.shelf-section { position:relative;padding-bottom:clamp(70px,9vw,110px); }
.shelf-label-row { padding:0 clamp(20px,6vw,100px) 14px; }
.shelf-label { font-size:0.68rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:rgba(216,188,122,0.48); }

/* PERSPECTIVE STAGE: overflow:visible – kein scroll */
.shelf-perspective-stage {
  overflow:visible;
  position:relative;
}

/* SCROLL TRACK: overflow hier – KEIN perspective */
.shelf-track {
  display:flex;
  align-items:flex-end;
  flex-wrap:nowrap;
  gap:24px;
  padding:clamp(20px,3vw,50px) clamp(20px,6vw,100px) 28px;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.shelf-track::-webkit-scrollbar { display:none; }

.shelf-plinth { position:absolute;bottom:clamp(54px,7vw,82px);left:3%;right:3%;height:2px;background:linear-gradient(90deg,transparent 0%,rgba(216,188,122,0.08) 5%,rgba(216,188,122,0.30) 28%,rgba(255,255,255,0.16) 50%,rgba(216,188,122,0.30) 72%,rgba(216,188,122,0.08) 95%,transparent 100%);border-radius:2px;pointer-events:none; }

/* DIVIDER */
.shelf-divider { flex-shrink:0;height:var(--book-h);display:flex;align-items:stretch;padding:0 8px; }
.shelf-divider { flex-direction:column;align-items:center;justify-content:center;gap:6px;width:28px; }
.divider-line { flex:1;width:1px;background:linear-gradient(180deg,transparent,rgba(216,188,122,0.28),rgba(216,188,122,0.28),transparent);align-self:stretch; }
.divider-label { writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:0.56rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:rgba(216,188,122,0.34);white-space:nowrap; }

/* ============================================================
   BUCH-WRAPPER
   ============================================================ */
.book-wrap {
  position:relative;
  flex-shrink:0;
  width:var(--spine-w);
  height:var(--book-h);
  cursor:pointer;
  outline:none;
  /* Breiten-Transition */
  transition:width var(--speed) var(--ease), transform var(--speed) var(--ease);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  scroll-snap-align:center;
}
.book-wrap.is-open,
.book-wrap.is-flipped {
  width:var(--cover-w);
  transform:translate3d(0,-18px,0);
}
.book-dummy { opacity:0.72; }
.book-dummy.is-open,.book-dummy.is-flipped { opacity:1; }

/* ============================================================
   BUCHRÜCKEN
   ============================================================ */
.spine-face {
  position:absolute;
  inset:0 auto 0 0;
  width:var(--spine-w);
  height:100%;
  border-radius:14px;
  overflow:hidden;
  background-image:var(--spine-img);
  background-size:cover;
  background-position:center;
  opacity:1;
  visibility:visible;
  transition:opacity 180ms ease, visibility 0s linear 0s;
  z-index:3;
  box-shadow:
    0 20px 45px rgba(0,0,0,.45),
    inset 8px 0 18px rgba(255,255,255,.06),
    inset -10px 0 20px rgba(0,0,0,.45);
}
.book-wrap.is-open .spine-face,
.book-wrap.is-flipped .spine-face {
  opacity:0;
  visibility:hidden;
  transition:opacity 160ms ease, visibility 0s linear 160ms;
}

.spine-text-block {
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:16px 6px 14px;
  background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.10) 30%,rgba(0,0,0,0.10) 70%,rgba(0,0,0,0.55) 100%);
}

.spine-logo { width:clamp(28px,3vw,40px);height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.90));flex-shrink:0; }
.spine-logo-dim { opacity:0.45; }

.spine-serie {
  font-size:clamp(0.52rem,0.7vw,0.70rem);font-weight:900;letter-spacing:0.20em;text-transform:uppercase;
  color:rgba(216,188,122,0.95);text-shadow:0 1px 6px rgba(0,0,0,0.95);
  writing-mode:horizontal-tb;
  margin:4px 0;
}

.spine-divider-line { display:block;width:80%;height:1px;flex-shrink:0;background:linear-gradient(90deg,transparent,rgba(216,188,122,0.50),transparent);margin:3px 0; }

.spine-titel {
  font-family:var(--serif);font-size:clamp(0.78rem,1vw,0.94rem);font-weight:600;
  letter-spacing:0.08em;color:rgba(245,232,210,0.96);
  text-shadow:0 2px 10px rgba(0,0,0,0.96);
  writing-mode:horizontal-tb;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;
}

.spine-band {
  font-size:0.56rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(245,232,210,0.65);text-shadow:0 1px 6px rgba(0,0,0,0.95);
  writing-mode:horizontal-tb;
  margin-top:4px;
}

/* ============================================================
   BOOK SCENE – perspective HIER, lokal
   KEIN overflow, KEIN opacity auf card-inner
   ============================================================ */
.book-scene {
  position:absolute;
  left:0;top:0;
  width:var(--cover-w);
  height:100%;
  /* KRITISCH: perspective lokal am scene, nicht am scroll-container */
  perspective:1200px;
  perspective-origin:50% 50%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  /* KRITISCH: visibility statt opacity – opacity würde preserve-3d flatten! */
  visibility:hidden;
  pointer-events:none;
  z-index:2;
}
.book-wrap.is-open .book-scene,
.book-wrap.is-flipped .book-scene {
  visibility:visible;
  pointer-events:auto;
}

/* ============================================================
   CARD INNER – dreht sich
   KRITISCH: KEIN opacity hier! opacity < 1 flattet preserve-3d!
   ============================================================ */
.card-inner {
  position:absolute;
  inset:0;
  width:100%;height:100%;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform-origin:center center;
  transform:rotateY(-90deg);
  transition:transform var(--speed) var(--ease);
  will-change:transform;
}
.book-wrap.is-open .card-inner  { transform:rotateY(0deg); }
.book-wrap.is-flipped .card-inner { transform:rotateY(180deg); }

/* ============================================================
   CARD FACES
   ============================================================ */
.card-face {
  position:absolute;inset:0;
  width:100%;height:100%;
  border-radius:14px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  box-shadow:0 24px 60px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.08);
}

.card-front {
  background-image:var(--front-img);
  transform:rotateY(0deg) translateZ(0.6px);
  background-size:100%;
  transition:background-size 500ms ease;
}
.book-wrap.is-open .card-front {
  background-size:108%;
}

.card-back {
  background-image:var(--back-img);
  transform:rotateY(180deg) translateZ(0.6px);
  background-size:100%;
  transition:background-size 500ms ease;
}
.book-wrap.is-flipped .card-back {
  background-size:108%;
}

/* ============================================================
   FRONTSEITE TEXT
   ============================================================ */
.front-overlay {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:clamp(16px,2.2vw,24px);
  background:linear-gradient(180deg,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.20) 35%,transparent 55%,rgba(0,0,0,0.60) 100%);
  pointer-events:none;
}

.front-papa-logo {
  width:min(60%,150px);height:auto;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.96));
  mix-blend-mode:screen;
  align-self:center;
}
.front-papa-dim { opacity:0.38; }

.front-title-block { display:flex;flex-direction:column;gap:3px; }

.front-serie {
  /* PROJEKT DEI – Haupttitel, dominant, gold */
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.4vw,2.2rem);
  font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(216,188,122,0.96);
  text-shadow:0 2px 16px rgba(0,0,0,0.95), 0 0 30px rgba(216,188,122,0.20);
  line-height:1;
  margin-bottom:6px;
}

.front-titel {
  /* Stunde Null – Bandtitel, mittelgroß */
  margin:0;color:rgba(245,232,210,0.88);font-family:var(--serif);
  font-size:clamp(0.9rem,1.4vw,1.3rem);font-weight:400;
  line-height:1.1;letter-spacing:0.04em;
  text-shadow:0 2px 12px rgba(0,0,0,0.95);
}

.front-band {
  /* Band I – klein, dezent */
  font-size:0.60rem;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(245,232,210,0.50);text-shadow:0 2px 8px rgba(0,0,0,0.95);
  margin-top:6px;
}

/* ============================================================
   FLIP BUTTON – sitzt in .card-front
   ============================================================ */
.book-flip-button {
  position:absolute;
  bottom:16px;right:16px;
  transform:translateZ(10px);
  width:38px;height:38px;padding:0;
  background:rgba(8,7,6,0.82);
  border:1px solid rgba(216,188,122,0.40);
  color:rgba(216,188,122,0.90);
  font-size:1.1rem;
  border-radius:50%;
  opacity:0;pointer-events:none;
  transition:opacity 260ms ease 180ms,background 150ms,border-color 150ms,transform 150ms;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);
}
.book-wrap.is-open .book-flip-button {
  opacity:1;pointer-events:auto;
}
.book-flip-button:hover {
  background:rgba(185,0,19,0.90);
  border-color:rgba(185,0,19,0.80);
  color:#fff;
  transform:translateZ(10px) scale(1.1);
}

/* Versiegelt-Badge auf Dummies */
.dummy-sealed-badge {
  position:absolute;top:16px;right:16px;
  padding:4px 10px;
  border:1px solid rgba(216,188,122,0.30);border-radius:999px;
  background:rgba(0,0,0,0.72);backdrop-filter:blur(8px);
  color:rgba(216,188,122,0.70);font-size:0.60rem;font-weight:800;
  letter-spacing:0.16em;text-transform:uppercase;white-space:nowrap;
  pointer-events:none;
}

/* ============================================================
   BACKCOVER CONTENT
   ============================================================ */
.backcover-content {
  position:absolute;inset:0;
  display:flex;flex-direction:column;gap:clamp(5px,0.7vw,9px);
  padding:22px;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 40%,
    rgba(0,0,0,0.72) 100%
  );
  color:#f5ead8;overflow:hidden;
}
.bc-top { display:flex;align-items:center;gap:10px;margin-bottom:2px; }
.bc-logo { max-width:22px;height:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,0.68)); }
.bc-serie-label { margin:0;color:rgba(216,188,122,0.78);font-size:0.62rem;font-weight:800;letter-spacing:0.16em;text-transform:uppercase; }
.bc-band-label { margin:0;color:rgba(245,226,190,0.58);font-size:0.58rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase; }
.bc-titel { margin:0;color:#fff8ed;font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:500;line-height:0.96;letter-spacing:-0.03em; }
.bc-line { border:0;height:1px;margin:2px 0;background:linear-gradient(90deg,transparent,rgba(216,188,122,0.52),rgba(185,0,19,0.52),transparent); }
.bc-teaser { margin:0;color:rgba(247,236,217,0.88);font-size:clamp(0.72rem,0.86vw,0.82rem);line-height:1.54;flex:1;overflow:hidden; }
.bc-actions { display:flex;flex-wrap:wrap;gap:7px;margin-top:4px; }
.bc-btn { min-height:30px;padding:6px 10px;font-size:0.74rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { margin-top:auto;padding:clamp(40px,6vw,70px) 0 0; }
.footer-inner { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(20px,3vw,40px);padding:clamp(24px,3vw,36px) clamp(20px,4vw,60px);border-top:1px solid rgba(255,255,255,0.06); }
.footer-brand { display:flex;align-items:center;gap:16px; }
.footer-logo { width:36px;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.80));opacity:0.70; }
.footer-brand-text { display:flex;flex-direction:column;gap:2px; }
.footer-name { color:rgba(245,232,210,0.54);font-size:0.78rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase; }
.footer-copy { color:rgba(120,110,100,0.70);font-size:0.72rem; }
.footer-center { display:flex;flex-direction:column;align-items:center;gap:8px; }
.footer-btn { min-height:34px;padding:8px 16px;font-size:0.76rem;color:rgba(216,188,122,0.50);border-color:rgba(216,188,122,0.14);background:rgba(255,255,255,0.012);box-shadow:none;letter-spacing:0.06em; }
.footer-btn:hover { color:rgba(216,188,122,0.80);border-color:rgba(216,188,122,0.32); }
.footer-meta { display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right; }
.footer-build { color:rgba(120,110,100,0.55);font-size:0.72rem; }
.footer-build strong { color:rgba(150,140,128,0.65); }
.footer-firefox { color:rgba(216,188,122,0.22);font-size:0.65rem;letter-spacing:0.10em; }
.footer-bottom-line { padding:0 clamp(20px,4vw,60px) clamp(16px,2vw,24px); }
.footer-divider-line { display:block;height:1px;background:linear-gradient(90deg,transparent,rgba(185,0,19,0.22),rgba(216,188,122,0.12),rgba(185,0,19,0.22),transparent); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-backdrop { position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,0.78);backdrop-filter:blur(12px); }
.modal-card { position:relative;width:min(100%,600px);padding:clamp(22px,4vw,36px);border:1px solid rgba(255,255,255,0.09);border-radius:var(--radius);background:rgba(11,9,8,0.96);box-shadow:0 28px 88px rgba(0,0,0,0.56);backdrop-filter:blur(18px); }
.modal-x { position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,0.065);color:#fff;font-size:1.4rem; }
.modal-eye { margin:0 0 10px;color:rgba(216,188,122,0.72);font-size:0.72rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase; }
.modal-card h2 { margin:0 0 14px;font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.8rem);font-weight:500; }
.modal-card p,.modal-copy { color:rgba(239,228,210,0.74);font-size:0.94rem;line-height:1.6;margin:0 0 10px; }
.gate-label { display:block;margin:16px 0 7px;color:var(--muted);font-size:0.80rem;font-weight:750;text-transform:uppercase; }
.gate-input { width:100%;min-height:44px;border:1px solid rgba(255,255,255,0.10);border-radius:999px;background:rgba(0,0,0,0.36);color:#fff8ed;padding:11px 16px;outline:none;font:inherit; }
.gate-input:focus { border-color:rgba(216,188,122,0.44);box-shadow:0 0 0 4px rgba(216,188,122,0.08); }
.modal-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:16px; }

/* TOAST */
.toast { position:fixed;left:50%;bottom:22px;z-index:1200;max-width:min(94vw,560px);padding:12px 16px;border:1px solid rgba(255,255,255,0.10);border-radius:999px;background:rgba(9,8,7,0.94);color:#fff8ed;box-shadow:0 16px 50px rgba(0,0,0,0.66);opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:opacity 170ms ease,transform 170ms ease; }
.toast.visible { opacity:1;transform:translate(-50%,0); }
.toast[data-tone="success"] { border-color:rgba(103,214,136,0.34); }
.toast[data-tone="error"]   { border-color:rgba(255,77,98,0.36); }
.style-hidden { display:none!important; }
.modal-open   { overflow:hidden; }

/* ============================================================
   READER PAGE
   ============================================================ */
.book-reader-main{padding:clamp(26px,5vw,80px) 0 50px;}
.reader-intro{max-width:830px;margin:0 auto clamp(28px,4vw,58px);text-align:center;}
.reader-intro h1{margin:0;color:#fff8ed;font-family:var(--serif);font-size:clamp(2.1rem,6vw,5.2rem);font-weight:500;line-height:0.98;letter-spacing:-0.045em;}
.reader-intro p{max-width:700px;margin:18px auto 0;color:rgba(227,216,198,0.70);font-size:clamp(0.98rem,1.5vw,1.16rem);}
.reader-grid{display:grid;grid-template-columns:minmax(210px,0.7fr) minmax(340px,1.8fr);gap:clamp(18px,3vw,34px);align-items:stretch;}
.reader-status-card,.reader-action-panel,.developer-hq,.alpha-book-page{border:1px solid rgba(255,255,255,0.09);border-radius:var(--radius);background:var(--panel);box-shadow:0 30px 90px rgba(0,0,0,0.54);backdrop-filter:blur(18px);}
.reader-status-card{padding:24px;}
.reader-status-card h2,.developer-hq h2{margin:0 0 18px;font-family:var(--serif);font-weight:500;}
.reader-status-card dl{display:grid;gap:14px;margin:0;}
.reader-status-card dt{color:var(--muted);font-size:0.73rem;letter-spacing:0.15em;text-transform:uppercase;}
.reader-status-card dd{margin:3px 0 0;color:#fff8ed;font-weight:750;}
.alpha-book-stage{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:clamp(420px,48vw,620px);perspective:1400px;}
.alpha-book-page{padding:clamp(24px,4vw,54px);}
.left-page{border-top-right-radius:4px;border-bottom-right-radius:4px;background:radial-gradient(circle at 20% 10%,rgba(216,188,122,0.10),transparent 32%),linear-gradient(90deg,rgba(17,14,11,0.98),rgba(11,10,9,0.95));}
.right-page{border-top-left-radius:4px;border-bottom-left-radius:4px;background:radial-gradient(circle at 80% 30%,rgba(185,0,19,0.12),transparent 34%),linear-gradient(90deg,rgba(10,9,8,0.98),rgba(18,15,12,0.96));}
.alpha-book-stage.flipping .right-page{animation:pagePulse 920ms ease;}
@keyframes pagePulse{0%{transform:rotateY(0deg);filter:brightness(1);}50%{transform:rotateY(-8deg);filter:brightness(1.24);}100%{transform:rotateY(0deg);filter:brightness(1);}}
.alpha-book-page h2{margin:0 0 22px;font-family:var(--serif);font-size:clamp(2rem,4vw,4rem);font-weight:500;line-height:1;}
.alpha-book-page p{color:rgba(242,230,210,0.78);font-size:clamp(1rem,1.5vw,1.2rem);}
.page-number{margin:0 0 26px;color:rgba(216,188,122,0.52)!important;font-size:0.82rem!important;font-weight:800;letter-spacing:0.2em;text-align:right;}
.reader-action-panel{grid-column:2;display:grid;gap:12px;padding:18px;}
.story-input-label{color:var(--muted);font-size:0.82rem;font-weight:750;letter-spacing:0.13em;text-transform:uppercase;}
.story-input-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;}
.story-action-input{width:100%;min-height:46px;border:1px solid rgba(255,255,255,0.10);border-radius:999px;background:rgba(0,0,0,0.34);color:#fff8ed;padding:12px 16px;outline:none;}
.story-action-input:focus{border-color:rgba(216,188,122,0.46);box-shadow:0 0 0 4px rgba(216,188,122,0.08);}
.developer-hq{margin-top:28px;padding:24px;}
.dev-hq-head{display:flex;align-items:center;justify-content:space-between;gap:18px;}
.dev-panic-button{min-height:42px;border:1px solid rgba(255,61,81,0.46);border-radius:999px;background:rgba(185,0,19,0.22);color:#ffd8d8;padding:10px 15px;}
.dev-panic-button.triggered{background:rgba(185,0,19,0.78);}
.dev-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0;}
.dev-status-grid div{padding:14px;border:1px solid rgba(255,255,255,0.075);border-radius:16px;background:rgba(255,255,255,0.032);}
.dev-status-grid span{display:block;color:var(--muted);font-size:0.72rem;text-transform:uppercase;}
.dev-status-grid strong{display:block;margin-top:5px;color:#fff6e8;}
.dev-json-log{max-height:340px;overflow:auto;margin:0;padding:16px;border-radius:18px;background:rgba(0,0,0,0.45);color:rgba(200,239,207,0.86);font-size:0.78rem;white-space:pre-wrap;}
.danger-text,.dev-stat-red{color:#ff6c7b!important;}
.dev-stat-green{color:#9ef1b8!important;}
.privacy-note{color:rgba(218,207,190,0.62);font-size:0.84rem;}
.section-eyebrow{margin:0 0 10px;color:rgba(216,188,122,0.76);font-size:0.74rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px) {
  .site-header{flex-direction:column;align-items:stretch;border-radius:24px;}
  .header-actions{flex-wrap:wrap;justify-content:center;}
  .footer-inner{grid-template-columns:1fr;text-align:center;gap:24px;}
  .footer-brand{justify-content:center;}
  .footer-meta{align-items:center;text-align:center;}
  .reader-grid{grid-template-columns:1fr;}
  .reader-action-panel{grid-column:auto;}
  .alpha-book-stage{grid-template-columns:1fr;}
}
@media (max-width:640px) {
  .site-shell{padding-inline:10px;}
  :root{--spine-w:98px;--cover-w:264px;--book-h:432px;}
  .shelf-track{gap:14px;padding-left:14px;padding-right:14px;}
  .story-input-row{grid-template-columns:1fr;}
  .front-papa-logo{width:min(55%,120px);}
}
@media (max-width:380px) {
  :root{--spine-w:82px;--cover-w:226px;--book-h:380px;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important;scroll-behavior:auto!important;}
}
/* Manifest Modal Text */
.manifest-text { color:rgba(239,228,210,0.78); font-size:0.92rem; line-height:1.70; margin:0 0 12px; }
.manifest-claim { font-style:italic; color:rgba(216,188,122,0.80); font-weight:600; margin-top:16px; }
/* Spine bottom text group - horizontal layout */
.spine-bottom-group {
  display:flex;flex-direction:column;
  align-items:flex-start;
  width:100%;
  padding:0 8px 8px;
  gap:2px;
}


/* ============================================================
   V160C - Dev autopilot/report repair retains V160B landing and floating dev window shell
   Preserves existing shelf/frontcover artwork.
   ============================================================ */
.v160-playable-main {
  width: min(1180px, 94vw);
  margin: 0 auto;
  padding: 34px 0 54px;
}
.v160-hero {
  border: 1px solid rgba(201,162,39,.22);
  background: linear-gradient(135deg, rgba(16,12,10,.94), rgba(3,3,3,.96));
  padding: clamp(22px, 4vw, 42px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.v160-hero h1 {
  font-family: var(--serif, 'Playfair Display', serif);
  font-size: clamp(2.1rem, 5vw, 4.5rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(236,214,154,.96);
  margin: 0 0 10px;
}
.v160-hero p {
  color: rgba(238,228,205,.72);
  max-width: 820px;
  line-height: 1.65;
}
.v160-shell-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
}
.v160-card {
  border: 1px solid rgba(201,162,39,.22);
  background: rgba(10,8,7,.88);
  padding: 18px;
}
.v160-card h2 {
  font-family: var(--serif, 'Playfair Display', serif);
  color: rgba(236,214,154,.90);
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.v160-role-select, .v160-worker-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,162,39,.25);
  color: rgba(238,228,205,.94);
  padding: 10px 11px;
  margin: 8px 0 12px;
}
.v160-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: rgba(238,228,205,.74);
  font-size: .94rem;
  line-height: 1.45;
  margin: 12px 0;
}
.v160-status-line {
  color: rgba(238,228,205,.66);
  font-size: .86rem;
  line-height: 1.55;
  margin-top: 10px;
}
.v160-status-line strong { color: rgba(236,214,154,.95); }
.v160-game-frame {
  display: none;
  margin-top: 24px;
  border: 1px solid rgba(201,162,39,.24);
  background: rgba(0,0,0,.82);
  min-height: 720px;
}
.v160-game-frame.is-visible { display: block; }
#papa-game-root { min-height: 720px; }

/* V160C inherits V160B shell fix: once the playable app is active, portal chrome must not overlay the game. */
body.papa-game-active .site-shell { width:100%;max-width:none;padding:0; }
body.papa-game-active .site-header,
body.papa-game-active .v160-hero,
body.papa-game-active #v160-boot-panel,
body.papa-game-active .pis-footer { display:none!important; }
body.papa-game-active .v160-playable-main { width:100%;max-width:none;margin:0;padding:0; }
body.papa-game-active .v160-game-frame { display:block;min-height:100vh;border:0;border-radius:0;background:#030303;box-shadow:none;padding:0; }
body.papa-game-active #papa-game-root { min-height:100vh; }
.v160-game-error {
  padding: 24px;
  color: #f0dcc0;
  background: #150f0e;
  border: 1px solid rgba(201,162,39,.35);
  font-family: Georgia, serif;
}
.v160-note-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(238,228,205,.68);
  line-height: 1.6;
}
@media (max-width: 820px) {
  .v160-shell-grid { grid-template-columns: 1fr; }
  .v160-playable-main { width: min(94vw, 720px); padding-top: 22px; }
  .v160-game-frame, #papa-game-root { min-height: 640px; }
}


/* ============================================================
   V160C - retained Gate/Landing and Dev-Window Shell polish
   ============================================================ */
.v160b-playable-main { width:min(94vw,1360px); }
.v160b-landing {
  position:relative;
  min-height:clamp(380px,52vh,680px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-color:rgba(216,188,122,0.20);
  background:
    linear-gradient(90deg,rgba(0,0,0,0.94) 0%,rgba(0,0,0,0.70) 34%,rgba(0,0,0,0.28) 72%,rgba(0,0,0,0.84) 100%),
    url("./assets/band1/front.png") center / cover no-repeat;
}
.v160b-landing::before {
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 72% 38%,rgba(216,188,122,0.14),transparent 32%),linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.82) 100%);
  pointer-events:none;
}
.v160b-landing-shade { position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.14),rgba(0,0,0,0.82)); }
.v160b-landing-copy { position:relative;z-index:1;max-width:760px;padding:clamp(28px,5vw,72px); }
.v160b-landing h1 { text-shadow:0 12px 48px rgba(0,0,0,0.76); }
.v160b-hero-line { max-width:620px;font-size:clamp(1.05rem,1.4vw,1.34rem)!important;line-height:1.7!important;color:rgba(248,237,212,0.86)!important; }
.v160b-shell-grid { align-items:stretch;grid-template-columns:minmax(320px,0.86fr) minmax(420px,1.14fr); }
.v160b-start-card,.v160b-info-card { background:linear-gradient(145deg,rgba(15,12,9,0.92),rgba(4,3,3,0.90));backdrop-filter:blur(18px); }
.v160b-start-card h2,.v160b-info-card h2 { margin-top:0;font-size:clamp(1.35rem,2.5vw,2.2rem); }
.v160b-action-row { display:flex;flex-wrap:wrap;gap:10px;margin-top:14px; }
.v160b-action-row .primary-btn,.v160b-action-row .ghost-btn { min-height:44px;padding:11px 18px; }
.v160b-tech-details { margin-top:18px;border:1px solid rgba(216,188,122,0.16);border-radius:18px;background:rgba(0,0,0,0.22);padding:12px 14px; }
.v160b-tech-details summary { cursor:pointer;color:rgba(216,188,122,0.78);font-weight:750;letter-spacing:0.08em;text-transform:uppercase;font-size:0.76rem; }
.v160b-tech-details[open] summary { margin-bottom:10px; }
.modal-card .primary-btn,.modal-card .ghost-btn { border-radius:999px;min-height:42px;padding:10px 16px; }
.login-button.logged-in { border-color:rgba(87,207,127,0.34);color:rgba(186,245,204,0.92); }

/* stunde-null.html – class aliases not present in index.html */
.modal-kicker { margin:0 0 10px;color:rgba(216,188,122,0.72);font-size:0.72rem;font-weight:800;letter-spacing:0.22em;text-transform:uppercase; }
.header-p-icon { width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.80)); }
.header-link { color:rgba(216,188,122,0.78);font-size:0.82rem;font-weight:700;letter-spacing:0.06em;text-decoration:none;padding:6px 10px;border-radius:8px;transition:color 0.18s,background 0.18s; }
.header-link:hover { color:rgba(216,188,122,1);background:rgba(255,255,255,0.06); }
.book-shell { background:#030303; }
.gate-card { max-width:420px; }
.footer-action-stack { display:flex;flex-direction:column;gap:8px;align-items:flex-start; }
.pis-footer-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;padding:32px 24px;max-width:1200px;margin:0 auto;color:rgba(216,188,122,0.54);font-size:0.82rem;line-height:1.65; }
@media (max-width:720px) { .pis-footer-grid { grid-template-columns:1fr;gap:16px; } }

.v160-status-line[data-tone="ok"] { color:rgba(166,238,188,0.92); }
.v160-status-line[data-tone="warn"] { color:rgba(255,222,152,0.95); }
.v160-status-line[data-tone="error"] { color:rgba(255,155,145,0.95); }

@media (max-width:920px) {
  .v160b-shell-grid { grid-template-columns:1fr; }
  .v160b-landing { min-height:420px;background-position:center top; }
  .v160b-landing-copy { padding:28px 20px; }
}


/* PAPA166C_FRONTEND_FIX: Spine-first Regression Guard */
.book-wrap:not(.is-open):not(.is-flipped) .spine-face {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.book-wrap:not(.is-open):not(.is-flipped) .book-scene {
  visibility: hidden !important;
  pointer-events: none !important;
}
.book-wrap:not(.is-open):not(.is-flipped) .card-inner {
  transform: rotateY(-90deg) !important;
}
.book-wrap:not(.is-open):not(.is-flipped) {
  width: var(--spine-w) !important;
  transform: none !important;
}