/* dl + Claude Opus 5.5 (1M), 2026-09-27 — last update: 2026-09-27
   inside p/_nhv/1/tutoring-tokyo/tokyo.css

   „Vox-Manga"-Stylesheet für tutoring-tokyo.com (nur diese Seite, Präfix .tt-).
   Tokens = Vox-Doku-Stilmodul (~/.claude/skills/music-video-studio/references/style-vox-doku.md):
     Papier statt Weiß · Tinte · Marker-Gelb · Rot NUR für Anmerkungen/Stempel · harte Versatzschatten.
   Manga-Schicht: Panels mit dicken Rändern, Rasterfolie (radial-gradient), Speedlines
     (repeating-conic-gradient — nie rote Sonne + Strahlen: Rising-Sun-Flagge!), SFX, Yonkoma.
   Bewegung: tokyo.js (GSAP). Grundzustand hier = alles sichtbar (ohne JS lesbar).
   Kein prefers-reduced-motion-Opt-out (Projekt-Regel: Bewegung ist die Aussage).

   Schriften selbst gehostet (DSGVO, kein Google-CDN):
     fonts/archivo-black-latin.woff2 · fonts/archivo-var-latin.woff2 · fonts/caveat-700-latin.woff2 (OFL)
     fonts/dela-gothic-one-subset-vN.woff2 = NUR (bei jedem Neubau N erhöhen + index.php-Preload anpassen → kein Cache-Mix) die auf der Seite genutzten Japanisch-Glyphen.
   Subset neu bauen, wenn neue japanische Zeichen dazukommen:
     T=$(grep -oP '[\x{3000}-\x{30FF}\x{4E00}-\x{9FFF}\x{FF00}-\x{FFEF}]' index.php | sort -u | tr -d '\n')
     curl -s -A 'Mozilla/5.0 Chrome/140' "https://fonts.googleapis.com/css2?family=Dela+Gothic+One&text=$(python3 -c "import urllib.parse,sys;print(urllib.parse.quote(sys.argv[1]+'0123456789'))" "$T")" \
       | grep -oP 'url\(\K[^)]+' | xargs curl -s -o /tmp/dela-subset.ttf
     python3 -c "from fontTools.ttLib import TTFont; f=TTFont('/tmp/dela-subset.ttf'); f.flavor='woff2'; f.save('fonts/dela-gothic-one-subset-vN.woff2')"
   (Google liefert für text= eine TTF — ohne die fontTools-Umwandlung wäre die .woff2-Endung gelogen.)
*/

@font-face { font-family: "Archivo Black"; src: url("fonts/archivo-black-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-700-latin.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Dela Gothic One"; src: url("fonts/dela-gothic-one-subset-v2.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ink: #14131A; --paper: #F6F1E4; --paper2: #EAE2CD; --yellow: #FFCB2E; --red: #E23D28;
  --teal: #1F8A7A; --mute: #6F695E; --white: #FFFDF8;
  --f-disp: "Archivo Black", "Arial Black", Impact, system-ui, sans-serif;
  --f-text: "Archivo", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-ja: "Dela Gothic One", "Hiragino Kaku Gothic StdN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --line: .1875rem solid var(--ink);                 /* 3px Panel-Rand */
  --shadow: .5rem .5rem 0 var(--ink);                /* harter Versatz, kein Blur */
  --gut: clamp(1.1rem, 4vw, 3rem);
  --bar-h: 3.75rem;
  --tone: radial-gradient(rgba(20,19,26,.55) .9px, transparent 1.25px);  /* Rasterfolie */
}

/* ─── Basis ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + .75rem); }
body.tt-body {
  margin: 0; color: var(--ink); font: 400 1.0625rem/1.58 var(--f-text);
  background: var(--paper) radial-gradient(rgba(20,19,26,.055) 1px, transparent 1.2px) 0 0 / 4px 4px;
  padding-top: var(--bar-h); overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
[lang="ja"] { font-family: var(--f-ja); letter-spacing: .02em; }
:focus-visible { outline: .19rem solid var(--teal); outline-offset: .19rem; }
.tt-nowrap { white-space: nowrap; }
.tt-skip { position: absolute; left: -999rem; top: .5rem; z-index: 99; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.tt-skip:focus { left: .5rem; }
.tt-small { font-size: .9rem; color: var(--mute); }

/* Tinte-auf-Papier: weißer Bildgrund wird Papier (Multiply).
   ACHTUNG Stapelkontext: mix-blend-mode mischt nur innerhalb des eigenen Stapelkontexts. Die Cover-Wrapper
   (.tt-cover-char/.tt-cover-sky) sind positioniert + z-index + GSAP-transform = EIGENER Kontext → ein
   multiply nur auf dem <img> darin mischt mit „nichts" (weißer Kasten!). Darum sitzt multiply auf dem Wrapper. */
.tt-mul img, img.tt-mul { mix-blend-mode: multiply; }
.tt-cover-sky, .tt-cover-char { mix-blend-mode: multiply; }

/* ─── Kopfzeile ─────────────────────────────────────────────────────────── */
.tt-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; gap: 1rem; padding-inline: var(--gut);
  background: var(--paper); border-bottom: var(--line);
}
.tt-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.tt-hanko {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .3rem;
  background: var(--red); color: var(--paper); font-size: .95rem; line-height: 1; writing-mode: vertical-rl;
  transform: rotate(-4deg); box-shadow: .12rem .12rem 0 var(--ink);
}
.tt-brand-t { font: 400 .92rem/0.95 var(--f-disp); text-transform: uppercase; letter-spacing: .02em; }
.tt-bar-ch { margin-inline: auto; display: flex; align-items: baseline; gap: .55rem; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; }
.tt-bar-ja { font-size: 1.05rem; }
.tt-bar-progress { position: absolute; left: 0; right: 0; bottom: -.1875rem; height: .1875rem; background: var(--ink); }
.tt-bar-progress span { display: block; height: 100%; background: var(--yellow); transform-origin: left center; transform: scaleX(0); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 400 1.05rem/1.1 var(--f-disp); letter-spacing: .01em; text-decoration: none; text-align: center;
  color: var(--paper); background: var(--ink); border: var(--line);
  padding: 1rem 1.45rem; box-shadow: .35rem .35rem 0 var(--yellow);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tt-btn:hover { transform: translate(-.15rem, -.15rem); box-shadow: .55rem .55rem 0 var(--yellow); }
.tt-btn:active { transform: translate(.2rem, .2rem); box-shadow: .1rem .1rem 0 var(--yellow); }
.tt-btn--ghost { background: var(--white); color: var(--ink); box-shadow: .35rem .35rem 0 var(--ink); }
.tt-btn--ghost:hover { box-shadow: .55rem .55rem 0 var(--ink); }
.tt-btn--y { background: var(--yellow); color: var(--ink); box-shadow: .35rem .35rem 0 var(--paper); }
.tt-btn--y:hover { box-shadow: .55rem .55rem 0 var(--paper); }
.tt-btn--s { font-size: .92rem; padding: .55rem .85rem; box-shadow: .2rem .2rem 0 var(--yellow); white-space: nowrap; }
.tt-btn--big { font-size: clamp(1.15rem, 2.4vw, 1.5rem); padding: 1.25rem 2rem; }
.tt-cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; margin-top: 1.75rem; }
.tt-cta-row--center { justify-content: center; }

/* ─── Typo-Bausteine ────────────────────────────────────────────────────── */
.tt-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; }
.tt-vol { background: var(--ink); color: var(--paper); padding: .2rem .55rem; letter-spacing: .06em; font-size: 1rem; }
.tt-h1 { margin-top: 1rem; }
.tt-h1-big { display: block; font: 400 clamp(3.4rem, 9.6vw, 8.8rem)/.86 var(--f-disp); letter-spacing: -.035em; text-transform: uppercase; }
.tt-h1-sub { display: block; margin-top: 1rem; max-width: 34rem; font: 700 clamp(1.15rem, 2.2vw, 1.55rem)/1.3 var(--f-text); }
.tt-lead { margin-top: 1.1rem; max-width: 33rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.tt-trust { margin-top: 1.4rem; font-size: 1rem; }
.tt-trust strong { font-family: var(--f-disp); font-weight: 400; background: var(--yellow); padding: 0 .25rem; }
.tt-h2 { font: 400 clamp(2.25rem, 6.2vw, 5.4rem)/.95 var(--f-disp); letter-spacing: -.028em; max-width: 17ch; }
.tt-sub { margin-top: 1.1rem; max-width: 40rem; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.tt-say { font: 700 clamp(1.2rem, 2vw, 1.55rem)/1.35 var(--f-text); max-width: 30rem; }
.tt-say + .tt-say { margin-top: 1.2rem; }

/* Wort-Maske für die kinetische Überschrift (Layout bleibt stabil, nur transform) */
.tt-w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.tt-w > span { display: inline-block; }

/* Marker (Vox-Gelb): wird von tokyo.js von 0 auf 100 % „gezogen" */
.tt-hl { background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 88% / 100% 58%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .1em; }
.tt-ch--ink .tt-hl { color: var(--ink); background-size: 100% 92%; }

/* Handschriftliche rote Anmerkung (Vox) */
.tt-note { font: 700 clamp(1.45rem, 2.6vw, 2rem)/1.15 var(--f-hand); color: var(--red); transform: rotate(-2.5deg); }

/* ─── Kapitel-Gerüst ────────────────────────────────────────────────────── */
.tt-ch { position: relative; padding: clamp(4.5rem, 10vw, 8.5rem) var(--gut); isolation: isolate; }
.tt-ch-head { position: relative; z-index: 2; max-width: 72rem; margin-inline: auto; margin-bottom: clamp(2rem, 5vw, 3.75rem); }
.tt-ch-no {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: 1.15rem;
  font-weight: 800; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em;
}
.tt-ch-no > [lang="ja"]:first-child { background: var(--ink); color: var(--paper); padding: .25rem .6rem; font-size: 1.05rem; letter-spacing: .04em; text-transform: none; }
.tt-ch--ink { background: var(--ink); color: var(--paper); }
.tt-ch--ink .tt-ch-no > [lang="ja"]:first-child { background: var(--yellow); color: var(--ink); }
/* gerissene Papierkante oben (Tinte-Seiten) */
.tt-ch--ink::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1.2rem; height: 1.25rem; background: var(--ink);
  clip-path: polygon(0 100%,0 55%,4% 30%,8% 62%,13% 20%,17% 58%,22% 35%,27% 70%,31% 25%,36% 60%,41% 38%,45% 75%,50% 30%,55% 62%,59% 18%,64% 55%,69% 36%,73% 72%,78% 28%,83% 60%,87% 34%,92% 66%,96% 26%,100% 50%,100% 100%);
}
.tt-bgword {
  position: absolute; z-index: 0; right: -2vw; top: 1rem; pointer-events: none; user-select: none;
  font-size: clamp(9rem, 30vw, 26rem); line-height: 1; color: var(--paper2);
}

/* ─── Manga-SFX ─────────────────────────────────────────────────────────── */
.tt-sfx {
  position: absolute; z-index: 3; pointer-events: none; user-select: none;
  font-size: clamp(2.6rem, 7vw, 6.5rem); line-height: 1; color: var(--ink); letter-spacing: -.04em;
  text-shadow: .08em 0 0 var(--paper), -.08em 0 0 var(--paper), 0 .08em 0 var(--paper), 0 -.08em 0 var(--paper),
               .06em .06em 0 var(--paper), -.06em -.06em 0 var(--paper), .06em -.06em 0 var(--paper), -.06em .06em 0 var(--paper);
}
.tt-ch--ink .tt-sfx { color: var(--yellow);
  text-shadow: .07em 0 0 var(--ink), -.07em 0 0 var(--ink), 0 .07em 0 var(--ink), 0 -.07em 0 var(--ink), .1em .1em 0 var(--ink); }

/* ─── COVER ─────────────────────────────────────────────────────────────── */
.tt-cover {
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - var(--bar-h)); padding: clamp(2rem, 6vw, 4.5rem) var(--gut) clamp(6rem, 12vw, 8rem);
  display: flex; align-items: center; border-bottom: var(--line);
  /* eigener Papiergrund: isolation:isolate begrenzt die Multiply-Gruppe aufs Cover — ohne eigenen
     Hintergrund mischt das Bild mit „transparent" statt mit Papier (weißer Kasten) */
  background: var(--paper) radial-gradient(rgba(20,19,26,.055) 1px, transparent 1.2px) 0 0 / 4px 4px;
}
.tt-cover-focus {           /* 集中線 — konzentrische Speedlines, Mitte bleibt frei */
  position: absolute; inset: -25%; z-index: 0; opacity: .2; pointer-events: none;
  background:
    repeating-conic-gradient(from 0deg at 70% 46%, var(--ink) 0deg .32deg, transparent .32deg 3.1deg),
    repeating-conic-gradient(from 1.3deg at 70% 46%, var(--ink) 0deg .18deg, transparent .18deg 5.3deg);
  -webkit-mask-image: radial-gradient(circle at 70% 46%, transparent 0 17%, #000 55%);
          mask-image: radial-gradient(circle at 70% 46%, transparent 0 17%, #000 55%);
}
.tt-cover-sky { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; opacity: .82; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 30%, #000 60%); mask-image: linear-gradient(90deg, transparent 0 30%, #000 60%); }  /* Text links bleibt lesbar */
.tt-cover-sky img { width: 100%; }
.tt-cover-char {
  position: absolute; z-index: 2; right: clamp(4rem, 9vw, 9rem); bottom: 0;
  width: min(36vw, 34rem); pointer-events: none;
}
.tt-cover-vert {
  position: absolute; z-index: 1; right: clamp(.6rem, 2vw, 2rem); top: 1.2rem; margin: 0;
  writing-mode: vertical-rl; font-size: clamp(3rem, 7.6vw, 7.4rem); line-height: 1; letter-spacing: .06em;
  color: var(--paper); -webkit-text-stroke: .13rem var(--ink); pointer-events: none;   /* Papierfüllung: lesbar über der Skyline */
}
.tt-sfx--don { left: 49%; top: 54%; font-size: clamp(3.4rem, 9vw, 8.4rem); transform: rotate(-9deg) skewX(-6deg); }
.tt-cover-copy { position: relative; z-index: 4; max-width: 44rem; }
.tt-cover-copy .tt-h1-big { text-shadow: .3rem .3rem 0 var(--paper); }
.tt-price {
  position: absolute; z-index: 4; left: var(--gut); bottom: 1.4rem;
  display: flex; flex-direction: column; gap: .1rem; padding: .45rem .75rem;
  background: var(--white); border: var(--line); box-shadow: .25rem .25rem 0 var(--ink); transform: rotate(-1.5deg);
}
.tt-price-ja { font-size: 1rem; }
.tt-price-en { font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.tt-next {
  position: absolute; z-index: 4; right: var(--gut); bottom: 1.6rem; display: inline-flex; gap: .6rem; align-items: baseline;
  font-weight: 800; font-size: .95rem; text-decoration: none; background: var(--paper); padding: .3rem .5rem; border: var(--line);
}

/* ─── KAPITEL 1: Karte ──────────────────────────────────────────────────── */
.tt-map-pin {
  position: relative; z-index: 2; max-width: 80rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.tt-map { position: relative; margin: 0; background: var(--white); border: var(--line); box-shadow: var(--shadow); overflow: hidden; }
.tt-map-zoom { position: relative; aspect-ratio: 1200 / 498; transform-origin: 92.5% 53.4%; }
.tt-map-dots { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.tt-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tt-route { fill: none; stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tt-map-dot { stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.tt-map-dot--de { fill: var(--yellow); }
.tt-map-dot--jp { fill: var(--ink); }
.tt-ann { fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.tt-map-label { position: absolute; font: 400 clamp(.95rem, 1.5vw, 1.2rem)/1 var(--f-disp); text-transform: uppercase;
  background: var(--paper); border: .125rem solid var(--ink); padding: .2rem .4rem; white-space: nowrap; }
.tt-map-label--de { left: 15.5%; top: 28.6%; translate: -50% -165%; }   /* eigene translate-Eigenschaft: GSAP skaliert per transform, ohne die Position zu zerstören */
.tt-map-label--jp { left: 92.5%; top: 53.4%; translate: -102% 95%; }
.tt-map-cap {
  position: absolute; left: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .15rem;
  background: var(--paper); border: var(--line); padding: .5rem .8rem; box-shadow: .25rem .25rem 0 var(--ink);
}
.tt-map-km { font: 400 clamp(1.6rem, 3.6vw, 2.9rem)/1 var(--f-disp); letter-spacing: -.02em; }
.tt-map-km-sub { font-size: .9rem; font-weight: 700; }
.tt-note--map { position: absolute; right: 1.2rem; bottom: .9rem; display: flex; flex-direction: column; text-align: right;
  background: var(--paper); padding: .2rem .5rem; }   /* unten rechts: kollidiert nicht mit Kreis/Pfeil beim Zoom */

/* ─── KAPITEL 2: Zeitzonen-Streifen ─────────────────────────────────────── */
.tt-ch--day { padding-inline: 0; }
.tt-day-head { position: relative; z-index: 2; padding-inline: var(--gut); max-width: 60rem; }
.tt-clocks { display: flex; gap: clamp(.8rem, 2.5vw, 2rem); padding: 1.5rem var(--gut) 0; }
.tt-clock { display: flex; align-items: center; gap: .75rem; }
.tt-clock-face { width: clamp(4.4rem, 7vw, 6.2rem); height: auto; }
.tt-clock-ring { fill: var(--paper); stroke: var(--yellow); stroke-width: 3; }
.tt-clock-tick { stroke: var(--ink); stroke-width: 1.4; }
.tt-clock-tick--b { stroke-width: 3; }
.tt-clock-h { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.tt-clock-m { stroke: var(--red); stroke-width: 3; stroke-linecap: round; }
.tt-clock-pin { fill: var(--ink); }
.tt-clock-t { display: flex; flex-direction: column; }
.tt-clock-d { font: 400 clamp(1.7rem, 3.4vw, 2.7rem)/1 var(--f-disp); font-variant-numeric: tabular-nums; }
.tt-clock-l { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.tt-day-track { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); padding: 2rem var(--gut) 0; }
.tt-frame {
  position: relative; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  width: min(84vw, 66rem); background: var(--paper); color: var(--ink); border: var(--line); box-shadow: .55rem .55rem 0 var(--yellow);
}
.tt-frame-art { border-right: var(--line); overflow: hidden; background: var(--white); }
.tt-frame-art img { width: 100%; height: 100%; object-fit: cover; }
.tt-frame-txt { padding: clamp(1.2rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; justify-content: center; gap: .85rem; }
.tt-frame-txt h3 { font: 400 clamp(1.6rem, 3vw, 2.6rem)/1 var(--f-disp); letter-spacing: -.02em; }
.tt-time { font-size: 1rem; line-height: 1.4; }
.tt-time b { font-family: var(--f-disp); font-weight: 400; }
.tt-time small { font-size: .9rem; }
.tt-frame--solo { grid-template-columns: 1fr; width: min(70vw, 40rem);
  background: var(--paper) var(--tone) 0 0 / 7px 7px; }
.tt-frame--solo .tt-frame-txt { background: var(--paper); margin: 2rem; border: var(--line); }
.tt-slots { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .4rem; }
.tt-slots li { border: .125rem solid var(--ink); padding: .45rem .7rem; background: var(--white); font-size: 1rem; }
.tt-frame--joke { width: min(84vw, 60rem); }
.tt-punch { font-weight: 800; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; }
.tt-sfx--frame { right: 1rem; top: -1.6rem; font-size: clamp(2.2rem, 4.8vw, 4.2rem); transform: rotate(6deg); }
.tt-ch--day .tt-frame .tt-sfx { color: var(--ink);
  text-shadow: .07em 0 0 var(--yellow), -.07em 0 0 var(--yellow), 0 .07em 0 var(--yellow), 0 -.07em 0 var(--yellow), .09em .09em 0 var(--yellow); }
.tt-sfx--zz { right: 1rem; top: -1.7rem; font-size: clamp(2rem, 4.4vw, 3.8rem); transform: rotate(-8deg); }

/* ─── KAPITEL 3: Boss-Karten ────────────────────────────────────────────── */
.tt-sfx--gogo { right: var(--gut); top: clamp(3rem, 8vw, 6rem); font-size: clamp(2.4rem, 6vw, 5.4rem); transform: rotate(8deg); opacity: .9; }
.tt-boss-grid {
  position: relative; z-index: 2; max-width: 76rem; margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem);
}
.tt-boss {
  position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 0 1.25rem 1.3rem;
  background: var(--white); border: var(--line); box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.tt-boss:nth-child(odd)  { transform: rotate(-.9deg); }
.tt-boss:nth-child(even) { transform: rotate(.8deg); }
.tt-boss:hover { transform: translate(-.2rem, -.25rem) rotate(0deg); box-shadow: .75rem .75rem 0 var(--ink); }
.tt-boss-top {
  display: flex; align-items: center; justify-content: space-between; margin: 0 -1.25rem; padding: .8rem 1.25rem;
  border-bottom: var(--line); background: var(--paper2) var(--tone) 0 0 / 6px 6px;
}
.tt-boss-k { font: 400 1.5rem/1 var(--f-disp); background: var(--ink); color: var(--paper); padding: .35rem .55rem; }
.tt-boss-lvl { font-size: 1.15rem; letter-spacing: .1em; background: var(--paper); padding: 0 .35rem; }
.tt-boss-name { font: 400 clamp(1.45rem, 2.2vw, 1.8rem)/1.05 var(--f-disp); margin-top: .4rem; }
.tt-boss-list { font-weight: 700; font-size: 1rem; }
.tt-boss-line { font-size: 1rem; color: var(--mute); }
.tt-boss-go { margin-top: auto; align-self: flex-start; font: 400 1.02rem/1 var(--f-disp); text-decoration: none;
  border-bottom: .19rem solid var(--ink); padding: .35rem .15rem; }
.tt-boss-go:hover { background: var(--yellow); }
.tt-note--boss { position: relative; z-index: 2; max-width: 76rem; margin: 2.6rem auto 0; }

/* ─── KAPITEL 4: Yonkoma ────────────────────────────────────────────────── */
.tt-koma { list-style: none; margin: 0 auto; padding: 0; max-width: 70rem; display: grid; gap: clamp(1.2rem, 2.5vw, 1.8rem); position: relative; }
.tt-koma-row { position: relative; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.4rem); align-items: center; }
.tt-koma-art { background: var(--white); box-shadow: var(--shadow); }
.tt-koma-k { display: flex; align-items: baseline; gap: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; }
.tt-koma-k [lang="ja"] { font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: 0; }
.tt-koma-txt h3 { font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.02 var(--f-disp); margin: .35rem 0 .9rem; }
.tt-bubble {
  position: relative; background: var(--white); border: var(--line); border-radius: 1.6rem; padding: 1rem 1.25rem;
  font-size: 1.05rem; box-shadow: .3rem .3rem 0 var(--ink);
}
.tt-bubble::before {  /* Sprechblasen-Schwanz Richtung Bild */
  content: ""; position: absolute; left: -1.05rem; top: 1.3rem; width: 1.2rem; height: 1.1rem;
  background: var(--ink); clip-path: polygon(100% 0, 0 55%, 100% 100%);
}
.tt-bubble::after { content: ""; position: absolute; left: -.72rem; top: 1.52rem; width: .95rem; height: .68rem;
  background: var(--white); clip-path: polygon(100% 0, 0 55%, 100% 100%); }
.tt-sfx--ping { right: 36%; top: -1.2rem; font-size: clamp(1.8rem, 3.6vw, 3rem); transform: rotate(-7deg); }

/* ─── KAPITEL 5: The Cast ───────────────────────────────────────────────── */
.tt-cast-grid {
  max-width: 76rem; margin-inline: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem);
}
.tt-cast { position: relative; background: var(--white); border: var(--line); box-shadow: .4rem .4rem 0 var(--ink); padding: .9rem .9rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease; }
.tt-cast:hover { transform: translate(-.2rem, -.2rem); box-shadow: .65rem .65rem 0 var(--yellow); }
.tt-cast-no { font: 400 .9rem/1 var(--f-disp); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.tt-cast-pic { position: relative; aspect-ratio: 1; border: var(--line); background: var(--paper2) var(--tone) 0 0 / 6px 6px; overflow: hidden; }
.tt-cast-pic img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.3) brightness(1.06); }
.tt-cast-pic::after { content: ""; position: absolute; inset: 0; background: var(--tone) 0 0 / 5px 5px; opacity: .35; mix-blend-mode: multiply; }
.tt-cast-name { font: 400 1.45rem/1.05 var(--f-disp); margin-top: .8rem; }
.tt-cast-link { text-decoration: none; }
.tt-cast-link::after { content: ""; position: absolute; inset: 0; }   /* ganze Karte klickbar */
.tt-cast-subs { font-weight: 700; font-size: 1rem; margin-top: .35rem; }
.tt-cast-meta { font-size: .9rem; color: var(--mute); margin-top: .35rem; }

/* ─── KAPITEL 6: Deutsch ────────────────────────────────────────────────── */
.tt-ch--de { display: grid; place-items: center; }
/* Parallax-Ebenen (Hintergrundwort, SFX) dürfen nicht in den Nachbar-Abschnitt ragen.
   Nur Papier-Kapitel: die Tinte-Kapitel brauchen ihre gerissene Kante oberhalb (::before). */
.tt-ch--map, .tt-ch--boss, .tt-ch--de { overflow: clip; }
.tt-de-card {
  position: relative; z-index: 2; max-width: 50rem; padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--yellow); border: var(--line); box-shadow: .6rem .6rem 0 var(--ink); transform: rotate(-.8deg);
}
.tt-de-card .tt-h2 { font-size: clamp(1.9rem, 4.4vw, 3.4rem); max-width: 22ch; margin-bottom: 1.2rem; }
.tt-de-card .tt-hl { background-image: linear-gradient(var(--white), var(--white)); }
.tt-de-card > p:not(.tt-ch-no):not(.tt-small) { font-size: 1.1rem; max-width: 40rem; }
.tt-de-list { margin: 1.2rem 0 1.6rem; padding-left: 1.2rem; font-weight: 700; display: grid; gap: .35rem; }
.tt-de-card .tt-small { color: var(--ink); opacity: .8; margin-top: 1rem; }
.tt-sfx--yoshi { right: 8%; bottom: 10%; transform: rotate(10deg); }

/* ─── KAPITEL 7: Nächster Band ──────────────────────────────────────────── */
.tt-next-grid { max-width: 70rem; margin-inline: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); position: relative; z-index: 2; }
.tt-next-card { background: var(--paper); color: var(--ink); border: var(--line); box-shadow: .55rem .55rem 0 var(--yellow); padding: clamp(1.3rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: .9rem; }
.tt-next-card h3 { font: 400 clamp(1.4rem, 2.4vw, 2rem)/1.05 var(--f-disp); }
.tt-next-card .tt-btn { align-self: flex-start; margin-top: auto; box-shadow: .35rem .35rem 0 var(--ink); }
.tt-next-k { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .92rem; }
.tt-next-stamp {       /* Gummistempel „Band 2 in Vorbereitung" (Rot = Markierung) */
  position: absolute; z-index: 3; right: clamp(1rem, 6vw, 5rem); top: clamp(2.5rem, 6vw, 4.5rem);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem); color: var(--red); border: .25rem solid var(--red); padding: .35rem .7rem;
  transform: rotate(-9deg); opacity: .92; background: rgba(20,19,26,.35);
}

/* ─── Q&A (Sprechblasen) ────────────────────────────────────────────────── */
.tt-faq { max-width: 56rem; margin-inline: auto; display: grid; gap: 1.2rem; }
.tt-faq-item { position: relative; }
.tt-faq-q {
  list-style: none; cursor: pointer; position: relative; display: block; width: fit-content; max-width: 88%;
  background: var(--white); border: var(--line); border-radius: 1.5rem; padding: .95rem 1.3rem .95rem 3.1rem;
  font: 700 1.1rem/1.3 var(--f-text); box-shadow: .3rem .3rem 0 var(--ink);
}
.tt-faq-q::-webkit-details-marker { display: none; }
.tt-faq-q::before { content: "Q"; position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center; background: var(--ink); color: var(--paper);
  font: 400 1rem/1 var(--f-disp); border-radius: 50%; }
.tt-faq-item[open] .tt-faq-q { background: var(--yellow); }
.tt-faq-a {
  position: relative; margin: .9rem 0 0 auto; width: fit-content; max-width: 88%;
  background: var(--paper2); border: var(--line); border-radius: 1.5rem; padding: 1rem 1.3rem 1rem 3.1rem; font-size: 1.05rem;
}
.tt-faq-a::before { content: "A"; position: absolute; left: .75rem; top: 1rem; width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center; background: var(--yellow); border: .125rem solid var(--ink); font: 400 1rem/1 var(--f-disp); border-radius: 50%; }

/* ─── Finale: つづく ────────────────────────────────────────────────────── */
.tt-final { position: relative; overflow: clip; isolation: isolate; text-align: center; padding: clamp(5rem, 12vw, 9rem) var(--gut); border-top: var(--line); }
.tt-final-focus { position: absolute; inset: -30%; z-index: -1; opacity: .16;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--ink) 0deg .3deg, transparent .3deg 3.4deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 20%, #000 60%); mask-image: radial-gradient(circle, transparent 0 20%, #000 60%); }
.tt-final-ja { font-size: clamp(5rem, 20vw, 15rem); line-height: .95; margin: 0; }
.tt-final-h { margin: 1.2rem auto 0; max-width: 20ch; }
.tt-final-p { margin: 1rem auto 0; max-width: 34rem; font-size: 1.15rem; }

/* ─── Fußzeile ──────────────────────────────────────────────────────────── */
.tt-foot { background: var(--ink); color: var(--paper); padding: 2.4rem var(--gut) calc(2.4rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .9rem; }
.tt-foot a { color: var(--yellow); }
.tt-foot .tt-small { color: #CFC8B6; max-width: 62rem; }
.tt-foot-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-weight: 700; }

/* ─── Desktop-Pin-Zustand (tokyo.js setzt .tt-pin-on nur ≥ 900px) ────────── */
.tt-pin-on .tt-ch--day .tt-day-pin { height: calc(100svh - var(--bar-h)); display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto; align-content: center; column-gap: 2rem; padding-block: 1.2rem; }
.tt-pin-on .tt-day-head { grid-column: 1; grid-row: 1; }
.tt-pin-on .tt-clocks { grid-column: 2; grid-row: 1; align-self: end; padding-top: 0; }
.tt-pin-on .tt-day-track { grid-column: 1 / -1; grid-row: 2; }
.tt-pin-on .tt-ch--day .tt-h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); max-width: 20ch; }
.tt-pin-on .tt-frame-txt { overflow: hidden; }
.tt-pin-on .tt-ch--day { padding-block: 0; }
.tt-pin-on .tt-day-track { width: max-content; padding-right: 12vw; }
.tt-pin-on .tt-frame { height: min(56svh, 34rem); }
.tt-pin-on .tt-frame--solo { height: min(56svh, 34rem); }

/* ─── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  :root { --bar-h: 3.4rem; }
  .tt-brand-t { display: none; }
  .tt-bar-ch { font-size: .92rem; }
  .tt-bar-en { display: none; }
  .tt-cover { flex-direction: column; align-items: stretch; padding-bottom: 0; min-height: 0; }
  .tt-cover-copy { order: 1; }
  .tt-cover-char { order: 2; position: relative; right: auto; bottom: auto; width: 78vw; margin: 1.2rem auto 0; }
  .tt-cover-sky { opacity: .7; -webkit-mask-image: linear-gradient(180deg, transparent 0 25%, #000 60%); mask-image: linear-gradient(180deg, transparent 0 25%, #000 60%); }
  .tt-cover-vert { font-size: clamp(2.4rem, 13vw, 3.6rem); top: auto; bottom: 10rem; right: .4rem; }
  .tt-sfx--don { left: 3vw; right: auto; top: auto; bottom: 11rem; font-size: 3.2rem; }   /* neben die Füße, nicht übers Gesicht */
  .tt-price { position: relative; left: auto; bottom: auto; order: 3; align-self: flex-start; margin: -3.4rem 0 1.4rem; }
  .tt-next { display: none; }
  .tt-map-pin { grid-template-columns: 1fr; }
  .tt-map-label { font-size: .88rem; }
  .tt-note--map { position: static; flex-direction: row; gap: 1rem; padding: .5rem .8rem 0; text-align: left; }
  .tt-map-cap { position: static; margin: .8rem; }
  .tt-day-track { flex-direction: column; }
  .tt-frame, .tt-frame--solo, .tt-frame--joke { width: auto; grid-template-columns: 1fr; }
  .tt-frame-art { border-right: 0; border-bottom: var(--line); }
  .tt-frame--solo .tt-frame-txt { margin: 1.2rem; }
  .tt-koma-row { grid-template-columns: 1fr; }
  .tt-bubble::before, .tt-bubble::after { display: none; }
  .tt-faq-q, .tt-faq-a { max-width: 100%; }
  .tt-next-stamp { position: relative; right: auto; top: auto; display: inline-block; margin-top: 2rem; }
  .tt-sfx--gogo { top: .8rem; right: .6rem; font-size: 2.3rem; }   /* mobil: über dem Kapitel-Label, nicht über der H2 */
}

/* ─── Risiko-Karte (Kosten ehrlich + „kein Risiko", nach dem Yonkoma) — 2026-09-28 ─── */
.tt-risk { position: relative; max-width: 46rem; margin: clamp(2.8rem, 6vw, 4.2rem) auto 0; padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--white); border: var(--line); box-shadow: var(--shadow); transform: rotate(-.6deg); }
.tt-risk-k { font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; display: flex; gap: .6rem; align-items: center; }
.tt-risk-k [lang="ja"] { background: var(--ink); color: var(--paper); padding: .2rem .5rem; font-size: 1.05rem; letter-spacing: .04em; text-transform: none; }
.tt-risk h3 { font: 400 clamp(1.4rem, 2.6vw, 2rem)/1.05 var(--f-disp); margin: .6rem 0 1rem; max-width: 26ch; }
.tt-risk-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.tt-risk-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem .1rem;
  border-bottom: .125rem dashed var(--ink); font-size: 1.05rem; font-weight: 700; }
.tt-risk-list b { font: 400 1.3rem/1 var(--f-disp); white-space: nowrap; }
.tt-risk-list li:nth-child(-n+2) b { background: var(--yellow); padding: .1rem .35rem; }
.tt-risk-list small { font-size: .9rem; font-weight: 400; }
.tt-note--risk { position: absolute; right: -1.2rem; top: 1.4rem; transform: rotate(6deg); }
.tt-risk .tt-small a, .tt-faq-a a, .tt-de-list a { color: var(--ink); font-weight: 700; }
@media (max-width: 760px) { .tt-note--risk { position: static; margin-bottom: .6rem; transform: rotate(-2deg); } }

/* ─── Cast: Stunden-Schätzung + DirectBuy („Daten-Direktabholung") — 2026-09-28 ─── */
.tt-cast-hours { display: block; margin-top: .15rem; }
.tt-cast-db { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; margin-top: .7rem;
  font: 400 .95rem/1 var(--f-disp); text-decoration: none; color: var(--ink); background: var(--yellow);
  border: .15rem solid var(--ink); padding: .45rem .65rem; box-shadow: .2rem .2rem 0 var(--ink);
  transition: transform .15s ease, box-shadow .15s ease; }
.tt-cast-db:hover { transform: translate(-.1rem, -.1rem); box-shadow: .3rem .3rem 0 var(--ink); }

.tt-cast-req { background: var(--white); }   /* „Request tutor“ (kostenlos) hell, „⚡ Direct contact“ gelb — 2026-10-06 */
.tt-risk .tt-small + .tt-small { margin-top: .5rem; }