/* Josef Knoll, Portfolio. Weiß, Schwarz, Zinnoberrot #E2231A, Non-Photo-Blau #A4DDED (Comic).
   Schriften: Relief SingleLine (Fließtext, Plotter), Duerer1525 (Titel, Versalien nach der Underweysung 1525), DuererHand (Betonungen, nach Dürers Briefen 1506). */
@font-face{font-family:"Relief";src:url(fonts/Relief-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Duerer";src:url(fonts/Duerer-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Duerer";src:url(fonts/Duerer-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Duerer Sans";src:url(fonts/Duerer-Sans.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Duerer1525";src:url(fonts/Duerer1525.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"DuererHand";src:url(fonts/DuererHand.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --red:#E2231A; --blue:#A4DDED; --blue-ink:#3F97B8; --ink:#000; --paper:#fff; --grey:#6b6b6b; --line:#000; --hair:#e5e5e5; --green:#00A651;
  --gutter:clamp(16px,3vw,40px);
  --body:"Relief","Helvetica Neue",Helvetica,Arial,sans-serif;
  --head:"Duerer1525","Duerer","Times New Roman",serif;
  --sans:"Duerer Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --acc:"DuererHand","Duerer1525",cursive;
  --mono:"Courier New",Courier,monospace;
  --accent:var(--red);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:clamp(17px,1.15vw,20px);line-height:1.5;cursor:url(bird.png) 4 4,auto}
a{color:var(--accent);text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1.5px}
a:hover{background:var(--accent);color:#fff;text-decoration:none}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--red);color:#fff}
h1,h2,h3,.hero,.mark{font-family:var(--head);font-weight:400;letter-spacing:.02em;text-transform:uppercase}
i,em,cite{font-family:var(--acc);font-style:normal;font-size:1.12em}
sup{font-size:.72em;line-height:0;vertical-align:super;color:var(--red);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700}   /* Duerer Sans hat keine Ziffern: Ziffern ausdrücklich aus einer Schrift mit Ziffern */
.n{color:var(--grey)}

/* Kopf */
.top{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:2px solid var(--line);display:flex;align-items:center;gap:var(--gutter);padding:10px var(--gutter);flex-wrap:wrap}
.mark{line-height:.85;font-size:28px;text-decoration:none;color:var(--ink)}
.mark:hover{background:none;color:var(--red)}
.mark span{display:block}
nav.tabs{display:flex;gap:clamp(10px,2vw,28px);flex-wrap:wrap;font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(14px,1.05vw,18px)}
nav.tabs a{color:var(--ink);text-decoration:none;padding:2px 0;border-bottom:3px solid transparent}
nav.tabs a:hover{background:none;color:var(--red);border-bottom-color:var(--red)}
nav.tabs a.on{border-bottom-color:var(--ink)}
.langs{margin-left:auto;display:flex;gap:10px;font-size:13px;font-family:var(--sans);letter-spacing:.08em}
.langs a{text-decoration:none;color:var(--ink);padding:2px 5px;border:1.5px solid var(--ink)}
.langs a.on,.langs a:hover{background:var(--red);color:#fff;border-color:var(--red)}
@media (max-width:700px){
  .top{gap:8px 12px;padding:8px var(--gutter)}
  .mark{font-size:22px}
  .langs{order:2;margin-left:auto;font-size:12px}
  nav.tabs{order:3;width:100%;gap:10px;font-size:12px;letter-spacing:.03em;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
}

/* Start */
.landing{min-height:calc(100vh - 60px);display:grid;grid-template-rows:auto 1fr auto;padding:var(--gutter);background:var(--green)}
.hero{line-height:.82;font-size:clamp(84px,15vw,220px);margin:0}
.hero .hl{display:block}
.hero .hl.red{color:var(--red)}
.bigtabs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.2em;justify-content:center}
.bigtabs a{font-family:var(--head);font-weight:700;font-size:clamp(34px,6vw,84px);line-height:1;text-decoration:none;color:var(--ink);display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1.4),color .1s}
.bigtabs a:hover{background:none;color:var(--red);transform:translateX(.3em) rotate(-1.5deg)}
.bigtabs a.comic:hover{color:var(--blue-ink)}
.bigtabs small{display:block;font-family:var(--body);font-size:clamp(14px,1.3vw,20px);font-weight:400;letter-spacing:0;color:var(--grey);margin-top:.15em}
.landing-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:15px;color:var(--grey);margin-top:40px}
.landing .peek{position:fixed;pointer-events:none;width:min(42vw,520px);display:none;z-index:1}
@media (min-width:900px){.landing .peek{display:block;right:var(--gutter);bottom:60px;opacity:.95}}

/* Seiten */
main{padding:0 var(--gutter) 60px}
main.comicpage{background:var(--blue);margin:0;padding:0 0 60px}
.pagehead{padding:clamp(28px,5vw,70px) 0 clamp(16px,3vw,40px);border-bottom:2px solid var(--line)}
.pagehead h1{font-size:clamp(44px,9vw,150px);line-height:1;margin:0}
.pagehead p{max-width:62ch;font-size:clamp(17px,1.3vw,22px);margin:.8em 0 0}
.subnav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:14px 0;font-size:15px;border-bottom:1px solid rgba(0,0,0,.25);font-family:var(--sans)}
.subnav a{text-decoration:none;color:var(--ink)}
.subnav a:hover{color:var(--accent);background:none;text-decoration:underline}

section.series{padding:clamp(36px,6vw,90px) 0;border-bottom:2px solid var(--line)}
section.series:last-of-type{border-bottom:0}
.serhead{display:grid;grid-template-columns:1fr;gap:12px 40px;align-items:end}
@media (min-width:900px){.serhead{grid-template-columns:2fr 1fr}}
.serhead h2{font-size:clamp(30px,4.6vw,72px);line-height:1.05;margin:0}
.meta{font-family:var(--sans);font-size:14px;line-height:1.5;text-transform:uppercase;letter-spacing:.06em}
.meta .acc{color:var(--accent)}
.meta .credit{text-transform:none;letter-spacing:0;color:var(--grey);font-family:var(--body);font-size:15px}
.topics{font-family:var(--acc);font-style:italic;color:var(--grey);font-size:17px;margin-top:6px}
.sertext{max-width:62ch;margin:28px 0 0;font-size:clamp(20px,1.55vw,28px);line-height:1.42}
.sertext p{margin:0 0 1em}
.sertext p.motto{font-family:var(--acc);font-style:italic;font-size:1.12em}
@media (min-width:1400px){.sertext.cols{max-width:none;columns:2;column-gap:56px}.sertext.cols p{break-inside:avoid}}

/* Werke */
.grid{display:grid;gap:clamp(18px,3vw,44px) clamp(14px,2vw,30px);margin-top:clamp(28px,4vw,56px);grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));align-items:start}
.grid.comic{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.work{margin:0;position:relative}
.work.big{grid-column:span 2}
@media (max-width:620px){.work.big{grid-column:span 1}}
.work a{display:block;outline:none}
.work img{width:100%;background:var(--hair);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.comicpage .work img{background:#fff}
.work:hover img{transform:none}   /* Kippen und Heben gestrichen (siebtes Interview) */
.work figcaption{font-size:13.5px;line-height:1.35;margin-top:8px;color:var(--ink);font-family:var(--body)}
.work figcaption i{font-family:var(--acc)}
.work figcaption .n{color:var(--grey)}
.rot{--tilt:0deg}
.photocredit{font-size:13px;color:var(--grey);margin-top:14px;font-family:var(--body)}

/* Anmerkungen und Abbildungen (Chicago, je Text) */
.notes{margin-top:34px;max-width:72ch;font-size:14px;line-height:1.45}
.notes h4{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin:18px 0 8px}
.notes ol{margin:0;padding-left:1.6em}
.notes li{margin:0 0 .35em}
.figs{display:flex;flex-wrap:wrap;gap:18px 16px;margin:0;max-width:none}
.figs figure{margin:0;width:150px}
.figs img{width:100%;height:auto;background:#eee}
.figs figcaption{font-size:11.5px;color:var(--grey);margin-top:5px;line-height:1.3;font-family:var(--body)}
.figs .abb{color:var(--red);font-weight:700}
.refs{margin-top:40px;padding-top:16px;border-top:1px dashed rgba(0,0,0,.4)}
.refs h3{font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 12px;color:var(--grey)}
.refs ul{margin:0;padding-left:1.2em}

/* Prince of Wales */
.powlead{display:grid;grid-template-columns:1fr;gap:24px 40px;align-items:start;margin-top:24px}
@media (min-width:800px){.powlead{grid-template-columns:minmax(220px,1fr) 2fr}}
.powlead figure{margin:0;max-width:360px}
.powlead figcaption{font-size:12.5px;color:var(--grey);margin-top:6px;font-family:var(--body)}
.powinfo{display:flex;flex-wrap:wrap;gap:18px 28px;margin-top:28px;align-items:flex-start}
.powinfo figure{margin:0;width:150px}
.powinfo figure.logo{width:110px}
.powinfo figcaption{font-size:11.5px;color:var(--grey);margin-top:5px;font-family:var(--body)}
.prize{font-family:var(--acc);font-style:italic;font-size:1.05em;margin-top:18px}
.show{margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid rgba(0,0,0,.35)}
.show h3{font-size:clamp(26px,3.4vw,46px);line-height:1;margin:0}
.show .meta{margin-top:8px}
.show .text{max-width:72ch;margin-top:14px}
.show .text p{margin:0 0 .9em}
.powgrid{display:grid;gap:18px 16px;margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));align-items:start}
.powgrid figure{margin:0}
.powgrid figcaption{font-size:12.5px;color:var(--grey);margin-top:6px;font-family:var(--body)}
.powgrid figure.flyer{max-width:240px}
.artists{margin-top:40px;padding-top:20px;border-top:1px solid rgba(0,0,0,.35)}
.artists h3{font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.artists p{columns:3;column-gap:28px;font-size:14px;line-height:1.45;margin:0;max-width:80ch}
@media (max-width:700px){.artists p{columns:2}}
.chron{margin-top:30px;border-top:1px solid #000;font-size:14.5px}
.chron div{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:6px 0;border-bottom:1px solid rgba(0,0,0,.2)}
.chron b{color:var(--red);font-family:var(--sans);font-weight:400}
.chron i{font-family:var(--acc)}

/* Felix Pfahl */
.pfahl{cursor:help;border-bottom:1px dotted var(--red)}
#pfahlface{position:fixed;z-index:400;pointer-events:none;width:min(34vw,260px);display:none;opacity:0;transform:translate(-50%,-60%) rotate(-4deg);transition:opacity .4s}
#pfahlface.on{display:block;opacity:.92;animation:flicker 1.4s infinite}
@keyframes flicker{0%,100%{opacity:.92}45%{opacity:.75}50%{opacity:.98}55%{opacity:.7}}

/* Texte */
.textblock{max-width:68ch;margin-top:36px;padding:28px 0;border-top:1px solid var(--ink)}
.textblock h3{font-size:clamp(24px,3vw,40px);margin:0 0 .2em}
.textblock .intro{color:var(--grey);font-size:15px;margin:0 0 1em}
.textblock pre{white-space:pre-wrap;font-family:var(--body);font-size:17px;line-height:1.5;margin:0}
.textblock details summary{cursor:pointer;color:var(--red);font-family:var(--sans);list-style:none}
.textblock details summary::-webkit-details-marker{display:none}

/* Info */
.info{display:grid;grid-template-columns:1fr;gap:40px 60px;padding-top:30px}
@media (min-width:900px){.info{grid-template-columns:1fr 1fr}}
.info h2{font-family:var(--sans);font-weight:400;font-size:13px;text-transform:uppercase;letter-spacing:.12em;margin:28px 0 10px;color:var(--grey)}
.info h2:first-child{margin-top:0}
.cvl{list-style:none;margin:0;padding:0}
.cvl li{display:grid;grid-template-columns:5.2em 1fr;gap:12px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:16px}
.cvl b{color:var(--ink);font-family:var(--sans);font-weight:700}
.cvl i{font-family:var(--acc);font-weight:700}
.bio{font-size:clamp(18px,1.5vw,24px);line-height:1.4;max-width:60ch}
.contact a{word-break:break-all}
.credits{font-size:13px;color:var(--grey);margin-top:30px;font-family:var(--body);line-height:1.5}

/* Fuß */
footer{border-top:2px solid var(--line);padding:0 0 30px;background:var(--paper)}
.ticker{overflow:hidden;white-space:nowrap;border-bottom:2px solid var(--line);font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:14px;padding:8px 0}
.ticker span{display:inline-block;padding-left:100%;animation:tick 90s linear infinite}
.ticker span:hover{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-100%)}}
.footgrid{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;padding:22px var(--gutter) 0;font-size:14px;color:var(--grey)}
.footgrid a{color:var(--red)}
.gogogo{font-family:var(--mono);background:none;border:2px solid var(--ink);padding:4px 10px;font-weight:700;cursor:pointer;color:var(--ink)}
.gogogo:hover{background:var(--red);color:#fff;border-color:var(--red)}
.counter{font-family:var(--mono);background:#000;color:#0f0;padding:2px 6px;letter-spacing:.1em}

/* Lightbox */
.lb{position:fixed;inset:0;background:rgba(255,255,255,.96);z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;object-fit:contain;box-shadow:0 0 0 1px #ddd}
.lb .cap{font-size:14px;margin-top:12px;max-width:90ch;text-align:left;align-self:flex-start;padding-left:max(0px,calc(50% - 45ch));font-family:var(--body)}
.lb button{position:absolute;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font:700 13px var(--sans);padding:6px 10px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase}
.lb button:hover{background:var(--red);color:#fff;border-color:var(--red)}
.lb .x{top:14px;right:14px}.lb .p{left:14px;top:50%}.lb .nx{right:14px;top:50%}
@media (max-width:620px){.lb .p,.lb .nx{top:auto;bottom:14px}}

/* Modem */
.modem{position:fixed;inset:0;z-index:200;background:#000;color:#0f0;font-family:var(--mono);display:none;align-items:center;justify-content:center;padding:24px;text-align:left;cursor:auto}
.modem.on{display:flex}
.modem .box{max-width:720px;width:100%}
.modem pre{white-space:pre-wrap;margin:0;font-size:clamp(13px,1.6vw,17px);line-height:1.5;min-height:12em}
.modem .bar{height:14px;border:2px solid #0f0;margin:14px 0}
.modem .bar i{display:block;height:100%;background:#0f0;width:0;transition:width .3s;font-style:normal}
.modem button{background:#000;color:#0f0;border:2px solid #0f0;font-family:var(--mono);padding:6px 12px;cursor:pointer;margin-top:8px}
.modem button:hover{background:#0f0;color:#000}
.modem small{display:block;color:#7a7;margin-top:10px}

/* Click Click Boom */

/* Motivationsrede */
.moti{position:fixed;inset:0;background:var(--red);color:#fff;z-index:150;display:none;overflow:auto;padding:5vw}
.moti.on{display:block}
.moti p{font-family:var(--head);font-weight:700;line-height:1;margin:0 0 .3em;font-size:calc(18px + var(--i,0)*3px)}
.moti button{position:fixed;top:14px;right:14px;background:#fff;color:var(--red);border:0;font:700 13px var(--sans);padding:6px 10px;cursor:pointer}

/* 404 */
.nf{display:grid;gap:30px;padding:40px 0;grid-template-columns:1fr}
@media (min-width:800px){.nf{grid-template-columns:1fr 1fr;align-items:center}}
.nf img{max-height:80vh;width:auto}

/* Sichtbar werden beim Scrollen */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
/* Bewegung ruhig (Systemeinstellung "weniger Bewegung" oder Regler) und aus: Klassen calm/still auf <html>, vom Regler überschreibbar */
html.calm .reveal{opacity:1;transform:none;transition:none}html.calm .ticker span{animation:none;padding-left:0}html.calm .bigtabs a{transition:none}html.calm #pfahlface.on{animation:none}
a.wl{color:inherit;text-decoration:none;border-bottom:.08em solid var(--accent)}
a.wl:hover{color:var(--accent);background:none}
.sound ul{list-style:none;padding:0;margin:0}
.sound li{margin:0 0 1rem 0;max-width:46rem}
.sound iframe{display:block;margin-top:.5rem;max-width:46rem}

/* Comic-Seite: blaue Fläche, Hover und Akzente im dunkleren Blau, Markierung bleibt rot */
.comicpage{--accent:var(--blue-ink)}
.comicpage section.series{border-color:#000}
.comicpage .subnav{border-color:rgba(0,0,0,.35)}
.comicpage .notes h4,.comicpage .figs .abb,.comicpage sup{color:#000}
.comicpage .figs img{background:#fff}
.comicpage .textblock details summary{color:var(--blue-ink)}

/* 27.10.2026: Play-Markierung, Skript, Weitere Arbeiten, grünes Quadrat */
.playmark{display:flex;align-items:center;gap:10px;margin:0 0 8px;font-size:14px;line-height:1.3;color:var(--ink)}
.playmark svg{width:26px;height:26px;flex:none}
.playmark .n{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--ink)}
.playmark i{font-family:var(--acc)}
.script{margin:28px 0 0;max-width:72ch}
.scriptbody{columns:2;column-gap:32px;font-size:14.5px;line-height:1.45}
.scriptbody h5{font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:12px;margin:12px 0 2px;break-after:avoid}
.scriptbody h5:first-child{margin-top:0}
.scriptbody p{margin:0 0 6px;break-inside:avoid}
.scriptcap{font-size:12.5px;margin-top:12px}
.scriptcap i{font-family:var(--acc)}
.einzelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));grid-auto-flow:dense;gap:clamp(28px,4vw,56px) clamp(16px,2vw,32px);margin-top:clamp(28px,4vw,56px);align-items:start}
.einzel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;align-items:start;grid-column:span 2}
.einzel.full{grid-template-columns:1fr;grid-column:span 1}
.einzel:nth-child(even) .work{order:2}
.einzel .work,.einzel .work.big{margin:0;grid-column:auto}
.einzel .side{font-size:14.5px;line-height:1.45;max-width:46ch}
.einzel .side p{margin:0 0 12px}
.figs.small figure{width:128px}
.figs.small img{filter:grayscale(1) contrast(.85) brightness(1.05)}
.greensq{width:100%;max-width:520px;height:0;padding-bottom:min(100%,520px);background:#00A651;box-sizing:content-box}
@media (max-width:700px){.einzelgrid{grid-template-columns:1fr}.einzel{grid-template-columns:1fr;grid-column:span 1}.einzel:nth-child(even) .work{order:0}.scriptbody{columns:1}}
.cover{margin:32px 0 0;max-width:260px}
.cover .greensq{max-width:260px}
.cover figcaption{font-size:13.5px;line-height:1.35;margin-top:8px}
.cover figcaption i{font-family:var(--acc)}
.sertext pre{white-space:pre-wrap;font-family:inherit;font-size:inherit;line-height:1.5;margin:0}

.spot{margin:8px 0 4px}
.spot button{font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:13px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);padding:6px 12px;cursor:pointer}
.spot button:hover{background:var(--red);color:#fff;border-color:var(--red)}
.spot iframe{display:block;border:0;width:100%;height:80px;border-radius:12px}
.legal{font-size:14.5px;line-height:1.5;max-width:62ch}
.legal h3{font-size:15px;margin:14px 0 4px;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:700}
.legal p{margin:0 0 8px;overflow-wrap:anywhere}
.powtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,120px),1fr));gap:16px 12px;margin-top:16px;align-items:start}
.powtiles figure{margin:0}
.powtiles figcaption{font-size:11.5px;line-height:1.3;color:var(--ink);margin-top:5px;font-family:var(--body)}
.powtiles figcaption i{font-family:var(--acc)}

.cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;margin-top:28px}
.ctabtn{display:block;border:2px solid var(--ink);padding:18px 20px;text-decoration:none;color:var(--ink);background:var(--paper);transition:background .12s,color .12s}
.ctabtn .big{display:block;font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.6vw,36px);line-height:1}
.ctabtn .sub{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin-top:8px;color:var(--grey)}
.ctabtn:hover{background:var(--red);color:#fff;border-color:var(--red)}
.ctabtn:hover .sub{color:#fff}
.cform{margin-top:28px;border:2px solid var(--ink);padding:18px 20px;max-width:720px}
.cform h2{font-size:clamp(22px,2.6vw,36px);line-height:1;margin:0 0 12px}
.cform label{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:12px;margin:10px 0 0}
.cform input[type=text],.cform input[type=email],.cform textarea{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:8px 10px;font:inherit;font-size:16px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);border-radius:0}
.cform textarea{resize:vertical}
.cform input:focus,.cform textarea:focus{outline:2px solid var(--red);outline-offset:0}
.cfoot{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:14px}
.cform button{font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:14px;background:var(--ink);color:#fff;border:2px solid var(--ink);padding:10px 18px;cursor:pointer}
.cform button:hover{background:var(--red);border-color:var(--red)}
.cfoot .n{font-size:13px}
.landing .cta{margin-top:24px}
.cover .greensq{padding-bottom:min(100%,260px)}
.cta.links{grid-template-columns:1fr;max-width:720px}
#pfahlface.fade{opacity:0!important;transition:opacity 6s ease-out;animation:none!important}
@media (hover:none){#pfahlface.fade{transition:opacity 9s ease-out}}
.hero,.bigtabs,.mark,nav.tabs,.pagehead h1,.serhead h2,.ctabtn,.subnav,.work,.powtiles,.cover,.divider{-webkit-user-select:none;user-select:none}
/* Handy: lange Titel dürfen nicht über den Rand laufen */
.serhead h2{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.serhead .meta{overflow-wrap:anywhere}
@media (max-width:620px){.serhead h2{font-size:clamp(26px,8.2vw,40px)}.pagehead h1{overflow-wrap:break-word;hyphens:auto}}
/* Referenzbilder anklickbar; auf großen Bildschirmen größer */
a.reflink{display:block;cursor:zoom-in}
a.reflink:hover{background:none}
a.reflink img{transition:filter .2s}
a.reflink:hover img{filter:none}
.lbref img{cursor:zoom-out}
@media (min-width:900px){.figs figure{width:210px}.figs.small figure{width:170px}.einzel .side{max-width:none}}
.lb img{cursor:zoom-out}
/* Großansicht: Seite bleibt sichtbar, Bild schwebt darüber, X zum Schließen */
.lb{background:rgba(255,255,255,.5)}
.lb img{box-shadow:0 12px 48px rgba(0,0,0,.35);background:#fff;max-height:calc(100vh - 140px)}
.lb .cap{background:#fff;padding:8px 12px;box-shadow:0 4px 16px rgba(0,0,0,.15);align-self:center;padding-left:12px;max-width:min(90ch,92vw)}
.lb .cap:empty{display:none}
.lb button.x{top:14px;right:14px;left:auto;width:48px;height:48px;padding:0;font:400 34px/44px var(--body);border:2px solid var(--ink);background:var(--paper);text-align:center;z-index:2}
.lb button.x:hover{background:var(--red);border-color:var(--red);color:#fff}
/* Großansicht: Hauptseite milchig (weiß und unscharf), Bild immer ganz sichtbar */
.lb{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(10px) saturate(.5);backdrop-filter:blur(10px) saturate(.5)}
.lb img{max-width:min(92vw,100%);max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px);flex:0 1 auto;min-height:0}
/* Großansicht: Hauptseite milchig, Bild ganz sichtbar, Angaben klein darunter */
.lb{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(10px) saturate(.5);backdrop-filter:blur(10px) saturate(.5)}
.lb img{max-width:min(92vw,100%);max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);flex:0 1 auto;min-height:0}
.lb .cap{font-size:11.5px;line-height:1.35;margin-top:8px;padding:4px 8px;box-shadow:none;background:rgba(255,255,255,.85)}
/* Großansicht, robuste Fassung für alle Browser (Firefox): absolut zentriert, Angaben klein am unteren Rand, sanftes Ein- und Ausblenden */
.lb.lb{display:none;flex-direction:initial;padding:0;opacity:0;transition:opacity .28s ease}
.lb.lb.on{display:block}
.lb.lb.show{opacity:1}
.lb.lb img{position:absolute;top:50%;left:50%;transform:translate(-50%,-52%) scale(.96);transition:transform .32s cubic-bezier(.2,.8,.2,1);max-width:92vw;max-height:calc(100vh - 120px);width:auto;height:auto;margin:0}
.lb.lb.show img{transform:translate(-50%,-52%) scale(1)}
.lb.lb .cap,.lb.lb .cap *{font-size:11.5px!important;line-height:1.35!important;letter-spacing:0!important}
.lb.lb .cap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;max-width:min(80ch,92vw);text-align:center;padding:4px 10px;background:var(--paper);box-shadow:none;font-family:var(--body)}
html.still .lb.lb,html.still .lb.lb img{transition:none}
.lb.lb img{max-height:calc(100vh - 160px);transform:translate(-50%,calc(-50% - 24px)) scale(.96)}
.lb.lb.show img{transform:translate(-50%,calc(-50% - 24px)) scale(1)}
/* Schrift-Knaller: Dürer-Schrift, verzerrt wie bei Erik Carter (Design Harder) */

/* Regler (Knopf unten links, Panel) */
.fxknob{position:fixed;left:14px;bottom:14px;z-index:90;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:3px 3px 0 var(--red);transition:transform .25s,box-shadow .25s}
.fxknob:hover,.fxknob[aria-expanded=true]{transform:rotate(-8deg);box-shadow:3px 3px 0 var(--blue);color:var(--red)}
.fxknob:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.fxpanel{position:fixed;left:14px;bottom:72px;z-index:95;width:min(330px,calc(100vw - 28px));max-height:calc(100vh - 100px);overflow:auto;background:#fff;border:1.5px solid var(--ink);box-shadow:6px 6px 0 var(--blue);padding:16px 18px 14px;display:none;font-family:var(--sans);opacity:0;transform:translateY(10px);transition:opacity .25s,transform .25s}
.fxpanel.on{display:block;animation:fxIn .3s ease-out forwards}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fxpanel h2{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:28px;line-height:1;margin:0 0 10px;letter-spacing:.02em}
.fxpanel .x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.fxpanel .x:hover{color:var(--red)}
.fxrow{display:grid;grid-template-columns:1fr auto;gap:2px 8px;margin:10px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.fxrow .v{color:var(--red);text-transform:none;letter-spacing:0;font-size:13px}
.fxrow input{grid-column:1/-1;width:100%;margin:4px 0 0;accent-color:var(--red);cursor:pointer}
.fxrow input.mix{-webkit-appearance:none;appearance:none;height:10px;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--red),var(--blue));border-radius:0}
.fxrow input.mix::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:22px;background:#fff;border:1.5px solid var(--ink);cursor:pointer}
.fxrow input.mix::-moz-range-thumb{width:14px;height:20px;background:#fff;border:1.5px solid var(--ink);border-radius:0;cursor:pointer}
.fxcheck{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.fxcheck input{width:18px;height:18px;accent-color:var(--red);margin:0}
.fxbtns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.fxbtns button{font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.08em;background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:8px 12px;cursor:pointer}
.fxbtns button:first-child{background:var(--ink);color:#fff}
.fxbtns button:hover{background:var(--red);border-color:var(--red);color:#fff}
.fxnote{font-size:11px;line-height:1.35;color:var(--grey);margin:12px 0 0;text-transform:none;letter-spacing:0}
.comicpage ~ .fxknob{box-shadow:3px 3px 0 var(--blue)}
@media (max-width:600px){.fxknob{width:40px;height:40px;left:10px;bottom:10px}.fxpanel{left:10px;bottom:60px;width:calc(100vw - 20px)}}
@media print{.fxknob,.fxpanel{display:none!important}}
/* Newsletter */
.nlform{margin-top:28px;border:2px solid var(--ink);padding:18px 20px;max-width:720px;box-shadow:6px 6px 0 var(--blue);background:var(--paper)}
.nlform h2{font-size:clamp(22px,2.6vw,36px);line-height:1;margin:0 0 8px}
.nlform .n{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--grey);margin:8px 0 0}
.nlrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.nlrow input{flex:1 1 220px;min-width:0;padding:9px 10px;font:inherit;font-size:16px;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}
.nlrow input:focus{outline:2px solid var(--red);outline-offset:0}
.nlrow button{font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:14px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:10px 18px;cursor:pointer}
.nlrow button:hover{background:var(--red);border-color:var(--red)}
.nlok{font-family:var(--head);font-size:clamp(18px,2vw,26px);line-height:1.15;margin:10px 0 0;color:var(--red)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Unterleiste (Serien-Auswahl) bleibt beim Scrollen unter der Kopfleiste stehen (Josef, 27.10.) */
.subnav{position:sticky;top:var(--headh,70px);z-index:45;background:var(--paper)}
.comicpage .subnav{background:var(--blue)}
.subnav a.on{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
section[id],.series[id],[id].powlead{scroll-margin-top:calc(var(--headh,70px) + var(--subh,50px) + 14px)}
@media (max-width:700px){
  .subnav{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:0 18px;padding:10px 0;font-size:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .subnav::-webkit-scrollbar{display:none}
  .subnav.more{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
}
@media print{.subnav{position:static}}

/* Fußnoten: kleines Fenster mit der Quelle beim Drüberfahren oder Antippen (Josef, 27.10.) */
sup.fn{cursor:help;padding:0 .18em;margin-left:.05em;border-radius:2px;box-shadow:inset 0 -1px 0 currentColor}
sup.fn:hover,sup.fn:focus-visible,sup.fn.on{background:var(--red);color:#fff;outline:none}
.comicpage sup.fn:hover,.comicpage sup.fn.on{background:#000;color:var(--blue)}
.fnpop{position:fixed;z-index:120;max-width:min(340px,calc(100vw - 24px));background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-shadow:5px 5px 0 var(--blue);padding:10px 12px 11px;font-family:var(--body);font-size:14px;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;pointer-events:none}
.fnpop.on{opacity:1;transform:none;pointer-events:auto}
.fnpop b{display:block;font-family:var(--sans);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--red);margin-bottom:4px}
@media print{.fnpop{display:none}}
/* Newsletter als wichtigster Call to Action: groß, zuerst */
.nlform.big{max-width:none;margin-top:36px;padding:26px 28px 22px;border-width:3px;box-shadow:10px 10px 0 var(--red)}
.nlform.big h2{font-size:clamp(34px,5vw,72px);margin-bottom:10px}
.nlform.big .n.lead{font-family:var(--body);font-size:clamp(17px,1.4vw,22px);color:var(--ink);text-transform:none;letter-spacing:0;max-width:60ch}
.nlform.big .nlrow{margin-top:16px}
.nlform.big .nlrow input{font-size:19px;padding:13px 14px;border-width:2px}
.nlform.big .nlrow button{font-size:17px;padding:14px 26px;background:var(--red);border-color:var(--red)}
.nlform.big .nlrow button:hover{background:var(--ink);border-color:var(--ink)}
.landing .nlform.big{margin:36px var(--gutter) 0}
@media (max-width:600px){.nlform.big{padding:18px 16px 16px;box-shadow:6px 6px 0 var(--red)}}
/* Startseite: nach dem Newsletter nur eine schlanke Zeile (Josef, 27.10.: "da ist zu viel los") */
.ctaline{font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:13px;line-height:1.9;margin:22px var(--gutter) 0;color:var(--ink)}
.ctaline a{color:var(--ink);text-decoration:none;border-bottom:2px solid var(--red);padding-bottom:1px}
.ctaline a:hover{color:var(--red);background:none}
.ctaline .n{color:var(--grey);letter-spacing:.04em;font-size:11.5px}
.ctaline .sep{color:var(--grey);margin:0 6px}
.landing .nlform.big{margin-top:28px}
.landing .cover{max-width:200px;margin-top:24px}.landing .cover .greensq{max-width:200px;padding-bottom:min(100%,200px)}
.landing .bigtabs small{display:none}
@media (min-width:900px){.landing .peek{width:min(26vw,320px);opacity:.6}}
/* Schlagworte im Fließtext: Akzentschrift kursiv in der Akzentfarbe (Josef, 27.10.) */
em.kw{font-family:var(--acc);font-style:normal;font-weight:400;color:var(--accent);font-size:1.15em;line-height:0}
.comicpage em.kw{color:var(--blue-ink)}
.nlform em.kw,.legal em.kw{font:inherit;color:inherit}
/* Schwebender Newsletter-Knopf (unten links) mit kleinem Anmeldefeld */
.nlknob{position:fixed;left:14px;bottom:14px;z-index:90;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;opacity:.75;transition:opacity .2s,transform .2s,color .2s}
.nlknob:hover,.nlknob[aria-expanded=true]{opacity:1;color:var(--red);transform:rotate(-6deg)}
.nlknob:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.nlpanel{position:fixed;left:14px;bottom:70px;z-index:95;width:min(340px,calc(100vw - 28px));background:var(--paper);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--red);padding:16px 18px 14px;display:none}
.nlpanel.on{display:block;animation:fxIn .3s ease-out forwards}
.nlpanel h2{font-size:26px;line-height:1;margin:0 0 6px}
.nlpanel .n{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--grey);margin:0 0 8px}
.nlpanel .n.small{margin:8px 0 0;font-size:11px}
.nlpanel .x{position:absolute;top:6px;right:8px;width:32px;height:32px;border:0;background:none;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.nlpanel form{display:flex;gap:6px}
.nlpanel input[type=email]{flex:1 1 140px;min-width:0;padding:9px 10px;font:inherit;font-size:15px;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}
.nlpanel button[type=submit]{font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:13px;background:var(--red);color:#fff;border:2px solid var(--red);padding:9px 14px;cursor:pointer}
.nlpanel button[type=submit]:hover{background:var(--ink);border-color:var(--ink)}
.nlpanel .nlok{font-family:var(--head);color:var(--red);font-size:18px;margin:8px 0 0}
@media print{.nlfloat{display:none!important}}
@media (max-width:600px){.nlknob{left:10px;bottom:10px}.nlpanel{left:10px;bottom:62px;width:calc(100vw - 20px)}}
/* Sehr kleine und sehr große Bildschirme (Test 27.10.) */
.bigtabs a{font-size:clamp(26px,9vw,84px);white-space:normal}
@media (max-width:360px){.hero{font-size:clamp(64px,24vw,100px)}.bigtabs a{font-size:clamp(22px,8.4vw,36px)}}
@media (min-width:2200px){body{zoom:1.6}.landing{min-height:calc(100vh/1.6 - 60px)}}
@media (min-width:3000px){body{zoom:1.9}.landing{min-height:calc(100vh/1.9 - 60px)}}
.landing .nlform.big{margin-top:22px}

/* ============================================================
   Design Harder (Erik Carter) als Vorbild, 27.10.2026, Interview mit Josef: 24 Entscheidungen
   ============================================================ */
/* Fette Buchstaben: dicke Kontur, überlappend; die Maus (oder der Finger) macht sie frei, sie wachsen wieder zu (app.js setzt --st je Buchstabe) */
.fat{display:inline;white-space:normal}
.fat .w{display:inline-block;white-space:nowrap}
.fat .sp{display:inline-block;width:.28em}
.fat .l{display:inline-block;-webkit-text-stroke:var(--st,0) currentColor;paint-order:stroke fill;stroke-linejoin:miter;transition:-webkit-text-stroke-width .9s ease-out,color .25s,transform .25s;margin-right:calc(var(--st,0px)*-.55);position:relative}
.fat .l.free{transition:-webkit-text-stroke-width .08s ease-out}
.fat .l:nth-child(odd){z-index:1}
.fatready .fat .l{--st:var(--fatmax,.045em)}
/* Startseite: grüne Fläche = das Quadrat; Reiter schwarz, Hover rot; Newsletter weiß mit roter Kante */
body.start{background:var(--green)}
body.start .top{background:var(--green);border-bottom-color:#000}
body.start footer{background:var(--paper)}
.landing{grid-template-rows:auto auto auto 1fr;touch-action:pan-y;padding-bottom:40px;color:#000}
.landing .hero{font-size:clamp(84px,12.5vw,230px);line-height:.86;--fatmax:.06em;touch-action:none;overflow:visible}
.landing .hero .hl.red{color:var(--red)}
.landing .bigtabs{justify-content:start;margin-top:.3em;gap:.08em;touch-action:none}
.landing .bigtabs a{font-size:clamp(26px,6.4vw,104px);line-height:.95;color:#000;--fatmax:.05em;transition:color .25s;transform:none}
.landing .bigtabs a:hover{color:var(--red);transform:none}
.landing .bigtabs a.comic:hover{color:var(--red)}
.landing .nlform.big{background:#000;color:#fff;border-color:#000;box-shadow:14px 14px 0 var(--red);margin:28px 0 0;max-width:980px}
.landing .nlform.big .n{color:#bbb}
.landing .nlform.big .nlrow input{background:#000;color:#fff;border-color:#fff}
.landing .nlform.big h2{color:#fff}
.landing .nlform.big a{color:var(--red)}
.landing .nlform.big .nlrow button{background:var(--red);color:#fff;border-color:var(--red)}
.landing .nlform.big .nlrow button:hover{background:#fff;color:#000;border-color:#fff}
.landing .nlform.big em.kw{color:var(--red)}
.landing-foot{color:#000;font-family:var(--sans);text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin-top:40px;align-self:end}
.landing-foot a{color:#000}
.landing-foot i{font-family:var(--acc);text-transform:none;letter-spacing:0;font-size:14px}
.landing .ctaline{margin:18px 0 0;color:#000}
.landing .ctaline a{color:#000;border-bottom-color:#000}.landing .ctaline a:hover{color:var(--red)}
.landing .ctaline .n{color:#1a3}
.landing .peek{opacity:.9;mix-blend-mode:multiply}
body.start .nlknob{background:#fff;color:#000;border-color:#000}
@media (max-width:600px){.landing .nlform.big{box-shadow:8px 8px 0 var(--red)}.landing .hero{font-size:clamp(72px,24vw,120px)}}
/* Serienköpfe: riesig über einem Referenzbild, das darunter hervorragt; kleben oben und schrumpfen beim Scrollen */
.serhead{position:relative;display:block;padding:0;min-height:clamp(160px,24vw,380px);isolation:isolate;overflow:hidden}
.serhead .serbg{position:absolute;left:14%;top:0;bottom:0;width:min(50vw,560px);z-index:-1;pointer-events:none;opacity:.42;transform:rotate(-2deg);transition:transform .8s cubic-bezier(.2,.8,.2,1);display:flex;align-items:flex-end}
.serhead .serbg img{max-height:100%;width:auto;max-width:100%;object-fit:contain;filter:grayscale(1) contrast(.9);mix-blend-mode:multiply}
.serhead:hover .serbg{transform:rotate(1deg) scale(1.03)}
.serhead h2{font-size:clamp(40px,9.5vw,170px);line-height:.9;margin:0;--fatmax:.04em;position:relative;overflow-wrap:normal;hyphens:manual;padding-top:.1em}
.serhead h2.long{font-size:clamp(34px,6.8vw,120px)}
.serhead h2.xlong{font-size:clamp(28px,4.6vw,78px);line-height:.95}
.pagehead h1.long{font-size:clamp(36px,7vw,120px)}
.serhead .meta{margin-top:18px;max-width:46ch}
.pagehead h1{--fatmax:.04em}
.sticky-head{position:sticky;top:calc(var(--headh,70px) + var(--subh,50px));z-index:40;background:var(--paper);transform-origin:left top;transition:transform .2s linear,box-shadow .3s}
.comicpage .sticky-head{background:var(--blue)}
.comicpage .serhead .serbg img{mix-blend-mode:multiply}
/* Fließtext: Wörter werden unter der Maus rot und bleiben rot, leichte Linse */
.hot{color:var(--accent);display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1.6)}
.hot.lens{transform:scale(1.14) translateY(-1px)}
.comicpage .hot{color:var(--blue-ink)}
.sertext pre .hot{display:inline}
/* Nächster Teil */
.nextpart{margin:48px 0 0;font-family:var(--head);text-transform:uppercase;font-weight:700;font-size:clamp(26px,3.6vw,54px);line-height:1}
.nextpart a{color:var(--ink);text-decoration:none;display:inline-block;border-top:2px solid var(--ink);padding-top:12px}
.nextpart a .n{display:block;font-family:var(--sans);font-weight:400;font-size:12px;letter-spacing:.14em;color:var(--grey);margin-bottom:6px}
.nextpart a:hover{background:none;color:var(--accent)}
.comicpage .nextpart a:hover{color:var(--blue-ink)}
/* Fortschrittsbalken */
.progress{position:fixed;left:0;top:0;height:12px;width:100%;z-index:60;pointer-events:none;background:rgba(128,128,128,.18)}
.progress i{display:block;height:100%;width:0;background:var(--green);transition:width .15s linear,background .4s}
.progress2{position:fixed;left:0;top:12px;height:6px;width:100%;z-index:60;pointer-events:none;background:rgba(128,128,128,.12);opacity:0;transition:opacity .3s}
.progress2.on{opacity:1}
.progress2 i{display:block;height:100%;width:0;background:#E2231A;transition:width .15s linear}
body.start .progress,body.start .progress2{display:none}
.top{top:18px}
.subnav{top:calc(var(--headh,70px) + 18px)}
.sticky-head{top:calc(var(--headh,70px) + var(--subh,50px) + 18px)}
/* Modi: weiß, schwarz, rot (Schalter im Kopf) */
.modes{display:flex;gap:6px;margin-left:auto;align-items:center}
.modes button{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);padding:0;cursor:pointer;background:#fff;transition:transform .2s}
.modes button[data-mode=dunkel]{background:#000}
.modes button[data-mode=rot]{background:#E2231A}
.modes button:hover{transform:scale(1.25)}
.modes button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
body.start .modes button.on{box-shadow:0 0 0 2px var(--green),0 0 0 3.5px #000}
.langs~.modes{margin-left:0}
html[data-mode=dunkel]{--paper:#000;--ink:#fff;--line:#fff;--grey:#9a9a9a;--hair:#2a2a2a;color-scheme:dark}
html[data-mode=dunkel] .counter{background:#0f0;color:#000}
html[data-mode=dunkel] .lb{background:rgba(0,0,0,.78)}
html[data-mode=dunkel] .lb img{background:#000;box-shadow:0 12px 48px rgba(0,0,0,.8)}
html[data-mode=dunkel] .work img{background:#111}
html[data-mode=dunkel] .serhead .serbg img{filter:grayscale(1) contrast(.9) brightness(.9);mix-blend-mode:normal}
/* Bilder bleiben hell, nur etwas milder (Josef, 27.10., 19:05) */
/* kein krasses Weiß in den Thumbnails (Josef, 27.10., 19:06): Helligkeit gedämpft, Großansicht zeigt das Original */
html[data-mode=dunkel] .work img,html[data-mode=dunkel] .figs img,html[data-mode=dunkel] .powtiles img,html[data-mode=dunkel] .powinfo img,html[data-mode=dunkel] .powlead img,html[data-mode=dunkel] .mpeek,html[data-mode=dunkel] .peek{filter:brightness(.8) contrast(.94)}
html[data-mode=dunkel] .lb img{filter:none}
html[data-mode=dunkel] .figs.small img{filter:grayscale(1) contrast(.85) brightness(.9)}
html[data-mode=dunkel] .work:hover img{filter:brightness(.92) contrast(.96)}
html[data-mode=dunkel] #pfahlwater{filter:grayscale(1) invert(1)}
html[data-mode=dunkel] .figs img,html[data-mode=dunkel] .figs.small img{background:#111}
html[data-mode=dunkel] main.comicpage{background:#0b1a20}
html[data-mode=dunkel] .comicpage .subnav,html[data-mode=dunkel] .comicpage .sticky-head{background:#0b1a20}
html[data-mode=rot]{--paper:#E2231A;--ink:#000;--line:#000;--grey:#4a0d0a;--hair:#b31b14;--red:#000;--accent:#000;--blue:#E2231A;--blue-ink:#000}
html[data-mode=rot] ::selection{background:#000;color:#E2231A}
html[data-mode=rot] a:hover{background:#000;color:#E2231A}
html[data-mode=rot] .nlform.big .nlrow button,html[data-mode=rot] .nlrow button{background:#000;color:#E2231A;border-color:#000}
html[data-mode=rot] .counter{background:#000;color:#E2231A}
html[data-mode=rot] .serhead .serbg img{mix-blend-mode:multiply;opacity:.8}
html[data-mode=rot] .lb{background:rgba(226,35,26,.8)}
html[data-mode=rot] main.comicpage{background:#E2231A}
html[data-mode=rot] .hot,html[data-mode=rot] em.kw,html[data-mode=rot] .meta .acc,html[data-mode=rot] sup{color:#000}
html[data-mode=rot] .modes button[data-mode=rot].on,html[data-mode=dunkel] .modes button[data-mode=dunkel].on{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
html[data-mode=rot] body.start,html[data-mode=rot] body.start .top,html[data-mode=rot] .landing{background:var(--green)}
html[data-mode=dunkel] body.start,html[data-mode=dunkel] body.start .top,html[data-mode=dunkel] .landing{background:var(--green);color:#000}
html[data-mode=dunkel] body.start .top{border-bottom-color:#000}
html[data-mode=dunkel] body.start .top .mark,html[data-mode=dunkel] body.start nav.tabs a{color:#000}
html[data-mode=dunkel] body.start .menubtn{color:#000;border-color:#000}
html[data-mode=dunkel] body.start nav.tabs a:hover{border-bottom-color:var(--red)}
html[data-mode=dunkel] body.start .modes button{border-color:#000}
/* Menü-Overlay: schwarz, riesige Titel, Bild beim Hover */
.menubtn{font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:13px;background:none;border:1.5px solid var(--ink);color:var(--ink);padding:5px 10px;cursor:pointer}
.menubtn:hover,.menubtn[aria-expanded=true]{background:var(--ink);color:var(--paper)}
body.start .menubtn{border-color:#000;color:#000}body.start .menubtn:hover{background:#000;color:var(--green)}
.menu{position:fixed;inset:0;z-index:300;background:#000;color:#fff;overflow:auto;opacity:0;transition:opacity .3s ease}
.menu.vis{opacity:1}
.menuin{position:relative;min-height:100%;padding:70px var(--gutter) 60px}
.menux{position:fixed;top:14px;left:var(--gutter);z-index:2;font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:13px;background:#000;border:1.5px solid #fff;color:#fff;padding:5px 10px;cursor:pointer}
.menux:hover{background:#fff;color:#000}
.menunav{position:relative;z-index:1;max-width:1400px}
.menunav .mh{display:block;color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(40px,9vw,150px);line-height:.92;margin:.25em 0 0;--fatmax:.04em}
.menunav .mh:hover{background:none;color:var(--red)}
.msub{display:flex;flex-wrap:wrap;gap:4px 22px;margin:10px 0 0;font-family:var(--sans);text-transform:uppercase;letter-spacing:.08em;font-size:clamp(13px,1.1vw,17px)}
.msub a{color:#bbb;text-decoration:none;border-bottom:1px solid transparent}
.msub a:hover{color:#fff;background:none;border-bottom-color:var(--red)}
.mfoot{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:60px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:14px}
.mfoot a{color:#fff;text-decoration:none;border-bottom:2px solid var(--red)}
.mfoot a:hover{background:none;color:var(--red)}
.mpeek{position:fixed;right:var(--gutter);bottom:40px;width:min(36vw,460px);height:auto;opacity:0;transition:opacity .35s;pointer-events:none;z-index:0;transform:rotate(-2deg)}
.mpeek.on{opacity:.9}
@media (max-width:700px){.menuin{padding-top:60px}.mpeek{width:46vw;opacity:0!important}.modes{gap:5px}.modes button{width:15px;height:15px}}
body.menuopen{overflow:hidden}
.menu .fat .l{color:inherit}
/* Seitenwechsel: weicher Farbübergang in der Serienfarbe (kein harter Blitz) */
.veil{position:fixed;inset:0;z-index:290;background:var(--accent);opacity:0;pointer-events:none;transition:opacity .3s ease}
.veil.on{opacity:1;pointer-events:auto}
html.arrive .veil{opacity:1;transition:none}
html.arrive.go .veil{opacity:0;transition:opacity .4s ease}
/* Parallax: Marginalien laufen langsamer mit */
.notes .figs,.einzel .side{will-change:transform}
html.calm .notes .figs,html.calm .einzel .side{transform:none!important}
/* Felix Pfahl: riesiges Wasserzeichen hinter dem Text */
#pfahlwater{position:fixed;left:50%;top:50%;width:min(90vmin,900px);transform:translate(-50%,-50%) rotate(-3deg);opacity:0;pointer-events:none;z-index:0;transition:opacity 1.2s ease;filter:grayscale(1)}
#pfahlwater.on{opacity:.09}
main{position:relative;z-index:1}
/* Endnoten: große Ziffern, Links */
.notes{font-size:15px;max-width:66ch}
.notes ol{list-style:none;padding:0;counter-reset:fn}
.notes li{counter-increment:fn;position:relative;padding-left:2.4em;margin:0 0 .6em;min-height:1.6em}
.notes li::before{content:counter(fn);position:absolute;left:0;top:-.1em;font-family:var(--acc);font-style:italic;font-size:1.9em;line-height:1;color:var(--accent)}
.comicpage .notes li::before{color:#000}
.notes li a{overflow-wrap:anywhere}
.notes li:target{background:var(--hair)}
/* Bewegungsruhe: nur Systemeinstellung "weniger Bewegung" */
html.calm .fat .l{transition:none}
html.calm .serhead .serbg{transition:none}
html.calm .veil{transition:none}
@media print{.progress,.menu,.menubtn,.modes,.veil,#pfahlwater{display:none!important}}
/* Namen in den Danksagungen: Akzentschrift, fett, Akzentfarbe (Josef, 27.10.) */
em.kw.name{font-style:normal;font-weight:700;font-size:1.06em}
/* Großansicht am Handy: Angaben unter dem Bild, nie darüber (Josef, 27.10.) */
@media (max-width:700px){
  .lb.lb.on{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 10px 12px}
  .lb.lb img{position:static;transform:none;max-width:100%;max-height:calc(100dvh - 170px);margin:0;flex:0 1 auto}
  .lb.lb.show img{transform:none}
  .lb.lb .cap{position:static;transform:none;margin-top:10px;max-width:100%;flex:none;background:var(--paper)}
}
/* Serienkopf klebt: im kleinen Zustand nur die Überschrift, der Rest durchsichtig */
.sticky-head{background:none;pointer-events:none}
.sticky-head h2{transform-origin:left top;transition:transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:auto}
.sticky-head .serbg,.sticky-head .meta{transition:opacity .25s}
.sticky-head.small .serbg,.sticky-head.small .meta{opacity:0}
.sticky-head.small h2{transform:scale(.3);background:var(--paper);box-shadow:0 0 0 8px var(--paper);display:inline-block;max-width:100%}
.comicpage .sticky-head.small h2{background:var(--blue);box-shadow:0 0 0 10px var(--blue)}
.sticky-head.small .fat .l{--st:0px!important}
body.comicbody .veil{background:var(--blue-ink)}
body.start .veil{background:var(--green)}
/* ============================================================
   Bilder vor Schrift (zweites Interview, 27.10.): Auftakt, wildes Raster, Einflug, Marginalie, Trenner
   ============================================================ */
.opener{position:relative;margin:0 calc(-1*var(--gutter));min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--gutter) 5vh;overflow:hidden;background:var(--paper)}
.opener img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:6vh 4vw;box-sizing:border-box;filter:brightness(.92)}
.opener h2{position:relative;z-index:1;font-size:clamp(44px,11vw,220px);line-height:.9;margin:0;--fatmax:.05em;padding-bottom:.12em}
@media (max-height:640px){.opener h2{font-size:clamp(36px,8vw,120px)}.opener h2.long{font-size:clamp(30px,6vw,90px)}.opener img{padding:4vh 4vw}}
.opener::after{content:'';position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(to top,var(--paper) 0%,transparent 100%);opacity:.85;pointer-events:none}
.opener.noimg::after{display:none}
.comicpage .opener{background:none}.comicpage .opener::after{background:linear-gradient(to top,var(--blue),transparent)}
html[data-mode=dunkel] .comicpage .opener::after{background:linear-gradient(to top,#0b1a20,transparent)}html[data-mode=rot] .comicpage .opener::after{background:linear-gradient(to top,#E2231A,transparent)}
.opener h2.long{font-size:clamp(36px,7.5vw,150px)}
.opener h2.xlong{font-size:clamp(28px,5vw,96px);line-height:.95}
.opener.noimg{min-height:0;padding-top:6vh;padding-bottom:3vh}
html[data-mode=dunkel] .opener img{filter:brightness(.82)}
.serhead{min-height:0;overflow:visible;padding:18px 0 0}
.serhead .minititle{text-transform:uppercase;display:none;font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(18px,2vw,30px);line-height:1;background:var(--paper);padding:4px 0}
.sticky-head{pointer-events:none;background:none}
.sticky-head .meta,.sticky-head .topics{transition:opacity .25s}
.sticky-head.small .meta,.sticky-head.small .topics{opacity:0}
.sticky-head.small .minititle{display:inline-block;pointer-events:auto}
.sticky-head.small h2{transform:none;background:none;box-shadow:none}
/* wildes Raster */
.grid.wild{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:clamp(10px,2vw,30px) clamp(8px,1.6vw,24px);margin-top:clamp(28px,5vw,70px);align-items:center}
.grid.wild .work{grid-column:span 1;margin:0;transform:rotate(var(--tilt,0deg));will-change:transform;position:relative}
.grid.wild .work.s2{grid-column:span 2}
.grid.wild .work.s3{grid-column:span 3}
.grid.wild .work.big{grid-column:span 2}
.grid.wild .work img{box-shadow:0 10px 30px -14px rgba(0,0,0,.6);background:var(--hair)}
.grid.wild .work figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:8px 10px;background:var(--paper);color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;font-size:13px;pointer-events:none}
.grid.wild .work:hover figcaption{opacity:1;transform:none}
@media (hover:none){.grid.wild .work figcaption{position:static;opacity:1;transform:none;background:none;padding:6px 0 0;font-size:12px}}
@media (max-width:620px){.grid.wild{grid-template-columns:repeat(2,1fr)}.grid.wild .work.s3,.grid.wild .work.s2,.grid.wild .work.big{grid-column:span 2}}
@media (min-width:621px) and (max-width:1000px){.grid.wild{grid-template-columns:repeat(4,1fr)}}
/* Einflug: app.js setzt --p (0 unten am Rand, 1 gelandet), --sx (Skalierung riesig), --tx (Verschiebung zur Mitte) */
.grid .work.fly,.powtiles figure.fly,.einzel .work.fly,.marg figure.fly{transform:translate(var(--tx,0px),0) scale(var(--s,1));z-index:calc(20 - var(--z,0));transition:none;position:relative;transform-origin:50% 50%}
.grid .work.fly img{box-shadow:0 30px 60px -20px rgba(0,0,0,.7)}
.grid .work{position:relative}
.bigcap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(22px,4.2vw,76px);line-height:.9;color:#fff;text-align:center;width:100%;pointer-events:none;opacity:var(--cap,0);text-shadow:0 2px 24px rgba(0,0,0,.6);--fatmax:.03em;z-index:2}
.bigcap small{display:block;font-family:var(--acc);font-style:italic;text-transform:none;font-size:.32em;margin-top:.3em}
html[data-mode=rot] .bigcap{color:#000;text-shadow:0 2px 24px rgba(226,35,26,.8)}
/* Ausstellungsansicht als Trenner: bildschirmfüllend, angeschnitten, Parallax */
.bleed{position:relative;margin:clamp(40px,8vw,120px) calc(-1*var(--gutter)) 0;height:82vh;overflow:hidden;background:#000}
.bleed a{display:block;height:100%}
.bleed img{width:100%;height:120%;object-fit:cover;transform:translateY(var(--py,-10%));will-change:transform;filter:none}
.bleed figcaption{position:absolute;left:var(--gutter);bottom:16px;color:#fff;font-size:13px;background:rgba(0,0,0,.55);padding:6px 10px;max-width:60ch}
.bleed figcaption i{font-family:var(--acc)}
.comicpage .bleed{background:var(--blue)}
/* Text mit Marginalie */
.textwrap{display:grid;grid-template-columns:1fr;gap:28px 48px;margin-top:clamp(40px,7vw,100px)}
@media (min-width:1000px){.textwrap{grid-template-columns:minmax(0,62ch) minmax(160px,260px)}}
.textwrap .sertext{margin-top:0}
.marg{font-size:12px;line-height:1.35;color:var(--grey)}
.marg h4{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.marg figure{margin:0 0 16px;max-width:200px}
.marg figure img{width:100%;height:auto;filter:grayscale(1) contrast(.85) brightness(1.05);background:var(--hair);transition:transform .25s}
.marg figure:hover img{filter:grayscale(1) contrast(1)}
.marg figcaption{margin-top:5px}
.marg .abb{color:var(--accent);font-weight:700}
.marg a{display:block}
.marg a:hover{background:none}
html[data-mode=dunkel] .marg figure img{filter:grayscale(1) contrast(.85) brightness(.8)}
.comicpage .marg .abb,.comicpage .marg h4{color:#000}
/* Hover-Vorschau: Bild sofort groß über dem Raster */
.hov{position:fixed;z-index:85;pointer-events:none;opacity:0;transition:opacity .15s,transform .2s cubic-bezier(.2,.8,.2,1);transform:scale(.92);max-width:min(70vw,900px);max-height:70vh}
.hov.on{opacity:1;transform:scale(1)}
.hov img{max-width:min(70vw,900px);max-height:70vh;width:auto;height:auto;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);background:#fff;display:block}
.hov .cap{position:absolute;left:0;bottom:-28px;font-size:12px;color:var(--ink);background:var(--paper);padding:3px 8px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Startseite: Werke bildschirmfüllend hinter dem Text */
.peekbig{position:fixed;inset:0;width:100%;height:100%;object-fit:contain;padding:8vh 6vw;box-sizing:border-box;z-index:0;opacity:0;transition:opacity .3s;pointer-events:none;mix-blend-mode:multiply}
.peekbig.on{opacity:.95}
.landing>*:not(.peekbig):not(.peek){position:relative;z-index:1}
.landing .peekbig{z-index:0}
.landing .peek.off{display:none}
/* Tonspur: riesige Zeilen, riesiger Play-Knopf, Player fällt ins Bild */
.tonspur{margin-top:clamp(40px,7vw,100px);border-top:2px solid var(--line);padding-top:24px}
.tonspur h3{font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0;color:var(--grey)}
.tonspur>.n{font-size:14px;margin:4px 0 0}
.song{display:grid;grid-template-columns:clamp(70px,9vw,140px) 1fr;gap:16px 28px;align-items:center;padding:clamp(24px,4vw,56px) 0;border-bottom:1px solid var(--hair);position:relative}
.song .playbig{width:clamp(70px,9vw,140px);height:clamp(70px,9vw,140px);border:0;background:none;color:var(--accent);padding:0;cursor:pointer;transition:transform .15s cubic-bezier(.2,.8,.2,1.6);display:block}
.song .playbig svg{width:100%;height:100%;display:block}
.song .playbig:hover{transform:scale(1.12) rotate(-6deg);background:none}
.song .playbig.on{transform:scale(.9);color:var(--ink)}
.song .playbig:active{transform:scale(1.4)}
.song .quote{font-family:var(--head);font-weight:700;text-transform:uppercase;font-size:clamp(24px,4.6vw,84px);line-height:.95;--fatmax:.04em}
.song .songmeta{font-family:var(--acc);font-style:italic;font-size:clamp(15px,1.3vw,20px);margin:10px 0 0}
.song .songmeta .n{font-style:normal}
.song .spot{grid-column:1/-1;margin:0;overflow:hidden;max-height:0;transition:max-height .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1.4);transform:translateY(-30px)}
.song .spot.on{max-height:120px;transform:none}
.song .spot iframe{display:block;border:0;width:100%;height:80px;border-radius:12px}
.song.playing .quote{color:var(--accent)}
section.playing{background:color-mix(in srgb,var(--accent) 9%,var(--paper))}
.pulse img{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
html.calm .pulse img{animation:none}
.songbg{position:fixed;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;padding:8vh 8vw;box-sizing:border-box;opacity:0;transition:opacity .3s;pointer-events:none;filter:brightness(.85)}
.songbg.on{opacity:.5}
/* Großansicht neu: schwarz, bildschirmfüllend, Wischen, Zoom, Lupe, Play */
.lb2{position:fixed;inset:0;z-index:100;background:#000;display:none;opacity:0;transition:opacity .28s ease;touch-action:none;overflow:hidden;cursor:none}
.lb2.on{display:block}.lb2.vis{opacity:1}
.lb2 .stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lb2 img.main{max-width:100%;max-height:100%;width:auto;height:auto;transform-origin:0 0;will-change:transform;user-select:none;-webkit-user-drag:none}
.lb2 .cap{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);max-width:min(80ch,92vw);text-align:center;padding:4px 10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;line-height:1.35;font-family:var(--body);z-index:3}
.lb2 .cap i{font-family:var(--acc)}
.lb2 button{position:absolute;z-index:4;background:rgba(0,0,0,.55);color:#fff;border:1.5px solid #fff;font:700 13px var(--sans);padding:8px 12px;cursor:pointer;letter-spacing:.06em;text-transform:uppercase}
.lb2 button:hover{background:#fff;color:#000}
.lb2 .x{top:14px;right:14px;font:400 30px/30px var(--body);width:48px;height:48px;padding:0}
.lb2 .p{left:14px;top:50%;transform:translateY(-50%)}.lb2 .nx{right:14px;top:50%;transform:translateY(-50%)}
.lb2 .cnt{position:absolute;left:14px;top:18px;color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.12em;z-index:3}
.lb2 .lens{position:absolute;width:240px;height:240px;border-radius:50%;border:3px solid #fff;box-shadow:0 10px 40px rgba(0,0,0,.6);background-repeat:no-repeat;pointer-events:none;display:none;z-index:3;transform:translate(-50%,-50%)}
.lb2 .lens.on{display:block}
.lb2 .play{bottom:60px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;text-transform:none;font-family:var(--acc);font-style:italic;font-size:15px;letter-spacing:0}
.lb2 .play svg{width:34px;height:34px}
.lb2 .lbspot{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);width:min(500px,90vw);z-index:4}
.lb2 .lbspot iframe{display:block;border:0;width:100%;height:80px;border-radius:12px}
@media (max-width:620px){.lb2 .p,.lb2 .nx{top:auto;bottom:14px;transform:none}.lb2 .cap{bottom:64px}.lb2 .lens{display:none!important}}
body.lbopen{overflow:hidden}
/* ============================================================
   Eigener Zeiger (viertes Interview): groß, animiert, Spur, Schlag, Abdruck, Lupe, Radiergummi
   ============================================================ */
/* Josef, 28.10., 01:11: Systemzeiger bleibt (genau, auch per Remotedesktop); der gezeichnete Zeiger begleitet ihn rechts unten */
html.cur .cur-el{margin:4px 0 0 8px}
/* Josef, 28.10., 01:18: Zeiger nur leicht über Standardgröße */
.cur-el{position:fixed;left:0;top:0;width:44px;height:44px;pointer-events:none;z-index:1000;margin:4px 0 0 8px;will-change:transform;opacity:0;transition:opacity .2s;transform-origin:0 0}
.cur-el.on{opacity:1}
.cur-el img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:0 0;transform-origin:16px 16px;}
.cur-el.hit img{animation:hit .34s cubic-bezier(.2,.9,.2,1.4)}
@keyframes breathe{0%,100%{transform:rotate(-2deg) scale(1)}50%{transform:rotate(3deg) scale(1.05)}}
@keyframes hit{0%{transform:scale(1)}30%{transform:scale(1.9) rotate(-8deg)}100%{transform:scale(1)}}
.cur-el .lensc,.cur-el .eras{position:absolute;inset:0;width:100%;height:100%;display:none}
.cur-el.lens img,.cur-el.eras img{display:none}
.cur-el.lens .lensc{display:block;width:48px;height:48px;transform:translate(-24px,-24px)}
.cur-el.eras .eras{display:block;width:48px;height:48px;transform:translate(-22px,-22px) rotate(-20deg)}
.cur-ghost{display:none}
.cur-ghost img{width:100%;height:100%;object-fit:contain;object-position:0 0}
.imprint{position:absolute;width:34px;height:34px;pointer-events:none;z-index:5;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0);animation:imp 3.2s ease-out forwards;color:var(--accent)}
.imprint svg{width:100%;height:100%;display:block}
@keyframes imp{0%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(0);opacity:1}12%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1.15)}30%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1);opacity:.9}100%{transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1);opacity:0}}
.mute{width:30px;height:30px;border:1.5px solid var(--ink);background:none;color:var(--ink);border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mute svg{width:16px;height:16px}
.mute.off{color:var(--accent);border-color:var(--accent)}
.mute:hover{background:var(--ink);color:var(--paper)}
body.start .mute{border-color:#000;color:#000}
.atmo{font:inherit;font-family:var(--sans);text-transform:uppercase;letter-spacing:.1em;font-size:11px;background:none;border:1.5px solid var(--ink);color:var(--ink);padding:4px 9px;cursor:pointer;margin-top:10px}
.atmo.on{background:var(--accent);border-color:var(--accent);color:#fff}
.sticky-head .atmo{pointer-events:auto}
.sticky-head.small .atmo{opacity:0;pointer-events:none}
html.calm .cur-el img{animation:none}
@media (hover:none){.cur-el,.cur-ghost{display:none!important}}
/* Kein waagerechtes Scrollen durch riesige Titel, Einflug oder Zeiger (Test 27.10.) */
body,main{overflow-x:clip}
.bigcap{overflow:hidden}
@media (max-width:620px){
  .opener h2,.opener h2.long{font-size:clamp(28px,9.5vw,60px)}
  .opener h2.xlong{font-size:clamp(22px,7vw,40px)}
  .opener h2 .fat .w,.song .quote .fat .w,.pagehead h1 .fat .w{white-space:normal}
  .song{grid-template-columns:56px 1fr;gap:10px 14px}
  .song .playbig{width:56px;height:56px}
  .song .quote{font-size:clamp(22px,7vw,32px)}
}
.info{grid-template-columns:minmax(0,1fr)}.info>div{min-width:0}
@media (min-width:900px){.info{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.cvl span,.legal p,.credits{overflow-wrap:anywhere}
@media (max-width:600px){.nlknob{left:auto;right:10px}.nlpanel{left:10px;right:10px;width:auto}}

/* Augenschonend (Josef, 27.10., 20:09): im Dunkelmodus kein hartes Weiß, auch nicht in großen Bildern, Vorschauen und Schrift */
html[data-mode=dunkel]{--ink:#d6d6d6;--line:#bdbdbd;--grey:#8f8f8f}
html[data-mode=dunkel] .hov img,html[data-mode=dunkel] .lb2 img.main,html[data-mode=dunkel] .opener img,html[data-mode=dunkel] .bleed img,html[data-mode=dunkel] .songbg,html[data-mode=dunkel] .lb2 .lens{filter:brightness(.74) contrast(.94)}
html[data-mode=dunkel] .peekbig{filter:brightness(.8)}
html[data-mode=dunkel] .menu{background:#050505;color:#d6d6d6}
html[data-mode=dunkel] .menunav .mh,html[data-mode=dunkel] .mfoot a,html[data-mode=dunkel] .menux{color:#d6d6d6}
html[data-mode=dunkel] .hero .hl:not(.red),html[data-mode=dunkel] .landing .bigtabs a{color:#0a0a0a}
html[data-mode=dunkel] .bigcap{color:#d6d6d6}
html[data-mode=dunkel] .lb2 .cap,html[data-mode=dunkel] .lb2 button{color:#d6d6d6;border-color:#d6d6d6}
html[data-mode=dunkel] .lb2 button:hover{background:#d6d6d6;color:#000}
html[data-mode=dunkel] .nlrow button,html[data-mode=dunkel] .nlpanel button[type=submit]{color:#111}
html[data-mode=dunkel] a:hover{color:#111}
html[data-mode=dunkel] .landing .nlform.big{background:#0a0a0a;color:#d6d6d6}
html[data-mode=dunkel] .landing .nlform.big h2{color:#d6d6d6}
html[data-mode=dunkel] .landing .nlform.big .nlrow input{color:#d6d6d6;border-color:#8f8f8f}
html[data-mode=dunkel] ::selection{background:#8a1510;color:#e6e6e6}
html[data-mode=dunkel] .modes button[data-mode=hell]{background:#b8b8b8}
html[data-mode=dunkel] .modes button{border-color:#8f8f8f}
html[data-mode=dunkel] .mute,html[data-mode=dunkel] .menubtn{border-color:#8f8f8f}

/* Zeiger über Fließtext halbtransparent (fünftes Interview) */
.cur-el.dim{opacity:.4}
/* Dürer-Eigenheiten in den großen Titeln (Josef, 27.10., 20:29) */
.fat .l.mac{position:relative}
.fat .l.mac::after{content:'';position:absolute;left:.08em;right:.08em;top:-.12em;height:.07em;background:currentColor}
.fat .l.virgel{margin:0 .04em;transform:skewX(-12deg)}
.ln{display:block}.ln2{font-size:.78em}.ln3{font-size:.62em}
.ln:not(.last)::after{content:' /';opacity:.7}
.fat .l.lig{margin-right:calc(var(--st,0px)*-.55 - .06em)}
.fat .l.um{position:relative}
.fat .l.um .ue{position:absolute;left:50%;top:-.3em;transform:translateX(-50%);font-size:.42em;line-height:1;-webkit-text-stroke:.06em currentColor;font-weight:400;text-transform:none}
.sertext .fat .l.sm,.sertext .fat .l.hi{font-size:inherit;vertical-align:baseline}
/* Monogramm JK (wie Dürers AD) statt JO SEF im Kopf (Josef, 27.10.) */
.mark .mono{height:40px;width:auto;display:block;fill:currentColor}
@media (max-width:700px){.mark .mono{height:32px}}
.mark:hover .mono{fill:var(--red)}
/* Plotter: Fließtext als Einlinien-Schrift, scrollgekoppelt gezeichnet */
.plotted{position:relative}
.plotted .plotsrc{position:absolute!important}
.plot{display:block}
.plot path.acc{stroke:var(--accent)}
.plot path.bold{stroke-width:2px}
.plot path.acc.bold{stroke-width:2.2px}
.plot .tr{stroke:var(--ink);opacity:.14;stroke-width:.6px}
.plot .pen{fill:var(--accent);stroke:none;opacity:0;transition:opacity .2s}
.plot a.wl path{stroke:var(--accent)}
.plot a.wl:hover path{stroke:var(--ink)}
.plotted sup.plotsup{position:absolute;margin:0;line-height:1;transform:translateY(-.3em)}
.comicpage .plot path.acc,.comicpage .plot a.wl path{stroke:var(--blue-ink)}
.plothero{stroke-width:5px}
@media (max-width:700px){.plothero{stroke-width:3px}}
.landing .hero.plotted{color:#000}
.landing .hero.plotted .plot{stroke:#000}
.landing .hero.plotted .pen{fill:var(--red)}
html[data-mode=rot] .plot path.acc{stroke:#000}
.sertext p.plotted em.kw,.sertext p.plotted em.kw.name{font:inherit}
/* Plotter-Realismus: Tintenpunkte, Stifttöne, Farbstift */
.plot .dots circle{fill:var(--ink);stroke:none}
.plot .dots circle.acc{fill:var(--accent)}
.plot path.warm,.plot .dots circle.warm{stroke:#2a1c12;fill:#2a1c12}
.plot path.cool,.plot .dots circle.cool{stroke:#101c2a;fill:#101c2a}
html[data-mode=dunkel] .plot path.warm,html[data-mode=dunkel] .plot .dots circle.warm{stroke:#e3d4c2;fill:#e3d4c2}
html[data-mode=dunkel] .plot path.cool,html[data-mode=dunkel] .plot .dots circle.cool{stroke:#c3d3e4;fill:#c3d3e4}
.plot .dots circle.warm{stroke:none}.plot .dots circle.cool{stroke:none}
.comicpage .plot .dots circle.acc{fill:var(--blue-ink)}
.plot path.bold{stroke-width:inherit}
.lb2 .cap.plotted{min-width:min(60ch,80vw);text-align:left}
.lb2 .cap .plot{stroke:#d6d6d6}.lb2 .cap .plot path.acc{stroke:var(--red)}
.cvl li span.plotted{display:block}
.plot g.pfahlg{pointer-events:stroke;cursor:help}
.plot g.pfahlg path{stroke-width:1.6px}
.minititle .atmo{margin:0 0 0 12px;vertical-align:middle;font-size:10px;padding:3px 7px}
.sticky-head.small .minititle .atmo{opacity:1;pointer-events:auto}
.sticky-head:not(.small) .minititle .atmo{display:none}
.plotted{contain:none;overflow:visible} /* Josef, 28.10., 01:37: paint-Containment hat die rote Schrift oben abgeschnitten */
.plot path{transition:none}

.plotted .plotlink{position:absolute;display:block;cursor:pointer;background:none}
.plotted a.plotlink:hover{background:none}
.plotted .plotlink.pfahl2{cursor:help}
.landing .hero.plotted{color:#000}
.plotted canvas.plot.live{position:absolute;left:0;top:0;pointer-events:none}
.plotted canvas.plot{pointer-events:none;position:relative;z-index:5}
.plotted .plothand{z-index:7}.plotted .plotlink{z-index:8}.plotted sup.plotsup{z-index:8}

/* Dürer-Schriften: alle Titel, Reiter, Menüs in Versalien (Duerer1525 hat nur Versalien) */
nav.tabs a,.subnav a,.menu a,.msub a,.minititle,.bigtabs a,.ctabtn .big,.nextpart,.fxpanel h2,.nlok,.moti p{font-family:var(--head);text-transform:uppercase;font-weight:400;letter-spacing:.02em}
.fat .l{font-weight:400}
.fatready .fat .l{--st:var(--fatmax,.03em)}
/* Unterschrift unter jedem Text, in Dürers Hand */
.sertext p.sig{margin:.6em 0 0;text-align:right;font-size:1.25em}
.sertext p.sig em.kw{font-size:1em}
.sticky-head .minititle,.serhead .minititle{font-size:clamp(16px,1.6vw,22px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(100%,70vw)}

/* Duerer1525: Buchstabenabstand und Zeilen der fetten Titel */
.fat .l{margin-right:.015em}
.fat .l.lig{margin-right:-.01em}
h1 .fat,h2 .fat,.bigtabs .fat,.nextpart .fat{line-height:1.1}

/* Hover über ein Handschriftwort: Federstrich durch das Wort, dann das Wort in Relief fett und rot an derselben Stelle; Handschrift blendet aus */
.plotted .plothand{position:absolute;display:block;z-index:3;cursor:crosshair}
.plotted .plothand::before{content:'';position:absolute;left:-2%;top:55%;width:0;height:2px;background:var(--accent);transform:rotate(-3deg);transition:width .18s ease-out}
.plotted .plothand .plothand-w{position:absolute;left:0;white-space:nowrap;font-family:"Relief",sans-serif;font-weight:700;color:var(--accent);background:none;padding:0 .08em 0 0;opacity:0;-webkit-text-stroke:4px var(--paper);paint-order:stroke fill;transition:opacity .15s} /* Josef, 28.10., 01:24: kein Balken, nur eine Papierkontur um die Buchstaben */
.plotted .plothand.on::before{width:104%}
.plotted .plothand.on .plothand-w{opacity:1}
.plotted .plothand.on{background:none}

/* Drucktextur der Versalien (Holzschnitt): rauer Rand, ungleichmäßige Deckung; Filter und Seeds wechseln je Aufruf (app.js) */
.woodcut .fat .w{filter:url(#holz1)}
.woodcut .fat .w:nth-child(3n+2){filter:url(#holz2)}
.woodcut .fat .w:nth-child(3n){filter:url(#holz3)}
/* Rot = Dürers Hand: alles in der Akzentfarbe läuft in der Handschrift; Bereichsfarbe: Kunst und Vermittlung rot, Comic blau, Texte grün */
body.textbody{--accent:var(--green)}
body.textbody em.kw,body.textbody .meta .acc{color:var(--green)}
sup,.figs .abb,.marg .abb,.meta .acc,.notes h4,.textblock details summary,.footgrid a,a.wl,.sertext a,.work figcaption i,.cover figcaption i,.powtiles figcaption i,.chron i,.cvl i,.scriptcap i,.playcap i,.playmark i,.nlok{font-family:var(--acc);font-style:normal;font-weight:400}
sup{font-size:.95em;vertical-align:super;line-height:0}
.figs .abb,.marg .abb{font-size:1.2em}
.work figcaption i,.cover figcaption i,.powtiles figcaption i{color:var(--accent);font-size:1.25em;line-height:0}
.sertext a{font-size:1.15em;line-height:0}
/* Roter Modus: Handschrift schwarz, Versalien weiß */
html[data-mode=rot] em.kw,html[data-mode=rot] sup,html[data-mode=rot] .abb,html[data-mode=rot] .work figcaption i{color:#000}
html[data-mode=rot] h1,html[data-mode=rot] h2,html[data-mode=rot] .fat,html[data-mode=rot] nav.tabs a,html[data-mode=rot] .subnav a{color:#fff}
/* Holzschnitt-Textur nur auf großen Titeln */
.woodcut nav.tabs .fat .w,.woodcut .subnav .fat .w,.woodcut .menu .fat .w,.woodcut .minititle .fat .w{filter:none}

/* Hero: Monogramm geplottet, darunter die Handzeile (Josef, 28.10.) */
.landing .hero{overflow:visible}
.landing .herohand{font-size:clamp(18px,2.4vw,34px);margin:.2em 0 1.2em;color:#000;--accent:#000}
.landing .herohand .plot{stroke:#000}
.landing .herohand em{font-size:1em}
.landing .hero.plotted .plotsrc{display:none}

/* Konstruktionsnetz beim Hover über große Titel (Fierung, Zirkelschläge), Josef 28.10. */
.pagehead h1,.serhead h2,.bigtabs a,.opener h2{position:relative}
svg.net{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none;stroke:var(--accent,#E2231A);stroke-width:1;opacity:0;animation:netfade 1.6s ease-out forwards;z-index:3}
svg.net .f{stroke-dasharray:2 3;opacity:.7}
@keyframes netfade{0%{opacity:0}18%{opacity:.85}70%{opacity:.6}100%{opacity:0}}
/* geplottete Trenner zwischen den Serien: leicht unregelmäßige Linie, wird beim Scrollen gezogen */
.divider{height:34px;margin:40px 0 10px;position:relative}
.divider canvas{position:absolute;left:0;top:0;width:100%;height:100%}
html.calm svg.net{display:none}
/* Bildunterschriften: eine Größe, grau, Werktitel in der Handschrift in der Bereichsfarbe (Josef 28.10.) */
.work figcaption,.figs figcaption,.powlead figcaption,.powinfo figcaption,.powgrid figcaption,.powtiles figcaption,.cover figcaption,.grid.wild .work figcaption,.lb.lb .cap,.lb.lb .cap *{font-size:12.5px!important;line-height:1.35!important;color:var(--grey)!important}
.work figcaption i,.cover figcaption i,.powtiles figcaption i,.lb.lb .cap i,.figs figcaption i,.powgrid figcaption i{font-family:var(--acc);color:var(--accent,#E2231A)!important;font-size:1.25em!important}
.grid.wild .work figcaption{font-size:12.5px!important}

/* Info: Werkzeugtext; 404 als Brief; Modem-Satz in Versalien; Handabsatz (zwei Stimmen) */
.info .sertext{max-width:62ch;margin:0 0 18px}
.nf .brief p{margin:0 0 .9em}
.modem small{font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:15px;color:#9c9}
p.handp{line-height:1.9}
p.handp em{font-size:1.15em}
.idleline{position:fixed;left:0;top:0;width:48px;height:100vh;pointer-events:none;z-index:4;opacity:.8;transition:opacity .6s}
@media (max-width:700px){.idleline{display:none}}
/* SUCHBILD (Spiel) */
.sbcount{display:inline-flex;align-items:center;gap:3px;margin-right:12px;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink);font:12px/1 var(--body);cursor:pointer;letter-spacing:.04em}
.sbcount svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sbcount b{font-weight:700}.sbcount span{color:var(--grey)}
.sbcount.bump{animation:sbbump .4s ease}
@keyframes sbbump{30%{transform:scale(1.25)}}
.sbobj{position:absolute;z-index:5;cursor:help;height:auto;transition:transform .35s cubic-bezier(.2,.9,.3,1.5),opacity .4s;filter:drop-shadow(0 0 0 transparent)}
.sbobj.d2{opacity:.85}.sbobj.d3{opacity:.62;mix-blend-mode:multiply}
html[data-mode=dunkel] .sbobj.d3{mix-blend-mode:screen}
.sbobj.found{opacity:.35;cursor:default;filter:grayscale(1)}
.sbobj.pop{animation:sbpop .7s cubic-bezier(.2,.9,.3,1.4)}
@keyframes sbpop{0%{transform:scale(1)}35%{transform:scale(1.8) rotate(-6deg)}100%{transform:scale(1)}}
.sbsplash{position:fixed;width:120px;height:120px;pointer-events:none;z-index:450;animation:sbsplash 1.3s ease-out forwards}
@keyframes sbsplash{0%{transform:scale(.2);opacity:1}25%{transform:scale(1.1);opacity:.95}100%{transform:scale(1.3);opacity:0}}
.sbnote{position:fixed;top:70px;right:16px;z-index:460;max-width:min(42ch,80vw);background:var(--paper);border:1px solid var(--line);padding:10px 14px;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s;pointer-events:none}
.sbnote.on{opacity:1;transform:none}.sbnote p{margin:0;font-size:14px;line-height:1.5}
.sbcert{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.sbcert .sq{position:relative;width:min(92vw,92vh,640px);aspect-ratio:1;background:#00A651;color:#000;padding:clamp(18px,5%,40px);display:flex;flex-direction:column;gap:10px;overflow:hidden}
.sbcert .ct{font-family:var(--head);font-weight:400;font-size:clamp(34px,8vmin,80px);margin:0;line-height:1}
.sbcert .cp{margin:0;font-size:clamp(14px,2.4vmin,18px);line-height:1.5}
.sbcert .x{position:absolute;right:10px;top:6px;background:none;border:0;font-size:28px;color:#000;cursor:pointer}
.sbcert label{font-size:14px}.sbcert input{font:inherit;padding:4px 8px;border:1px solid #000;background:#fff;color:#000;margin-left:6px;width:14ch}
.sbcert .cbtn{display:flex;flex-wrap:wrap;gap:8px}.sbcert .cbtn button{font:inherit;font-size:14px;padding:6px 12px;border:1px solid #000;background:#fff;color:#000;cursor:pointer}
.sbcert .cnote{font-size:11.5px;margin:auto 0 0;color:#003d1e}
.sbcert svg.cm{position:absolute;right:5%;bottom:5%;width:14%;height:auto;color:#000;fill:#000;opacity:.9}
.sbboard{margin:28px 0 8px;max-width:62ch}.sbboard h3{font-family:var(--head);font-weight:400;text-transform:uppercase;font-size:20px;margin:0 0 8px}
.sbboard ol{padding-left:1.6em;margin:8px 0}.sbboard li{line-height:1.6}.sbboard li span{color:var(--grey);font-size:.9em;margin-left:.5em}
.sbboard p{font-size:14px;line-height:1.5;margin:0 0 6px}.sbme{color:var(--grey)}
html.calm .sbobj.pop,html.calm .sbsplash,html.calm .sbcount.bump{animation:none}
/* Dialogfenster Felix Pfahl (SNES-Stil) */
.sbdlg{position:fixed;left:0;right:0;bottom:0;z-index:480;display:flex;justify-content:center;padding:0 12px 18px;cursor:pointer;animation:sbdlgin .35s ease-out}
.sbdlg.off{opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s}
@keyframes sbdlgin{from{opacity:0;transform:translateY(16px)}}
.sbdlg .win{display:flex;gap:14px;align-items:flex-start;width:min(720px,100%);background:var(--paper);color:var(--ink);border:3px double var(--line);box-shadow:6px 6px 0 var(--c,var(--accent,#E2231A));padding:14px 18px;min-height:120px}
.sbdlg img{width:96px;height:96px;object-fit:cover;object-position:top;flex:none;border:1px solid var(--line)}
.sbdlg .txt{flex:1;position:relative;font-family:var(--body);font-size:17px;line-height:1.5;min-height:96px}
.sbdlg p{margin:0;padding-right:18px}
.sbdlg .more{position:absolute;right:0;bottom:0;font-style:normal;font-size:11px;animation:sbmore 1s infinite}
@keyframes sbmore{50%{transform:translateY(3px)}}
@media (max-width:600px){.sbdlg .win{gap:10px;padding:10px 12px}.sbdlg img{width:52px;height:52px}.sbdlg .txt{font-size:14px}}
.sbdlg .who{display:block;font-family:var(--head);font-weight:400;letter-spacing:.08em;font-size:17px;margin:0 0 4px;line-height:1}
/* Fensterstile je Figur */
.sbdlg .win{border-color:var(--c,var(--ink))}
.sbdlg .who{color:var(--c,var(--ink))}
.sbdlg img{border-color:var(--c,var(--ink))}
.sbdlg.c-inka .win{background-image:radial-gradient(var(--c) .9px,transparent 1px);background-size:6px 6px;background-color:var(--paper)}
.sbdlg.c-inka .txt{background:var(--paper);padding:4px 6px}
.sbdlg.c-wagner .win{border-width:3px;border-radius:14px;box-shadow:4px 4px 0 var(--c)}
.sbdlg.c-xae .win{border-width:1px;box-shadow:none;background:#f2f2f2;color:#000;font-variant-numeric:tabular-nums}
html[data-mode=dunkel] .sbdlg.c-xae .win{background:#151515;color:#fff}
.sbdlg.c-sigma .win{border-style:dashed;border-radius:20px 8px 18px 10px/10px 18px 8px 20px;filter:drop-shadow(0 0 6px rgba(0,166,81,.35))}
.sbdlg.c-sigma p{letter-spacing:.02em}
.sbdlg.c-gojira .win{border-width:5px;background:#00A651;color:#000}
.sbdlg.c-gojira .who{color:#000}
.sbdlg.c-gojira p{font-size:28px;letter-spacing:.3em}
html.beben{animation:beben 2.2s ease-in-out}
@keyframes beben{10%,30%,50%,70%{transform:translate(1px,-1px)}20%,40%,60%,80%{transform:translate(-1px,1px)}}
html.calm.beben{animation:none}
/* Kleine Fenster (Josef, 28.10., 01:05: Cloud-PC 1040 x 515 bei 175 %): Kopfzeile einzeilig, Untermenü und Serienkopf nicht mehr klebend bei niedriger Höhe */
@media (min-width:1001px) and (max-width:1450px){
  .top{flex-wrap:nowrap;gap:12px}
  .top nav.tabs{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;font-size:13px;gap:14px;letter-spacing:.04em}
  .top nav.tabs::-webkit-scrollbar{display:none}
  .modes{margin-left:4px}.sbcount{margin-right:6px}.menubtn{padding:4px 8px;font-size:12px}
}
@media (max-height:650px){
  .subnav{position:static}
  .sticky-head{position:static!important}
  .sticky-head.small .minititle{display:none}
  .sbdlg .txt{font-size:15px;min-height:0}.sbdlg img{width:64px;height:64px}
}
.sbcall{margin-right:8px;padding:3px 8px;font-size:12px;border:1px solid var(--line);background:none;color:var(--ink);font-family:var(--head);text-transform:uppercase;letter-spacing:.06em;font-size:13px;cursor:pointer;white-space:nowrap}
.sbcall:hover{background:var(--ink);color:var(--paper)}
body.start .sbcall{border-color:#000;color:#000}
@media (max-width:700px){.sbcall{font-size:11px;padding:2px 6px}}
@media (min-width:701px) and (max-width:1000px){.top{gap:8px 12px}.top nav.tabs{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;font-size:13px;gap:16px}.top nav.tabs::-webkit-scrollbar{display:none}}
/* Handwörter erst nach dem Schreiben anfassbar (Josef, 01:25) */
.plotted .plothand{pointer-events:none}.plotted.plotdone .plothand{pointer-events:auto}
/* Josef, 28.10., 01:35: Comic-Hintergrund wie überall sonst (Papier), Blau bleibt Akzent */
main.comicpage,html[data-mode=dunkel] main.comicpage,html[data-mode=rot] main.comicpage{background:var(--paper)}
.comicpage .subnav,html[data-mode=dunkel] .comicpage .subnav{background:var(--paper)}
.comicpage .opener::after,html[data-mode=dunkel] .comicpage .opener::after,html[data-mode=rot] .comicpage .opener::after{background:linear-gradient(to top,var(--paper),transparent)}
.comicpage .sticky-head,html[data-mode=dunkel] .comicpage .sticky-head{background:var(--paper)}
.comicpage sup.fn:hover,.comicpage sup.fn.on{background:var(--blue-ink);color:#fff}
/* Josef, 28.10., 01:37: Systemzeiger überall, keine Zeigereffekte */
html,html *{cursor:auto}
html a,html button,html [role=button],html label,html summary,html .work a,html a.reflink,html sup.fn,html .sbobj,html .plothand,html .sbdlg,html input[type=range],html input[type=checkbox]{cursor:pointer}
html input[type=text],html input[type=email],html textarea{cursor:text}
.lb2{cursor:auto}
/* Entscheidungen 28.10., 01:51 bis 01:54 */
.progress i,.progress2 i{transition:width .45s cubic-bezier(.2,.7,.2,1)}   /* Balken weich, kein Springen */
.hov{max-height:50vh;max-width:min(60vw,760px)}   /* Vorschau kleiner: halbe Bildschirmhöhe */
.hov img{max-height:44vh}
p.handp{font-size:1.25em;line-height:2.2}   /* Dank-Absatz größer und weiter gesetzt */
.lb2 .cap a.src{display:inline-block;margin-left:.6em;font-size:.9em;color:var(--accent);text-decoration:underline}
.marg a.src,.figs a.src{display:inline;font-size:11px;color:var(--accent)}
.sbobj{z-index:30}
body{overflow-x:clip}

/* Danksagungen (Josef, 28.10., 06:32): eigene Akzentfarbe Prozessgrün für Handschrift und Unterschrift Josef Knoll */
p.handp,p.sig.sigdank{--accent:#00A651;--red:#00A651}
p.handp em.kw,p.sig.sigdank em.kw{color:#00A651}