@font-face{font-family:"Hannes Handschrift";src:url("assets/caveat-variable.ttf") format("truetype");font-style:normal;font-weight:400 700;font-display:swap}
/* Scroll-Comic „Im Auge behalten“ (Vorschau).
   Ruhige Fassung (ohne JavaScript, reduzierte Bewegung, zu wenig Platz): alle sechs Szenen untereinander,
   dazwischen Eröffnungstext und Hannes Notizen. Die Bühne (.is-story) setzt das Skript comic-scroll.js:
   Bewegt wird nur das Bild; Sprechblasen erscheinen erst bei ruhender Kamera in ihrer geprüften Lage. */
.comic-scroll .prototype-note{font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--muted);max-width:760px;margin-top:18px}
.comic-scroll .prototype-note a{white-space:nowrap}
.comic-scroll .story-hint{display:none}
.comic-scroll .avatar{background-image:url("comic-scroll/panel-03.webp")}

/* Ruhige Fassung: eine Spalte in Lesereihenfolge. */
.comic-scroll .panels{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}

/* Erzähltext im Stil eines Comic-Kastens. */
.comic-scroll .story-caption,.comic-scroll .fx-caption{margin:0;padding:10px 13px;background:#fff3c4;color:#111;border:1px solid #111;font-family:"Komika Text",cursive;font-size:14px;line-height:1.3;text-transform:uppercase;letter-spacing:.01em}

/* Hannes Notizbuch: liniertes Papier mit Randlinie. */
.comic-scroll .story-note,.comic-scroll .fx-note,.comic-scroll .notebook,.comic-scroll .ending-notebook{
 --rule:28px;background-color:#fffdf6;color:#243b59;border:1px solid #c9c1b0;
 background-image:linear-gradient(90deg,transparent 30px,rgba(255,74,28,.45) 30px,rgba(255,74,28,.45) 31px,transparent 31px),repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule) - 1px),#dcd5c6 calc(var(--rule) - 1px),#dcd5c6 var(--rule));
 padding:0 14px var(--rule) 42px;font-family:"Hannes Handschrift",cursive;font-weight:500;font-size:24px;line-height:var(--rule)}
.comic-scroll .note-label{display:block;font-family:"Hannes Handschrift",cursive;font-weight:700;font-size:23px;letter-spacing:0;text-transform:none;color:#243b59;line-height:var(--rule)}
/* Schrift auf den Linien: Innenabstände und Zeilenhöhe sind Vielfache der Linienhöhe. */
.comic-scroll .story-note p,.comic-scroll .fx-note p,.comic-scroll .notebook p,.comic-scroll .ending-notebook li{margin:0}
.comic-scroll .ending-notebook li+li{margin-top:var(--rule)}
.comic-scroll .ending-notebook{display:none;max-width:640px;margin:0 0 22px}
.comic-scroll:not(.is-story) .fx-caption,.comic-scroll:not(.is-story) .fx-note{display:none}
.comic-scroll .ending-notebook ul,.comic-scroll .notebook ul{list-style:none;margin:0;padding:0}

@media screen{
 .comic-scroll.is-story .story-hint{display:block}
 .comic-scroll.is-story .story-caption,.comic-scroll.is-story .story-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;padding:0;border:0}
 .comic-scroll.is-story .story-track{position:relative;height:var(--track-h)}
 .comic-scroll.is-story .story-stage{position:sticky;top:var(--stage-top);display:flex;justify-content:center;align-items:flex-start;gap:var(--side-gap,0)}
 .comic-scroll.is-story .panels{position:relative;display:grid;grid-template-columns:100%;width:var(--stage-w);max-width:none;margin:0;gap:0;flex:0 0 auto}
 /* Jedes Panel in eigener Höhe, unten bündig: Bilder liegen beim Überblenden deckungsgleich. */
 .comic-scroll.is-story .panel{grid-area:1/1;align-self:end;opacity:0;background:transparent;border-color:transparent;overflow:visible}
 /* Gemeinsamer Bühnenrahmen; seine Oberkante (--frame-top) gleitet beim Szenenwechsel mit dem Titel. */
 .comic-scroll.is-story .panels::after{content:"";position:absolute;inset:var(--frame-top,0) 0 0;border:1px solid var(--ink);pointer-events:none;z-index:5}
 .comic-scroll.is-story .panel[data-head-hidden] .panel-head{visibility:hidden}
 .comic-scroll.is-story .art{overflow:hidden}
 .comic-scroll.is-story .speech,.comic-scroll.is-story .tails path{transition:opacity .22s ease-out}
 .comic-scroll.is-story .speech[data-hidden],.comic-scroll.is-story .tails path[data-hidden]{opacity:0}
 /* Eingeblendete Texte auf der Bühne: nur während Kamerafahrten, nie zusammen mit Sprechblasen. */
 .comic-scroll .fx-caption,.comic-scroll .fx-note{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;opacity:0;pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
 .comic-scroll .fx-caption{right:auto;max-width:calc(100% - 20px)}
 .comic-scroll .fx-note{font-size:23px;--rule:28px;padding-bottom:6px}
 /* Breite Bildschirme: Notizbuch als Spalte neben der Bühne, Einträge kommen nacheinander dazu. */
 .comic-scroll .notebook{display:none}
 /* Höhe aus der Bühne abgeleitet (--stage-h), damit das Notizbuch die Bühne nie in die Höhe zieht. */
 .comic-scroll.is-story.has-side .notebook{display:block;width:var(--note-w);overflow:hidden;flex:0 0 auto;box-sizing:border-box;margin-top:var(--frame-top,0px);height:calc(var(--stage-h) - var(--frame-top,0px));font-size:23px;--rule:28px}
 .comic-scroll .notebook li{opacity:0;transform:translateY(6px);transition:opacity .35s ease-out,transform .35s ease-out;margin:0 0 var(--rule)}
 .comic-scroll .notebook li[data-shown]{opacity:.62;transform:none}
 .comic-scroll .notebook li[data-current]{opacity:1}
 .comic-scroll.is-story:not(.has-side) .ending-notebook{display:block}
}

/* Hannes gezeichnetes Spiralheft mit gewählter Handschrift 4b. */
.comic-scroll .story-note,.comic-scroll .fx-note,.comic-scroll .notebook,.comic-scroll .ending-notebook{
 border:0;border-radius:5px 10px 7px 3px / 8px 4px 12px 5px;
 background-color:#fff8e5;
 background-image:linear-gradient(90deg,rgba(116,91,48,.13),transparent 48px),linear-gradient(90deg,transparent 36px,#cd9e8c 36px,#cd9e8c 37px,transparent 37px),repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule) - 1px),#cdd5cf calc(var(--rule) - 1px),#cdd5cf var(--rule));
 background-position:0 14px;box-shadow:3px 4px 0 #a58d61,4px 5px 0 #453d30;
 padding:14px 18px 22px 48px;font-weight:400;font-feature-settings:"calt" 1,"liga" 1,"dlig" 1,"ss01" 1;letter-spacing:.005em;
}
.comic-scroll .story-note,.comic-scroll .notebook,.comic-scroll .ending-notebook{position:relative}
.comic-scroll .story-note::before,.comic-scroll .fx-note::before,.comic-scroll .notebook::before,.comic-scroll .ending-notebook::before{
 content:"";position:absolute;left:4px;top:7px;bottom:10px;width:28px;background:url("notizbuch-bindung.svg") repeat-y;pointer-events:none;
}
.comic-scroll .story-note::after,.comic-scroll .fx-note::after,.comic-scroll .notebook::after,.comic-scroll .ending-notebook::after{
 content:"";position:absolute;inset:0;background:url("notizbuch-papier.svg") center/100% 100% no-repeat;pointer-events:none;
}
.comic-scroll .note-label{font-weight:500}
.comic-scroll .story-note p,.comic-scroll .fx-note p,.comic-scroll .notebook p,.comic-scroll .ending-notebook li,.comic-scroll .note-label{transform:skewX(-4deg);transform-origin:center}
.comic-scroll .story-note p:nth-of-type(2n),.comic-scroll .fx-note p:nth-of-type(2n),.comic-scroll .notebook p:nth-of-type(2n),.comic-scroll .ending-notebook li:nth-child(2n){font-feature-settings:"calt" 1,"liga" 1,"dlig" 1,"ss01" 0,"ss02" 1}
.comic-scroll:not(.is-story) .story-note{margin:6px 4px 12px 0}