/* exhibition-single.css – Detailseite einer Ausstellung (single-exhibition.php). ALLE ZAHLEN HIER SIND AM ENTWURF ABGEMESSEN, NICHT GESCHÄTZT ------------------------------------------------------------ Figma „Ausstellung-Detailseite", Knoten 39:241, Rahmen 1920 breit. Die Knotennummer steht jeweils daneben. Die erste Fassung dieser Datei war aus einer Textbeschreibung gebaut und lag in sechs Punkten daneben (Spalten- breite, Besuchskasten, Pfeile, Kachelbreite, Öffnungszeiten-Zeile, Videobreite) — deshalb steht hier jetzt die Messung und nicht die Absicht. DIE INHALTSSPALTE IST 1196, ALSO --container UND NICHT --container-wide ---------------------------------------------------------------------- Der Inhalt läuft von x360 bis x1556 (Bühnenbild 43:475, Videorahmen 40:353, Kachelreihe 39:322, Besuchskasten 39:332 — alle vier fangen bei 360 an). Das sind 1196px, also die 1200er-Spalte aus base.css und NICHT die 1470er der Startseite. Diese Seite braucht deshalb keinen eigenen Container: sie bleibt in `.site-main`, wie Objekt- und Künstlerseite. SCHRIFT (Raleway, Achse 300–700 liegt im Theme) ---------------------------------------------- Sperrung ist überall 0,04em — im Entwurf 1.36px auf 34px, 1.04px auf 26px, 0.96px auf 24px, 0.8px auf 20px, 0.72px auf 18px. Ein Wert, fünf Größen. Titel 34 / 500 / #1c1c1c (39:315) Laufzeit 24 / 400 / #1c1c1c (39:316) Abschnitt 26 / 500 / #1c1c1c (39:320, 40:351, 39:333) Spaltentitel 20 / 600 / #1c1c1c (39:338, 39:345, 39:339) Fliesstext 18 / 400 / #000, Zeilenhöhe 28 (39:318) Besuchsangaben 18 / 300–500 / #000, Zeilenhöhe 25 (39:341..346) Beachte: der Fliesstext und die Besuchsangaben stehen auf #000, nicht auf --text (#6d6d6d). Nur diese Seite tut das; der Entwurf setzt es so. */ /* --- Rahmen --------------------------------------------------------------- base.css gibt `.site-main` 30px oben. Der Entwurf setzt 64px zwischen dem Titelbalken (endet y162) und dem Bühnenbild (y226). */ .site-main--exhibition { padding-top: 64px; padding-bottom: 60px; } /* --- Bühnenbild (43:475: x360 y226, 1189 x 637) --------------------------- Das Beitragsbild, im Post-Type „Bühnenbild" genannt. Es füllt die Inhaltsspalte, und sein Seitenverhältnis ist das des Entwurfs — 1189:637, also 1,87:1. `aspect-ratio` am Container plus `object-fit: cover` und nicht `max-height`: so ist die Höhe eine Rechnung aus der Breite und ein hochkant hochgeladenes Bühnenbild kann die Seite nicht auseinanderschieben. Derselbe Aufbau wie `.achilles-card__media` in grid.css, und aus demselben Grund wie bei den Impressionen weiter unten. */ .exhibition-hero { margin: 0 0 81px; } .exhibition-hero img { display: block; width: 100%; aspect-ratio: 1189 / 637; object-fit: cover; background: var(--title-bg); } /* --- Kopf: Laufzeit und Titel (39:316, 39:315) --------------------------- */ .exhibition-single__header { margin-bottom: 36px; } /* y944 bis y972, dann 22px Abstand auf den Titel. */ .exhibition-single__dates { margin: 0 0 22px; color: #000; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.4px; line-height: 1.2; } /* 34px, nicht die 46px der Startseiten-Bühne: das hier ist eine Unterseite. */ .exhibition-single__title { margin: 0; color: #000; font-size: 1.75rem; font-weight: 400; letter-spacing: 0.4px; line-height: 1.2; } /* --- Beschreibungstext (39:318: x360 y1070, Breite 834) ------------------ 834px und nicht die ganzen 1196: bei 18px sind das rund 85 Zeichen je Zeile, und die Spalte daneben bleibt bewusst leer. */ .exhibition-single__text { max-width: 834px; margin-bottom: 80px; color: #000; font-size: 16px; font-weight: 400; letter-spacing: 0.4px; line-height: 1.5; } .exhibition-single__text > :first-child { margin-top: 0; } .exhibition-single__text > :last-child { margin-bottom: 0; } /* --- Abschnittsüberschriften (39:320, 40:351) --------------------------- 44px auf den Inhalt darunter, an beiden Abschnitten gleich gemessen: Überschrift y1622 + 31 -> Video y1697, Überschrift y2385 + 31 -> Kacheln y2460. */ .exhibition-section__title { margin: 0 0 44px; color: #000; font-size: 1.3rem; font-weight: 400; letter-spacing: 0.4px; line-height: 1.2; } /* --- Video (40:353: x359 y1697, 1187 x 605) ----------------------------- */ .exhibition-video { margin-bottom: 83px; } /* Volle Spaltenbreite, wie im Entwurf. Das Verhältnis ist hier 16:9 und nicht die gemessenen 1187:605 (1,96:1). Der Entwurf zeigt an dieser Stelle ein Standbild in seinem eigenen Format; was hier wirklich landet, ist eine oEmbed-Einbettung, und die liefert 16:9. Ein 1,96:1-Kasten würde sie oben und unten mit schwarzen Balken versehen. */ .exhibition-video__frame { position: relative; aspect-ratio: 16 / 9; background: #000; } .exhibition-video__frame iframe, .exhibition-video__frame object, .exhibition-video__frame embed, .exhibition-video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Kommt der Anbieter nicht zustande (unbekannter Dienst, oder die Umgebung hängt nicht am Netz), steht hier der nackte Verweis. */ .exhibition-video__fallback { margin: 0; color: #000; font-size: 18px; font-weight: 400; letter-spacing: 0.04em; word-break: break-all; } /* --- Karussell (39:321) ------------------------------------------------- GEMESSEN: drei Kacheln von 387/378/387 x 379 mit 22px Abstand, zusammen genau die 1196 der Inhaltsspalte. Die Pfeile stehen daneben, 19px breit und 36px hoch, mit 50px Luft zur ersten und letzten Kachel (39:326 bei x291, 39:328 bei x1606) — und damit im Entwurf ausserhalb der Inhaltsspalte. ZWEI BEWUSSTE ABWEICHUNGEN 1. Die Pfeile stehen INNERHALB der Spalte. Im Entwurf ragt der Pfeilkorridor 69px links und rechts heraus; herausgezogen bräuchte er einen negativen Rand, der auf schmalen Fenstern eine waagerechte Bildlaufleiste erzeugt. Die Kachelbahn wird dadurch schmaler, die Anordnung bleibt dieselbe. 2. Die Kachelbreite ist ein Drittel der Bahn und keine festen 384px. So stehen immer genau drei Kacheln da — bei 1160er Spalte sind das 326px statt 387px, aber drei ganze statt zwei und einem Rest. Die Aussage des Entwurfs ist „drei nebeneinander", nicht „387 Pixel". */ .exhibition-pieces { margin-bottom: 111px; } .exhibition-carousel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 50px; } /* Die Bahn ist auch ohne JavaScript vollständig bedienbar: sie scrollt waagerecht, rastet auf Kachelanfänge ein und ist per `tabindex` mit der Tastatur erreichbar. assets/js/exhibition.js schaltet nur die Pfeile ein. Kein `padding-bottom` für die Bildlaufleiste: `scrollbar-width: none` nimmt sie weg, weil die Pfeile und das Wischen dieselbe Aufgabe erfüllen und ein Balken quer unter drei Kacheln im Entwurf nicht vorkommt. */ .exhibition-carousel__track { display: flex; gap: 22px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; } .exhibition-carousel__track::-webkit-scrollbar { display: none; } /* Drei Kacheln plus zwei Abstände von 22px füllen die Bahn genau. `min-width: 0` ist hier PFLICHT und keine Vorsichtsmassnahme. Ein Flex-Element hat von sich aus `min-width: auto`, darf also nicht schmaler werden als seine Mindestinhaltsbreite — und die kommt bei einem Bild, dessen Datei fehlt, aus dessen geratenen Eigenmaßen. Gemessen am 2026-08-25: die Kachel wurde 3.000px breit statt 326px und riss über `align-items: stretch` auch alle anderen auf 3.000px Höhe. Die frühere Fassung hatte das Problem auch, nur verdeckt — sie setzte `width: 280px` und damit gab es nichts zu berechnen. Mit einer prozentualen Basis gewinnt ohne diese Zeile der Inhalt. */ .exhibition-carousel__item { flex: 0 0 calc((100% - 44px) / 3); min-width: 0; scroll-snap-align: start; } /* 387 x 379 im Entwurf, also praktisch quadratisch (Abweichung 2%) — und damit derselbe Zuschnitt `portfolio-square`, den das Raster schon benutzt. */ .exhibition-impression, .exhibition-carousel__item .achilles-card__media { aspect-ratio: 1 / 1; } /* Impressionen: dieselbe Fläche wie die Objektkachel, aber ohne Beschriftung und ohne Verweis. DAS SEITENVERHÄLTNIS GEHÖRT AN DIE FIGUR UND NICHT AN DAS BILD Genau derselbe Aufbau wie `.achilles-card__media` in grid.css, und aus demselben Grund. Mit `aspect-ratio` am hängt die Höhe an dessen Eigenmaßen — und die kennt der Browser bei einem Bild, das 404 liefert, nicht. Gemessen am 2026-08-25: eine Impression, deren Datei fehlt, wurde 1.500px hoch statt quadratisch, und weil die Kacheln Flex-Geschwister sind, zog sie die ganze Zeile mit sich. Am Container ist die Höhe eine Rechnung aus der Breite, ob die Datei ankommt oder nicht. Das ist kein Kunstfehler der Testumgebung: eine verschobene Impression würde die Zeile auf der echten Seite genauso zerreissen. */ .exhibition-impression { position: relative; margin: 0; overflow: hidden; background: var(--title-bg); } .exhibition-impression img { display: block; width: 100%; height: 100%; object-fit: cover; } /* --- Pfeile (39:326, 39:328) ------------------------------------------- Roter Chevron ohne Fläche, 19 breit und 36 hoch. Der Entwurf exportiert ihn als 36x19-SVG mit `fill="#A31214"`, also --brand-red, und dreht ihn um 90°. Genau diese Glyphe liegt schon im Theme: `chevron-up` in inc/template-tags.php ist derselbe Pfad in 25x13 — der Export des Entwurfs, nur gleichmässig skaliert und an der y-Achse gespiegelt, wie es der Kommentar dort beschreibt. Deshalb kein fünftes Icon, sondern dieses in der im Entwurf gezeichneten Größe: Aussenkasten 19x36, Glyphe 36x19, gedreht. */ .exhibition-carousel__nav { display: flex; align-items: center; justify-content: center; width: 19px; height: 36px; padding: 0; border: 0; background: none; color: var(--brand-red); cursor: pointer; transition: color 0.15s ease-out; } /* Nötig, weil die Klasse `display: flex` setzt: ohne diese Regel wäre das `hidden`-Attribut wirkungslos, und die Pfeile stünden auch dann da, wenn das Skript sie nie eingeschaltet hat. */ .exhibition-carousel__nav[hidden] { display: none; } /* Die Glyphe ist 36 breit und 19 hoch und wird gedreht — dadurch füllt sie den 19x36 hohen Kasten. `flex: none`, damit die Drehung nicht mit der Flexbox-Ausrichtung rechnet. */ .exhibition-carousel__nav .achilles-icon { flex: none; width: 36px; height: 19px; } /* `chevron-up` zeigt nach oben, und rotate() dreht im Uhrzeigersinn: +90deg zeigt nach RECHTS, -90deg nach links. Die beiden standen zuerst vertauscht, und das faellt erst im Bild auf — der linke Pfeil zeigte nach rechts. Eine Messung der Kastengroesse haette es nie gefunden. */ .exhibition-carousel__nav--prev .achilles-icon { transform: rotate(-90deg); } .exhibition-carousel__nav--next .achilles-icon { transform: rotate(90deg); } .exhibition-carousel__nav:hover, .exhibition-carousel__nav:focus-visible { color: var(--cta-gold); } .exhibition-carousel__nav:disabled { color: #c9c9c9; cursor: default; } /* --- Besuchskasten (39:332: x360 y2950, 1196 x 318) -------------------- Ein Kasten INNERHALB der Inhaltsspalte, kein Band über die ganze Breite: der Entwurf setzt ihn auf genau die 1196 der Spalte. Fläche #ebebeb — nicht --title-bg (#f4f4f4), das ist der hellere Ton des Titelbalkens. Innenabstände gemessen: 54 links (x360 -> Titel x414), 49 oben (y2950 -> y2999), 68 unten (Angaben enden y3200, Kasten y3268). */ .exhibition-visit { margin-bottom: 60px; padding: 49px 54px 68px; background: #ebebeb; } .exhibition-visit__title { margin: 0 0 50px; color: #1c1c1c; font-size: 26px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.2; } /* DIE DREI SPALTEN SIND UNGLEICH BREIT, UND DAS IST KEINE KOSMETIK Gemessen: 499 / 335 / 254 (Spaltenanfänge x414, x913, x1248 bei einer Innenbreite von 1088). Gleich breite Drittel waren der erste Versuch und sind daran gescheitert, dass „Dienstag – Samstag 11.00 – 18.00 Uhr" zusammen 349px braucht: in einem 318px-Drittel bricht die Zeile um, und genau diese Zeile soll laut Entwurf NICHT umbrechen. Die erste Spalte braucht die Breite also wirklich. Flexbox und kein Raster, damit die Verhältnisse als `flex-grow` stehen können (1,5 : 1 : 0,8 ≈ 499 : 335 : 254) und trotzdem jede Spalte für sich fehlen darf: die übrigen füllen die Zeile dann auf, statt eine Lücke zu lassen. `flex-basis: 240px` ist die Umbruchgrenze für schmale Fenster. */ .exhibition-visit__columns { display: flex; flex-wrap: wrap; gap: 32px 48px; } /* `flex-basis: 0` und die Breite ausschliesslich über `flex-grow`: mit einer Basis von 240px verteilt Flexbox nur den REST, und die gemessenen Verhältnisse kämen kaum an (erster Versuch: 347 / 312 / 297 statt 434 / 290 / 232). Der Umbruch auf schmalen Fenstern hängt dann an `min-width`, nicht an der Basis — und die erste Spalte bekommt die 360px, die „Dienstag – Samstag 11.00 – 18.00 Uhr" in einer Zeile braucht. */ .exhibition-visit__column { flex: 1 1 0; /* `min()` und keine feste Zahl: eine harte `min-width: 200px` in einer 295px breiten Spalte auf dem Telefon schob die Seite um 25px über den Bildschirmrand hinaus — gemessen bei 375px. */ min-width: min(100%, 200px); } .exhibition-visit__column--zeiten { flex-grow: 1.5; min-width: min(100%, 360px); } /* Die 254px des Entwurfs sind hier eine Mindestbreite und keine Zierde: die Schaltflaeche ist 235px breit (je 38px Innenabstand um „MEHR ERFAHREN"), und in der ausgerechneten 232px-Spalte brach ihre Beschriftung auf zwei Zeilen um — 67px hoch statt 58px. */ .exhibition-visit__column--info { flex-grow: 0.8; min-width: min(100%, 254px); } .exhibition-visit__label { margin: 0 0 32px; color: #1c1c1c; font-size: 20px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2; } /* „Dienstag – Samstag" und „11.00 – 18.00 Uhr" stehen im Entwurf NEBEN- einander (beide y3135, x414 und x628), nicht untereinander. `wrap`, damit sie auf dem Telefon umbrechen dürfen. */ .exhibition-visit__hours { display: flex; flex-wrap: wrap; gap: 4px 28px; } .exhibition-visit__line, .exhibition-visit__address, .exhibition-visit__note { margin: 0; color: #000; font-size: 18px; letter-spacing: 0.04em; line-height: 25px; } /* Die drei Angaben tragen im Entwurf verschiedene Schnitte, und das ist Absicht: der Wochentagsbereich und die Notiz stehen in Medium, die Uhrzeit und die Adresse in Light. */ .exhibition-visit__line--days, .exhibition-visit__note { font-weight: 500; } .exhibition-visit__line--hours, .exhibition-visit__address { font-weight: 300; } /* y3135 + 19 -> y3175. Die Notiz ist NICHT kleiner, nicht grau und nicht kursiv — sie steht in denselben 18px wie die Zeile darüber. */ .exhibition-visit__note { margin-top: 21px; } /* Die Schaltfläche sitzt im Entwurf auf der Höhe der ANGABEN (y3135) und nicht direkt unter ihrem Spaltentitel — dieselbe Grundlinie wie die Öffnungszeiten und die Adresse. Die 235x58 der Schaltfläche stimmen mit `.achilles-button` aus forms.css bereits überein. */ .exhibition-visit__cta { margin-top: 0; } /* --- Enger -------------------------------------------------------------- */ @media only screen and (max-width: 1000px) { .site-main--exhibition { padding-top: 36px; } .exhibition-hero { margin-bottom: 48px; } .exhibition-single__title { font-size: 28px; } .exhibition-single__dates { font-size: 20px; } .exhibition-single__text { margin-bottom: 56px; } .exhibition-video { margin-bottom: 56px; } .exhibition-pieces { margin-bottom: 56px; } .exhibition-section__title { margin-bottom: 28px; } /* Zwei Kacheln statt drei: bei drei bliebe unter 1000px je Kachel weniger als 300px, und eine Objektkachel trägt darunter eine Beschriftung. */ .exhibition-carousel { gap: 24px; } .exhibition-carousel__item { flex-basis: calc((100% - 22px) / 2); } .exhibition-visit { padding: 36px 32px 40px; } .exhibition-visit__title { margin-bottom: 32px; } } @media only screen and (max-width: 780px) { .exhibition-single__title { font-size: 26px; } .exhibition-section__title, .exhibition-visit__title { font-size: 22px; } .exhibition-visit__label { font-size: 18px; margin-bottom: 20px; } } @media only screen and (max-width: 566px) { /* Die Pfeile entfallen: auf dem Telefon wischt man, und zwei Ziele links und rechts nehmen der Bahn ein Drittel ihrer Breite. Die Bahn bleibt scrollbar, es geht also nichts verloren. */ .exhibition-carousel { grid-template-columns: minmax(0, 1fr); gap: 0; } .exhibition-carousel__nav { display: none; } /* Eine Kachel und ein Streifen der nächsten: der angeschnittene Rand ist der Hinweis, dass es weitergeht. */ .exhibition-carousel__item { flex-basis: 78%; } .exhibition-single__title { font-size: 24px; } .exhibition-single__text, .exhibition-visit__line, .exhibition-visit__address, .exhibition-visit__note { font-size: 16px; } .exhibition-visit { padding: 28px 20px 32px; } } /* Wer Bewegung abbestellt hat, bekommt den Sprung ohne Fahrt. Das Skript setzt `behavior` zusätzlich selbst, weil `scroll-behavior` von einem scrollTo({behavior:'smooth'}) überstimmt wird. */ @media (prefers-reduced-motion: reduce) { .exhibition-carousel__track { scroll-behavior: auto; } .exhibition-carousel__nav { transition: none; } }