/* --- Startseite ----------------------------------------------------------- */ .startseite[hidden] { display: none; } /* Vom Inline-Skript im gesetzt, bevor der Browser rendert — siehe Kommentar dort. Verhindert Aufblitzen und das Laden der Hintergrundgrafik. */ html[data-sektion] .startseite { display: none; } /* Breite 28 % wie im Bestand. Zusaetzlich nach der Hoehe gedeckelt: zwischen Logo-Oberkante (21 %) und Textanfang (48 %) liegen nur 27 % der Fensterhoehe. Auf sehr breiten, flachen Bildschirmen wuchs das Logo darueber hinaus und lief in den Text. 2.229 ist das Seitenverhaeltnis von logo.svg. */ .startseite__logo { position: fixed; top: 21%; left: 17%; z-index: 55; width: 28%; max-width: calc(24vh * 2.229); margin: 0; } .startseite__logo img { width: 100%; height: auto; } .startseite__text { position: fixed; top: 48%; left: 17%; z-index: 55; width: 28%; text-align: justify; } /* form.svg ist eine Flaeche in Papierfarbe mit ausgestanzter Form. Sie liegt UEBER der Hintergrundgrafik und laesst nur die Form durchscheinen — darum muss sie ueberbreit sein duerfen (max-width aus base.css aushebeln). */ .startseite__form { position: fixed; right: 0; z-index: 54; width: auto; max-width: none; height: 100%; pointer-events: none; } .startseite__grafik { position: fixed; inset: 0; overflow: hidden; } /* Beide Ebenen sind gekachelte Flaechen, deutlich groesser als das Fenster. Die bewegliche verschiebt sich um bis zu ein Viertel der Fensterbreite; die 35 Prozent Ueberstand auf jeder Seite koennen also nie aufgebraucht werden. Dadurch gibt es keine Kante mehr, egal wie breit der Bildschirm. */ .startseite__grafik-fest, .startseite__grafik-beweglich { position: absolute; inset: -35%; background-repeat: repeat; } /* Zwei verschiedene Ausschnitte derselben Textur — so faellt die Wiederholung der Kachel nicht ins Auge. */ .startseite__grafik-fest { z-index: 4; background-image: url("../media/bg-kachel-1.webp"); } .startseite__grafik-beweglich { z-index: 5; background-image: url("../media/bg-kachel-2.webp"); opacity: 0.7; will-change: transform; } /* --- Textsektionen -------------------------------------------------------- */ .panel--text { background-color: var(--farbe-papier); } .textblock--ausstellungen { padding: 5% 15% 9% 24%; } .textblock--biographie { padding: 9% 15% 10% 19%; text-align: justify; } /* Im Bestand ein
mit 20px und 5px Sperrung. */ .textblock__zwischentitel { margin-block: 46px 19px; font-size: 1.25rem; letter-spacing: 5px; } /* --- Ausstellungstabelle -------------------------------------------------- */ .ausstellungen { border-collapse: collapse; } .ausstellungen th, .ausstellungen td { color: var(--farbe-tinte); font-size: 1.0625rem; font-weight: 400; line-height: 1.5; text-align: left; } /* Jahreszahl fett mit 60px-Strich, der beim Ueberfahren mitwandert. */ .ausstellungen th { position: relative; display: block; padding-right: 80px; font-weight: 700; letter-spacing: 2px; } .ausstellungen th::before { content: ""; position: absolute; top: 50%; right: 14px; width: 60px; height: 2px; margin-top: -1px; background: var(--farbe-strich); transition: transform 0.8s var(--weich); } .ausstellungen td { transition: transform 0.8s var(--weich); } @media (hover: hover) { .ausstellungen tr:hover th::before, .ausstellungen tr:hover td { transform: translateX(20px); } } /* --- Biographie ----------------------------------------------------------- */ .textblock__spalten { padding-bottom: 20px; column-count: 2; column-gap: 25px; column-width: 200px; } .textblock__bild { width: 100%; height: auto; padding-block: 25px 50px; } .erinnerung { position: relative; display: inline-block; margin-bottom: 30px; padding: 10px 25px; background-color: var(--nav-ausstellung); } .erinnerung p { color: var(--farbe-weiss); letter-spacing: 0.8px; } /* Keine feste Breite: "PAUSE" ist mit 3 px Sperrung breiter als "PLAY" und lief aus dem Kasten. min-width haelt die Breite beim Umschalten stabil, damit der Knopf nicht springt. */ .erinnerung__knopf { position: absolute; top: 0; right: -104px; min-width: 94px; padding: 12px 14px; text-align: center; border: 0; background-color: var(--farbe-akzent); color: var(--farbe-weiss); cursor: pointer; font-family: var(--schrift); font-size: 0.9375rem; letter-spacing: 3px; text-transform: uppercase; transition: background-color var(--uebergang-kurz); } @media (hover: hover) { .erinnerung__knopf:hover { background-color: var(--farbe-hell); } } /* --- Pressearchiv --------------------------------------------------------- */ /* Bleibt der reine CSS-Slider ueber input[type=radio] wie im Bestand — funktioniert damit auch ohne JavaScript. presse.js ergaenzt nur die Zoomstufen. */ .panel--presse { overflow: hidden; } .presse { position: relative; height: 100%; background-color: var(--farbe-papier); } .presse__reiter { position: absolute; top: 0; left: 0; z-index: 900; width: 100%; background: var(--nav-ausstellung); } .presse__reiter label { display: inline-block; padding-inline: 1em; color: var(--farbe-weiss); cursor: pointer; font-size: 12px; letter-spacing: 2px; line-height: 4.25em; text-transform: uppercase; transition: background-color 0.7s; } @media (hover: hover) { .presse__reiter label:hover { background: var(--farbe-akzent); transition-duration: 0.3s; } } /* Nicht display:none — sonst waeren die Reiter nicht mehr per Tastatur erreichbar. Stattdessen unsichtbar, aber fokussierbar. */ .presse__wahl { position: absolute; width: 1px; height: 1px; opacity: 0; } .presse__wahl:focus-visible + .presse__blatt { outline: 2px solid var(--farbe-akzent); outline-offset: -4px; } /* content-visibility: hidden ist hier der entscheidende Hebel. Die Blaetter liegen bei left:100%, also nur eine Bildschirmbreite entfernt — das ist innerhalb der Lazy-Loading-Schwelle, weshalb der Browser sonst alle 15 Scans (2 MB) beim Oeffnen anfordert. Mit content-visibility rendert er die Inhalte nicht und laedt sie damit auch nicht. Das ausgeblendete Blatt liegt hinter dem einfahrenden (z-index 10 gegen 100), der Wechsel bleibt also unsichtbar. */ .presse__blatt { position: absolute; top: 0; left: 100%; z-index: 10; width: 100%; height: 100%; margin: 0; padding-block: 70px 50px; overflow: auto; content-visibility: hidden; background-color: var(--farbe-papier); text-align: center; transition: left 0s 0.75s; } .presse__wahl:checked + .presse__blatt { left: 0; z-index: 100; content-visibility: visible; transition: left 0.65s ease-out; } .presse__blatt img { width: auto; max-width: none; height: 100%; cursor: zoom-in; transition: height 1s; } .presse__blatt-bild--gezoomt { cursor: zoom-out; } .presse__blatt img[data-zoom="klein"].presse__blatt-bild--gezoomt { height: 110%; } .presse__blatt img[data-zoom="mittel"].presse__blatt-bild--gezoomt { height: 130%; } .presse__blatt img[data-zoom="gross"].presse__blatt-bild--gezoomt { height: 200%; } .presse__blatt figcaption { padding-top: 12px; color: var(--farbe-tinte); font-size: 13px; letter-spacing: 2px; } /* --- Impressum und Datenschutz -------------------------------------------- */ /* Innenabstaende exakt wie .kontakttext im Bestand — das rechte 44% erzeugt die schmale Spalte, die dort das Erscheinungsbild ausmacht. */ .textblock--impressum { padding: 5% 44% 10% 21%; text-align: justify; } .textblock--impressum h2 { margin-bottom: 0.6em; } /* Unterabschnitte auf der Groesse des frueheren

im Bestand. */ .textblock__untertitel { margin-block: 46px 6px; font-size: 1.25rem; letter-spacing: 5px; } .textblock--impressum p + p { margin-top: 1em; } .textblock__neuerteil { margin-top: 2.5em; } .impressum__kontakt { margin-top: 30px; } .impressum__kontakt a { display: inline-block; padding-right: 20px; } .impressum__kontakt img { width: auto; height: 35px; } .textlink { color: var(--farbe-tinte); text-decoration: underline; } .nowrap { white-space: nowrap; } /* --- Katalog -------------------------------------------------------------- */ /* Im Bestand waren .imgwrap und .kataloginfo in stylesheet.css zweimal definiert — die zweite Definition stand NACH der Media Query und hat sie ueberschrieben, weshalb der Infokasten auf dem Handy falsch sass. Hier sind Desktop- und Mobilzustand sauber getrennt. */ .panel--katalog { background-color: var(--farbe-papier); } .katalog__bilder { position: absolute; right: 150px; width: 500px; } .katalog__bilder img { width: 100%; height: auto; padding-right: 30px; padding-bottom: 30px; } .katalog__bilder img:last-child { padding-bottom: 0; } .katalog__info { position: fixed; bottom: 100px; left: 180px; filter: grayscale(100%); } .katalog__info p { text-align: left; } .katalog__preis { margin-top: 1.5em; } .katalog__info form { margin-top: 1.5em; } .katalog__info input[type="image"] { cursor: pointer; } @media (max-width: 1024px) { /* Blocksatz nur am Desktop: in schmalen Spalten reisst er zu stark auf. */ .startseite__text, .textblock--biographie { text-align: left; } .katalog__bilder { position: relative; right: auto; width: 100%; padding-bottom: 60%; } .katalog__bilder img { padding-right: 0; padding-bottom: 30px; } .katalog__info { position: fixed; right: var(--nav-abstand); bottom: var(--nav-abstand); left: var(--nav-abstand); padding: 8%; background: rgb(232 232 232 / 0.92); pointer-events: none; } .katalog__info form { pointer-events: auto; } /* Reiterleiste links wie im Bestand, aber schmaler und scrollbar, damit alle 15 Blaetter erreichbar bleiben. */ .presse__reiter { right: auto; bottom: 0; width: 116px; overflow-y: auto; } .presse__reiter label { display: block; border-bottom: 2px solid var(--farbe-tinte); font-size: 14px; line-height: 3; text-align: center; } .presse__blatt { padding: 12px 12px 12px 128px; text-align: left; } .presse__blatt img { width: 100%; height: auto; } .presse__blatt img[data-zoom].presse__blatt-bild--gezoomt { width: 200%; max-width: none; height: auto; } } /* Auf Telefonbreite frisst die linke Reiterspalte zu viel — vom Zeitungsartikel blieben rund 215px. Deshalb hier eine waagerecht scrollbare Leiste oben, der Scan bekommt die volle Breite. */ @media (max-width: 640px) { .presse__reiter { right: 0; bottom: auto; display: flex; width: auto; padding-right: 84px; /* Platz fuer den Burger */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .presse__reiter label { flex: 0 0 auto; border-right: 2px solid var(--farbe-tinte); border-bottom: 0; font-size: 13px; line-height: 3.4; white-space: nowrap; } .presse__blatt { padding: 58px 12px 12px; text-align: center; } .textblock--ausstellungen, .textblock--biographie, .textblock--impressum { padding: 12% 8% 20%; } .textblock--impressum { text-align: left; } .impressum__kontakt img { height: 56px; } .textblock__spalten { column-count: 1; } .erinnerung__knopf { position: relative; right: auto; margin-top: 12px; } .ausstellungen th { padding-right: 60px; } .ausstellungen th::before { width: 40px; } .startseite { position: relative; z-index: 55; overflow: auto; height: 100%; } /* Volle Breite. Vorher standen hier width:70% und 15% Innenabstand — mit border-box blieben davon nur 40 Prozent Textbreite uebrig, also drei bis vier Woerter pro Zeile. Der Abstand oben haelt das Logo unter dem Burger (24 + 64 px). */ .startseite__logo { position: relative; top: 0; left: 0; width: 100%; max-width: none; padding: 108px 7% 0; } .startseite__text { position: relative; top: 0; left: 0; width: 100%; padding: 7% 7% 18%; } .startseite__form, .startseite__grafik { display: none; } }