/* feste Panelbreite */
#scrollPanel{
  --w: 45vw;          /* Panelbreite immer 45vw */
  --paper-w: 640px;   /* Zielbreite des Papiers (an SVG-Design anpassen) */
  --paper-bg: #efe6cf;

  position: fixed; inset: 0 0 0 auto; width: var(--w); max-width: 100%;
  display: none; z-index: 1000; background: rgba(0,0,0,.25);
}
#scrollPanel.is-open{ display:block; }

/* Close-Button sicher anklickbar */
.scroll-close{ z-index: 10001; }

/* Auch bei offenem Panel bleibt Canvas anklickbar */
body.ui-mode .a-canvas,
body.ui-mode canvas.a-canvas,
body.ui-mode canvas{
  pointer-events: auto !important;
}

.scroll-card{
  position: absolute; right: 0; top: 0; bottom: 0; width: var(--w); max-width: 100%;
  display: grid; place-items: start center;
  transform: translateX(100%); transition: transform .35s ease;
  box-shadow: -18px 0 36px rgba(0,0,0,.28);
}
#scrollPanel.is-open .scroll-card{ transform: translateX(0); }

/* Papier exakt begrenzen */
.paper-wrap{
  width: min(var(--paper-w), calc(var(--w) - 32px));
  margin: 14px 16px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.20));
background: var(--paper-bg);
  border-left: 10px solid #d7c9a3;
  border-right: 10px solid #d7c9a3;
  overflow: hidden;              /* -> keine sichtbare Naht */
}
.scroll-top, .scroll-bottom{ display:block; width:100%; height:80px; object-fit:contain; }
.scroll-bottom{ transform: none; } /* eigenes bottom-SVG wird genutzt */

/* Papierfläche */
.scroll-paper{
  background: var(--paper-bg);
  background-image:
    radial-gradient(120% 160% at 0% 100%, rgba(0,0,0,.05), transparent 45%),
    radial-gradient(160% 120% at 100% 0%, rgba(0,0,0,.05), transparent 40%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.022) 0 2px, transparent 2px 6px);
  color:#2b241a;
   border-left: none;
  border-right: none;
  padding: 10px 18px 16px 20px;
  max-height: calc(100dvh - 176px); /* 2x 80px + Abstände */
  overflow: auto;
  transform-origin: top center; /* für Auf/Zu-Animation */
}
/* 2.1: Kein Backdrop mehr, und Clicks außerhalb durchlassen */
#scrollPanel {
  background: transparent !important;  /* statt halbtransparentem Overlay */
  pointer-events: none;                /* Ebene selbst fängt NICHTS mehr */
}

/* 2.2: Nur die eigentliche Panel-Fläche bleibt interaktiv */
#scrollPanel .scroll-paper,            /* deine Panel-Innenfläche */
#scrollPanel .scroll-close,
#scrollPanel .scroll-window,           /* falls vorhanden */
#scrollPanel .scroll-content {         /* falls vorhanden */
  pointer-events: auto;
}

/* 2.3: Panel bleibt oben (wie gehabt) */
#scrollPanel { z-index: 10000; }
.scroll-close { z-index: 10001; }

/* Auf-/Zu-rollen */
#scrollPanel.is-rolling-in  .scroll-paper{ animation: rollDown .42s ease-out both; }
#scrollPanel.is-rolling-out .scroll-paper{ animation: rollUp   .36s ease-in  both; }
@keyframes rollDown { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rollUp   { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* Kopfzeile */
.scroll-head{ display:flex; align-items:center; gap:.75rem; margin:.25rem 0 .5rem; }
.scroll-title{ font: 700 20px/1.25 Georgia,serif; color:#3a2f22; margin:0; letter-spacing:.2px; }
.scroll-close{
  border:0; background:none; cursor:pointer; padding:0 .35em; line-height:1;
  min-width:36px; height:36px; border-radius:10px; font: 700 22px/1 Georgia,serif; color:#3a2f22;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.scroll-close:hover{ background:#e4d6b4; }

/* Textformatierung */
.scroll-body{ font: 16px/1.6 Georgia,serif; max-width: 68ch; margin: 0 auto; }
.scroll-body h2{ font-size: 19px; line-height:1.35; margin: .8em 0 .35em; font-weight:700; color:#3a2f22; }
.scroll-body h3{ font-size: 17px; line-height:1.4;  margin: .7em 0 .35em; font-weight:700; color:#3a2f22; }
.scroll-body p { margin: .45em 0; }
.scroll-body hr{ border:0; border-top:1px solid #ccbda0; margin: 1em 0; }
.scroll-body strong{ font-weight:700; }
.scroll-body em{ font-style:italic; }
.scroll-body u { text-decoration: underline; text-underline-offset: .17em; }


/* ===== Responsive Panel-Breite & Layout ===== */

/* Standard: ca. 50% Breite auf großen Screens */
#scrollPanel { --w: 50vw; }

/* Phone/kleinere Tablets: volle Breite, sichere Abstände für Notches */
@media (max-width: 820px) {
  #scrollPanel { 
    inset: 0;            /* statt "rechts andocken" -> ganze Viewport-Breite */
    --w: 100vw;          /* volle Breite */
  }
  .scroll-card { width: 100vw; }

  .paper-wrap{
    /* engerer Rand; respektiert Safe-Area (iOS-Notch) */
    margin: max(10px, env(safe-area-inset-top)) 12px 12px 12px;
    width: calc(100vw - 24px);
  }

  /* etwas mehr nutzbare Höhe auf Phones */
  .scroll-paper{
    max-height: calc(100dvh - 140px - env(safe-area-inset-top));
  }
}

/* ===== Sticky-Header im Panel ===== */
.scroll-head{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-bg);
  padding: 8px 12px;
  border-bottom: 1px solid #ccbda0;
}

/* X-Button gut tappbar – besonders auf kleineren Displays */
.scroll-close{
  min-width: 36px; height: 36px; border-radius: 10px;
}
@media (max-width: 820px){
  .scroll-close{ min-width: 40px; height: 40px; }
}

/* ===== Typo skaliert mit Viewport, bleibt auf Desktop angenehm ===== */
.scroll-title{ font-size: clamp(18px, 4.8vw, 20px); }

.scroll-body{
  font-size: clamp(14px, 3.6vw, 16px);
  line-height: 1.55;  /* etwas dichter als 1.6 */
  max-width: 68ch;    /* Leselänge bleibt gut, auch bei voller Breite */
}