/* NEO EDO · Studie 08 — zwei Welten, ein Schnitt. Edo: Papier + Tusche + Zinnoberrot. Neo: Nacht + Cyan (Licht) + Gelb (Oberfläche). Das Rot gehört beiden. Der Schnitt ist nur Transform: Ein gedrehtes Fenster (overflow:hidden) mit gegengedrehtem Inhalt — JS ändert nur Variablen, der Inhalt wird nie neu gezeichnet (Kompositor statt clip-path). */ :root { --papier: #ece3d0; --papier-2: #e2d6bd; --tusche: #17130f; --rot-edo: #c8281e; --nacht: #06060d; --cyan: #1ef2ff; --gelb: #f2e600; --rot-neo: #ff2448; --hell: #e9f8ff; --aus: cubic-bezier(.19, 1, .22, 1); --vorhang: cubic-bezier(.76, 0, .24, 1); --feder: cubic-bezier(.34, 1.56, .64, 1); --mincho: 'Shippori Mincho B1', 'Hiragino Mincho ProN', 'Yu Mincho', serif; --pinsel: 'Yuji Boku', var(--mincho); --pixel: 'DotGothic16', 'Hiragino Sans', monospace; --tech: 'Chakra Petch', system-ui, sans-serif; --rand: clamp(20px, 4.2vw, 72px); --hoehe: 100vh; } @supports (height: 100svh) { :root { --hoehe: 100svh; } } * { box-sizing: border-box; } html { background: var(--nacht); scroll-behavior: auto; } body { margin: 0; font-family: var(--mincho); color: var(--tusche); -webkit-font-smoothing: antialiased; } a { color: inherit; } .sprung { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gelb); color: var(--nacht); padding: 8px 14px; font-family: var(--tech); } .sprung:focus { left: 8px; } /* ---------- Szene, Bühne, Welten ---------- */ .szene { position: relative; height: 350vh; content-visibility: auto; } /* Szenen außerhalb des Bildes gar nicht erst zeichnen (Ladezeit) */ .szene:first-of-type { content-visibility: visible; } .szene-hero { height: 260vh; } .szene-ende { height: 220vh; } .buehne { position: sticky; top: 0; height: var(--hoehe); overflow: hidden; isolation: isolate; } /* Je-Bild-Werte: nicht vererbend, Startwerte direkt an den lesenden Elementen (sonst Stil-Neuberechnung des ganzen Baums) */ @property --cx { syntax: '*'; inherits: false; } @property --cy { syntax: '*'; inherits: false; } @property --phi { syntax: '*'; inherits: false; } @property --vers { syntax: '*'; inherits: false; } @property --bw { syntax: '*'; inherits: false; } @property --cam { syntax: '*'; inherits: false; } @property --p { syntax: '*'; inherits: false; } @property --tunnel { syntax: '*'; inherits: false; } @property --pos { syntax: '*'; inherits: false; } /* Querfahrt: nur die Spur liest sie */ @property --off { syntax: '*'; inherits: false; } /* Querfahrt: JS schreibt direkt an Bild, Kanji und Text des Felds */ @property --zug { syntax: '*'; inherits: false; } @property --mpos { syntax: '*'; inherits: false; } /* Manga-Streifen auf dem Handy: nur die Spur liest sie */ .neo-fenster, .neo-inhalt, .schnitt { --cx: 58vw; --cy: 50vh; --phi: -14deg; --vers: 0px; } .etikett { --p: 1; } .szene-stadt .bild.ebene { --p: .5; } .szene-klinge .kulisse .bild { --zeichnen: 0; } .tunnel { --tunnel: 1; } .welt { position: absolute; inset: 0; overflow: hidden; } .welt-edo { z-index: 0; } /* eigener Stapelkontext: Edo-Texte dürfen nie über das Neo-Fenster */ .welt-edo { background-color: var(--papier); background-image: radial-gradient(120% 90% at 30% 20%, rgba(255, 252, 244, .55), transparent 60%), radial-gradient(90% 80% at 90% 100%, rgba(120, 96, 60, .16), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .welt-neo { background: radial-gradient(120% 80% at 70% 30%, #12102a 0%, var(--nacht) 65%); color: var(--hell); } .welt-neo::after { /* Bildschirmzeilen */ content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .24) 0 1px, transparent 1px 3px); /* ohne Mischmodus: multiply kostete ≈ 20 % Bildrate */ } .kulisse { position: absolute; inset: 0; } .kulisse .bild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .bild.hoch { display: none; } @media (max-aspect-ratio: 4/5) { .bild.quer { display: none; } .bild.hoch { display: block; } } /* Der Schnitt: Fenster mit Kante entlang der Linie durch (cx, cy), gedreht um phi */ .neo-fenster { position: absolute; left: 0; top: 0; width: 400vmax; height: 400vmax; overflow: hidden; pointer-events: none; z-index: 2; transform-origin: 0 0; transform: translate(var(--cx), var(--cy)) rotate(var(--phi)) translate(0, -200vmax); will-change: transform; } .neo-inhalt { position: absolute; left: 0; top: 0; width: var(--bw, 100vw); height: var(--hoehe); transform-origin: 0 0; will-change: transform; transform: translate(0, calc(200vmax + var(--vers))) rotate(calc(-1 * var(--phi))) translate(calc(-1 * var(--cx)), calc(-1 * var(--cy))); } .neo-inhalt a, .neo-inhalt button { pointer-events: auto; } .schnitt { position: absolute; left: 0; top: 0; width: 2px; height: 400vmax; z-index: 3; pointer-events: none; transform-origin: 0 0; transform: translate(var(--cx), var(--cy)) rotate(var(--phi)) translate(-1px, -200vmax); background: #fff; will-change: transform; box-shadow: 0 0 4px 1px #fff, 0 0 16px 3px var(--rot-neo), 0 0 54px 10px rgba(255, 36, 72, .4); } /* ---------- Typografie: derselbe Text in beiden Welten, gleiche Maße — der Schnitt wechselt nur die Farbe ---------- Regel aus Studie 08: Kein Wort darf im Schnitt verschwinden. Schrift, Größe, Zeilenhöhe und Abstände sind in Edo und Neo identisch; Neo unterscheidet sich nur in Farbe, Leuchten und Farbsaum. */ .text { position: absolute; z-index: 3; } .text-haupt { left: var(--rand); top: calc(var(--hoehe) * .17); width: min(36rem, 40vw); } .aug { margin: 0; font: 800 .82rem/1.4 var(--mincho); letter-spacing: .26em; text-transform: uppercase; } .welt-edo .aug { color: var(--rot-edo); } .welt-neo .aug { color: var(--gelb); text-shadow: 0 0 10px rgba(242, 230, 0, .45); } .text-haupt h2, .text-haupt .h2 { margin: .32em 0 .42em; font: 800 clamp(2.5rem, 5.6vw, 6rem)/.98 var(--mincho); letter-spacing: -.025em; } .welt-neo .h2 { color: var(--hell); text-shadow: 2px 0 0 rgba(255, 36, 72, .75), -2px 0 0 rgba(30, 242, 255, .75), 0 0 24px rgba(30, 242, 255, .45); } .fliess, .text-haupt > p:not([class]), .edo-teil > p:not([class]), .neo-teil > p:not([class]) { font: 400 clamp(1rem, 1.12vw, 1.16rem)/1.7 var(--mincho); max-width: 31rem; margin: 0; } .welt-neo .text-haupt > p:not([class]), .welt-neo .neo-teil > p:not([class]) { color: #dbe8f7; text-shadow: 0 0 12px rgba(30, 242, 255, .25); } /* Ein Text je Welt */ .welt-edo .neo-teil, .welt-neo .edo-teil > p { display: none; } .neo-marke { margin: 0 0 .5em; font: 800 .72rem/1.4 var(--mincho); letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); } .absatz { position: absolute; z-index: 3; right: var(--rand); bottom: calc(var(--hoehe) * .12); width: min(29rem, 34vw); padding: 18px 22px 20px; border-left: 2px solid; clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%); font: 400 clamp(.98rem, 1.05vw, 1.08rem)/1.6 var(--mincho); } .absatz::before { content: '2099 · Neo-Tokio'; display: block; font: 800 .72rem/1.4 var(--mincho); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 8px; } .absatz p { margin: 0; } .welt-edo .absatz { background: rgba(244, 238, 225, .93); border-color: var(--rot-edo); color: var(--tusche); } .welt-edo .absatz::before { color: var(--rot-edo); } .welt-neo .absatz { background: rgba(6, 6, 13, .8); border-color: var(--gelb); color: var(--hell); } .welt-neo .absatz::before { color: var(--cyan); } /* Hero */ .text-hero { top: auto; bottom: calc(var(--hoehe) * .1); width: min(44rem, 52vw); } .titel { margin: .12em 0 .18em; font: 800 clamp(4.4rem, 13.5vw, 14rem)/.84 var(--mincho); letter-spacing: -.045em; } .welt-neo .titel { color: var(--hell); text-shadow: 3px 0 0 rgba(255, 36, 72, .8), -3px 0 0 rgba(30, 242, 255, .8), 0 0 40px rgba(30, 242, 255, .5); } .welt-neo .titel.stoert { animation: stoerung .3s steps(1) 1; } /* kurzer Störimpuls, von JS ausgelöst statt Endlos-Animation (die rechnete jedes Bild) */ .unter { margin: 0; font: 400 clamp(1.1rem, 1.6vw, 1.5rem)/1.35 var(--mincho); } .welt-neo .unter { color: var(--cyan); text-shadow: 0 0 12px rgba(30, 242, 255, .45); } .sys { margin: 0; font: 600 .8rem/1.4 var(--tech); letter-spacing: .28em; } .welt-edo .sys { color: var(--tusche); } .welt-edo .sys span { color: var(--rot-edo); } .welt-neo .sys { color: var(--cyan); } .welt-neo .sys span { color: var(--gelb); } .sys-hero { position: absolute; right: var(--rand); top: calc(var(--hoehe) * .14); z-index: 3; } .hinweis { position: absolute; z-index: 3; right: var(--rand); bottom: calc(var(--hoehe) * .1); margin: 0; max-width: 15rem; font: 400 .9rem/1.5 var(--mincho); padding-top: 54px; } .welt-edo .hinweis { color: var(--tusche); } .welt-neo .hinweis { color: var(--hell); } .hinweis::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 42px; background: var(--rot-edo); transform-origin: top; animation: tropfen 2.4s var(--aus) infinite; } @keyframes stoerung { 0%, 100% { transform: none; } 30% { transform: translate(-3px, 0); } 60% { transform: translate(2px, 0); } } @keyframes tropfen { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } } /* Klinge: Linien zeichnen sich mit --zeichnen (1 → 0), Füllung folgt, Beschriftungen nacheinander */ .szene-klinge .strich { stroke-dasharray: 1; stroke-dashoffset: var(--zeichnen); } .szene-klinge .fuellung { opacity: calc(1 - var(--zeichnen)); } .szene-klinge .strich-neo { opacity: calc(1 - var(--zeichnen) * 1.4); } .szene-klinge .griff { opacity: clamp(0, calc((.85 - var(--zeichnen)) * 3), 1); } .etikett { opacity: clamp(0, calc((var(--p) - var(--ab)) * 9), 1); } /* Lesbarkeit: weicher Schleier hinter der Textspalte, wo die Kulisse voll ist */ .szene-weg .kulisse::after, .szene-stadt .kulisse::after { content: ''; position: absolute; inset: 0; pointer-events: none; } .szene-weg .welt-edo .kulisse::after, .szene-stadt .welt-edo .kulisse::after { background: linear-gradient(90deg, rgba(236, 227, 208, .94) 0%, rgba(236, 227, 208, .8) 32%, rgba(236, 227, 208, 0) 52%); } .szene-weg .welt-neo .kulisse::after, .szene-stadt .welt-neo .kulisse::after { background: linear-gradient(90deg, rgba(6, 6, 13, .9) 0%, rgba(6, 6, 13, .7) 32%, rgba(6, 6, 13, 0) 52%); } /* Klinge quer: Neo-Absatz oben rechts, unten liegen die Beschriftungen */ .szene-klinge .absatz { bottom: auto; top: calc(var(--hoehe) * .13); } /* Weg: Flug durch die Tore */ .tunnel { transform-box: view-box; transform: scale(var(--tunnel)); } /* Stadt: Ebenen verschieben sich gegeneinander */ .szene-stadt .kulisse .bild.ebene { left: -6%; width: 112%; transform: translate3d(calc((.5 - var(--p)) * var(--tiefe) * 1.1vw), 0, 0); will-change: transform; } /* Kodex */ .tugenden { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 3; } .tugend { display: grid; gap: .3rem; } .tk { font-size: clamp(5rem, 13vw, 12rem); line-height: 1; } .welt-edo .tk { font-family: var(--pinsel); color: var(--tusche); } .welt-neo .tk { font-family: var(--pixel); color: var(--cyan); text-shadow: 0 0 22px rgba(30, 242, 255, .7), 3px 0 0 rgba(255, 36, 72, .7); } .tn { font: 800 1.05rem/1.4 var(--mincho); letter-spacing: .08em; } .welt-neo .tn { color: var(--gelb); } .ts { font: 400 1rem/1.5 var(--mincho); max-width: 22rem; } .welt-neo .ts { color: var(--hell); } /* ohne JS / ruhig: alle Tugenden als Liste */ .tugenden { left: 52%; right: var(--rand); top: calc(var(--hoehe) * .14); display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 1rem 1.6rem; } .tugenden .tk { font-size: clamp(2.6rem, 4vw, 4rem); } .tugenden .ts { display: none; } /* mit Bewegung: eine Tugend groß in der Mitte des Kreises, Wechsel mit Schnitt */ .js:not(.ruhig) .tugenden { display: block; left: 68%; top: 50%; right: auto; width: 0; height: 0; } .js:not(.ruhig) .tugend { position: absolute; left: 0; top: 0; width: min(26rem, 32vw); transform: translate(-50%, -50%) scale(1.06); text-align: center; justify-items: center; opacity: 0; filter: blur(10px); transition: opacity .5s var(--aus), transform .7s var(--aus), filter .5s var(--aus), clip-path .5s var(--vorhang); clip-path: inset(0 0 0 0); } .js:not(.ruhig) .tugend.aktiv { opacity: 1; transform: translate(-50%, -50%); filter: none; } .js:not(.ruhig) .tugend.weg { opacity: 0; filter: none; transform: translate(-50%, -50%) translate(-3vw, 2vh) skewX(-10deg); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 62%); transition-duration: .35s; } .js:not(.ruhig) .tugenden .tk { font-size: clamp(6rem, 15vw, 15rem); } .js:not(.ruhig) .tugenden .ts { display: block; } /* Ende */ .text-ende { top: calc(var(--hoehe) * .2); } .knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem !important; } .knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; text-decoration: none; font-family: var(--tech); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; background: var(--tusche); color: var(--papier); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); transition: background .2s var(--aus), transform .25s var(--feder); } .knopf:hover { background: var(--rot-edo); transform: translateY(-2px); } .knopf:focus-visible { outline: 2px solid var(--rot-edo); outline-offset: 4px; } .knopf-leise { background: transparent; color: var(--tusche); box-shadow: inset 0 0 0 1.5px var(--tusche); } .knopf-leise:hover { color: var(--papier); } /* ---------- Kopf, Fortschritt, Blitz ---------- */ .hud { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px var(--rand); color: #fff; mix-blend-mode: difference; font-family: var(--tech); pointer-events: none; } .hud a, .hud button { pointer-events: auto; } .hud-marke { font-weight: 700; letter-spacing: .2em; text-decoration: none; font-size: .95rem; } .hud-marke b { color: #00dbb7; } /* Differenz zu Rot */ .hud-kapitel { margin: 0; display: flex; gap: .8rem; font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; } .hud-nr { opacity: .6; } .hud-ton, .hud-auto { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid currentColor; color: inherit; font: 600 .74rem var(--tech); letter-spacing: .22em; text-transform: uppercase; padding: 9px 14px; min-height: 40px; cursor: pointer; } .hud-ton:focus-visible, .hud-auto:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .ton-balken { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; } .ton-balken i { width: 2px; height: 4px; background: currentColor; } .hud-ton[aria-pressed="true"] .ton-balken i { animation: pegel .9s ease-in-out infinite alternate; } .hud-ton[aria-pressed="true"] .ton-balken i:nth-child(2) { animation-delay: -.3s; } .hud-ton[aria-pressed="true"] .ton-balken i:nth-child(3) { animation-delay: -.6s; } @keyframes pegel { to { height: 12px; } } .fortschritt { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 50; pointer-events: none; } .fortschritt i { display: block; height: 100%; background: var(--rot-neo); transform-origin: 0 0; transform: scaleX(var(--gesamt, 0)); box-shadow: 0 0 12px var(--rot-neo); } .blitz { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; } .blitz::before, .blitz::after { content: ''; position: absolute; opacity: 0; } .blitz::before { /* Klingenstreif */ left: -20vw; top: 50%; width: 140vw; height: 2px; background: linear-gradient(90deg, transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 10px 1px rgba(255, 36, 72, .45); transform: rotate(-28deg) scaleX(0); transform-origin: 0 50%; } .blitz::after { inset: 0; background: #fff; } .blitz.an::before { animation: streif .55s var(--aus) forwards; } .blitz.an.voll::after { animation: aufblitzen .45s ease-out forwards; } /* ganzes Bild leuchtet nur bei Duell-Treffern */ @keyframes streif { 0% { opacity: .55; transform: rotate(-28deg) scaleX(0); } 45% { opacity: .55; transform: rotate(-28deg) scaleX(1); } 100% { opacity: 0; transform: rotate(-28deg) scaleX(1); } } @keyframes aufblitzen { 0% { opacity: 0; } 18% { opacity: .2; } 100% { opacity: 0; } } .wetter { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* ---------- Fuß ---------- */ .fuss { background: var(--nacht); color: #8f97b0; padding: 2rem var(--rand) 2.4rem; display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; justify-content: space-between; font: .85rem var(--tech); letter-spacing: .08em; } .fuss p { margin: 0; } .fuss-marke { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .fuss-marke-txt { font-size: 13.5px; } .marke-knopf { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 8px; border-radius: 999px; font-size: 14.5px; font-weight: 700; text-decoration: none; border: 1.5px solid; transition: transform .2s var(--aus); } .marke-knopf img { width: 28px; height: 28px; flex: none; border-radius: 6px; } .marke-knopf:hover { transform: translateY(-1px); } .marke-knopf--webliq { color: #e8c14a; background: rgba(232, 193, 74, .07); border-color: rgba(232, 193, 74, .45); } .marke-knopf--otaku { color: #7ba9f5; background: rgba(123, 169, 245, .07); border-color: rgba(123, 169, 245, .4); } /* ---------- Hochformat (Handy) ---------- */ @media (max-aspect-ratio: 4/5) { .neo-fenster, .neo-inhalt, .schnitt { --cx: 50vw; --cy: 58vh; --phi: 74deg; } .szene { height: 320vh; } .text-haupt { top: auto; bottom: calc(var(--hoehe) * .045); left: var(--rand); right: var(--rand); width: auto; padding: 16px 18px 18px; } /* Handy: Text unten wie im Kino, oben frei fürs Bild */ .welt-edo .text-haupt { background: rgba(236, 227, 208, .92); box-shadow: inset 0 0 0 1px rgba(23, 19, 15, .18); } .welt-neo .text-haupt { background: rgba(6, 6, 13, .78); box-shadow: inset 0 0 0 1px rgba(30, 242, 255, .25); } .text-haupt h2, .text-haupt .h2 { font-size: clamp(2.1rem, 10vw, 3rem); margin: .25em 0 .35em; } .fliess, .text-haupt > p:not([class]), .edo-teil > p:not([class]), .neo-teil > p:not([class]) { font-size: .98rem; line-height: 1.6; } .absatz, .szene-klinge .absatz { left: var(--rand); right: var(--rand); width: auto; top: auto; bottom: calc(var(--hoehe) * .05); font-size: .95rem; } .welt-edo .text-hero, .welt-neo .text-hero { top: auto; bottom: calc(var(--hoehe) * .1); background: none; box-shadow: none; padding: 0; } .titel { font-size: clamp(4rem, 22vw, 7rem); } .hinweis { display: none; } .sys-hero { top: calc(var(--hoehe) * .1); right: var(--rand); font-size: .7rem; } .hud-kapitel { display: none; } .text-kodex { top: auto; bottom: calc(var(--hoehe) * .05); } .tugenden { left: var(--rand); right: var(--rand); top: calc(var(--hoehe) * .1); grid-template-columns: repeat(4, 1fr); } .js:not(.ruhig) .tugenden { left: 50%; top: 36%; } .js:not(.ruhig) .tugend { width: 80vw; } .js:not(.ruhig) .tugenden .tk { font-size: clamp(5rem, 34vw, 9rem); } .text-ende { top: calc(var(--hoehe) * .12); } } @media (max-width: 560px) { .hud-ton .ton-text, .hud-auto .auto-text { display: none; } .hud-ton, .hud-auto { padding: 9px 12px; } } /* Tablet hochkant (768–1024 breit): Handy-Aufbau, aber größere Schrift und schmalere Karten statt randvoller Flächen */ @media (max-aspect-ratio: 4/5) and (min-width: 700px) { .text-haupt { right: auto; width: min(34rem, 74vw); padding: 24px 28px 26px; } .text-haupt h2, .text-haupt .h2 { font-size: clamp(3rem, 7.4vw, 4.6rem); } .fliess, .text-haupt > p:not([class]), .edo-teil > p:not([class]), .neo-teil > p:not([class]) { font-size: 1.08rem; line-height: 1.65; } .absatz, .szene-klinge .absatz { left: auto; right: var(--rand); width: min(30rem, 62vw); font-size: 1.04rem; } .welt-edo .text-hero, .welt-neo .text-hero { width: min(40rem, 80vw); } .titel { font-size: clamp(6rem, 18vw, 10rem); } .duell-tafeln { left: auto; width: min(28rem, 60vw); top: calc(var(--hoehe) * .14); } .zk { width: min(30rem, 70vw); } .karte { width: min(30rem, 72vw); } } /* Handy: Jahreszahl erst zeigen, wenn der Kapiteltitel der Zeitreise weg ist (sonst liegen beide übereinander) */ @media (max-aspect-ratio: 4/5) and (max-width: 699px) { .zeit-zaehler { opacity: 0; transition: opacity .5s var(--aus); } .zeit-weg .zeit-zaehler { opacity: 1; } .duell-tafeln { top: calc(var(--hoehe) * .36); } } /* ---------- Ruhig: nichts fährt ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .szene { height: auto; min-height: var(--hoehe); } .buehne { position: relative; } } /* Lenis (sanftes Scrollen) */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } /* ===================================================================== Kapitel 一 · Die Reise — seitwärts, sieben Ebenen, vier Wetter ===================================================================== */ .szene-reise { height: 1100vh; } .ebene-reise, .spur { --cam: 0; --k: 1; } .himmel, .phasen-zeichen, .schnee-ebene, .r-sonne, .r-ausbruch { --w-sonne: 1; --w-regen: 0; --w-schnee: 0; --w-vulkan: 0; --blitzlicht: 0; } .landschaft { position: absolute; inset: 0; z-index: 1; } .ebene-reise { position: absolute; left: 50%; top: 0; height: 100%; width: auto; aspect-ratio: var(--w) / 900; overflow: visible; transform: translate3d(calc((-900 - var(--cam) * var(--s)) * var(--k) * 1px), 0, 0); will-change: transform; } .schnee-ebene { opacity: var(--w-schnee); } .r-sonne { opacity: calc(1 - var(--w-regen) * .85 - var(--w-vulkan) * .4); } .r-ausbruch { opacity: clamp(0, calc(var(--w-vulkan) * 1.6), 1); } .r-ausbruch .fahne { transform-box: view-box; transform-origin: 280px 272px; transform: scale(calc(.12 + var(--w-vulkan) * .88)); } /* Himmel je Wetter: übereinander, nur Deckkraft ändert sich (Kompositor) */ .himmel, .himmel i { position: absolute; inset: 0; pointer-events: none; } .himmel { z-index: 0; } .himmel i { display: block; } .welt-edo .h-regen { background: linear-gradient(#5d5c58 0%, rgba(93, 92, 88, .55) 45%, rgba(93, 92, 88, .1) 80%); opacity: calc(var(--w-regen) * .9); } .welt-edo .h-schnee { background: linear-gradient(#5d6878 0%, rgba(93, 104, 120, .5) 55%, rgba(236, 227, 208, 0) 85%); opacity: calc(var(--w-schnee) * .85); } .welt-edo .h-vulkan { background: radial-gradient(70% 60% at 60% 30%, rgba(200, 40, 30, .55), rgba(60, 30, 20, .7) 60%, rgba(40, 30, 25, .85)); opacity: var(--w-vulkan); } .welt-neo .h-regen { background: linear-gradient(#071a26, rgba(7, 26, 38, .2) 80%); opacity: var(--w-regen); } .welt-neo .h-schnee { background: linear-gradient(#1b2a44, rgba(150, 220, 255, .12) 70%); opacity: var(--w-schnee); } .welt-neo .h-vulkan { background: radial-gradient(60% 55% at 58% 28%, rgba(255, 60, 30, .55), rgba(60, 8, 20, .7) 60%, #12040a); opacity: var(--w-vulkan); } .h-blitz { background: #fff; opacity: calc(var(--blitzlicht) * .28); z-index: 1; } .welt-edo .h-blitz { background: #fffdf6; } .phasen-zeichen span { position: absolute; right: 4vw; top: 8vh; font-size: min(46vh, 34vw); line-height: 1; z-index: 0; pointer-events: none; opacity: 0; } .phasen-zeichen span:nth-child(1) { opacity: calc(var(--w-sonne) * var(--zs, .14)); } .phasen-zeichen span:nth-child(2) { opacity: calc(var(--w-regen) * var(--zs, .14)); } .phasen-zeichen span:nth-child(3) { opacity: calc(var(--w-schnee) * var(--zs, .14)); } .phasen-zeichen span:nth-child(4) { opacity: calc(var(--w-vulkan) * var(--zs, .14)); } .welt-edo .phasen-zeichen span { font-family: var(--pinsel); color: var(--tusche); } .welt-neo .phasen-zeichen { --zs: .5; } .welt-neo .phasen-zeichen span { font-family: var(--pixel); color: transparent; -webkit-text-stroke: 2px var(--cyan); } .wetter-ort { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Text fährt mit dem Weg (Tiefe 1) */ .spur { position: absolute; left: 50%; top: 0; height: 100%; width: 0; z-index: 3; transform: translate3d(calc(var(--cam) * var(--k) * -1px), 0, 0); will-change: transform; } .karte { position: absolute; left: calc(var(--u) * var(--k) * 1px); top: 50%; width: min(30rem, 84vw); transform: translate(-50%, -50%); } .karte { padding: 26px 28px 28px; border-top: 3px solid; } .welt-edo .karte { background: rgba(244, 238, 225, .93); border-color: var(--rot-edo); color: var(--tusche); box-shadow: 0 30px 60px -30px rgba(23, 19, 15, .5); } .welt-neo .karte { background: rgba(6, 6, 13, .82); border-color: var(--gelb); color: var(--hell); box-shadow: 0 0 40px -10px rgba(30, 242, 255, .35); } .welt-edo .karte-z { font-family: var(--pinsel); color: var(--rot-edo); } .welt-neo .karte-z { font-family: var(--pinsel); color: var(--cyan); text-shadow: 0 0 14px rgba(30, 242, 255, .6); } .karte h2, .karte .h2 { font: 800 clamp(1.7rem, 2.6vw, 2.5rem)/1.04 var(--mincho); letter-spacing: -.02em; margin: .4em 0 .45em; padding-right: 4.6rem; } .welt-neo .karte .h2 { color: var(--hell); text-shadow: 2px 0 0 rgba(255, 36, 72, .7), -2px 0 0 rgba(30, 242, 255, .7); } .karte p { margin: 0; line-height: 1.65; } .karte > p:not([class]) { font: 400 1rem/1.65 var(--mincho); } .karte-2099 { margin-top: 1rem !important; padding-top: .9rem; border-top: 1px solid; font: 400 .95rem/1.55 var(--mincho); } .karte-2099 span { display: block; font: 800 .72rem/1.4 var(--mincho); letter-spacing: .26em; text-transform: uppercase; margin-bottom: 4px; } .welt-edo .karte-2099 { border-color: rgba(23, 19, 15, .2); } .welt-edo .karte-2099 span { color: var(--rot-edo); } .welt-neo .karte-2099 { border-color: rgba(30, 242, 255, .3); color: #dbe8f7; } .welt-neo .karte-2099 span { color: var(--cyan); } .karte.karte-intro { width: min(40rem, 88vw); background: none !important; box-shadow: none !important; border: 0; padding: 0; } .karte-intro .titel { font-size: clamp(4rem, 11vw, 10rem); } .karte .titel { margin: .12em 0 .18em; line-height: .84; } /* sonst gewinnt „.karte p“ bei der Neo-Kopie (p statt h1) → 256 px Versatz gemessen */ .karte .unter { line-height: 1.35; } .welt-neo .karte-intro .titel { animation: none; } /* Glitch beim Wetterwechsel: Bänder zucken quer, Welten springen um Pixel */ .glitch-baender { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(30, 242, 255, .22) 9px 11px, transparent 11px 37px, rgba(255, 36, 72, .25) 37px 40px, transparent 40px 71px); } .buehne.glitch .glitch-baender { animation: baender .42s steps(3) 1; } .buehne.glitch .welt { animation: zucken .42s steps(2) 1; } @keyframes baender { 0% { opacity: .5; transform: translateY(-6px); } 50% { opacity: .35; transform: translateY(4px); } 100% { opacity: 0; transform: none; } } @keyframes zucken { 0% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 100% { transform: none; } } /* ===================================================================== Buch: Inhaltsverzeichnis, Kapitelende, Kapitelwechsel ===================================================================== */ .hud-rechts { display: flex; gap: 10px; align-items: center; } .hud-buch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid currentColor; text-decoration: none; font: 600 .74rem var(--tech); letter-spacing: .22em; text-transform: uppercase; } .hud-buch span { font-family: var(--mincho); font-weight: 800; letter-spacing: .1em; } .mk-liste, .fuss-buch ol { list-style: none; margin: 0; padding: 0; } .mk-z { grid-row: span 2; font: 2.8rem/1 var(--pinsel); } .mk-n { font-weight: 800; font-size: 1.5rem; } .mk-u { font-size: .95rem; opacity: .7; } /* Kapitelmenü: Kopfzeile fest, darunter ein scrollbares Raster aus Kapitelkarten (Vorschau, Nummer, Titel) */ .mokuji-dialog { border: 0; padding: 0; width: min(76rem, 96vw); max-width: none; max-height: min(90vh, 60rem); overflow: hidden; background: var(--papier); color: var(--tusche); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); } .mokuji-dialog[open] { display: flex; flex-direction: column; animation: mk-auf .35s var(--aus); } @keyframes mk-auf { from { opacity: 0; transform: translateY(18px) scale(.985); } } .mokuji-dialog::backdrop { background: rgba(6, 6, 13, .8); backdrop-filter: blur(6px); } .mk-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px clamp(18px, 3vw, 32px); border-bottom: 1px solid rgba(23, 19, 15, .15); flex: none; } .mk-titel { margin: 0; font: 800 .9rem var(--mincho); letter-spacing: .3em; text-transform: uppercase; color: var(--rot-edo); } .mk-zahl { margin-left: .8em; font: 600 .7rem var(--tech); letter-spacing: .2em; color: var(--tusche); opacity: .6; } .mk-zu { background: var(--tusche); color: var(--papier); border: 0; min-height: 44px; padding: 0 20px; font: 600 .8rem var(--tech); letter-spacing: .2em; text-transform: uppercase; cursor: pointer; } .mk-zu:focus-visible, .mokuji-dialog .mk-liste a:focus-visible { outline: 3px solid var(--rot-edo); outline-offset: 3px; } .mokuji-dialog .mk-liste { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(14px, 2.4vw, 28px) clamp(14px, 3vw, 32px) clamp(20px, 3vw, 36px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 42vw), 1fr)); gap: clamp(10px, 1.6vw, 18px); } .mokuji-dialog .mk-liste a { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: .7rem; align-items: baseline; height: 100%; text-decoration: none; color: inherit; background: rgba(255, 255, 255, .35); border: 1px solid rgba(23, 19, 15, .12); overflow: hidden; transition: transform .3s var(--aus), box-shadow .3s, border-color .2s; } .mokuji-dialog .mk-liste a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23, 19, 15, .18); border-color: var(--rot-edo); } /* Vorschau als kleines Diptychon: Edo in Tusche links, Neo rechts, dazwischen der Schnitt; beim Überfahren schiebt er sich nach links */ .mokuji-dialog .mk-bild { grid-column: 1 / -1; position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: .55rem; background: #1a1712; } .mk-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--aus), clip-path .6s var(--aus); } .mk-edo { filter: sepia(.55) grayscale(.35) contrast(1.05) brightness(1.05); } .mk-neo { clip-path: polygon(60% 0, 100% 0, 100% 100%, 46% 100%); filter: saturate(1.15); } .mk-bild::after { content: ''; position: absolute; top: -10%; left: 53%; width: 2px; height: 120%; background: #fff; transform: rotate(8deg); box-shadow: 0 0 6px 1px #fff, 0 0 14px 3px var(--rot-neo); transition: left .6s var(--aus); } .mokuji-dialog .mk-liste a:hover .mk-neo, .mokuji-dialog .mk-liste a:focus-visible .mk-neo { clip-path: polygon(30% 0, 100% 0, 100% 100%, 16% 100%); } .mokuji-dialog .mk-liste a:hover .mk-bild::after, .mokuji-dialog .mk-liste a:focus-visible .mk-bild::after { left: 23%; } .mokuji-dialog .mk-liste a:hover .mk-bild img { transform: scale(1.04); } .mokuji-dialog .mk-z { grid-row: auto; padding-left: 12px; font: 1.7rem/1 var(--pinsel); color: var(--rot-edo); } .mokuji-dialog .mk-n { font-size: 1.05rem; line-height: 1.2; padding-right: 10px; } .mokuji-dialog .mk-u { grid-column: 1 / -1; padding: .2rem 12px 12px; font-size: .82rem; } .mokuji-dialog [aria-current] { border: 2px solid var(--rot-edo); } .mk-hier { position: absolute; top: 10px; left: 10px; padding: 5px 9px; background: var(--rot-edo); color: #fff; font: 700 .62rem var(--tech); letter-spacing: .2em; text-transform: uppercase; } @media (max-width: 520px) { .mk-kopf { padding: 12px 14px; } .mk-titel { font-size: .74rem; letter-spacing: .18em; } .mk-zu { padding: 0 14px; letter-spacing: .12em; } .mokuji-dialog .mk-z { font-size: 1.3rem; } .mokuji-dialog .mk-n { font-size: .92rem; } .mokuji-dialog .mk-u { display: none; } .mk-zahl { display: none; } } @media (prefers-reduced-motion: reduce) { .mokuji-dialog[open] { animation: none; } .mokuji-dialog .mk-liste a, .mokuji-dialog .mk-bild { transition: none; } } .weiter { display: grid; place-content: center; justify-items: center; gap: .3rem; min-height: 90vh; padding: 10vh var(--rand); text-decoration: none; text-align: center; background: radial-gradient(60% 60% at 50% 50%, #191433, var(--nacht)); color: var(--hell); position: relative; overflow: hidden; } .weiter-aug { font: 600 .8rem var(--tech); letter-spacing: .4em; text-transform: uppercase; color: var(--gelb); } .weiter-z { font: clamp(7rem, 22vw, 18rem)/1 var(--pinsel); color: var(--papier); transition: transform .8s var(--aus), color .3s; } .weiter-n { font: 800 clamp(2rem, 5vw, 4rem)/1 var(--mincho); } .weiter-u { font: 600 .9rem var(--tech); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); } .weiter:hover .weiter-z, .weiter:focus-visible .weiter-z { transform: scale(1.06) rotate(-3deg); color: var(--rot-neo); font-family: var(--pixel); } .fuss { flex-direction: column; align-items: flex-start; } .fuss-buch ol { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; } .fuss-buch a { display: inline-flex; gap: .5rem; align-items: baseline; text-decoration: none; color: #c9cfe0; } .fuss-buch .mk-z { font-size: 1.2rem; grid-row: auto; } .fuss-buch .mk-n { font-size: 1rem; } .fuss-buch .mk-u { display: none; } /* Kapitelwechsel: die alte Seite wird schräg aufgeschnitten (seitenübergreifende View Transition) */ @view-transition { navigation: auto; } /* Seitenwechsel (Zurück, Neuladen): weich überblenden statt aufreißen */ ::view-transition-old(root) { animation: .9s var(--aus) both blatt-alt; } ::view-transition-new(root) { animation: 1.1s var(--aus) .15s both blatt-neu; } @keyframes blatt-alt { to { opacity: 0; filter: blur(10px); transform: scale(1.02); } } @keyframes blatt-neu { from { opacity: 0; filter: blur(10px); transform: scale(.985); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Ruhig oder ohne JS: Landschaft steht, die Karten liegen nebeneinander und lassen sich selbst seitlich wischen */ .ruhig .szene-reise, html:not(.js) .szene-reise { height: auto; } .ruhig .szene-reise .neo-fenster, .ruhig .szene-reise .schnitt, html:not(.js) .szene-reise .neo-fenster, html:not(.js) .szene-reise .schnitt { display: none; } .ruhig .spur, html:not(.js) .spur { left: 0; right: 0; top: auto; bottom: 5vh; width: auto; height: auto; transform: none; display: flex; gap: 24px; overflow-x: auto; padding: 0 var(--rand) 12px; scroll-snap-type: x mandatory; } .ruhig .karte, html:not(.js) .karte { position: relative; left: auto; top: auto; transform: none; flex: 0 0 min(30rem, 84vw); scroll-snap-align: center; } @media (max-aspect-ratio: 4/5) { .hud-buch { padding: 0 10px; } .hud-buch { font-size: 0; gap: 0; } .hud-buch span { font-size: .9rem; } .phasen-zeichen span { top: 12vh; right: 50%; transform: translateX(50%); font-size: 58vw; } .karte { top: 38%; } .karte.karte-intro { transform: translate(var(--rand), -50%); } /* Einstieg links bündig statt halb aus dem Bild */ } /* ===================================================================== Kapitel 二 · Die Zeitreise — 1603 bis 2099, Gebäude glitchen in ihre Zukunft ===================================================================== */ .szene-zeit { height: 1500vh; } .szene-zeit .buehne { background: var(--nacht); } .zeit-himmel { --h-oben: #ece3d0; --h-unten: #e2d6bd; --wasser-neo: 0; } .zeit-zaehler { --zahl: #17130f; } .panorama { --wasser: #d8cfbb; --wasser-neo: 0; } .zeit-himmel { position: absolute; inset: 0; background: linear-gradient(var(--h-oben), var(--h-unten) 75%); } .zeit-himmel::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: calc(1 - var(--wasser-neo)); } .panorama-rahmen { position: absolute; inset: 0; } .panorama { position: absolute; inset: 0; width: 100%; height: 100%; } /* Kamera = viewBox (JS), bleibt scharf beim Zoomen */ .fern-edo { opacity: calc(1 - var(--wasser-neo)); } .fern-neo { opacity: var(--wasser-neo); } .wasser-edo { opacity: calc(1 - var(--wasser-neo)); } .wasser-neo { opacity: calc(var(--wasser-neo) * .5); } .bau { opacity: 0; visibility: hidden; } .bau.da { opacity: 1; visibility: visible; } .bau.kommt { animation: aufbau 1.1s steps(14) both; } .bau.geht { visibility: visible; animation: abriss .55s steps(5) forwards; } @keyframes aufbau { 0% { clip-path: inset(100% -20% 0 -20%); opacity: 1; } 70% { clip-path: inset(0 -20% 0 -20%); } 74% { opacity: .2; transform: translateX(6px); } 78% { opacity: 1; transform: none; } 84% { opacity: .4; transform: translateX(-4px); } 100% { opacity: 1; clip-path: inset(-20% -20% 0 -20%); transform: none; } } @keyframes abriss { 0% { opacity: 1; } 30% { opacity: .3; transform: translateX(-8px) skewX(-6deg); } 55% { opacity: .9; transform: translateX(10px); } 100% { opacity: 0; transform: none; } } .zug-ebene .zug { opacity: 0; } .zug-ebene .zug.da { opacity: 1; animation: fahrt 5.5s linear infinite; } @keyframes fahrt { from { transform: translateX(1400px); } to { transform: translateX(2500px); } } .zeit-intro { position: absolute; left: var(--rand); top: calc(var(--hoehe) * .16); z-index: 3; color: var(--tusche); transition: opacity .5s var(--aus), transform .8s var(--aus); } .zeit-intro .titel { font-weight: 800; letter-spacing: -.045em; font-size: clamp(3.6rem, 9vw, 8.5rem); } .zeit-intro .aug { color: var(--rot-edo); font-weight: 800; } .zeit-weg .zeit-intro { opacity: 0; transform: translateY(-4vh); pointer-events: none; } .zeit-zaehler { position: absolute; right: var(--rand); top: calc(var(--hoehe) * .12); z-index: 3; margin: 0; text-align: right; color: var(--zahl); display: grid; justify-items: end; } .zeit-zaehler .jahr { font: 800 clamp(4.4rem, 13vw, 12rem)/.9 var(--mincho); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .zeit-modern .zeit-zaehler .jahr { font-family: var(--tech); font-style: italic; font-weight: 700; text-shadow: 3px 0 0 rgba(255, 36, 72, .7), -3px 0 0 rgba(30, 242, 255, .7); } .zeit-zaehler .aera { font: 600 .82rem var(--tech); letter-spacing: .3em; text-transform: uppercase; opacity: .85; } .zeit-zaehler .aera b { font: 800 1.3rem var(--mincho); letter-spacing: .1em; margin-right: .5rem; } .zeit-karten { list-style: none; margin: 0; padding: 0; } .zk { position: absolute; left: var(--rand); bottom: calc(var(--hoehe) * .1); z-index: 3; width: min(30rem, calc(100vw - 2 * var(--rand))); padding: 22px 26px 24px; opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity .45s var(--aus), transform .7s var(--aus), visibility 0s .45s; } .zk.aktiv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } @keyframes zk-glitch { 0% { transform: translateX(-3px); opacity: .7; } 40% { transform: translateX(3px); } 100% { transform: none; opacity: 1; } }.zk h2, .zk .h2 { margin: .35em 0 .4em; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.05; } .zk p { margin: 0; line-height: 1.6; } .zk-edo { background: rgba(244, 238, 225, .94); color: var(--tusche); border-top: 3px solid var(--rot-edo); }.zk-edo h2, .zk-edo .h2 { font-weight: 800; } .zk-edo .aug { color: var(--rot-edo); font-weight: 800; } .zk-sepia { background: rgba(236, 222, 196, .94); color: #3b2a1a; border-top: 3px solid #6b4f35; }.zk-sepia h2, .zk-sepia .h2 { font-weight: 800; } .zk-sepia .aug { color: #6b4f35; font-weight: 800; } .zk-modern, .zk-neo { background: rgba(6, 6, 13, .82); color: var(--hell); border-left: 2px solid var(--cyan); font-family: var(--tech); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); } .zk-modern .aug, .zk-neo .aug { color: var(--cyan); font-family: var(--tech); letter-spacing: .3em; }.zk-modern h2, .zk-neo h2, .zk-modern .h2, .zk-neo .h2 { font-family: var(--tech); font-weight: 700; font-style: italic; text-transform: uppercase; } .zk-neo { border-left-color: var(--gelb); } .zk-neo .aug { color: var(--gelb); }.zk-neo h2, .zk-neo .h2 { text-shadow: 2px 0 0 rgba(255, 36, 72, .75), -2px 0 0 rgba(30, 242, 255, .75); } /* Zeitblitz: für einen Wimpernschlag kippt die Welt in ihr Gegenteil */ .zeitblitz .zeit-himmel, .zeitblitz .panorama-rahmen { filter: invert(1) hue-rotate(180deg); } .zeitblitz .glitch-baender { opacity: 1; } .szene-zeit .buehne.glitch .panorama-rahmen { animation: zucken .42s steps(2) 1; } /* Ohne JS / ruhig: alle Fassungen aus 2099 zeigen und die Ereignisse als Liste */ html:not(.js) .bau[data-bis="9999"], .ruhig .bau[data-bis="9999"] { opacity: 1; visibility: visible; } html:not(.js) .szene-zeit, .ruhig .szene-zeit { height: auto; } html:not(.js) .szene-zeit .buehne, .ruhig .szene-zeit .buehne { position: relative; height: auto; min-height: var(--hoehe); padding-bottom: 50vh; } html:not(.js) .zeit-himmel, .ruhig .zeit-himmel { --h-oben: #06060d; --h-unten: #2a0a2e; --wasser-neo: 1; } html:not(.js) .zeit-zaehler, .ruhig .zeit-zaehler { --zahl: #e9f8ff; } html:not(.js) .panorama, .ruhig .panorama { --wasser: #0b0d1a; --wasser-neo: 1; } html:not(.js) .zeit-karten, .ruhig .zeit-karten { position: relative; z-index: 3; display: grid; gap: 14px; padding: 46vh var(--rand) 0; } html:not(.js) .zk, .ruhig .zk { position: relative; left: auto; bottom: auto; opacity: 1; visibility: visible; transform: none; } html:not(.js) .panorama-rahmen, .ruhig .panorama-rahmen { position: absolute; inset: 0 0 auto 0; height: var(--hoehe); } html:not(.js) .zeit-intro, .ruhig .zeit-intro { color: var(--hell); } @media (max-aspect-ratio: 4/5) { .zeit-zaehler { top: calc(var(--hoehe) * .09); } .zeit-zaehler .jahr { font-size: clamp(3.6rem, 22vw, 6rem); } .zeit-intro { top: calc(var(--hoehe) * .28); } .zk { bottom: calc(var(--hoehe) * .04); padding: 16px 18px 18px; } .zk p:not(.aug) { font-size: .95rem; } } /* Wappen (Kamon): Tusche und Neon tauschen glitchend die Plätze */ .kamon { position: relative; display: inline-block; width: 26px; height: 26px; flex: none; } .kamon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.4s var(--aus); } /* ruhiges Überblenden statt Umschalten */ .kamon-neo { opacity: 0; filter: drop-shadow(0 0 3px rgba(30, 242, 255, .8)); } /* Das Wappen wechselt alle 2,4 s die Welt mit kurzem Flackern; JS setzt die Klassen (eine Endlos-Animation auf SVG lief nicht ausgelagert und ließ den Browser jedes Bild neu rechnen) */ .kamon.neo-an .kamon-edo { opacity: 0; } .kamon.neo-an .kamon-neo { opacity: 1; } .kamon.flackert svg { animation: wappen-flacker .2s steps(1) 1; } @keyframes wappen-flacker { 0% { opacity: 1; } 30% { opacity: 0; } 60% { opacity: 1; transform: translateX(2px); } 100% { transform: none; } } .hud-marke { display: inline-flex; align-items: center; gap: 12px; } .kamon-gross { width: clamp(64px, 9vw, 110px); height: clamp(64px, 9vw, 110px); color: var(--papier); margin-bottom: 1.2rem; } /* ===================================================================== Kapitel 三 · Das Duell — Kämpfer auf Canvas, Schnitt zwischen ihnen ===================================================================== */ .szene-duell { height: 1200vh; } .duell-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } .text-duell { top: calc(var(--hoehe) * .12); transition: opacity .6s var(--aus), transform .8s var(--aus); } .duell-laeuft .text-duell { opacity: 0; transform: translateY(-3vh); } /* Titel räumt die Bühne, sobald gekämpft wird (gewollt, nicht durch den Schnitt) */ .titel-duell { font-size: clamp(3rem, 7vw, 6.6rem); line-height: .9; } .duell-tafeln { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 3; right: var(--rand); top: calc(var(--hoehe) * .14); width: min(26rem, 32vw); } .tafel { padding: 16px 20px 18px; border-left: 2px solid; } .welt-edo .tafel { background: rgba(244, 238, 225, .93); border-color: var(--rot-edo); color: var(--tusche); } .welt-neo .tafel { background: rgba(6, 6, 13, .8); border-color: var(--gelb); color: var(--hell); } .tafel-text { margin: .5rem 0 0; font: 400 1rem/1.6 var(--mincho); } .js:not(.ruhig) .tafel { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .4s var(--aus), transform .6s var(--aus), visibility 0s .4s; } .js:not(.ruhig) .tafel.aktiv { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .ruhig .duell-tafeln, html:not(.js) .duell-tafeln { display: grid; gap: 10px; } .ruhig .szene-duell, html:not(.js) .szene-duell { height: auto; } @media (max-aspect-ratio: 4/5) { .duell-tafeln { left: var(--rand); right: var(--rand); width: auto; top: calc(var(--hoehe) * .3); } .titel-duell { font-size: clamp(2.4rem, 12vw, 3.4rem); } .text-duell { top: calc(var(--hoehe) * .09); } } .duell-3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; } /* Countdown am Kapitelende: wer unten bleibt, wird nach 5 s ins nächste Kapitel geschnitten (abbrechbar, WCAG 2.2.1) */ .weiter-rahmen { position: relative; } .countdown { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; background: rgba(6, 6, 13, .7); border: 1px solid rgba(30, 242, 255, .35); color: var(--hell); font: 600 .8rem var(--tech); letter-spacing: .2em; text-transform: uppercase; } .countdown[hidden] { display: none; } .countdown-ring { width: 44px; height: 44px; transform: rotate(-90deg); } .countdown-ring circle { fill: none; stroke: rgba(255, 255, 255, .15); stroke-width: 4; } .countdown-ring .lauf { stroke: var(--rot-neo); stroke-dasharray: 176; stroke-dashoffset: 176; filter: drop-shadow(0 0 4px var(--rot-neo)); } .countdown.laeuft .countdown-ring .lauf { animation: countdown 5s linear forwards; } @keyframes countdown { to { stroke-dashoffset: 0; } } .countdown-text { margin: 0; } .countdown-text b { color: var(--gelb); font-size: 1.1rem; } .countdown-bleiben { background: none; border: 1px solid currentColor; color: inherit; font: inherit; letter-spacing: .18em; padding: 8px 12px; min-height: 40px; cursor: pointer; } .countdown-bleiben:focus-visible { outline: 2px solid var(--gelb); outline-offset: 3px; } /* ===================================================================== Manga-Film (Kapitel 三): Seiten mit schrägen Panels, Filmclips in Tusche/Neon, Lautschrift ===================================================================== */ .szene-manga { height: 1300vh; } .manga-buehne { background: radial-gradient(70% 70% at 50% 50%, #1a1630, var(--nacht)); display: grid; place-items: center; } .manga-seite { position: absolute; left: 50%; top: 50%; width: min(92vw, calc((var(--hoehe) - 120px) * 1.6)); aspect-ratio: 16 / 10; translate: -50% -46%; background: #f4efe4; box-shadow: 0 0 0 3px #0d0b09, 0 40px 120px rgba(0, 0, 0, .65), 0 0 60px rgba(30, 242, 255, .12); opacity: 0; transform-origin: 50% 50%; will-change: transform; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: opacity .3s, clip-path .55s var(--vorhang); } .manga-seite.aktiv { opacity: 1; } .manga-seite.weg { opacity: 0; clip-path: polygon(0 0, 100% 0, 100% 0, 0 100%); transition: opacity .5s .2s, clip-path .5s var(--vorhang); } .seiten-titel { position: absolute; right: 1.4%; top: 1.2%; z-index: 5; margin: 0; font: 800 clamp(.7rem, 1.1vw, 1rem) var(--mincho); letter-spacing: .2em; color: #0d0b09; background: #f4efe4; padding: 2px 8px; } .panel { position: absolute; left: var(--qx); top: var(--qy); width: var(--qw); height: var(--qh); margin: 0; clip-path: var(--qpoly); background: #0d0b09; overflow: hidden; opacity: 0; transform: translate(-3%, 3%) scale(1.04); transition: opacity .35s var(--aus), transform .8s var(--aus); } .panel.da { opacity: 1; transform: none; } .panel::before { content: ''; position: absolute; inset: 0; border: 3px solid #0d0b09; z-index: 3; pointer-events: none; } /* Panelrand */ .panel-film, .panel-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .panel::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; } .ton-tusche .panel-film { filter: grayscale(1) contrast(1.3) brightness(1.1) blur(.4px); } /* weniger Kontrast, sonst rauscht Blattwerk */ .ton-tusche::after { background: radial-gradient(rgba(13, 11, 9, .32) 1px, transparent 1.5px) 0 0 / 5px 5px; mix-blend-mode: multiply; } /* Rasterpunkte */ .ton-neon .panel-film { filter: grayscale(1) contrast(1.35) brightness(.95); } .ton-neon::after { background: linear-gradient(135deg, rgba(30, 242, 255, .6), rgba(255, 43, 214, .5)), repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); mix-blend-mode: color; } .ton-rot .panel-film { filter: saturate(.9) contrast(1.15); } .panel-grafik { position: absolute; inset: 0; display: grid; place-items: center; } .linien-radial { background: repeating-conic-gradient(from 0deg at 50% 50%, #0d0b09 0deg .7deg, transparent .7deg 4.2deg), #f4efe4; } .linien-quer { background: repeating-linear-gradient(0deg, transparent 0 9px, #0d0b09 9px 11px, transparent 11px 23px, #0d0b09 23px 24px), #f4efe4; } .linien-mond { background: radial-gradient(circle at 50% 46%, #f4f1e6 0 30%, transparent 30.5%), repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 43, 214, .5) 0 .6deg, transparent .6deg 5deg), #0a0816; } .ton-umkehr .panel-grafik { filter: invert(1); } /* Impact-Frame: Linien und Lettering kippen gemeinsam */ .ton-neon .linien-radial { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(30, 242, 255, .7) 0 .6deg, transparent .6deg 4.5deg), #07060f; } .sfx { position: relative; z-index: 1; font: clamp(2.8rem, 10vw, 10rem)/1 var(--pinsel); color: #0d0b09; -webkit-text-stroke: clamp(6px, 1vw, 14px) #f4efe4; paint-order: stroke fill; letter-spacing: -.04em; text-shadow: 3px 3px 0 #0d0b09; transform: rotate(-8deg) scale(.6); opacity: 0; transition: transform .45s var(--feder) .15s, opacity .2s .15s; } .ton-neon .sfx { font-family: var(--pixel); color: var(--cyan); -webkit-text-stroke: 0; paint-order: normal; text-shadow: 0 0 18px rgba(30, 242, 255, .8), 4px 0 0 rgba(255, 36, 72, .8); } .linien-mond .sfx { color: #0a0816; -webkit-text-stroke: 0; font-family: var(--pinsel); } .panel.da .sfx { transform: rotate(-8deg) scale(1); opacity: 1; } .erzaehl { position: absolute; left: 6%; top: 7%; z-index: 4; max-width: 62%; margin: 0; padding: 7px 10px; background: #f7f3ea; border: 2px solid #0d0b09; font: 400 clamp(.72rem, 1vw, .95rem)/1.45 var(--mincho); color: #0d0b09; } .manga-hinweis { position: absolute; bottom: 2.5vh; left: 0; right: 0; text-align: center; margin: 0; font: 600 .72rem var(--tech); letter-spacing: .3em; text-transform: uppercase; color: rgba(233, 248, 255, .55); } @media (max-aspect-ratio: 4/5) { .manga-seite { width: min(94vw, calc((var(--hoehe) - 110px) * .62)); aspect-ratio: 10 / 16; translate: -50% -48%; } .panel { left: var(--hx); top: var(--hy); width: var(--hw); height: var(--hh); clip-path: var(--hpoly); } .erzaehl { max-width: 80%; font-size: .78rem; } } /* Ohne JS / ruhig: alle Seiten untereinander, alle Panels sichtbar, Videos zeigen ihr Standbild */ html:not(.js) .szene-manga, .ruhig .szene-manga { height: auto; } html:not(.js) .manga-buehne, .ruhig .manga-buehne { position: relative; height: auto; display: grid; gap: 6vh; padding: 12vh 0; } html:not(.js) .manga-seite, .ruhig .manga-seite { position: relative; left: auto; top: auto; translate: none; opacity: 1; margin: 0 auto; } html:not(.js) .panel, .ruhig .panel { opacity: 1; transform: none; } html:not(.js) .sfx, .ruhig .sfx { opacity: 1; transform: rotate(-8deg); } /* ===================================================================== Duell als Live-Action: echte Kämpfer, in Tusche (Edo) und Neon (Neo) getönt ===================================================================== */ .szene-filmclip { height: 300vh; } .szene-kampf { height: 700vh; } .film-rahmen { position: absolute; inset: 0; background: #0d0b09; } .film-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .welt-edo .film-leinwand { --ton: grayscale(1) sepia(.28) contrast(1.32) brightness(1.06); filter: var(--ton); } .welt-neo .film-leinwand { --ton: grayscale(1) contrast(1.25) brightness(.92); filter: var(--ton); } .papierkorn { position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .55; background-image: radial-gradient(rgba(13, 11, 9, .35) 1px, transparent 1.4px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 4px 4px, auto; } .neon-ton { position: absolute; inset: 0; mix-blend-mode: color; background: linear-gradient(120deg, rgba(30, 242, 255, .85), rgba(80, 40, 200, .6) 50%, rgba(255, 43, 214, .8)); } .szene-kampf .welt-edo .kulisse::after, .szene-filmclip .welt-edo .kulisse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(236, 227, 208, .55), transparent 45%); pointer-events: none; } .szene-kampf .welt-neo .kulisse::after, .szene-filmclip .welt-neo .kulisse::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 6, 13, .65), transparent 45%); pointer-events: none; } /* Treffer: Impact-Frame (invertiert, harter Kontrast), Konzentrationslinien, Lautschrift */ .treffer-linien { position: absolute; inset: -10%; opacity: 0; pointer-events: none; z-index: 1; background: repeating-conic-gradient(from 0deg at 52% 48%, rgba(13, 11, 9, .85) 0 .5deg, transparent .5deg 3.4deg); -webkit-mask: radial-gradient(circle at 52% 48%, transparent 14%, #000 34%); mask: radial-gradient(circle at 52% 48%, transparent 14%, #000 34%); } .welt-neo .treffer-linien { background: repeating-conic-gradient(from 0deg at 52% 48%, rgba(30, 242, 255, .8) 0 .4deg, transparent .4deg 3.6deg); } .treffer-sfx { position: absolute; left: 50%; top: 40%; margin: 0; z-index: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(.6); opacity: 0; pointer-events: none; font: clamp(4rem, 15vw, 15rem)/1 var(--pinsel); color: #0d0b09; -webkit-text-stroke: clamp(6px, 1vw, 14px) #f4efe4; paint-order: stroke fill; text-shadow: 4px 4px 0 #0d0b09; white-space: nowrap; } .welt-neo .treffer-sfx { font-family: var(--pixel); color: var(--cyan); -webkit-text-stroke: 0; text-shadow: 0 0 24px rgba(30, 242, 255, .9), 6px 0 0 rgba(255, 36, 72, .85); } .buehne.treffer .treffer-linien { animation: linien .9s var(--aus) forwards; } .buehne.treffer .treffer-sfx { animation: sfx-pop .9s var(--feder) forwards; } .buehne.treffer .film-leinwand { animation: impact .9s steps(1) forwards; } @keyframes linien { 0% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } } @keyframes sfx-pop { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1.08); } 80% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } } @keyframes impact { 0% { filter: grayscale(.7) contrast(1.6) brightness(1.25); } 30%, 100% { filter: var(--ton, none); } } /* ein kurzer harter Moment statt Negativ-Stroboskop */ @media (max-aspect-ratio: 4/5) { .film-rahmen { inset: auto 0 auto 0; top: calc(var(--hoehe) * .34); height: calc(100vw * 9 / 16 * 1.25); box-shadow: 0 0 0 3px #0d0b09; } .szene-kampf .text-haupt, .szene-filmclip .text-haupt { top: calc(var(--hoehe) * .08); } .treffer-sfx { top: 46%; } } /* ohne JS / ruhig: Standbild statt Film */ html:not(.js) .szene-kampf, .ruhig .szene-kampf, html:not(.js) .szene-filmclip, .ruhig .szene-filmclip { height: auto; min-height: var(--hoehe); } html:not(.js) .film-rahmen, .ruhig .film-rahmen { background: #0d0b09 url("assets/film/iai.jpg") center / cover; } /* ---------- Kapitel 三 · Der Formatfilm: ein Bildfenster, das mit jeder Einstellung sein Format wechselt ---------- */ .szene-formfilm { height: 1500vh; } .ff-raum { position: absolute; inset: 0; } .ff-raum .papierkorn { opacity: .4; } .ff-titel { left: 0; right: 0; margin: 0 auto; width: min(64rem, 90vw); top: calc(var(--hoehe) * .07); text-align: center; } .ff-titel .titel-duell { font-size: clamp(2.4rem, 6.4vw, 6rem); } .ff-ki { margin: .9em 0 0; font: 400 .72rem/1.4 var(--pixel); letter-spacing: .16em; text-transform: uppercase; opacity: .7; } .ff-format { position: absolute; z-index: 3; left: 0; top: 0; margin: 0; font: 400 .72rem/1 var(--pixel); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; opacity: .75; pointer-events: none; } .welt-neo .ff-format { color: var(--cyan); } .ff-zeilen { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--hoehe) * .045); width: min(44rem, 88vw); height: 4.4em; margin: 0 auto; padding: 0; list-style: none; text-align: center; font: 400 clamp(1.02rem, 1.45vw, 1.32rem)/1.4 var(--mincho); } .ff-zeile { position: absolute; inset: auto 0 0 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--aus), transform .8s var(--aus); } .ff-zeile.aktiv { opacity: 1; transform: none; } .ff-nr { display: block; font: 800 .82rem/1.7 var(--mincho); letter-spacing: .3em; color: var(--rot-edo); } .welt-neo .ff-nr { color: var(--rot-neo); } @media (max-aspect-ratio: 4/5) { .ff-titel { top: calc(var(--hoehe) * .06); } .ff-titel .titel-duell { font-size: clamp(2.2rem, 11vw, 3.2rem); } .ff-zeilen { bottom: calc(var(--hoehe) * .05); font-size: 1rem; } } /* Ohne JS oder mit reduzierter Bewegung: ein Standbild (Klingenschlag) und die ganze Geschichte als Liste */ .ruhig .szene-formfilm, html:not(.js) .szene-formfilm { height: auto; min-height: var(--hoehe); } .ruhig .ff-raum::before, html:not(.js) .ff-raum::before { content: ''; position: absolute; left: 50%; top: calc(var(--hoehe) * .36); width: min(80vw, 36vh); aspect-ratio: 1; transform: translate(-50%, -50%); background: #0d0b09 url("assets/duell/q/e06/008.webp") center / cover; } .ruhig .ff-format, html:not(.js) .ff-format { display: none; } .ruhig .ff-zeilen, html:not(.js) .ff-zeilen { top: calc(var(--hoehe) * .58); bottom: auto; height: auto; font-size: .92rem; } .ruhig .ff-zeile, html:not(.js) .ff-zeile { position: static; opacity: 1; transform: none; } .ruhig .ff-nr, html:not(.js) .ff-nr { display: inline; margin-right: .4em; } /* Autoscroll-Knopf: Dreieck = starten, zwei Balken = läuft */ .hud-rechts { display: inline-flex; gap: 8px; } .auto-zeichen { width: 10px; height: 12px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } .hud-auto[aria-pressed="true"] .auto-zeichen { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); } .hud-auto[aria-pressed="true"] { background: currentColor; } .hud-auto[aria-pressed="true"] .auto-zeichen, .hud-auto[aria-pressed="true"] .auto-text { color: var(--nacht); background-color: var(--nacht); } .hud-auto[aria-pressed="true"] .auto-text { background: none; } /* ---------- Kodex: eine Szene je Tugend ---------- */ .szene-tugend { height: 300vh; } .tg-bild { position: absolute; inset: -4%; background: var(--bild) 62% center / cover no-repeat; transform: scale(calc(1.02 + var(--p, 0) * .1)); } .welt-edo .tg-bild { filter: grayscale(1) sepia(.3) contrast(1.15) brightness(1.06); } .welt-neo .tg-bild { filter: grayscale(1) contrast(1.2) brightness(.82); } .tg-schleier { position: absolute; inset: 0; } .welt-edo .tg-schleier { background: linear-gradient(90deg, rgba(236, 227, 208, .97) 0%, rgba(236, 227, 208, .86) 36%, rgba(236, 227, 208, 0) 62%); } .welt-neo .tg-schleier { background: linear-gradient(90deg, rgba(6, 6, 13, .95) 0%, rgba(6, 6, 13, .78) 36%, rgba(6, 6, 13, 0) 62%); } .szene-tugend .papierkorn { opacity: .45; } .tg-kanji { position: absolute; z-index: 2; right: var(--rand); top: calc(var(--hoehe) * .1); margin: 0; writing-mode: vertical-rl; font: 800 clamp(8rem, 19vw, 21rem)/1 var(--mincho); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--p, 1) * 260% - 40%), transparent calc(var(--p, 1) * 260% - 5%)); mask-image: linear-gradient(180deg, #000 calc(var(--p, 1) * 260% - 40%), transparent calc(var(--p, 1) * 260% - 5%)); } .tg-kanji-2 { font-size: clamp(6rem, 12.5vw, 14rem); } .welt-edo .tg-kanji { color: var(--tusche); mix-blend-mode: multiply; opacity: .9; } .welt-neo .tg-kanji { color: transparent; -webkit-text-stroke: 2px var(--cyan); text-shadow: 0 0 34px rgba(30, 242, 255, .55); } .tg-zitat { margin: .9em 0 0; max-width: 31rem; padding-left: 14px; border-left: 2px solid; font: italic 400 clamp(1rem, 1.15vw, 1.18rem)/1.5 var(--mincho); } .welt-edo .tg-zitat { color: var(--rot-edo); } .welt-neo .tg-zitat { color: var(--cyan); } @media (max-aspect-ratio: 4/5) { .tg-bild { background-image: var(--bild-h); background-position: 58% center; } .welt-edo .tg-schleier, .welt-neo .tg-schleier { background: none; } .tg-kanji { top: auto; bottom: calc(var(--hoehe) * .3); font-size: clamp(5.5rem, 30vw, 10rem); } .tg-kanji-2 { font-size: clamp(4.5rem, 21vw, 8rem); } .tg-zitat { font-size: .95rem; } .text-tugend h2, .text-tugend .h2 { font-size: clamp(1.7rem, 8vw, 2.6rem); } } .ruhig .tg-kanji, html:not(.js) .tg-kanji { -webkit-mask-image: none; mask-image: none; } /* ---------- Kapitel 四 · Manga & Anime: Panel-Streifen von rechts nach links ---------- */ .szene-streifen { height: 1300vh; } .mg-grund { position: absolute; inset: 0; } .welt-edo .mg-grund { background-image: radial-gradient(rgba(23, 19, 15, .16) 1px, transparent 1.4px); background-size: 7px 7px; } .welt-neo .mg-grund { background-image: linear-gradient(rgba(30, 242, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 43, 214, .06) 1px, transparent 1px); background-size: 48px 48px; } .mg-grund span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 800 min(70vh, 60vw)/1 var(--mincho); opacity: .06; } .welt-neo .mg-grund span { color: transparent; -webkit-text-stroke: 1px var(--cyan); opacity: .18; } .mg-spur { --B: 46vw; position: absolute; z-index: 3; top: calc(var(--hoehe) * .11); right: 0; display: flex; flex-direction: row-reverse; padding: 0 calc((100vw - var(--B)) / 2); transform: translateX(calc(var(--p, 0) * (var(--n) - 1) * var(--B))); } .mg-spur > * { flex: 0 0 var(--B); box-sizing: border-box; padding: 0 3.5vw; position: relative; } .mg-karte { padding-top: calc(var(--hoehe) * .12) !important; } .mg-karte .titel { font-size: clamp(3.6rem, 8.5vw, 9rem); }.mg-karte h2, .mg-karte .h2 { margin: .3em 0 .4em; font: 800 clamp(2.4rem, 4.6vw, 4.8rem)/.98 var(--mincho); } .mg-karte p:not([class]), .mg-text p:not([class]) { margin: 0; font: 400 clamp(.98rem, 1.05vw, 1.12rem)/1.6 var(--mincho); max-width: 32rem; } .mg-bild { position: relative; height: calc(var(--hoehe) * .5); --zer: calc(1 - var(--nah, 1)); } .mg-bild i { position: absolute; inset: 0; background: var(--bild) center / cover no-repeat; clip-path: var(--band); transform: translate(calc(var(--zer) * var(--k) * 3.2vw), calc(var(--zer) * var(--k) * -2.4vh)) rotate(calc(var(--zer) * var(--k) * 2.4deg)); } .mg-bild::after { content: ''; position: absolute; inset: 0; border: 3px solid; opacity: var(--nah, 1); pointer-events: none; } .welt-edo .mg-bild::after { border-color: var(--tusche); } .welt-neo .mg-bild::after { border-color: var(--cyan); box-shadow: 0 0 22px rgba(30, 242, 255, .45); } .welt-edo .mg-bild i { filter: grayscale(1) sepia(.22) contrast(1.12); } .welt-neo .mg-bild i { filter: saturate(1.25) contrast(1.05); } .mg-sfx { position: absolute; z-index: 2; right: 1.5vw; top: calc(var(--hoehe) * .02); margin: 0; font: 900 clamp(2.6rem, 5vw, 5rem)/1 var(--mincho); transform: rotate(-9deg) scale(calc(.6 + var(--nah, 1) * .5)); opacity: calc((var(--nah, 1) - .55) * 2.4); pointer-events: none; } .welt-edo .mg-sfx { color: #fff; -webkit-text-stroke: 3px var(--tusche); paint-order: stroke; } .welt-neo .mg-sfx { color: var(--gelb); text-shadow: 4px 4px 0 var(--rot-neo), 0 0 22px rgba(242, 230, 0, .55); } .mg-text { padding-top: 1.1rem; }.mg-text h2, .mg-text .h2 { margin: .2em 0 .3em; font: 800 clamp(1.7rem, 2.6vw, 2.8rem)/1 var(--mincho); }.welt-neo .mg-text h2, .welt-neo .mg-karte h2, .welt-neo .mg-text .h2, .welt-neo .mg-karte .h2 { color: var(--hell); text-shadow: 2px 0 0 rgba(255, 36, 72, .7), -2px 0 0 rgba(30, 242, 255, .7); } @media (max-aspect-ratio: 4/5) { .mg-spur { --B: 92vw; top: calc(var(--hoehe) * .1); transform: translateX(calc(var(--mpos, 0) * var(--B))); } /* JS: Halt je Panel */ .mg-spur > * { padding: 0 5vw; } .mg-bild { height: calc(var(--hoehe) * .46); } .mg-bild i { background-image: var(--bild-h); } .mg-karte .titel { font-size: clamp(3.2rem, 17vw, 5rem); } .mg-text p:not([class]), .mg-karte p:not([class]) { font-size: .95rem; } } .ruhig .szene-streifen, html:not(.js) .szene-streifen { height: auto; } .ruhig .mg-spur, html:not(.js) .mg-spur { position: static; transform: none; flex-direction: column; padding: 12vh 0 0; gap: 8vh; } /* ---------- Kapitel 五 · Die Küche: zwei Bilder, der Schnitt verwandelt das Gericht ---------- */ .szene-gericht { height: 300vh; } .welt-edo .gr-bild { filter: sepia(.5) saturate(.75) contrast(1.06) brightness(1.04); } .welt-neo .gr-bild { filter: saturate(1.2) contrast(1.05); } .tg-kanji-3 { font-size: clamp(4.5rem, 8.6vw, 9.5rem); } .szene-gericht .text-tugend .titel { font-size: clamp(3.6rem, 9vw, 9rem); } .szene-teller { height: 320vh; } .tl-seite { position: absolute; z-index: 2; right: var(--rand); top: calc(var(--hoehe) * .1); width: min(48vw, 60rem); height: calc(var(--hoehe) * .8); display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1.1fr; gap: 12px; } .tl-panel { --auf: clamp(0, (var(--p, 1) - var(--ab)) * 7, 1); position: relative; margin: 0; background: var(--bild) center / cover no-repeat; border: 3px solid; opacity: var(--auf); transform: translate(calc((1 - var(--auf)) * 4vw), calc((1 - var(--auf)) * -3vh)) rotate(calc((1 - var(--auf)) * 4deg)); } .tl-0 { clip-path: polygon(0 0, 100% 0, 96% 100%, 0 92%); } .tl-1 { clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); } .tl-2 { clip-path: polygon(0 8%, 96% 0, 100% 100%, 0 100%); } .tl-3 { clip-path: polygon(0 0, 100% 6%, 100% 100%, 4% 100%); } .welt-edo .tl-panel { border-color: var(--tusche); filter: grayscale(1) sepia(.3) contrast(1.15); } .welt-neo .tl-panel { border-color: var(--cyan); filter: saturate(1.2); } .tl-sfx { position: absolute; left: 8%; bottom: 8%; font: 900 clamp(2rem, 3.6vw, 3.8rem)/1 var(--mincho); transform: rotate(-8deg); } .welt-edo .tl-sfx { color: #fff; -webkit-text-stroke: 3px var(--tusche); paint-order: stroke; } .welt-neo .tl-sfx { color: var(--gelb); text-shadow: 3px 3px 0 var(--rot-neo); } .welt-edo .szene-teller, .szene-teller .welt-edo { background-image: radial-gradient(rgba(23, 19, 15, .14) 1px, transparent 1.4px); background-size: 7px 7px; } @media (max-aspect-ratio: 4/5) { .tl-seite { left: var(--rand); right: var(--rand); width: auto; top: calc(var(--hoehe) * .46); height: calc(var(--hoehe) * .3); } .text-teller + .absatz { display: none; } .tg-kanji-3 { font-size: clamp(3.6rem, 15vw, 6rem); } } /* Kochbuch: kein Schnitt, eine ruhige Arbeitsfläche — Papier mit Neon-Kante */ .kochbuch { position: relative; padding: clamp(64px, 10vh, 120px) var(--rand); background: var(--papier); color: var(--tusche); } .kb-kopf { max-width: 44rem; margin-bottom: 40px; } .kb-kopf .aug { color: var(--rot-edo); }.kb-kopf h2, .kb-kopf .h2 { margin: .25em 0 .3em; font: 800 clamp(2.4rem, 5vw, 4.6rem)/1 var(--mincho); } .kb-kopf p:not([class]) { margin: 0; font: 400 1.08rem/1.6 var(--mincho); } .kb-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 28px; } .kb-karte { background: rgba(255, 252, 244, .7); border: 1px solid rgba(23, 19, 15, .18); padding: 0 24px 26px; } .kb-bild { position: relative; height: 130px; margin: 0 -24px 18px; overflow: hidden; background: linear-gradient(105deg, var(--papier-2) 0 50%, var(--nacht) 50% 100%); } .kb-bild span { position: absolute; inset: 0; display: grid; place-items: center; font: 800 3.4rem/1 var(--mincho); } .kb-edo { color: var(--tusche); clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); } .kb-neo { color: transparent; -webkit-text-stroke: 1.5px var(--cyan); text-shadow: 0 0 18px rgba(30, 242, 255, .6); clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); } .kb-karte h3 { margin: 0; font: 800 1.7rem/1.1 var(--mincho); } .kb-dauer { margin: 4px 0 14px; font: 600 .78rem/1.4 var(--tech); letter-spacing: .18em; text-transform: uppercase; opacity: .7; } .kb-personen { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 400 .98rem var(--mincho); } .kb-personen button { width: 40px; height: 40px; border: 1.5px solid var(--tusche); background: none; color: inherit; font: 700 1.3rem/1 var(--mincho); cursor: pointer; } .kb-personen button:hover { background: var(--nacht); color: var(--cyan); border-color: var(--nacht); } .kb-personen button:focus-visible { outline: 2px solid var(--rot-edo); outline-offset: 2px; } .kb-zahl { min-width: 2ch; text-align: center; font: 800 1.4rem/1 var(--mincho); } .kb-zutaten { list-style: none; margin: 0 0 16px; padding: 12px 0; border-block: 1px solid rgba(23, 19, 15, .18); font: 400 1rem/1.7 var(--mincho); } .kb-zutaten b { display: inline-block; min-width: 5.5em; color: var(--rot-edo); } .kb-schritte { margin: 0; padding-left: 1.3em; font: 400 .98rem/1.6 var(--mincho); } .kb-schritte li + li { margin-top: 6px; } .szene-teller .absatz { right: auto; left: var(--rand); width: min(26rem, 34vw); } /* Hall of Fame: Abspann der Namen */ .szene-halle { height: 600vh; } .text-halle { top: calc(var(--hoehe) * .17); width: min(30rem, 34vw); } .hf-spur { --reihen: 7; --zeile: calc(var(--hoehe) * .29); position: absolute; z-index: 3; left: 42vw; right: var(--rand); top: calc(var(--hoehe) * .14); display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: calc(var(--zeile) - 16px); gap: 16px; transform: translateY(calc(var(--p, 0) * -1 * (var(--reihen) * var(--zeile) - var(--hoehe) * .74))); } .hf-karte { position: relative; overflow: hidden; padding: 18px 20px 18px 86px; border: 1px solid; } .welt-edo .hf-karte { background: rgba(244, 238, 225, .94); border-color: rgba(23, 19, 15, .35); } .welt-neo .hf-karte { background: rgba(6, 6, 13, .86); border-color: rgba(30, 242, 255, .45); box-shadow: inset 0 0 30px rgba(30, 242, 255, .08); } .hf-stempel { position: absolute; left: 18px; top: 18px; margin: 0; padding: 8px 6px; writing-mode: vertical-rl; font: 800 1.15rem/1.1 var(--mincho); letter-spacing: .08em; border: 2px solid; border-radius: 4px; } .welt-edo .hf-stempel { color: var(--rot-edo); border-color: var(--rot-edo); transform: rotate(-3deg); } .welt-neo .hf-stempel { color: var(--cyan); border-color: var(--cyan); text-shadow: 0 0 12px rgba(30, 242, 255, .6); box-shadow: 0 0 14px rgba(30, 242, 255, .35); } .hf-werk-ja { position: absolute; right: -6px; bottom: -14px; margin: 0; font: 900 clamp(2.6rem, 4.4vw, 4.6rem)/1 var(--mincho); white-space: nowrap; opacity: .1; pointer-events: none; } .welt-neo .hf-werk-ja { color: transparent; -webkit-text-stroke: 1px var(--rot-neo); opacity: .55; } .hf-karte h3 { margin: 0; font: 800 clamp(1.25rem, 1.7vw, 1.7rem)/1.1 var(--mincho); } .hf-werk { margin: 4px 0 10px; font: 600 .74rem/1.4 var(--tech); letter-spacing: .16em; text-transform: uppercase; } .welt-edo .hf-werk { color: var(--rot-edo); } .welt-neo .hf-werk { color: var(--gelb); } .hf-satz { margin: 0; position: relative; font: 400 clamp(.92rem, .98vw, 1.02rem)/1.5 var(--mincho); } @media (max-aspect-ratio: 4/5) { .text-halle { width: auto; top: calc(var(--hoehe) * .09); bottom: auto; } /* Überschrift oben fest, die Karten laufen darunter durch */ .hf-spur { --reihen: 14; --zeile: calc(var(--hoehe) * .25); left: var(--rand); right: var(--rand); top: calc(var(--hoehe) * .34); grid-template-columns: 1fr; transform: translateY(calc(var(--p, 0) * -1 * (var(--reihen) * var(--zeile) - var(--hoehe) * .62))); } .szene-halle { height: 800vh; } } .ruhig .szene-halle, html:not(.js) .szene-halle { height: auto; } .ruhig .hf-spur, html:not(.js) .hf-spur { position: static; transform: none; padding: 40vh var(--rand) 8vh; grid-auto-rows: auto; } /* Burger-Menü im Kapitel-Knopf */ .burger { display: inline-grid; gap: 4px; width: 18px; } .burger i { display: block; height: 2px; background: currentColor; transition: transform .3s var(--aus); } .hud-buch:hover .burger i:nth-child(1) { transform: translateX(3px); } .hud-buch:hover .burger i:nth-child(3) { transform: translateX(-3px); } @media (max-width: 560px) { .hud-buch .buch-text { display: none; } .hud-buch { padding: 0 11px; } } .text-halle { z-index: 5; } /* Zeitreise: Karten wechseln per Pinsel-Wischer (Maske), nie zwei Karten übereinander */ @property --wa { syntax: ''; inherits: false; initial-value: 0%; } @property --wb { syntax: ''; inherits: false; initial-value: 0%; } .js:not(.ruhig) .zk { --wa: -20%; --wb: -20%; opacity: 1; visibility: hidden; transform: none; -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--wa) - 8%), #000 var(--wa), #000 var(--wb), transparent calc(var(--wb) + 8%)); mask-image: linear-gradient(90deg, transparent calc(var(--wa) - 8%), #000 var(--wa), #000 var(--wb), transparent calc(var(--wb) + 8%)); transition: none; pointer-events: none; } /* inaktiv: ganz weg (früher blieb ein 8-%-Randstreifen jeder Karte stehen) */ .js:not(.ruhig) .zk.aktiv { --wa: 0%; --wb: 108%; visibility: visible; transition: --wb .7s var(--vorhang) .38s; pointer-events: auto; } .js:not(.ruhig) .zk.war { --wa: 108%; --wb: 108%; visibility: visible; transition: --wa .45s var(--vorhang); } .aera-gross { position: absolute; z-index: 2; left: 50%; top: 42%; margin: 0; transform: translate(-50%, -50%); display: grid; justify-items: center; pointer-events: none; opacity: 0; color: var(--zahl, var(--tusche)); } .aera-gross span { font: 800 clamp(6rem, 22vw, 20rem)/1 var(--mincho); letter-spacing: .04em; } .aera-gross small { font: 600 .9rem var(--tech); letter-spacing: .5em; text-transform: uppercase; } .aera-gross.zeigen { animation: aera-auf 2.6s var(--aus) forwards; } @keyframes aera-auf { 0% { opacity: 0; filter: blur(14px); transform: translate(-50%, -46%) scale(1.06); } 22% { opacity: .55; filter: blur(0); transform: translate(-50%, -50%) scale(1); } 70% { opacity: .45; } 100% { opacity: 0; filter: blur(6px); transform: translate(-50%, -54%) scale(.98); } } /* ---------- Querfahrt (Kodex, Küche): Felder nebeneinander, Kamera gleitet zur Seite ---------- */ .qs-spur { position: absolute; inset: 0 auto 0 0; display: flex; width: calc(var(--n) * 100%); transform: translateX(calc(var(--pos, 0) * -100% / var(--n))); } .qs-feld { position: relative; flex: 0 0 calc(100% / var(--n)); height: 100%; overflow: hidden; } .qs-bild { position: absolute; inset: -6%; background: var(--bild) 62% center / cover no-repeat; transform: translateX(calc(var(--off, 0) * 22%)) scale(calc(1.03 + var(--zug, 0) * .07)); } .welt-edo .qs-neo, .welt-neo .qs-edo { display: none; } .welt-edo .qs-kodex .qs-bild { filter: grayscale(1) sepia(.3) contrast(1.15) brightness(1.06); } .welt-neo .qs-kodex .qs-bild { filter: grayscale(1) contrast(1.2) brightness(.82); } .welt-neo .qs-kodex .qs-ton { position: absolute; inset: 0; mix-blend-mode: color; background: linear-gradient(120deg, rgba(30, 242, 255, .85), rgba(80, 40, 200, .6) 50%, rgba(255, 43, 214, .8)); } .welt-edo .qs-kueche .qs-bild { filter: sepia(.5) saturate(.75) contrast(1.06) brightness(1.04); } .welt-neo .qs-kueche .qs-bild { filter: saturate(1.2) contrast(1.05); } .qs-schleier { position: absolute; inset: 0; } .welt-edo .qs-schleier { background: linear-gradient(90deg, rgba(236, 227, 208, .97) 0%, rgba(236, 227, 208, .86) 36%, rgba(236, 227, 208, 0) 62%); } .welt-neo .qs-schleier { background: linear-gradient(90deg, rgba(6, 6, 13, .95) 0%, rgba(6, 6, 13, .78) 36%, rgba(6, 6, 13, 0) 62%); } .qs-kanji { position: absolute; z-index: 2; right: var(--rand); top: calc(var(--hoehe) * .1); margin: 0; writing-mode: vertical-rl; font: 800 clamp(8rem, 19vw, 21rem)/1 var(--mincho); pointer-events: none; transform: translateX(calc(var(--off, 0) * -30%)); -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--zug, 1) * 140% - 40%), transparent calc(var(--zug, 1) * 140% - 5%)); mask-image: linear-gradient(180deg, #000 calc(var(--zug, 1) * 140% - 40%), transparent calc(var(--zug, 1) * 140% - 5%)); } .welt-edo .qs-kanji { color: var(--tusche); mix-blend-mode: multiply; opacity: .9; } .welt-neo .qs-kanji { color: transparent; -webkit-text-stroke: 2px var(--cyan); text-shadow: 0 0 34px rgba(30, 242, 255, .55); } .qs-feld .text-haupt, .qs-feld .absatz { transform: translateX(calc(var(--off, 0) * -12%)); } .qs-feld .titel { font-size: clamp(3.6rem, 9vw, 9rem); } @media (max-aspect-ratio: 4/5) { .qs-bild { background-image: var(--bild-h); background-position: 58% center; } .welt-edo .qs-schleier, .welt-neo .qs-schleier { background: none; } .qs-kanji { top: calc(var(--hoehe) * .1); bottom: auto; font-size: clamp(4.5rem, 24vw, 8rem); } .qs-feld .text-tugend h2, .qs-feld .text-tugend .h2 { font-size: clamp(1.7rem, 8vw, 2.6rem); } .qs-feld .titel { font-size: clamp(3rem, 16vw, 5rem); } } .ruhig .szene-quer, html:not(.js) .szene-quer { height: auto !important; } .ruhig .qs-spur, html:not(.js) .qs-spur { position: static; display: block; width: auto; transform: none; } .ruhig .qs-feld, html:not(.js) .qs-feld { height: var(--hoehe); } .ruhig .qs-kanji, html:not(.js) .qs-kanji { -webkit-mask-image: none; mask-image: none; } /* Fan-Welt: Edo als Rasterdruck (Manga), Neo in voller Farbe, zwei Felder mit Film */ .welt-edo .qs-otaku .qs-bild { filter: grayscale(1) contrast(1.2) brightness(1.08); } .welt-edo .qs-otaku .qs-ton { position: absolute; inset: 0; mix-blend-mode: multiply; background-image: radial-gradient(rgba(23, 19, 15, .4) 1px, transparent 1.5px); background-size: 5px 5px; } .welt-neo .qs-otaku .qs-bild { filter: saturate(1.2) contrast(1.05); } video.qs-bild { width: 112%; height: 112%; object-fit: cover; object-position: 60% center; } .tg-kanji-4 { font-size: clamp(3.4rem, 6.2vw, 6.8rem); } @media (max-aspect-ratio: 4/5) { .tg-kanji-4 { font-size: clamp(2.8rem, 11vw, 4.4rem); } } /* Weicher Kapitelwechsel: das Zeichen des nächsten Kapitels steigt auf, die Seite wechselt darunter */ .blatt-vorhang { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(18, 16, 42, .96), rgba(6, 6, 13, .99) 70%); color: var(--hell); transition: opacity .85s var(--aus); } .blatt-vorhang::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(236, 227, 208, .1) 0 49.8%, rgba(30, 242, 255, .5) 50%, transparent 50.3%); opacity: .7; } .blatt-vorhang.auf { opacity: 1; } .blatt-vorhang.zu { opacity: 0; transition: opacity 1.2s var(--aus); } .bv-z { margin: 0; font: 800 clamp(7rem, 26vh, 16rem)/1 var(--mincho); filter: blur(10px); opacity: 0; transform: scale(1.08); transition: filter 1s var(--aus) .1s, opacity 1s var(--aus) .1s, transform 1.6s var(--aus) .1s; text-shadow: 0 0 40px rgba(30, 242, 255, .35); } .bv-n { margin: 0; font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--mincho); opacity: 0; transition: opacity .8s var(--aus) .45s; } .bv-u { margin: 0; font: 600 .78rem/1.4 var(--tech); letter-spacing: .3em; text-transform: uppercase; color: var(--cyan); opacity: 0; transition: opacity .8s var(--aus) .6s; } .blatt-vorhang.auf .bv-z { filter: none; opacity: 1; transform: none; } .blatt-vorhang.auf .bv-n, .blatt-vorhang.auf .bv-u { opacity: 1; } .blatt-vorhang.zu .bv-z { transform: scale(.94); filter: blur(6px); opacity: 0; transition: all 1.1s var(--aus); } /* Ton-Mischpult */ .hud-rechts { position: relative; } .ton-pult { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: min(260px, 86vw); padding: 14px 16px 16px; display: grid; gap: 10px; pointer-events: auto; background: rgba(6, 6, 13, .92); color: var(--hell); border: 1px solid rgba(30, 242, 255, .35); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); font: 600 .74rem/1.3 var(--tech); letter-spacing: .14em; text-transform: uppercase; } .ton-pult[hidden] { display: none; } .tp-titel { margin: 0; font: 800 .9rem var(--mincho); letter-spacing: .2em; color: var(--cyan); } .ton-pult label { display: grid; gap: 6px; } .ton-pult .tp-an { display: flex; align-items: center; gap: 8px; } .ton-pult input[type=range] { width: 100%; accent-color: var(--cyan); } .ton-pult input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cyan); } /* Kapitelleiste am rechten Rand: sieben Marken, das aktive Kapitel leuchtet */ .buch-leiste { position: fixed; z-index: 30; right: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; mix-blend-mode: difference; } .buch-leiste a { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #fff; text-decoration: none; } .buch-leiste span { display: grid; place-items: center; width: 22px; height: 22px; font: 800 .74rem/1 var(--mincho); border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; opacity: .55; transition: opacity .3s, transform .3s var(--aus); } .buch-leiste b { font: 600 .66rem/1 var(--tech); letter-spacing: .2em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .3s, transform .3s var(--aus); white-space: nowrap; } .buch-leiste a:hover b, .buch-leiste a:focus-visible b { opacity: 1; transform: none; } .buch-leiste a:hover span, .buch-leiste [aria-current] span { opacity: 1; transform: scale(1.15); background: #fff; color: #000; } .buch-leiste a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } @media (max-width: 760px), (max-aspect-ratio: 4/5) { .buch-leiste { display: none; } } /* Weiterlesen-Hinweis */ .weiterlesen { position: fixed; z-index: 45; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; transition: opacity .5s var(--aus), transform .5s var(--aus); } .weiterlesen.weg { opacity: 0; transform: translate(-50%, 12px); } .weiterlesen button { padding: 12px 18px; border: 1px solid var(--cyan); background: rgba(6, 6, 13, .9); color: var(--hell); font: 600 .78rem/1 var(--tech); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 24px rgba(30, 242, 255, .25); } /* Kapitelwechsel · Variante Fusuma: zwei Papier-Schiebetüren mit Holzgitter schließen sich, das Zeichen steht in Tusche darauf */ .blatt-vorhang.art-fusuma { background: none; color: var(--tusche); } .blatt-vorhang.art-fusuma::before { display: none; } .bv-tuer { position: absolute; top: 0; bottom: 0; width: 50.5%; z-index: -1; transition: transform .95s var(--vorhang); background: linear-gradient(90deg, #3a2a1c 0 10px, transparent 10px calc(100% - 10px), #3a2a1c calc(100% - 10px)), repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(58, 42, 28, .85) calc(25% - 3px) 25%), repeating-linear-gradient(0deg, transparent 0 calc(16.66% - 3px), rgba(58, 42, 28, .85) calc(16.66% - 3px) 16.66%), #efe6d2; box-shadow: inset 0 0 60px rgba(120, 90, 50, .25); } .bv-tuer.links { left: 0; transform: translateX(-102%); } .bv-tuer.rechts { right: 0; transform: translateX(102%); } .blatt-vorhang.art-fusuma.auf .bv-tuer { transform: none; } .blatt-vorhang.art-fusuma.zu { opacity: 1; transition: opacity .4s var(--aus) .9s; } .blatt-vorhang.art-fusuma.zu .bv-tuer.links { transform: translateX(-102%); } .blatt-vorhang.art-fusuma.zu .bv-tuer.rechts { transform: translateX(102%); } .art-fusuma .bv-z { text-shadow: none; } .art-fusuma .bv-u { color: var(--rot-edo); } .art-fusuma .bv-z, .art-fusuma .bv-n, .art-fusuma .bv-u { padding: 0 18px; background: rgba(239, 230, 210, .9); } /* Variante Tuschetropfen: ein Tintenfleck breitet sich von der Mitte aus */ .blatt-vorhang.art-tusche { background: none; } .blatt-vorhang.art-tusche::before { display: none; } .bv-tinte { position: absolute; left: 50%; top: 50%; z-index: -1; width: 160vmax; height: 160vmax; border-radius: 47% 53% 51% 49% / 52% 46% 54% 48%; background: radial-gradient(circle, #ece3d0 0 52%, rgba(236, 227, 208, .9) 60%, rgba(236, 227, 208, 0) 70%); transform: translate(-50%, -50%) scale(0) rotate(0deg); transition: transform 1.05s cubic-bezier(.2, .7, .2, 1); } .blatt-vorhang.art-tusche.auf .bv-tinte { transform: translate(-50%, -50%) scale(1) rotate(25deg); } /* Variante Kirschblütensturm */ .blatt-vorhang.art-blueten { background: radial-gradient(120% 90% at 50% 45%, rgba(40, 14, 34, .96), rgba(6, 6, 13, .99) 70%); } .bv-blatt { position: absolute; left: -6vw; top: var(--y); width: 18px; height: 14px; border-radius: 80% 0 80% 0; background: linear-gradient(135deg, #ffd6e6, #ff8fb8); transform: scale(var(--s)); opacity: 0; animation: blatt-flug var(--d) cubic-bezier(.3, .1, .3, 1) var(--v) forwards; } @keyframes blatt-flug { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(var(--s)); } 12% { opacity: 1; } 100% { opacity: .9; transform: translate(112vw, 18vh) rotate(var(--r)) scale(var(--s)); } } @media (prefers-reduced-motion: reduce) { .bv-tuer, .bv-tinte { transition: none; } .bv-blatt { display: none; } } .blatt-vorhang.art-tusche { color: var(--tusche); } .art-tusche .bv-z { text-shadow: none; filter: blur(14px); } .art-tusche.auf .bv-z { filter: none; } .art-tusche .bv-u { color: var(--rot-edo); } /* Kintsugi: nach jedem Treffer laufen goldene Risse über das Filmbild und verblassen — Bruch, mit Gold geheilt */ .kintsugi { position: absolute; z-index: 1; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; opacity: 0; display: none; } /* nur während eines Treffers da: unsichtbar darübergelegt kostete es jedes Bild ein Neuzeichnen samt Leuchtschatten */ .kintsugi path { fill: none; stroke: #f0c25a; stroke-width: 3.4px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; } /* Lichthof als zweiter, breiter Strich statt drop-shadow-Filter (der kostete über dem laufenden Film die halbe Bildrate) */ .kintsugi path.hof { stroke: rgba(255, 205, 110, .2); stroke-width: 9px; } .welt-neo .kintsugi path { stroke: #ffd36b; } .buehne.riss .kintsugi { display: block; will-change: opacity; animation: kintsugi-da 2.4s var(--aus) forwards; } .buehne.riss .kintsugi path { animation: kintsugi-riss .55s cubic-bezier(.2, .8, .2, 1) forwards; } .buehne.riss .kintsugi path:nth-child(n+2) { animation-delay: .12s; } @keyframes kintsugi-riss { to { stroke-dashoffset: 0; } } @keyframes kintsugi-da { 0% { opacity: 0; } 8% { opacity: 1; } 65% { opacity: .9; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .kintsugi { display: none; } } /* Pinsel-Mauszeiger: Tuschespur auf der Edo-Seite, Neonspur auf der Neo-Seite */ .pinsel { position: fixed; inset: 0; z-index: 36; pointer-events: none; } /* Nachklang im Duell: kräftigerer Schleier, damit der Titel über dem dunklen Mondbild lesbar bleibt */ #nachklang .welt-edo .kulisse::after { background: linear-gradient(90deg, rgba(236, 227, 208, .92), rgba(236, 227, 208, .6) 40%, transparent 62%); } #nachklang .welt-neo .kulisse::after { background: linear-gradient(90deg, rgba(6, 6, 13, .88), rgba(6, 6, 13, .5) 40%, transparent 62%); } /* ---------- Kapitel Feste: Feuerwerk auf Canvas als Ebene über dem Nachtbild ---------- */ .qs-feld .feuerwerk { position: absolute; inset: 0; width: 100%; height: 100%; } .welt-edo .qs-code .qs-schleier { background: linear-gradient(90deg, rgba(236, 227, 208, .95) 0%, rgba(236, 227, 208, .8) 36%, rgba(236, 227, 208, 0) 60%); } .welt-neo .qs-code .qs-schleier { background: linear-gradient(90deg, rgba(6, 6, 13, .92) 0%, rgba(6, 6, 13, .7) 36%, rgba(6, 6, 13, 0) 60%); } /* ---------- Kapitel Klang: Visualisierer hinter der Querfahrt, spielbare Taiko ---------- */ .klang-bild { position: absolute; inset: 0; width: 100%; height: 100%; } .welt-edo .klang-bild { display: none; } .welt-neo .qs-feld .klang-bild { opacity: .6; } /* Licht über dem Foto */ .taiko-buehne { margin-top: 18px; display: flex; align-items: center; gap: 18px; } .taiko { position: relative; width: 170px; height: 170px; flex: none; border-radius: 50%; padding: 0; cursor: pointer; border: 0; touch-action: manipulation; background: radial-gradient(circle, #efe2c4 0 44%, #d9c39a 58%, #b8935c 64%, #6b3a1f 65% 78%, #3d2010 79% 100%); box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 0 0 6px rgba(0, 0, 0, .25); } .taiko::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; border: 3px dotted #2a1a0c; opacity: .8; } .taiko-fell { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 45% 40%, rgba(255, 255, 255, .35), transparent 60%); } .taiko-sfx { position: absolute; left: 50%; top: -8px; transform: translate(-50%, -100%) scale(.6); font: 900 2.4rem/1 var(--mincho); opacity: 0; pointer-events: none; } .welt-edo .taiko-sfx { color: var(--rot-edo); -webkit-text-stroke: 2px #fff; paint-order: stroke; } .welt-neo .taiko-sfx { color: var(--gelb); text-shadow: 3px 3px 0 var(--rot-neo); } .welt-neo .taiko { box-shadow: 0 0 0 3px var(--cyan), 0 0 30px rgba(30, 242, 255, .5), inset 0 0 0 6px rgba(0, 0, 0, .25); } .taiko.schlag { animation: taiko-wippen .35s var(--feder); } .taiko.rand { animation: taiko-rand .25s ease-out; } .taiko.schlag .taiko-sfx { animation: taiko-sfx .7s var(--feder) forwards; } @keyframes taiko-wippen { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } } @keyframes taiko-rand { 0% { transform: rotate(-3deg); } 100% { transform: none; } } @keyframes taiko-sfx { 0% { opacity: 0; transform: translate(-50%, -80%) scale(.5) rotate(-8deg); } 30% { opacity: 1; transform: translate(-50%, -110%) scale(1.1) rotate(-8deg); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1) rotate(-8deg); } } .taiko:focus-visible { outline: 3px solid var(--cyan); outline-offset: 6px; } .taiko-hinweis { margin: 0; font: 600 .74rem/1.5 var(--tech); letter-spacing: .14em; text-transform: uppercase; opacity: .75; max-width: 12rem; } @media (max-aspect-ratio: 4/5) { .taiko { width: 120px; height: 120px; } .taiko-sfx { font-size: 1.8rem; } } /* ---------- Kapitel Ukiyo-e (und folgende): Zeichnungen in Code, je Feld eine Leinwand je Welt ---------- */ .qs-feld .zeichnung { position: absolute; inset: 0; width: 100%; height: 100%; } .qs-feld:has(.zeichnung) .qs-kanji { opacity: .4; } .welt-neo .qs-feld:has(.zeichnung) .qs-kanji { opacity: .3; } /* Bildpaare (Nano Banana): Edo leicht in den Papierton gezogen, Neo kräftig */ .welt-edo .qs-paar .qs-bild { filter: sepia(.35) saturate(.85) contrast(1.04) brightness(1.03); } /* Vollbild je Welt (Schnitt nur als Hieb): Motiv rechts, Text links über dem Schleier; auf dem Handy das Motiv ins Bild holen */ @media (max-aspect-ratio: 4/5) { .qs-paar .qs-bild { background-position: 70% center; } } .welt-neo .qs-paar .qs-bild { filter: saturate(1.1) contrast(1.04); } /* Instrumente anspielen */ .anspielen { margin-top: 14px; display: inline-flex; align-items: center; gap: .6em; min-height: 44px; padding: 0 18px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: 600 .74rem var(--tech); letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; } .welt-edo .anspielen:hover { background: var(--tusche); color: var(--papier); } .welt-neo .anspielen { color: var(--cyan); box-shadow: 0 0 18px rgba(30, 242, 255, .25); } .anspielen:focus-visible { outline: 3px solid var(--rot-edo); outline-offset: 4px; } .anspielen.klingt span { animation: anspielen-puls .9s var(--aus); } @keyframes anspielen-puls { 0% { transform: scale(1.8); } 100% { transform: none; } }