/* Drei Designs neben dem Original aus app.css: Videotext, Mangaheft, Washi.
   Jedes gibt es hell und dunkel. theme.js setzt data-theme und data-scheme
   auf <html>, gewählt wird im Panel „Design“, gespeichert nur auf dem Gerät.

   Aufbau je Design:
   1. Tokens, dunkel und hell. Jedes Design legt ALLE Tokens fest (Liste in
      app.css) und dazu eigene mit Kürzel (--tt-, --mg-, --wa-). Die
      Selektoren gelten mit Absicht auch für die Vorschau-Kacheln im Panel.
   2. Eigenheiten, immer mit :root[data-theme=…] davor. Damit bleiben die
      Kacheln der anderen Designs unberührt, denn in der Kachel steckt
      das Attribut auf der Kachel, nicht auf :root.
   3. Die Vorschau-Kachel, .pv[data-theme=…].

   Schriften lädt der Browser erst, wenn ein Design sie wirklich braucht. Der
   Service Worker legt sie beim ersten Abruf in den Cache, danach gehen sie
   auch offline. Lizenzen und Herkunft in fonts/README.md.

   Einschränkung für alle: Bewegung (Blinken, Anheben, Übergänge) schaltet
   die Regel prefers-reduced-motion in app.css komplett ab. */

/* Nur ein Schnitt vorhanden: den ganzen Gewichtsbereich darauf abbilden,
   sonst rechnet der Browser bei font-weight:700 eine unschöne Fettung dazu. */
@font-face{font-family:"VT323";src:url("fonts/vt323-400.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Dela Gothic One";src:url("fonts/dela-gothic-one-400.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Maru Gothic";src:url("fonts/zen-maru-gothic-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Maru Gothic";src:url("fonts/zen-maru-gothic-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Maru Gothic";src:url("fonts/zen-maru-gothic-700.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Shippori Mincho";src:url("fonts/shippori-mincho-500.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:"Shippori Mincho";src:url("fonts/shippori-mincho-700.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("fonts/zen-kaku-gothic-new-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("fonts/zen-kaku-gothic-new-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Zen Kaku Gothic New";src:url("fonts/zen-kaku-gothic-new-700.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}


/* ═══════════════════════════ Videotext ═══════════════════════════
   Das Design zum alten Namen Sendeplan: eine Tafel wie ARD-Text. Acht
   Farben, Blockgrafik statt Rahmen, Seitennummern an den Reitern, oben die
   Kopfzeile mit laufender Uhr, im Fuß die vier Fastext-Tasten, dazu das
   Zeilenraster der Röhre. Hell ist dieselbe Tafel auf Papier gedruckt.

   Blockfarben (--tt-*) sind in beiden Modi gleich grell, Schrift darauf ist
   immer schwarz. Die Statusfarben für Schrift werden hell abgedunkelt. */
[data-theme="videotext"]{
  --ink:#000; --ink2:#07070d; --ink3:#1d1d2a;
  --line:#2233dd; --line2:#5566ff;
  --text:#fff; --dim:#45e6ff; --dim2:#b8b8c6;
  --ready:#42ff6b; --airing:#ffe93b; --soon:#ff66f0; --dead:#ff5c5c;
  --accent:#ffe93b; --on-accent:#000;
  --go:#ffe93b; --on-go:#000; --go-hover:#fff;
  --page:none;
  --disp:"IBM Plex Mono",ui-monospace,monospace;
  --head:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:0px; --r2:0px;
  --tt-r:#ff4545; --tt-g:#3dff66; --tt-y:#ffe93b; --tt-b:#2233dd; --tt-m:#ff5cf0; --tt-c:#3de8ff;
  --tt-scan:rgba(0,0,0,.28);
}
[data-theme="videotext"][data-scheme="light"]{
  --ink:#eeeee6; --ink2:#fbfbf6; --ink3:#d5d5cb;
  --line:#2233dd; --line2:#0b1699;
  --text:#000; --dim:#005468; --dim2:#46464f;
  --ready:#006a1b; --airing:#6b5500; --soon:#8c0083; --dead:#b0001a;
  --accent:#2233dd; --on-accent:#fff;
  --go:#000; --on-go:#ffe93b; --go-hover:#2233dd;
  --page:none;
  --disp:"IBM Plex Mono",ui-monospace,monospace;
  --head:"VT323","IBM Plex Mono",ui-monospace,monospace;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --r:0px; --r2:0px;
  --tt-r:#ff4545; --tt-g:#3dff66; --tt-y:#ffe93b; --tt-b:#2233dd; --tt-m:#ff5cf0; --tt-c:#3de8ff;
  --tt-scan:rgba(0,0,0,.035);
}

/* Zeilenraster über allem, klickt nicht mit */
:root[data-theme="videotext"] body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;
  background:repeating-linear-gradient(to bottom,var(--tt-scan) 0 1px,transparent 1px 3px)}

/* Kopfzeile: P100  2WATCHLIST  Di 29.09.  21:37:05 */
:root[data-theme="videotext"] .ttx{display:flex;align-items:baseline;gap:0 1.4ch;flex-wrap:wrap;padding-top:14px;
  font-family:var(--head);font-size:23px;line-height:1.1;letter-spacing:.02em}
:root[data-theme="videotext"] .ttx .n{background:var(--tt-c);color:#000;padding:0 .5ch}
:root[data-theme="videotext"] .ttx .d{margin-left:auto}
:root[data-theme="videotext"] .ttx .t{color:var(--airing);font-variant-numeric:tabular-nums}
:root[data-theme="videotext"] .bar{padding-top:10px}

/* Titel als blaues Band mit gelber Schrift, darunter eine Reihe Blockgrafik */
:root[data-theme="videotext"] header{padding-top:18px}
:root[data-theme="videotext"] h1{font-weight:400;font-size:clamp(52px,12vw,88px);line-height:.82;letter-spacing:.01em;
  color:var(--tt-y);background:var(--tt-b);padding:12px 14px 4px}
:root[data-theme="videotext"] h1 .two{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--tt-c)}
:root[data-theme="videotext"] h1::after{content:"";display:block;height:10px;margin:8px -14px -4px;
  background:linear-gradient(90deg,var(--tt-r) 0 20%,var(--tt-y) 0 40%,var(--tt-g) 0 60%,var(--tt-c) 0 80%,var(--tt-m) 0)}
:root[data-theme="videotext"] .tag{color:var(--dim);margin-top:14px}

/* Kennzahlen als volle Farbflächen */
:root[data-theme="videotext"] .stat{border:0;box-shadow:none;background:var(--ink3);padding:10px 12px 11px}
:root[data-theme="videotext"] .stat .n{font-weight:400;font-size:46px;line-height:.8}
:root[data-theme="videotext"] .stat.ready{background:var(--tt-g)}
:root[data-theme="videotext"] .stat.run{background:var(--tt-y)}
:root[data-theme="videotext"] .stat.soon{background:var(--tt-m)}
:root[data-theme="videotext"] .stat:not(.nil) :is(.n,.k,.s){color:#000}
:root[data-theme="videotext"] .stat.nil .n{color:var(--dim2)}

/* Knöpfe: blaue Blöcke, Schrift aus dem Zeichengenerator */
:root[data-theme="videotext"] .btn{font-family:var(--head);font-weight:400;font-size:22px;line-height:1;padding:9px 16px 6px;
  background:var(--tt-b);border:0;color:#fff}
:root[data-theme="videotext"] .btn:hover{background:#4355ff}
:root[data-theme="videotext"] .btn.sm{font-size:20px;padding:7px 12px 5px}
:root[data-theme="videotext"] .btn.go{background:var(--tt-y);color:#000}
:root[data-theme="videotext"] .btn.go:hover{background:#fff;box-shadow:inset 0 0 0 2px #000}
:root[data-theme="videotext"] .sw{border-radius:0;background:linear-gradient(90deg,var(--tt-r) 0 25%,var(--tt-g) 0 50%,var(--tt-y) 0 75%,var(--tt-c) 0);box-shadow:none}
:root[data-theme="videotext"] .searchbar input,
:root[data-theme="videotext"] .field input{border:2px solid var(--line);background:var(--ink);caret-color:var(--accent)}
:root[data-theme="videotext"] .searchbar input:focus,
:root[data-theme="videotext"] .field input:focus{border-color:var(--accent)}

/* Fastext: Rot, Grün, Gelb, Blau, in genau dieser Reihenfolge */
:root[data-theme="videotext"] footer{border-top:0;gap:6px}
:root[data-theme="videotext"] #sync{background:var(--tt-r);color:#000}
:root[data-theme="videotext"] #ics{background:var(--tt-g);color:#000}
:root[data-theme="videotext"] #exp{background:var(--tt-y);color:#000}
:root[data-theme="videotext"] #imp{background:var(--tt-c);color:#000}
:root[data-theme="videotext"] footer .btn:hover{outline:2px solid var(--text);outline-offset:2px}
:root[data-theme="videotext"] footer .note{font-family:var(--head);font-size:18px}

/* Reiter mit Seitennummer. Der Text nach dem / ist für Screenreader: leer,
   die Nummer ist nur Zierde. Wer die Schreibweise nicht kennt, verwirft die
   zweite Zeile und nimmt die erste. */
:root[data-theme="videotext"] nav{border-bottom:0;gap:4px}
:root[data-theme="videotext"] .tab{font-family:var(--head);font-size:22px;letter-spacing:.02em;line-height:1;padding:7px 11px 5px;margin-bottom:0;
  color:var(--text);background:var(--ink3);border-bottom:0}
:root[data-theme="videotext"] .tab:hover{color:var(--text);background:var(--line)}
:root[data-theme="videotext"] .tab::before{color:var(--dim);margin-inline-end:.5ch}
:root[data-theme="videotext"] .tab[data-view="list"]::before{content:"100";content:"100" / ""}
:root[data-theme="videotext"] .tab[data-view="cal"]::before{content:"200";content:"200" / ""}
:root[data-theme="videotext"] .tab[data-view="friends"]::before{content:"300";content:"300" / ""}
:root[data-theme="videotext"] .tab[data-view="season"]::before{content:"400";content:"400" / ""}
:root[data-theme="videotext"] .tab[data-view="search"]::before{content:"500";content:"500" / ""}
:root[data-theme="videotext"] .tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent)}
:root[data-theme="videotext"] .tab[aria-selected="true"]::before,
:root[data-theme="videotext"] .tab[aria-selected="true"] .n{color:var(--on-accent)}

/* Gruppen: Farbband je Gruppe, daneben eine gepunktete Blockzeile */
:root[data-theme="videotext"] .ghead h2{font-family:var(--head);font-weight:400;font-size:25px;letter-spacing:.05em;line-height:1;
  background:var(--tt-b);color:#fff;padding:4px 10px 2px}
:root[data-theme="videotext"] .group[data-group="ready"] h2,
:root[data-theme="videotext"] .group[data-group="fready"] h2{background:var(--tt-g);color:#000}
:root[data-theme="videotext"] .group[data-group="run"] h2,
:root[data-theme="videotext"] .group[data-group="frest"] h2{background:var(--tt-y);color:#000}
:root[data-theme="videotext"] .group[data-group="soon"] h2{background:var(--tt-m);color:#000}
:root[data-theme="videotext"] .group[data-group="dead"] h2{background:var(--tt-r);color:#000}
:root[data-theme="videotext"] .group[data-group="fjoint"] h2{background:var(--tt-c);color:#000}
:root[data-theme="videotext"] .gfold,
:root[data-theme="videotext"] .gfold .chev,
:root[data-theme="videotext"] .fold .ghead:hover .gfold,
:root[data-theme="videotext"] .fold .ghead:hover .chev{color:inherit}
:root[data-theme="videotext"] .ghead .rule{height:8px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 12px)}
:root[data-theme="videotext"] .ghead .cnt{font-family:var(--head);font-size:24px;color:var(--airing)}

/* Karten: kein Rahmen, nur die Blockspalte in der Statusfarbe */
:root[data-theme="videotext"] .card{border:0;border-inline-start:10px solid var(--line2);background:var(--ink2);padding:12px 14px 13px}
:root[data-theme="videotext"] .card:hover{box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="videotext"] .card.s-FINISHED{border-inline-start-color:var(--tt-g)}
:root[data-theme="videotext"] .card.s-RELEASING{border-inline-start-color:var(--tt-y)}
:root[data-theme="videotext"] .card.s-NOT_YET_RELEASED{border-inline-start-color:var(--tt-m)}
:root[data-theme="videotext"] .card.s-CANCELLED,
:root[data-theme="videotext"] .card.s-HIATUS{border-inline-start-color:var(--tt-r)}
:root[data-theme="videotext"] .card.fresh{box-shadow:inset 0 0 0 2px var(--tt-g)}
:root[data-theme="videotext"] .card.mine{background:var(--ink2);box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme="videotext"] .cover{image-rendering:pixelated;filter:saturate(1.35) contrast(1.08)}
:root[data-theme="videotext"] .title{font-weight:400;font-size:26px;line-height:.95;letter-spacing:.01em}
:root[data-theme="videotext"] .alt{color:var(--dim)}
:root[data-theme="videotext"] .pill{font-family:var(--head);font-weight:400;font-size:20px;letter-spacing:.04em;line-height:1;padding:3px 8px 1px;border:0;color:#000}
:root[data-theme="videotext"] .p-FINISHED{background:var(--tt-g)}
:root[data-theme="videotext"] .p-RELEASING{background:var(--tt-y)}
:root[data-theme="videotext"] .p-NOT_YET_RELEASED{background:var(--tt-m)}
:root[data-theme="videotext"] .p-CANCELLED,
:root[data-theme="videotext"] .p-HIATUS{background:var(--tt-r)}
/* „Neu fertig“ blinkt wie das Flash-Attribut, aber nur viermal */
:root[data-theme="videotext"] .card.fresh .pill{animation:tt-flash 1s steps(1,end) 4}
@keyframes tt-flash{50%{background:transparent;color:var(--ready)}}

:root[data-theme="videotext"] .mini,
:root[data-theme="videotext"] .minetag{font-family:var(--head);font-size:19px;letter-spacing:.03em;line-height:1}
:root[data-theme="videotext"] .mini{padding:5px 10px 3px;border:1px solid var(--line2);color:var(--text)}
:root[data-theme="videotext"] .mini:hover{background:var(--tt-b);border-color:var(--tt-b);color:#fff}
:root[data-theme="videotext"] .mini.on{color:var(--ready);border-color:var(--ready)}
:root[data-theme="videotext"] .mini.warn:hover{background:var(--tt-r);border-color:var(--tt-r);color:#000}
:root[data-theme="videotext"] .minetag{padding:5px 0 3px}

/* Alles eckig, was sonst eine Rundung mitbringt */
:root[data-theme="videotext"] :is(.pill,.yr,.ystep,.schip,.fbtn,.fnum,.fpill,.fchip,.fchip .av,.slink,.mini,.field input,.seg,.seg span,.tick,.bar2,.who img,.panel code),
:root[data-theme="videotext"] .row::before{border-radius:0}
:root[data-theme="videotext"] :is(.filter,.panel){border:2px solid var(--line)}
:root[data-theme="videotext"] :is(.schip.on,.fpill.on,.fchip.on){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root[data-theme="videotext"] :is(.fpill.on .fpn,.fpill.on .fx,.fchip.on .fpn){color:var(--on-accent)}
:root[data-theme="videotext"] .panel h4,
:root[data-theme="videotext"] .panel legend,
:root[data-theme="videotext"] .flab{font-family:var(--head);font-size:21px;letter-spacing:.04em;color:var(--dim)}
:root[data-theme="videotext"] .state h3{font-weight:400;font-size:32px;line-height:1;color:var(--airing)}
:root[data-theme="videotext"] .step .i{font-family:var(--head);font-size:22px;color:var(--dim)}
:root[data-theme="videotext"] .step .h{font-weight:400;font-size:22px;line-height:1}
:root[data-theme="videotext"] .cal{border-inline-start:2px solid var(--line)}
:root[data-theme="videotext"] .row::before{inset-inline-start:-5px}

/* Laden: „Seite wird gesucht“ statt pulsierender Kästen, nur beim ersten */
:root[data-theme="videotext"] .skel{border:0;background:var(--ink2);display:flex;align-items:center;padding:0 16px;
  font-family:var(--head);font-size:24px;color:var(--dim);animation-timing-function:steps(2,end)}
:root[data-theme="videotext"] .skel::before{content:attr(data-t)}
:root[data-theme="videotext"] .skel ~ .skel::before{content:none}

.pv[data-theme="videotext"] .pv-h{margin:-9px -10px 0;padding:4px 10px 1px;background:var(--tt-b);color:var(--tt-y);font-weight:400;font-size:19px;letter-spacing:.02em}
.pv[data-theme="videotext"] .pv-h b{color:var(--tt-c)}
.pv[data-theme="videotext"] .pv-card{border:0;border-inline-start:5px solid var(--tt-g)}
.pv[data-theme="videotext"] .pv-t{font-weight:400;font-size:15px;line-height:.9}
.pv[data-theme="videotext"] .pv-p{background:var(--tt-g);color:#000;border:0;border-radius:0;font-family:var(--head);font-weight:400;font-size:12px;line-height:1;padding:1px 4px 0}
.pv[data-theme="videotext"] .pv-k i{border-radius:0}
.pv[data-theme="videotext"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--tt-r) 0 25%,var(--tt-g) 0 50%,var(--tt-y) 0 75%,var(--tt-c) 0)}


/* ═══════════════════════════ Mangaheft ═══════════════════════════
   Gedruckt statt gerendert: Tuscherahmen, harte Schlagschatten ohne
   Unschärfe, Rasterfolie, die nach unten ausläuft, Speedlines hinter dem
   Titel, Sprechblasen für Hinweise und leere Zustände. Status zeigt sich
   als farbiger Schatten, wie ein Zweifarbdruck. Geschautes wird schwarzweiß.
   Dunkel ist der Negativdruck: weiße Tusche auf schwarzem Papier. */
[data-theme="manga"]{
  --ink:#131313; --ink2:#1c1c1c; --ink3:#303030;
  --line:#f1eee6; --line2:#ffffff;
  --text:#f4f1e9; --dim:#cdc9bf; --dim2:#aaa69d;
  --ready:#4ade8f; --airing:#ff5a67; --soon:#8aabff; --dead:#b5b5b5;
  --accent:#ff5a67; --on-accent:#131313;
  --go:#f4f1e9; --on-go:#131313; --go-hover:#ff5a67;
  --page:none;
  --disp:"Zen Maru Gothic",system-ui,sans-serif;
  --head:"Dela Gothic One","Zen Maru Gothic",system-ui,sans-serif;
  --mono:"Zen Maru Gothic",system-ui,sans-serif;
  --r:14px; --r2:5px;
  --mg-ink:#f4f1e9; --mg-dot:rgba(255,255,255,.13); --mg-on:#131313;
}
[data-theme="manga"][data-scheme="light"]{
  --ink:#fbfaf4; --ink2:#fff; --ink3:#e6e4da;
  --line:#151515; --line2:#151515;
  --text:#151515; --dim:#3a3a3a; --dim2:#565656;
  --ready:#067842; --airing:#d0002a; --soon:#1b4ed2; --dead:#636363;
  --accent:#d0002a; --on-accent:#fff;
  --go:#151515; --on-go:#fff; --go-hover:#d0002a;
  --page:none;
  --disp:"Zen Maru Gothic",system-ui,sans-serif;
  --head:"Dela Gothic One","Zen Maru Gothic",system-ui,sans-serif;
  --mono:"Zen Maru Gothic",system-ui,sans-serif;
  --r:14px; --r2:5px;
  --mg-ink:#151515; --mg-dot:rgba(0,0,0,.15); --mg-on:#fff;
}

/* Rasterfolie, oben dicht, nach unten ausgeblendet */
:root[data-theme="manga"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,var(--mg-dot) 1.15px,transparent 1.6px);background-size:7px 7px;
  -webkit-mask-image:linear-gradient(172deg,#000 0%,rgba(0,0,0,.35) 30%,transparent 62%);
          mask-image:linear-gradient(172deg,#000 0%,rgba(0,0,0,.35) 30%,transparent 62%)}

/* Konzentrationslinien hinter dem Titel */
:root[data-theme="manga"] header{position:relative;isolation:isolate}
:root[data-theme="manga"] header::before{content:"";position:absolute;inset:0 0 auto;height:230px;z-index:-1;pointer-events:none;opacity:.16;
  background:repeating-conic-gradient(from 2deg at 18% 40%,var(--mg-ink) 0deg .8deg,transparent .8deg 6.5deg);
  -webkit-mask-image:radial-gradient(ellipse 75% 95% at 18% 40%,transparent 26%,#000 88%);
          mask-image:radial-gradient(ellipse 75% 95% at 18% 40%,transparent 26%,#000 88%)}
:root[data-theme="manga"] :is(.ghead h2,.title,.pill,.state h3,.step .h,.stat .n){word-spacing:.14em}
:root[data-theme="manga"] h1{font-weight:400;font-size:clamp(42px,9.5vw,74px);letter-spacing:-.01em;line-height:1.02;
  text-shadow:3px 3px 0 var(--accent)}
:root[data-theme="manga"] h1 .two{display:inline-block;margin-right:.12em;padding:.02em .16em;border-radius:.08em;
  background:var(--mg-ink);-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);
  text-shadow:none;box-shadow:.07em .07em 0 var(--accent);transform:rotate(-7deg)}

/* Untertitel als Sprechblase, der Zipfel zeigt auf den Titel */
:root[data-theme="manga"] .tag{position:relative;display:inline-block;margin-top:20px;padding:9px 17px;
  background:var(--ink2);color:var(--text);font-weight:700;border:2.5px solid var(--mg-ink);border-radius:22px}
:root[data-theme="manga"] .tag::before{content:"";position:absolute;left:30px;top:-9.5px;width:15px;height:15px;
  background:var(--ink2);border-left:2.5px solid var(--mg-ink);border-top:2.5px solid var(--mg-ink);transform:rotate(45deg) skew(8deg,8deg)}

/* Alles, was ein Panel ist: Tuscherahmen und harter Schatten */
:root[data-theme="manga"] :is(.stat,.panel,.filter,.step){background:var(--ink2);border:2.5px solid var(--mg-ink);border-radius:var(--r2);box-shadow:4px 4px 0 var(--mg-ink)}
:root[data-theme="manga"] .stat.ready{box-shadow:4px 4px 0 var(--ready)}
:root[data-theme="manga"] .stat.run{box-shadow:4px 4px 0 var(--airing)}
:root[data-theme="manga"] .stat.soon{box-shadow:4px 4px 0 var(--soon)}
:root[data-theme="manga"] .stat .n{font-weight:400;font-size:32px}
:root[data-theme="manga"] :is(.stat .k,.panel h4,.panel legend,.flab,.where .lbl,.snav .lbl){font-weight:700;letter-spacing:.08em}

:root[data-theme="manga"] .searchbar input{border:2.5px solid var(--mg-ink);border-radius:999px;padding:12px 20px;background:var(--ink2);
  font-weight:500;box-shadow:3px 3px 0 var(--mg-ink);transition:box-shadow .12s}
:root[data-theme="manga"] .searchbar input:focus{border-color:var(--mg-ink);box-shadow:3px 3px 0 var(--accent)}
:root[data-theme="manga"] .field input{border:2px solid var(--mg-ink);border-radius:999px;background:var(--ink2)}
:root[data-theme="manga"] .field input:focus{border-color:var(--accent)}

/* Knöpfe drücken sich wirklich ein */
:root[data-theme="manga"] .btn{background:var(--ink2);border:2.5px solid var(--mg-ink);border-radius:999px;font-weight:700;
  box-shadow:3px 3px 0 var(--mg-ink);transition:transform .08s,box-shadow .08s,background .12s}
:root[data-theme="manga"] .btn:hover{border-color:var(--mg-ink);transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--mg-ink)}
:root[data-theme="manga"] .btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--mg-ink)}
:root[data-theme="manga"] .btn.go{background:var(--go);color:var(--on-go);box-shadow:3px 3px 0 var(--accent)}
:root[data-theme="manga"] .btn.go:hover{background:var(--go-hover);border-color:var(--mg-ink);box-shadow:4px 4px 0 var(--mg-ink)}
:root[data-theme="manga"] footer{border-top:3px solid var(--mg-ink)}

:root[data-theme="manga"] nav{border-bottom:3px solid var(--mg-ink);gap:3px}
:root[data-theme="manga"] .tab{font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--dim);
  border:2.5px solid transparent;border-bottom:0;border-radius:12px 12px 0 0;margin-bottom:0}
:root[data-theme="manga"] .tab:hover{color:var(--text)}
:root[data-theme="manga"] .tab[aria-selected="true"]{background:var(--mg-ink);color:var(--ink);border-color:var(--mg-ink)}
:root[data-theme="manga"] .tab .n,
:root[data-theme="manga"] .tab[aria-selected="true"] .n{display:inline-block;min-width:21px;padding:1px 6px;border-radius:99px;text-align:center;
  background:var(--accent);color:var(--on-accent);font-size:11px;letter-spacing:0}

/* Gruppen: fette Überschrift, Speedlines, Zahl im Kreis */
:root[data-theme="manga"] .ghead h2{font-family:var(--head);font-weight:400;font-size:21px;letter-spacing:0;text-transform:none}
:root[data-theme="manga"] .ghead .rule{height:11px;background:repeating-linear-gradient(to bottom,var(--mg-ink) 0 1.5px,transparent 1.5px 4.5px);
  -webkit-mask-image:linear-gradient(to right,#000 5%,transparent);mask-image:linear-gradient(to right,#000 5%,transparent)}
:root[data-theme="manga"] .ghead .cnt{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:99px;
  font-family:var(--head);font-size:14px;background:var(--mg-ink);color:var(--ink)}
:root[data-theme="manga"] .gnote{color:var(--dim);font-weight:500}

/* Karten: Panel mit Schatten in der Statusfarbe, heben sich beim Zeigen */
:root[data-theme="manga"] .card{--st:var(--mg-ink);position:relative;margin-bottom:16px;background:var(--ink2);
  border:2.5px solid var(--mg-ink);border-radius:var(--r2);box-shadow:5px 5px 0 var(--st);transition:transform .12s,box-shadow .12s}
:root[data-theme="manga"] .card.s-FINISHED{--st:var(--ready)}
:root[data-theme="manga"] .card.s-RELEASING{--st:var(--airing)}
:root[data-theme="manga"] .card.s-NOT_YET_RELEASED{--st:var(--soon)}
:root[data-theme="manga"] .card.s-CANCELLED,
:root[data-theme="manga"] .card.s-HIATUS{--st:var(--dead)}
:root[data-theme="manga"] .card:hover{border-color:var(--mg-ink);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--st)}
:root[data-theme="manga"] .card.mine{background:var(--ink2)}
/* Neu fertig: ein Stern wie ein Soundeffekt */
:root[data-theme="manga"] .card.fresh{box-shadow:5px 5px 0 var(--ready)}
:root[data-theme="manga"] .card.fresh::after{content:attr(data-new);content:attr(data-new) / "";position:absolute;top:-18px;inset-inline-start:-16px;width:58px;height:58px;
  display:grid;place-items:center;font-family:var(--head);font-size:13px;transform:rotate(-10deg);
  background:var(--accent);color:var(--on-accent);
  clip-path:polygon(50% 0,61% 20%,82% 9%,78% 32%,100% 38%,83% 54%,97% 73%,74% 74%,70% 97%,52% 82%,33% 98%,28% 75%,4% 76%,17% 56%,0 40%,21% 32%,17% 9%,38% 19%)}
:root[data-theme="manga"] .cover{border:2px solid var(--mg-ink);border-radius:3px}
:root[data-theme="manga"] .card.watched{opacity:1}
:root[data-theme="manga"] .card.watched .cover{filter:grayscale(1) contrast(1.2)}
:root[data-theme="manga"] .title{font-weight:400;font-size:17px;letter-spacing:0;line-height:1.3}
:root[data-theme="manga"] .meta,
:root[data-theme="manga"] .courlab{font-weight:500}

/* Status als schräg aufgeklebter Aufkleber */
:root[data-theme="manga"] .pill{--st:var(--dead);font-family:var(--head);font-weight:400;font-size:12px;letter-spacing:.03em;padding:4px 9px;
  background:var(--st);color:var(--mg-on);border:2px solid var(--mg-ink);border-radius:4px;box-shadow:2px 2px 0 var(--mg-ink);transform:rotate(-3deg)}
:root[data-theme="manga"] .p-FINISHED{--st:var(--ready)}
:root[data-theme="manga"] .p-RELEASING{--st:var(--airing)}
:root[data-theme="manga"] .p-NOT_YET_RELEASED{--st:var(--soon)}

:root[data-theme="manga"] .ticks{gap:3px}
:root[data-theme="manga"] .tick{border-radius:0;transform:skewX(-16deg)}
:root[data-theme="manga"] .bar2{border-radius:0;border:1.5px solid var(--mg-ink);height:10px}

:root[data-theme="manga"] :is(.mini,.slink,.schip,.fbtn,.fpill,.fchip,.yr){border:2px solid var(--mg-ink);color:var(--text);font-weight:700}
:root[data-theme="manga"] :is(.mini,.slink){border-radius:999px;background:var(--ink2)}
:root[data-theme="manga"] :is(.mini,.slink,.schip,.fbtn,.fpill,.fchip):hover{background:var(--mg-ink);color:var(--ink);border-color:var(--mg-ink)}
:root[data-theme="manga"] :is(.mini,.slink,.schip,.fbtn,.fpill,.fchip):hover :is(.fpn,.fx){color:inherit}
:root[data-theme="manga"] .mini.on{border-color:var(--ready);color:var(--ready)}
:root[data-theme="manga"] .mini.warn:hover{background:var(--airing);border-color:var(--airing);color:var(--mg-on)}
:root[data-theme="manga"] :is(.schip.on,.fpill.on,.fchip.on){background:var(--mg-ink);color:var(--ink);border-color:var(--mg-ink)}
:root[data-theme="manga"] :is(.fpill.on .fpn,.fpill.on .fx,.fchip.on .fpn){color:inherit}
:root[data-theme="manga"] .fchip .av{background:var(--accent);color:var(--on-accent);font-family:var(--head);font-weight:400}
:root[data-theme="manga"] .more{border:2.5px dashed var(--mg-ink);color:var(--text);font-weight:700}

/* Leere Zustände sprechen in einer Blase */
:root[data-theme="manga"] .state{position:relative;margin:30px 4px 14px;padding:34px 22px 36px;background:var(--ink2);
  border:2.5px solid var(--mg-ink);border-radius:36px}
:root[data-theme="manga"] .state::after{content:"";position:absolute;left:56px;bottom:-12px;width:22px;height:22px;background:var(--ink2);
  border-right:2.5px solid var(--mg-ink);border-bottom:2.5px solid var(--mg-ink);transform:rotate(45deg) skew(-12deg,-12deg)}
:root[data-theme="manga"] .state h3{font-weight:400;font-size:23px}
:root[data-theme="manga"] .state p{font-weight:500}
:root[data-theme="manga"] .step{box-shadow:3px 3px 0 var(--mg-ink)}
:root[data-theme="manga"] .step .i{font-family:var(--head);font-size:20px;color:var(--accent);letter-spacing:0}
:root[data-theme="manga"] .step .h{font-weight:400}

:root[data-theme="manga"] :is(.err,.ok,.stale){border-width:2.5px;border-color:currentColor;background:var(--ink2);box-shadow:4px 4px 0 currentColor;font-weight:700}
:root[data-theme="manga"] .cal{border-inline-start:3px solid var(--mg-ink)}
:root[data-theme="manga"] .row::before{inset-inline-start:-7.5px;width:12px;height:12px;box-shadow:inset 0 0 0 2.5px var(--mg-ink)}
:root[data-theme="manga"] .row.fin::before{background:var(--ready)}
:root[data-theme="manga"] .row.today::before{background:var(--airing)}
:root[data-theme="manga"] .skel{border:2.5px dashed var(--mg-ink);background-color:var(--ink2);
  background-image:radial-gradient(circle,var(--mg-dot) 1.15px,transparent 1.6px);background-size:7px 7px}
:root[data-theme="manga"] .look:has(input:checked){box-shadow:3px 3px 0 var(--accent)}

.pv[data-theme="manga"]{background-image:radial-gradient(circle,var(--mg-dot) 1px,transparent 1.4px);background-size:6px 6px}
.pv[data-theme="manga"] .pv-h{font-weight:400;font-size:16px;letter-spacing:0;text-shadow:1.5px 1.5px 0 var(--accent)}
.pv[data-theme="manga"] .pv-h b{display:inline-block;margin-right:2px;padding:0 3px;background:var(--mg-ink);color:var(--ink);text-shadow:none;transform:rotate(-7deg)}
.pv[data-theme="manga"] .pv-card{border:2px solid var(--mg-ink);box-shadow:3px 3px 0 var(--ready)}
.pv[data-theme="manga"] .pv-cover{border:1.5px solid var(--mg-ink)}
.pv[data-theme="manga"] .pv-t{font-weight:400;letter-spacing:0}
.pv[data-theme="manga"] .pv-p{background:var(--ready);color:var(--mg-on);border:1.5px solid var(--mg-ink);border-radius:3px;font-family:var(--head);font-weight:400;letter-spacing:.03em;transform:rotate(-4deg)}
.pv[data-theme="manga"] .pv-k i{border-radius:0;transform:skewX(-16deg)}


/* ═══════════════════════════ Washi ═══════════════════════════
   Ruhig, viel Luft. Japanpapier mit feiner Struktur, Sumi-Tusche, Titel in
   Mincho. Oben rechts steht tagsüber eine Zinnober-Sonne, nachts ein
   Goldmond. Der Status hängt als Lesebändchen über dem Cover und steht als
   Siegel neben dem Titel, Gruppen sind mit 一 二 三 durchgezählt, leere
   Zustände zeigen ein Ensō. Dunkel ist Urushi: Lack, Gold, Zinnober. */
[data-theme="washi"]{
  --ink:#17110e; --ink2:#211a16; --ink3:#31271f;
  --line:#3d3129; --line2:#5f4e41;
  --text:#f0e6d6; --dim:#baab96; --dim2:#a59682;
  --ready:#a4c787; --airing:#f27d5d; --soon:#9db8e8; --dead:#d2a5b8;
  --accent:#ddb062; --on-accent:#17110e;
  --go:#f0e6d6; --on-go:#17110e; --go-hover:#ddb062;
  --page:radial-gradient(ellipse 60% 40% at 88% -6%,rgba(221,176,98,.12),transparent 70%);
  --disp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --head:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --mono:"Zen Kaku Gothic New",system-ui,sans-serif;
  --r:3px; --r2:2px;
  --wa-shu:#e0573c; --wa-orb:#ddb062; --wa-orb-glow:rgba(221,176,98,.35); --wa-grain:.22;
}
[data-theme="washi"][data-scheme="light"]{
  --ink:#f2ebdf; --ink2:#faf6ee; --ink3:#e5dccc;
  --line:#dccfba; --line2:#b8a68a;
  --text:#2b241f; --dim:#63584d; --dim2:#6b5f53;
  --ready:#3c6932; --airing:#b2331b; --soon:#2a4a7c; --dead:#7a4e62;
  --accent:#b2331b; --on-accent:#fff;
  --go:#2b241f; --on-go:#f2ebdf; --go-hover:#b2331b;
  --page:none;
  --disp:"Zen Kaku Gothic New",system-ui,sans-serif;
  --head:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  --mono:"Zen Kaku Gothic New",system-ui,sans-serif;
  --r:3px; --r2:2px;
  --wa-shu:#c0391f; --wa-orb:#c0391f; --wa-orb-glow:transparent; --wa-grain:.6;
}

/* Papierstruktur. Die Datei hat dunkle Fasern, nachts umgekehrt. */
:root[data-theme="washi"] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("grain.svg");opacity:var(--wa-grain)}
:root[data-theme="washi"][data-scheme="dark"] body::before{filter:invert(1)}

/* Sonne oder Mond, hinter dem Kopf */
:root[data-theme="washi"] header{position:relative;isolation:isolate}
:root[data-theme="washi"] header::before{content:"";position:absolute;z-index:-1;right:1%;top:4px;width:clamp(58px,15vw,124px);aspect-ratio:1;
  border-radius:50%;background:var(--wa-orb);box-shadow:0 0 70px 6px var(--wa-orb-glow)}
:root[data-theme="washi"] h1{font-weight:700;font-size:clamp(38px,7.5vw,58px);letter-spacing:.01em;line-height:1.05}
/* Die 2 als Namenssiegel */
:root[data-theme="washi"] h1 .two{display:inline-grid;place-items:center;width:1.1em;height:1.1em;margin-right:.14em;vertical-align:.07em;
  font-size:.74em;border-radius:.13em;background:var(--wa-shu);-webkit-background-clip:border-box;background-clip:border-box;color:#faf6ee;
  box-shadow:inset 0 0 0 .05em var(--wa-shu),inset 0 0 0 .085em #faf6ee;transform:rotate(-5deg)}
:root[data-theme="washi"] .tag{font-family:var(--head);font-weight:500;font-size:15.5px;color:var(--dim);margin-top:14px;padding-right:clamp(64px,17vw,140px)}

/* Kennzahlen: nur Linie und Zahl */
:root[data-theme="washi"] .stat{background:transparent;border:0;border-top:1px solid var(--line2);border-radius:0;box-shadow:none;padding:12px 2px 2px}
:root[data-theme="washi"] .stat.ready{border-top:2px solid var(--ready)}
:root[data-theme="washi"] .stat.run{border-top:2px solid var(--airing)}
:root[data-theme="washi"] .stat.soon{border-top:2px solid var(--soon)}
:root[data-theme="washi"] .stat .n{font-weight:700;font-size:36px}
:root[data-theme="washi"] .stat .k{letter-spacing:.22em}

:root[data-theme="washi"] .searchbar input{background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;padding:12px 2px;font-size:16px}
:root[data-theme="washi"] .searchbar input:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
:root[data-theme="washi"] .btn{background:transparent;border-color:var(--line2);letter-spacing:.04em}
:root[data-theme="washi"] .btn:hover{border-color:var(--text)}
:root[data-theme="washi"] .btn.go{background:var(--go);border-color:var(--go)}
:root[data-theme="washi"] .btn.go:hover{background:var(--go-hover);border-color:var(--go-hover)}
:root[data-theme="washi"] .sw{border-radius:1px;background:var(--wa-shu);transform:rotate(-8deg);box-shadow:none}

:root[data-theme="washi"] nav{border-bottom-color:var(--line2)}
:root[data-theme="washi"] .tab{letter-spacing:.2em;color:var(--dim);font-weight:500}
:root[data-theme="washi"] .tab[aria-selected="true"]{color:var(--text)}

/* Gruppen in Mincho, durchgezählt 一 二 三. Fehlt dem Gerät eine CJK-
   Schrift, bleibt es bei 1 2 3, der Zähler fällt auf decimal zurück. */
:root[data-theme="washi"] #view{counter-reset:wa}
:root[data-theme="washi"] #view .group{counter-increment:wa}
:root[data-theme="washi"] .ghead h2{font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:none}
:root[data-theme="washi"] #view .ghead h2::before{content:counter(wa,cjk-decimal);content:counter(wa,cjk-decimal) / "";margin-right:.6em;color:var(--wa-shu)}
:root[data-theme="washi"] .ghead .rule{background:linear-gradient(90deg,var(--line2),transparent)}
:root[data-theme="washi"] .ghead .cnt{font-family:var(--head);font-size:15px}

/* Karten mit Lesebändchen */
:root[data-theme="washi"] .card{--st:var(--line2);position:relative;padding:18px 16px 16px;background:var(--ink2);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 26px -22px rgba(40,24,10,.55)}
:root[data-theme="washi"] .card::before{content:"";position:absolute;inset-inline-start:27px;top:-2px;width:11px;height:34px;z-index:1;background:var(--st);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}
:root[data-theme="washi"] .card.s-FINISHED{--st:var(--ready)}
:root[data-theme="washi"] .card.s-RELEASING{--st:var(--airing)}
:root[data-theme="washi"] .card.s-NOT_YET_RELEASED{--st:var(--soon)}
:root[data-theme="washi"] .card.s-CANCELLED,
:root[data-theme="washi"] .card.s-HIATUS{--st:var(--dead)}
:root[data-theme="washi"] .card:hover{border-color:var(--line2)}
:root[data-theme="washi"] .card.fresh{box-shadow:0 0 0 1px var(--ready),0 16px 30px -18px var(--ready)}
:root[data-theme="washi"] .card.mine{background:var(--ink2)}
:root[data-theme="washi"] .cover{border-radius:1px;box-shadow:0 0 0 1px var(--line)}
:root[data-theme="washi"] .title{font-weight:700;font-size:17.5px;letter-spacing:.01em;line-height:1.3}

/* Status als Siegel mit Innenrand */
:root[data-theme="washi"] .pill{--st:var(--dead);font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:none;
  padding:5px 9px 4px;border:0;border-radius:3px;background:var(--st);color:var(--ink2);
  box-shadow:inset 0 0 0 2px var(--st),inset 0 0 0 3px var(--ink2);transform:rotate(-4deg)}
:root[data-theme="washi"] .p-FINISHED{--st:var(--ready)}
:root[data-theme="washi"] .p-RELEASING{--st:var(--airing)}
:root[data-theme="washi"] .p-NOT_YET_RELEASED{--st:var(--soon)}

:root[data-theme="washi"] :is(.mini,.slink){border-color:var(--line2);letter-spacing:.08em}
:root[data-theme="washi"] .mini{text-transform:none;font-size:12px}
:root[data-theme="washi"] :is(.yr,.ystep,.schip,.fbtn,.fnum,.fpill,.fchip,.seg,.seg span){border-radius:var(--r)}
:root[data-theme="washi"] .fchip .av{border-radius:2px;font-family:var(--head);color:var(--wa-shu)}
:root[data-theme="washi"] :is(.panel,.filter){background:var(--ink2)}
:root[data-theme="washi"] .panel h4,
:root[data-theme="washi"] .panel legend{letter-spacing:.24em}

/* Ensō über leeren Zuständen: ein Pinselkreis mit Lücke, ungleich dick */
:root[data-theme="washi"] .state::before{content:"";display:block;width:74px;height:74px;margin:0 auto 22px;border-radius:50%;
  border:solid var(--text);border-width:3px 6px 8px 5px;border-top-color:transparent;transform:rotate(38deg);opacity:.82}
:root[data-theme="washi"] .state h3{font-weight:700;font-size:22px;letter-spacing:.02em}
:root[data-theme="washi"] .step{background:var(--ink2)}
:root[data-theme="washi"] .step .i{font-family:var(--head);font-size:14px;color:var(--wa-shu)}
:root[data-theme="washi"] .row.today::before{box-shadow:inset 0 0 0 4px var(--wa-shu)}
:root[data-theme="washi"] .skel{background:linear-gradient(100deg,var(--ink2) 30%,var(--ink3) 50%,var(--ink2) 70%) 0 0/300% 100%;
  animation:wa-sheen 1.8s ease-in-out infinite}
@keyframes wa-sheen{from{background-position:100% 0}to{background-position:0 0}}

.pv[data-theme="washi"]{background-image:url("grain.svg")}
.pv[data-theme="washi"][data-scheme="dark"]{background-image:var(--page)}
.pv[data-theme="washi"]::before{content:"";position:absolute;right:9px;top:8px;width:24px;height:24px;border-radius:50%;background:var(--wa-orb);box-shadow:0 0 18px var(--wa-orb-glow)}
.pv[data-theme="washi"] .pv-h b{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:3px;font-size:11px;border-radius:2px;
  background:var(--wa-shu);color:#faf6ee;transform:rotate(-5deg);vertical-align:1px}
.pv[data-theme="washi"] .pv-card{position:relative;border-inline-start:1px solid var(--line)}
.pv[data-theme="washi"] .pv-card::before{content:"";position:absolute;inset-inline-start:9px;top:-1px;width:5px;height:14px;background:var(--ready);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.pv[data-theme="washi"] .pv-p{background:var(--ready);color:var(--ink2);border:0;border-radius:2px;font-family:var(--head);text-transform:none;letter-spacing:.1em;transform:rotate(-4deg)}