/* ========================================================================== »Die Fuge« — Buchansicht mit echtem Blätter-Effekt -------------------------------------------------------------------------- Modell (wie im gedruckten Buch): Jedes Blatt der Arbeit besteht aus ZWEI Blättern im Buch — 1. ein Transparentpapier (.blatt--pergament), das den Text trägt und den darunterliegenden Druck milchig eintrübt, 2. das Druckblatt (.blatt--druck) mit dem Holzschnitt. Wird das Transparentpapier umgeschlagen, liegt der Druck frei. Genau diese Reihenfolge zeigen auch die Fotos in den PDFs. ========================================================================== */ /* Die Buchansicht bleibt bewusst beim System-Satz: der Blocksatz auf dem Transparentpapier ist auf Georgia ausgelegt, die Schreibmaschinenschrift der uebrigen Seite wuerde die Zeilen anders umbrechen. font-family muss hier ausgeschrieben stehen — die Kindelemente erben den berechneten Wert von , ein blosses Umsetzen von --font-sans wuerde sie nicht erreichen. */ .fuge { --font-serif: var(--font-system-serif); font-family: var(--font-system-sans); padding-top: var(--space-4); padding-bottom: var(--space-5); } /* ---------- Bühne ---------- Auf breiten Fenstern eine echte Doppelseite: links wächst der Stapel der umgeschlagenen Blätter, rechts liegt die aktuelle Seite. Bund (Drehachse) ist die Mitte. */ .buch { --bund: 1.4; /* Seitenverhältnis h/b, wie im PDF (1764 : 2471) */ /* Verfuegbare Breite = die Breite des Bilderblocks, in dem das Buch seit dem Umzug steht. Die Formel bildet nach, was .site-header/main/.site-footer an Polster setzen (links --seitenrand, rechts --nav-width + --space-3), und deckelt wie die Galerie bei --max-width. Vorher stand hier 100vw - ... - 5rem: das zog die Raender ein zweites Mal ab, obwohl main sie schon abzieht — auf schmalen Fenstern blieb das Buch dadurch deutlich schmaler als der Block, in dem es steht. */ --frei: min(var(--max-width), calc(100vw - var(--seitenrand) - var(--nav-width) - 1.5rem)); /* Die 21rem Reserve stammten aus der Zeit, als das Buch eine eigene Seite mit Kopfzeile darueber war. In der Galerie steht darueber nichts im Bild, nur Titel, Steuerung und Hinweis brauchen Platz — deshalb 11rem, und der Deckel darf statt 560 jetzt 660px breit werden. */ --seite-w: max(190px, min(calc(var(--frei) / 2), calc((100vh - 11rem) / var(--bund)), 660px)); --seite-h: calc(var(--seite-w) * var(--bund)); /* Feine Papierstruktur für die Transparentblätter. Zwei Lagen: kriseliges Korn (leicht faserig, deshalb ungleiche baseFrequency) und darüber eine grobe Wolkigkeit, damit die Fläche nicht gleichmäßig wirkt. */ --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23k)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)'/%3E%3C/svg%3E"); --papier: #f3eee2; --papier-kante: #e4dccb; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .buch__buehne { position: relative; width: calc(var(--seite-w) * 2); height: var(--seite-h); perspective: 1700px; perspective-origin: 50% 45%; /* Der Buchblock, auf dem die Blätter liegen */ background: linear-gradient(90deg, transparent 0 50%, var(--papier) 50% 100%); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.13); } /* Bundschatten in der Mitte */ .buch__buehne::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4rem; transform: translateX(-50%); pointer-events: none; z-index: 60; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.10) 46%, rgba(0, 0, 0, 0.16) 50%, rgba(0, 0, 0, 0.06) 54%, rgba(0, 0, 0, 0) 100%); } /* ---------- Das geschlossene Buch auf der linken Seite ---------- Vor dem ersten Umschlagen ist die linke Haelfte der Buehne leer. Dort liegt solange ein Foto des gebundenen Buchs: man sieht, worum es sich handelt, bevor man aufklappt. Beim ersten Blaettern blendet es weg — dann wachsen dort die umgeschlagenen Blaetter. z-index: 0, damit die umgeschlagenen Blaetter (setzeStapel vergibt ab 1) sicher darueber liegen. */ .buch__deckel { position: absolute; top: 0; left: 0; width: var(--seite-w); height: 100%; z-index: 0; object-fit: cover; /* Das Foto ist etwas breiter als eine Buchseite (0.769 zu 0.714); der Anschnitt soll am aeusseren Rand liegen, nicht im Bund. */ object-position: left center; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.13); opacity: 1; transition: opacity 0.45s ease; } /* Sobald aufgeklappt ist */ .buch__deckel.ist-weg { opacity: 0; pointer-events: none; } /* ---------- Ein Blatt ---------- */ .blatt { position: absolute; top: 0; left: 50%; width: var(--seite-w); height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.32, 0.02, 0.24, 1); will-change: transform; } .blatt.is-umgeschlagen { transform: rotateY(-180deg); } /* ---------- Bewegungsablauf des Blattes ---------- Eine reine, gleichfoermige rotateY-Drehung sieht aus wie ein kippendes Brett. Papier verhaelt sich anders: es wird angehoben, faellt dann unter seinem eigenen Gewicht schneller durch die Senkrechte, schwingt am Ende ein Stueck ueber die Waagerechte hinaus und legt sich zurueck. Dazu ein leichtes rotateZ, damit die freie Kante der Drehung nachlaeuft statt starr mitzugehen. Die Klassen setzt fuge.js nur waehrend der Drehung. */ @keyframes blatt-vor { 0% { transform: rotateY(0deg) rotateZ(0deg) translateZ(0); animation-timing-function: cubic-bezier(0.45, 0.02, 0.72, 0.45); } 42% { transform: rotateY(-88deg) rotateZ(1.1deg) translateZ(20px); animation-timing-function: cubic-bezier(0.3, 0.42, 0.35, 1); } 78% { transform: rotateY(-167deg) rotateZ(0.5deg) translateZ(9px); } 91% { transform: rotateY(-183.5deg) rotateZ(-0.35deg) translateZ(3px); } 97% { transform: rotateY(-178.8deg) rotateZ(0.12deg) translateZ(1px); } 100% { transform: rotateY(-180deg) rotateZ(0deg) translateZ(0); } } @keyframes blatt-zurueck { 0% { transform: rotateY(-180deg) rotateZ(0deg) translateZ(0); animation-timing-function: cubic-bezier(0.45, 0.02, 0.72, 0.45); } 42% { transform: rotateY(-92deg) rotateZ(-1.1deg) translateZ(20px); animation-timing-function: cubic-bezier(0.3, 0.42, 0.35, 1); } 78% { transform: rotateY(-13deg) rotateZ(-0.5deg) translateZ(9px); } 91% { transform: rotateY(3.5deg) rotateZ(0.35deg) translateZ(3px); } 97% { transform: rotateY(-1.2deg) rotateZ(-0.12deg) translateZ(1px); } 100% { transform: rotateY(0deg) rotateZ(0deg) translateZ(0); } } /* Licht laeuft ueber das Blatt: aufgestellt steht es schraeg zum Licht und verschattet zur Drehachse hin. Nur opacity, damit nichts neu layoutet. */ .blatt__seite::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(60, 50, 30, 0.30) 0%, rgba(60, 50, 30, 0.10) 38%, rgba(255, 252, 244, 0.16) 78%, rgba(255, 252, 244, 0.26) 100%); } @keyframes blatt-schatten { 0% { opacity: 0; } 45% { opacity: 1; } 70% { opacity: 0.72; } 100% { opacity: 0; } } .blatt.dreht--vor { animation: blatt-vor 0.9s both; } .blatt.dreht--zurueck { animation: blatt-zurueck 0.9s both; } .blatt.dreht--vor .blatt__seite::before, .blatt.dreht--zurueck .blatt__seite::before { animation: blatt-schatten 0.9s both; } /* ---------- Seitenwechsel genau im Kipppunkt ---------- Firefox blendet die abgewandte Vorderseite nicht zuverlaessig aus (siehe .blatt__seite), deshalb wird hart umgeschaltet. Der Zeitpunkt muss exakt der sein, in dem das Blatt hochkant steht - sonst sieht man kurz die Vorderseite von hinten, und der Satz springt sichtbar von lesbar auf seitenverkehrt. Die Keyframes erreichen -90 Grad bei 42,64 % der Laufzeit (zwischen den Marken 42 % und 78 %, mit deren Beschleunigungskurve gerechnet), nicht bei 50 %. Der Wechsel haengt deshalb an derselben Zeitleiste wie die Bewegung statt an einer eigens gestellten Verzoegerung - so laufen beide auch dann nicht auseinander, wenn die Keyframes spaeter geaendert werden. */ @keyframes seite-tritt-ab { 0%, 42.6% { visibility: visible; } 42.7%, 100% { visibility: hidden; } } @keyframes seite-tritt-auf { 0%, 42.6% { visibility: hidden; } 42.7%, 100% { visibility: visible; } } .blatt.dreht--vor .blatt__seite--vorn { animation: seite-tritt-ab 0.9s both; } .blatt.dreht--vor .blatt__seite--hinten { animation: seite-tritt-auf 0.9s both; } .blatt.dreht--zurueck .blatt__seite--vorn { animation: seite-tritt-auf 0.9s both; } .blatt.dreht--zurueck .blatt__seite--hinten { animation: seite-tritt-ab 0.9s both; } .blatt__seite { position: absolute; inset: 0; backface-visibility: hidden; overflow: hidden; /* backface-visibility allein reicht hier nicht — Firefox zeichnet die abgewandte Vorderseite trotzdem, dann liegen beide Texte übereinander. Deshalb wird zusätzlich hart umgeschaltet, und zwar genau zur Hälfte der Drehung (0,425 s von 0,85 s), wenn das Blatt hochkant steht. */ transition: visibility 0s linear 0.384s; } .blatt__seite--hinten { transform: rotateY(180deg); visibility: hidden; } .blatt.is-umgeschlagen .blatt__seite--vorn { visibility: hidden; } .blatt.is-umgeschlagen .blatt__seite--hinten { visibility: visible; } /* Papierseiten (Titelblatt, Einleitung, Druckblätter) */ .blatt--papier .blatt__seite, .blatt--druck .blatt__seite { background: var(--papier); box-shadow: inset 0 0 2.5rem rgba(120, 105, 75, 0.07); } /* Transparentpapier: trübt, was darunter liegt. Wichtig: der backdrop-filter sitzt NICHT auf .blatt__seite selbst — dort hebt er backface-visibility auf, dann scheint die Vorderseite durch die Rückseite und beide Texte liegen übereinander. */ .blatt--pergament .blatt__seite { background: transparent; } .seite__glas { position: absolute; inset: 0; z-index: 0; background: rgba(244, 240, 230, 0.58); -webkit-backdrop-filter: blur(1.4px) saturate(0.44) brightness(1.14); backdrop-filter: blur(1.4px) saturate(0.44) brightness(1.14); } /* Korn — liegt über der Trübung, unter dem Text */ .seite__glas::after, .blatt--pergament .blatt__seite--hinten::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--korn); background-size: 170px 170px, 420px 420px; background-repeat: repeat, repeat; opacity: 0.40; } /* Auf der Rückseite darf es etwas kräftiger krisseln — dort fehlt der Druck, der die Struktur sonst überdeckt. */ .blatt--pergament .blatt__seite--hinten::after { opacity: 0.52; } /* Rückseite des Transparentpapiers: nur mattes Papier, kein Filter */ .blatt--pergament .blatt__seite--hinten { background: rgba(244, 240, 230, 0.74); } /* Ohne backdrop-filter (ältere Browser) trotzdem milchig */ @supports not (backdrop-filter: blur(2px)) { .seite__glas { background: rgba(244, 240, 230, 0.80); } } /* Eselsohr: die Ecke des obersten Blattes liegt leicht hoch */ .blatt.ist-oben .blatt__seite--vorn::after { content: ""; position: absolute; right: 0; bottom: 0; width: 3.2rem; height: 3.2rem; pointer-events: none; background: linear-gradient(315deg, var(--papier-kante) 0%, rgba(255, 255, 255, 0.85) 42%, rgba(0, 0, 0, 0.07) 46%, rgba(0, 0, 0, 0) 60%); clip-path: polygon(100% 0, 100% 100%, 0 100%); filter: drop-shadow(-2px -2px 3px rgba(0, 0, 0, 0.16)); transition: width 0.25s ease, height 0.25s ease; } .buch__buehne:hover .blatt.ist-oben .blatt__seite--vorn::after { width: 4.6rem; height: 4.6rem; } /* ---------- Satzspiegel einer Seite ---------- Maße als Prozent der Seite, dem Original nachgemessen. */ .seite__text, .seite__ueberschrift, .seite__marke, .seite__block, .seite__druck { z-index: 1; } /* Der Druck steht mittig auf dem Blatt: die Box ist waagerecht wie senkrecht symmetrisch eingerueckt (13.25% / 15%), das Bild darin zentriert. Die Box ist bewusst etwas breiter (Verhaeltnis 0.75) als das breiteste Blatt (0.735) — dadurch ist JEDES Blatt hoehenbegrenzt und alle 19 stehen exakt gleich hoch, nur unterschiedlich breit. Mit `left top` sassen sie nach dem Neuzuschnitt (Verhaeltnisse 0.682-0.735) jedes anders. */ .seite__druck { position: absolute; left: 13.25%; top: 15%; width: 73.5%; height: 70%; } .seite__druck img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .seite__text { position: absolute; left: var(--tx, 26.5%); top: var(--ty, 30%); width: var(--tw, 50%); margin: 0; font-size: calc(var(--seite-w) * 0.0218); line-height: 1.46; letter-spacing: 0.005em; color: #14161c; hyphens: none; } .seite__text + .seite__text { margin-top: 0; } .seite__ueberschrift { position: absolute; left: var(--tx, 26.5%); top: var(--hy, 22%); width: var(--tw, 50%); margin: 0; font-size: calc(var(--seite-w) * 0.0262); font-weight: 400; line-height: 1.3; color: #14161c; } .seite__marke { position: absolute; left: 26.5%; top: 89%; margin: 0; font-size: calc(var(--seite-w) * 0.0184); font-weight: 700; letter-spacing: 0.045em; text-transform: uppercase; color: #14161c; } /* Titel- und Einleitungsseite: normaler Fließsatz */ .seite__block { position: absolute; left: 21%; top: var(--ty, 18%); width: 63%; margin: 0; font-size: calc(var(--seite-w) * 0.0218); line-height: 1.5; color: #14161c; } .seite__block p { margin: 0 0 1.1em; } .seite__block p:last-child { margin-bottom: 0; } /* Seite mit sehr viel Text (Einleitung): Satz senkrecht zentriert statt an einem festen --ty aufgehaengt, sonst laeuft er unten aus der Seite. --fs nimmt den Grad eine Spur zurueck, damit Rand oben/unten bleibt. */ .seite__block--mittig { top: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; font-size: calc(var(--seite-w) * var(--fs, 0.0218)); } /* Titelblatt: nur Name und Werktitel, waagerecht wie senkrecht mittig. Der gewoehnliche .seite__block sitzt bewusst asymmetrisch (21% links, 16% rechts) — fuer eine zentrierte Zeile muss die Box symmetrisch stehen, sonst haengt der Satz sichtbar nach rechts. */ .seite__block--titelblatt { --fs: 0.030; left: 13%; width: 74%; text-align: center; line-height: 1.9; } /* Der Verfassername kursiv, der Werktitel bleibt aufrecht. */ .seite__verfasser { font-style: italic; } .seite__block-titel { font-size: calc(var(--seite-w) * 0.0262); margin-bottom: 1.6em !important; } .seite__einzug { display: inline-block; padding-left: 1.35em; } /* Rückseite eines Transparentpapiers: der Satz steht auf der Vorderseite und schimmert von hinten seitenverkehrt durch. Der Träger wird als Ganzes an der senkrechten Blattmitte gespiegelt, damit die Textblöcke dabei auch die Seite wechseln — nur die Glyphen zu spiegeln sähe falsch aus. */ .seite__durchschein { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: scaleX(-1); opacity: 0.3; } .seite__durchschein .seite__text, .seite__durchschein .seite__ueberschrift, .seite__durchschein .seite__marke { opacity: 1; } /* ---------- Bedienung ---------- */ .buch__steuerung { display: flex; align-items: center; gap: var(--space-3); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); } .buch__knopf { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--color-text-muted); background: none; border: 0; border-bottom: 1px solid transparent; padding: 0 0 2px; cursor: pointer; } .buch__knopf:hover:not(:disabled), .buch__knopf:focus-visible:not(:disabled) { color: var(--color-text); border-color: var(--color-accent); } .buch__knopf:disabled { opacity: 0.32; cursor: default; } .buch__stand { min-width: 9rem; text-align: center; font-variant-numeric: tabular-nums; } /* Klickflächen links / rechts */ .buch__griff { position: absolute; top: 0; bottom: 0; width: 50%; /* Muss ueber dem gesamten Blattstapel liegen, sonst schluckt das oberste Blatt den Klick. js/fuge.js vergibt den Blaettern z-index bis 2 * Anzahl (bei 42 Blaettern also bis 84) und dem gerade drehenden Blatt 999. 500 liegt sicher darueber und unter der Drehung — waehrend der Drehung sperrt fuge.js das Blaettern ohnehin. */ z-index: 500; border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .buch__griff--zurueck { left: 0; } .buch__griff--vor { right: 0; } .buch__griff:disabled { cursor: default; } .buch__griff:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; } .buch__hinweis { font-size: 0.78rem; color: var(--color-text-muted); letter-spacing: 0.02em; text-align: center; margin: 0; } /* Am Rechner blaettert man mit Klick oder Pfeiltasten, am Telefon wischt man. Der Hinweis nennt nur, was auf dem jeweiligen Geraet auch geht — die Grenze ist dieselbe wie fuer die einseitige Buchansicht (999px). */ .buch__hinweis-schmal { display: none; } /* ---------- Schmale Fenster: nur eine Seite ---------- Die Doppelseite passt nicht mehr; das Blatt schlägt um und blendet am Ende der Drehung aus, damit es nicht über die Navigation läuft. */ @media (max-width: 999px) { .buch__hinweis-breit { display: none; } .buch__hinweis-schmal { display: inline; } .buch { --seite-w: max(150px, min(var(--frei), calc((100vh - 12rem) / var(--bund)), 620px)); } .buch__buehne { width: var(--seite-w); background: var(--papier); } .buch__buehne::after { display: none; } .blatt { left: 0; } .blatt__seite { transition: visibility 0s linear 0.384s, opacity 0.12s linear 0.62s; } .blatt.is-umgeschlagen .blatt__seite { opacity: 0; transition-delay: 0.55s; } } @media (prefers-reduced-motion: reduce) { .blatt { transition-duration: 0.01ms; } .blatt__seite { transition-delay: 0s; } .blatt.dreht--vor, .blatt.dreht--zurueck { animation: none; } .blatt.dreht--vor .blatt__seite::before, .blatt.dreht--zurueck .blatt__seite::before { animation: none; } .blatt.dreht--vor .blatt__seite, .blatt.dreht--zurueck .blatt__seite { animation: none; } } /* ========================================================================== Das Buch als Zeile in der Grafik-Galerie (seit 10.09.2026) -------------------------------------------------------------------------- Frueher war »Die Fuge« eine eigene Seite. Jetzt steht das komplette Buch als eigene Zeile in der Kategorie Grafik. ========================================================================== */ .gallery__buch { /* volle Rasterzeile, wie eine .gallery__reihe */ grid-column: 1 / -1; /* NICHT dehnen: die Hoehe der Kachel wird in main.js aus der gemessenen Hoehe des Buchs abgeleitet. Bei align-self: stretch wuerde das Buch auf die daraus errechnete Zeilenhoehe gedehnt und die Messung schaukelte sich bei jedem Durchlauf weiter hoch. */ align-self: start; min-width: 0; } /* Das Buch soll oben wie unten Luft haben und nicht wie eine weitere Kachel an den Nachbarzeilen kleben. Der Rasterabstand von 24px kommt noch dazu. main.js misst die Kachelhoehe ueber getBoundingClientRect, das Polster ist also automatisch mitgerechnet. */ .gallery__buch .fuge { padding-top: var(--space-5); padding-bottom: var(--space-5); }