/* Reset */ *, *::before, *::after{box-sizing:border-box;} /* a{text-decoration:none; color:inherit; cursor:pointer;} */ button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;} body, figure, th {margin:0;padding:0;} input::-moz-focus-inner {border:0; padding:0; margin:0;} ul, ol, dd, dl, th {margin:0; padding:0; list-style:none;} h1, h2, h3, h4, h5, h6 {margin:0; font-size:inherit; font-weight:inherit;} /* Lange Wörter (z. B. "Arbeiter:innenklassenpoetik" bei 28 px auf einem 320-px-Viewport = ca. 334 px bei 280 px verfügbarer Breite) sollen umbrechen bzw. trennen statt zu horizontalem Scrollen oder abgeschnit- tenem Text zu führen (WCAG 1.4.10 Reflow). Nur Notumbruch ohne Trennstrich: ein Wort bricht erst dann mitten im Wort um, wenn es nicht in die Zeile passt (bewusst kein hyphens: auto, siehe Git-Historie). */ h1, h2, h3, h4, .text, .card-title, .card-title--bold, .buttons__label, .beschreibungsliste__zeile, .accordion__label, .button { overflow-wrap: anywhere; } p{margin:0;} cite {font-style:normal;} th {font-weight:normal;} td, th {vertical-align: top; text-align: left;} fieldset{border-width:0; padding:0; margin:0;} table {-webkit-border-horizontal-spacing: 0;-webkit-border-vertical-spacing: 0;} table {width: 100%;} img {max-width: 100%;height: auto;display: block;} /* Reset für ein
(z. B. aus Redaktionstext): kein Block "Linie" mehr im Blocksystem (bis 2026-09-21 Kirby-Standardblock "line", siehe Git-Historie), frühere Trennlinien-Divs (.linien-block) sind einem doppelten Überschriften-Abstand gewichen, siehe .heading--sektion weiter unten. margin: 0: der Abstand kommt komplett vom umgebenden row-gap (.grid/.stack). Ersetzt die Browser-Default-Optik (3D-Rahmen, eigene Höhe) durch eine einzelne 1px-Linie in --color-quaternary. */ hr { height: 0; margin: 0; border: none; border-top: 1px solid var(--color-quaternary); } /* Zentrale Link-Basis: --color-secondary + Unterstreichung, die schon im Default State sichtbar ist (nicht erst bei Hover) – gilt für JEDEN Link, der keine eigene, ausdrücklich abweichende Regel hat. Bewusste Ausnahmen: .card__link (eigene Farbe --color-primary UND ganz ohne Unterstreichung im Default State, damit Kartentitel wie eine Überschrift statt wie ein gewöhnlicher Link wirken – bei Hover trotzdem durchgezogen unterstrichen, siehe dort), .button (eigenständige Komponente mit eigener Deklaration) und .site-title (keine Unterstreichung). Einheitlich für Navbar, Footer, Breadcrumbs, Textblöcke, Sitemap usw. – ersetzt die früher in .desktop-nav a, .footer-menu a, .mobile-overlay ul a und .breadcrumb a jeweils einzeln wiederholten, identischen Deklarationen. Alle Unterstreichungen der Website sind gepunktet (dotted, bis 2026-10-12 gestrichelt) und in der Farbe des jeweiligen Texts (currentColor), in jedem Zustand – einzige Ausnahme ist die Hauptnavigation (durchgezogen, siehe .desktop-nav a). text-decoration-style steht NACH dem Shorthand, der ihn sonst auf solid zurücksetzt (dasselbe gilt für .button weiter unten). */ a { color: var(--color-secondary); text-decoration: underline; text-decoration-style: dotted; text-decoration-color: currentColor; text-underline-offset: 0.3em; transition: color 150ms ease, text-decoration-color 150ms ease; } a:hover { color: var(--color-primary); } /* Unterstreichung von Links in Fließtext, Breadcrumb, Beschreibungsliste- Links [Downloads, Videolink, Bildcredit in Galerie/Video], Bildunterschrift/-credit und der Festivalmitwirkung-Zeile: in der Textfarbe des Links (bis 2026-10-12 fest --color-secondary), immer exakt 1px dünn (text-decoration-thickness statt Browser-Default "auto", das sonst mit der Schriftgröße/-art skaliert). Bei Hover verschwindet sie per Farb-Transition (text-decoration-color, siehe transition beim zentralen "a" oben) – EINE Regel statt einzelner, identischer Deklarationen an jeder Stelle. .beschreibungsliste__zeile a statt nur der spezifischeren .beschreibungsliste--downloads a: deckt dieselbe Optik einheitlich auch für andere über dieses Snippet gerenderte Links ab (z. B. "Videolink" auf der Video-Detailseite). .card__link/.accordion__label bewusst NICHT hier gelistet: die haben im Default State keine Unterstreichung (siehe dort), bei Hover erscheint sie in der Textfarbe (Regel weiter unten). .button--tertiary bewusst NICHT hier gelistet: .button setzt weiter unten text-decoration: underline (Shorthand, setzt Farbe/Stärke zurück) – bei gleicher Spezifität gewinnt in der Kaskade die spätere Regel, hier also .button. .button--tertiary bekommt dieselbe Optik daher direkt in seiner eigenen, später stehenden Regel (siehe dort). */ .text a, .breadcrumb a, .beschreibungsliste__zeile a, .caption-text a, .caption-credit a { text-decoration-color: currentColor; text-decoration-thickness: 1px; } .text a:hover, .breadcrumb a:hover, .beschreibungsliste__zeile a:hover, .caption-text a:hover, .caption-credit a:hover { text-decoration-color: transparent; } /* Die Textfarbe dieser Links bleibt bei Hover unverändert (statt des --color-primary vom zentralen "a:hover" oben): nur die Unterstreichung verschwindet. .text a/.beschreibungsliste__zeile a/.button--tertiary erben ihre Farbe ohnehin auch bei Hover (siehe dort). */ .breadcrumb a:hover, .caption-text a:hover, .caption-credit a:hover { color: var(--color-secondary); } /* Links im Fließtext (.text) sowie in Beschreibungslisten (Block Beschreibungsliste, Downloads, Eckdaten – alle über .beschreibungsliste__zeile) haben keine eigene Farbe: sie erben die Textfarbe des umgebenden Texts (statt der --color-secondary des zentralen "a" oben) und unterscheiden sich davon nur durch die Unterstreichung. Tertiary-Buttons ebenso, siehe .button--tertiary weiter unten. Steht nach dem zentralen "a"/"a:hover" (gleiche Spezifität), gilt daher auch bei Hover. */ .text a, .beschreibungsliste__zeile a { color: inherit; } /* .card__link/.accordion__label: Unterstreichung im Default State unsichtbar (siehe dort, text-decoration-color: transparent statt text-decoration-line: none) – bei Hover blendet sie sich per Farb-Transition sanft ein statt abrupt zu erscheinen, dieselbe Technik wie der Farbwechsel beim zentralen "a" oben (text-decoration-line selbst lässt sich nicht transitionieren, text-decoration-color als Farbwert dagegen schon). .programm-card:hover .card__link zusätzlich gelistet: der "Stretched Link" macht die ganze Programmpunkt-Card klickbar (siehe .card__link::after weiter unten), der Hover-Zustand soll daher schon greifen, sobald irgendwo auf der Card gehovert wird, nicht erst bei direktem Hover über dem (optisch kleinen) Titeltext selbst. */ .card__link:hover, .programm-card:hover .card__link, .accordion__summary:hover .accordion__label { text-decoration-color: currentColor; } /* Basis-Optik für alle Icons (siehe snippets/icon.php, assets/js/site.js linkIconName()) – Inline-SVG statt der früheren Icon-Font (siehe Git-Historie), diese Regel übernimmt deren Rolle: inline-block wie zuvor die Icon-Font-Basis, width/height "1em" lässt das Icon wie ein Schriftzeichen mit der jeweiligen font-size mitskalieren (dasselbe Verhalten wie zuvor) – vorausgesetzt, die font-size an der jeweiligen Einsatzstelle stimmt tatsächlich mit dem danebenstehenden Text überein (reine Vererbung reicht dafür nicht immer, siehe z. B. .accordion__icon weiter unten, wo Icon und Titel Geschwister statt verschachtelt sind). Die stroke-Farbe kommt direkt aus dem SVG-Markup selbst (stroke= "currentColor", siehe icon.php) und folgt damit automatisch der geerbten Textfarbe, ganz ohne eigene color-Regel hier. vertical-align: text-bottom statt des Inline-Default "baseline" (bis 2026-09-2X "middle", zwischenzeitlich "text-top", siehe Git-Historie) – ein inline-block sitzt sonst mit seiner UNTERKANTE auf der Textgrundlinie, wodurch das Icon sichtbar zu hoch wirkt (die Oberkante ragt um die volle Icon-Höhe über die Grundlinie hinaus); "text-bottom" richtet die Icon-Unterkante stattdessen an der Unterkante des umgebenden Texts aus. */ .icon { display: inline-block; width: 0.9em; height: 0.9em; /* Seit 2026-10-19 etwas kleiner und mit festem Versatz unter die Grundlinie statt text-bottom: optisch mittiger zum Text. */ vertical-align: -0.1em; } /* Icon NACH bzw. VOR dem Text (Anker-, externe und Download-Links, siehe assets/js/site.js linkIconName()): einheitlich --space-xxs Abstand zum Text, je Icon-Art über einen eigenen Modifier (siehe .link-icon--anker, --external-link, --download unten). */ /* external-link (siehe .link-icon--external-link weiter unten) braucht einen eigenen Abstand: seine Glyphe (.import/Icons SVG/ external-link.svg) hat links kaum Leerraum innerhalb der 24x24-Box, ohne margin-left wirkt es, als klebe es am Text. */ .link-icon--external-link { margin-left: var(--space-xxs); } /* Sprunglinks (Pfeil ↓/↑ nach dem Text, siehe assets/js/site.js linkIconName(): Inhaltsverzeichnis, "Zum Inhalt", Anker im Buttons- Block) – derselbe Abstand zum Text wie bei externen Links und Downloads (seit 2026-10-14, vorher ohne Abstand). */ .link-icon--anker { margin-left: var(--space-xxs); } /* Letztes Wort + nachgestelltes Icon als untrennbare Einheit (siehe assets/js/site.js iconAnLetztesWort(), seit 2026-10-19): der Link bricht weiterhin normal um, das Icon rutscht aber nie allein in die nächste Zeile. */ .link-icon-gruppe { white-space: nowrap; } /* Download-Icon steht als einziges VOR dem Label statt danach (siehe assets/js/site.js, dort insertAdjacentHTML "afterbegin" nur für iconName "download"). margin-right statt padding: padding würde bei globalem box-sizing: border-box (siehe *-Regel oben) den Content-Box- Anteil und damit die sichtbare Icon-Größe verkleinern, exakt der Bug, den margin hier vermeidet. */ .link-icon--download { margin-right: var(--space-xxs); } /* Die Unterstreichung des Links (siehe z. B. .beschreibungsliste__zeile a) soll beim Download-Icon nicht auch durch die Lücke zwischen Icon und Label laufen – ein margin-Abstand liegt außerhalb jeder Kind-Box und lässt sich nicht gezielt von der Linie ausnehmen. Stattdessen zeichnet nicht mehr das selbst die Linie, sondern nur noch der Label-Wrapper um den reinen Text (siehe assets/js/site.js, wickelt dafür den ursprünglichen Linktext in ein ). text-decoration-*: inherit am Label übernimmt Farbe/Strichart/Stärke dynamisch von der jeweils geltenden a-Regel (z. B. secondary, bei Hover transparent bei .beschreibungsliste__zeile a), ohne sie hier zu duplizieren. */ a:has(> .link-icon--download) { text-decoration-line: none; } a:has(> .link-icon--download) .link-label { text-decoration-line: underline; text-decoration-color: inherit; text-decoration-style: inherit; text-decoration-thickness: inherit; transition: text-decoration-color 150ms ease; } /* Einheitlicher, projektweiter Fokusring (WCAG 2.4.7 Focus Visible) – EINE Regel statt der früher sechs einzelnen, fast identischen :focus-visible-Regeln pro Komponente (Navbar, Buttons, Cards, Galerie- Trigger, Lightbox-Buttons, Select), gilt automatisch für jedes fokussierbare Element. Eigene Farbe (--color-focus, siehe :root) statt outline-style: auto, damit der Ring browser- übergreifend identisch aussieht statt je nach Browser leicht unterschiedlich blau zu sein. */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Fokusring am umgebenden Container statt am (per Stretched Link/ position: absolute) bündig sitzenden Link: overflow: hidden schneidet nur Nachfahren eines Elements ab, NICHT dessen eigenen Outline – der Ring liegt hier daher vollständig sichtbar um die ganze Card bzw. das ganze Video-Cover (bis 2026-09-2X saß er am Link selbst und wurde von overflow: hidden abgeschnitten, WCAG 2.4.7/2.4.11, siehe Git- Historie). */ .card:has(.card__link:focus-visible), .programm-card:has(.card__link:focus-visible), .video-cover:has(.video-cover__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; } .card__link:focus-visible, .video-cover__link:focus-visible { outline: none; } /* Skip-Link (siehe snippets/header.php): für Maus-Nutzer:innen unsichtbar, bei Tastaturfokus über der sticky Navbar eingeblendet (WCAG 2.4.1). */ .skip-link { position: absolute; top: 0; left: 0; z-index: 2000; padding: var(--space-xs) var(--space-sm); background-color: var(--color-background); color: var(--color-primary); transform: translateY(-100%); } .skip-link:focus { transform: translateY(0); } /* Sprungziel des Skip-Links: programmatisch fokussierbar (tabindex="-1"), aber kein interaktives Element – kein Ring um den gesamten Inhalt. */ main:focus { outline: none; } /* Nur für Screenreader lesbar, optisch verborgen (z. B. Positionsansage der Lightbox). */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lightbox und Menü-Overlay setzen beim Öffnen den Fokus auf ihren Schließen-Button (siehe assets/js/site.js). Seit 2026-10-19 ohne erzwungenen Fokusring: der Browser zeigt ihn über :focus-visible (siehe oben) bei Tastaturbedienung, nach Maus-/Touch-Bedienung nicht (WCAG 2.4.7 verlangt die Sichtbarkeit nur bei Tastaturbedienung). */ /* WCAG 2.4.11 Focus Not Obscured (Minimum, neu in WCAG 2.2): Ein fokussiertes Element darf nicht vollständig hinter eigenen Inhalten verschwinden – hier relevant wegen der sticky Navbar (siehe .site-header, position: sticky, ~46px hoch auf Desktop). Browser scrollen ein per Tab fokussiertes Element automatisch in den sichtbaren Bereich, wissen aber nichts von der per CSS überlagernden Navbar – ohne scroll-margin-top gilt ein Element bereits als "sichtbar genug", sobald es geometrisch im Viewport liegt, auch wenn die Navbar optisch darüberliegt (live nachgewiesen: elementFromPoint traf dort auf .navbar-bar statt den fokussierten Link). Dasselbe Prinzip wie .heading weiter unten (dort für Anker-Link-Ziele), hier zusätzlich für jedes fokussierbare Element. */ a, button, input, select, textarea, summary, [tabindex] { /* Navbar-Höhe (siehe --navbar-height in :root) statt eines festen Werts: die tatsächliche Navbar ist höher als die früher verwendeten --space-xl, ein per Tab angesprungenes Element konnte dadurch mit seinem Fokusring teilweise unter dem sticky Header liegen (Pre-Launch-Audit 2026-09-24). summary (Akkordeon) ergänzt. */ scroll-margin-top: calc(var(--navbar-height) + var(--space-md)); } picture {display: block;} /* Platzhalter für per loading="lazy" verzögerte Bilder (siehe snippets/ picture.php): "picture" passt sich der intrinsischen Größe des enthaltenen an (dessen width/height-Attribute reservieren den Platz bereits, siehe Kommentar dort zu CLS) – bis das Bild eingetroffen ist, zeigt diese Fläche --color-quinary statt leeren/weißen Freiraums. Sobald das Bild geladen ist, überdeckt es die Fläche deckend, keine weitere Logik (kein JavaScript) nötig. Gilt bewusst für ALLE Bilder der Seite (auch die wenigen eager geladenen, z. B. Hero) – eine Fallunterscheidung wäre unnötige Komplexität, bei eager-Bildern ist die Fläche ohnehin nur für Sekundenbruchteile sichtbar. Ausnahmen - beide zeigen ihr Bild seitenverhältnistreu per object-fit: contain (nicht cover), füllen die Box also NICHT immer vollständig aus: bei nicht passendem Seitenverhältnis (.lightbox__picture) bzw. IMMER (. gallery__image--logo, absichtlich zusätzlich mit Padding, siehe dort) bliebe die Fläche dauerhaft (auch nach dem Laden) sichtbar statt nur bis zum Laden: - .lightbox__picture (siehe snippets/lightbox.php) – dort übernimmt ohnehin die eigene Sofort-Vorschau (siehe .lightbox__image--preview) dieselbe Aufgabe. - .gallery__image--logo (siehe blocks/gallery.yml "Logo-Darstellung"): Logos füllen ihren 3:2-Rahmen so gut wie nie vollständig aus (eigenes Seitenverhältnis, zusätzlich eingerückt durch das Padding) – die Fläche bliebe dort dauerhaft als sichtbarer Rahmen um jedes Logo stehen, nicht nur während des Ladens. */ picture:not(.lightbox__picture):not(.gallery__image--logo) { background-color: var(--color-quinary); } /* Webfonts */ /* --font-heading (vormals --font-sans): unverändert wie zuvor, eigene Familie mit nur einem Schnitt. */ @font-face { font-family: 'T-Star-Heavy'; src: local('T-Star-Heavy'), url('/assets/fonts/T-Star-Heavy.woff2') format('woff2'), url('/assets/fonts/T-Star-Heavy.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* --font-subheading: vorläufiger Name (siehe :root-Kommentar zur Variable) – Schnitt "T-Star-Bold" liegt zwischen --font-body (T-Star Medium, 400) und --font-heading (T-Star-Heavy, 700) und war bislang ungenutzt (Schriftdatei lag bereits in assets/fonts/, siehe T-Star-Bold.woff2/.woff). Nur der reguläre Schnitt registriert, T-Star-BoldItalic bleibt vorerst ungenutzt, solange kein konkreter Einsatzzweck feststeht (keine unnötige Komplexität ohne Bedarf). */ @font-face { font-family: 'T-Star-Bold'; src: local('T-Star-Bold'), url('/assets/fonts/T-Star-Bold.woff2') format('woff2'), url('/assets/fonts/T-Star-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* --font-body (vormals --font-serif, EB Garamond): eine Familie mit drei Schnitten statt separater Familiennamen pro Schnitt – dadurch lösen strong/b (font-weight:700) und em/i (font-style:italic) automatisch den richtigen Schnitt auf, ohne dass jede Stelle im CSS die Datei einzeln benennen müsste (genau wie EB Garamond bisher aufgebaut war: Regular/Bold/Italic unter einem gemeinsamen Familiennamen). */ @font-face { font-family: 'T-Star'; src: local('T-Star-Medium'), url('/assets/fonts/T-Star-Medium.woff2') format('woff2'), url('/assets/fonts/T-Star-Medium.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'T-Star'; src: local('T-Star-Medium Italic'), url('/assets/fonts/T-Star-MediumItalic.woff2') format('woff2'), url('/assets/fonts/T-Star-MediumItalic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'T-Star'; src: local('T-Star-Heavy'), url('/assets/fonts/T-Star-Heavy.woff2') format('woff2'), url('/assets/fonts/T-Star-Heavy.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } /* Metrik-angeglichene Fallback-Schriften gegen Layout Shift beim Font- Wechsel (font-display: swap, Lighthouse-Audit 2026-09-24: CLS 1.0 auf der Programmseite, Verursacher: die drei Webfonts). Jede Fallback-Face zeigt lokal Arial (bzw. Arial Bold/Italic) mit size-adjust/ascent-/ descent-/line-gap-override, sodass Zeichenbreite und Zeilenmaße der Ersatzschrift denen des jeweiligen T-Star-Schnitts entsprechen – Zeilen- umbrüche und Texthöhen ändern sich beim Nachladen dadurch kaum bis gar nicht. Werte berechnet aus den echten Schriftdateien (Durchschnittsbreite über eine gewichtete deutsche Buchstabenhäufigkeit, hhea-Metriken), NICHT geschätzt; bei neuen/getauschten Schriftdateien neu berechnen. Wird nur verwendet, solange der Webfont noch nicht geladen ist (siehe die --font-*-Stacks in :root, jeweils direkt hinter dem Webfont). */ @font-face { font-family: 'T-Star Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400; font-style: normal; size-adjust: 94.44%; ascent-override: 98.15%; descent-override: 22.98%; line-gap-override: 0%; } @font-face { font-family: 'T-Star Fallback'; src: local('Arial Italic'), local('Arial-ItalicMT'); font-weight: 400; font-style: italic; size-adjust: 94.49%; ascent-override: 98.10%; descent-override: 22.96%; line-gap-override: 0%; } @font-face { font-family: 'T-Star Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; font-style: normal; size-adjust: 88.19%; ascent-override: 105.11%; descent-override: 24.61%; line-gap-override: 0%; } @font-face { font-family: 'T-Star-Heavy Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; font-style: normal; size-adjust: 88.19%; ascent-override: 105.11%; descent-override: 24.61%; line-gap-override: 0%; } @font-face { font-family: 'T-Star-Bold Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; font-style: normal; size-adjust: 88.07%; ascent-override: 105.26%; descent-override: 24.64%; line-gap-override: 0%; } /* Animation */ /* Bewegungs-Tokens: eine gemeinsame Zeit-/Kurven-Skala für Übergänge auf dieser Seite (Seitenwechsel unten, künftige Komponenten-Animationen) – ein Wert je Stufe statt verstreuter Einzelwerte, damit sich das Bewegungstempo der Seite an einer Stelle austarieren lässt. --ease-standard/--ease-enter sind aktuell identisch (beide für "sanft ankommen"), bewusst als zwei Namen geführt: ein künftiges Auseinanderziehen bleibt dadurch möglich, ohne Aufrufstellen umzubenennen. */ :root { --motion-standard: 320ms; --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --ease-enter: cubic-bezier(0.22, 1, 0.36, 1); } /* Keine Übergänge (transition) während des Ladens: Kommt eine Seite sehr schnell an (statischer Cache, siehe config.php "cache"), berechnet der Browser Elemente mitunter zuerst ohne die Stilregeln und "animiert" danach von seiner Standard-Darstellung zur richtigen – sichtbar als kurz aufblitzende Unterstreichung in der Hauptnavigation (2026-10-12). Die Klasse steht im HTML (snippets/header.php) und wird von assets/js/site.js nach dem ersten Zeichnen entfernt. Betrifft nur transition, nicht die Einblende-Animation von main (animation). */ .laedt *, .laedt *::before, .laedt *::after { transition: none !important; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } /* Seitenwechsel: reines Einblenden als CSS-Enter-Animation auf dem frisch geladenen Dokument selbst – läuft bei JEDER Navigation automatisch erneut, weil jede Seite ein eigener, frischer Dokument-Request ist, ganz ohne JavaScript und ohne eigenen Client-Router. Bis 2026-09-30 zusätzlich eine Cross-Document View Transition (@view-transition, siehe Git-Historie): endgültig entfernt, nachdem ein zweiter Einführungsversuch (samt ::view-transition { pointer-events: none; } gegen einen früheren, unbestätigten Verdacht) in Chrome reproduzierbar zu "Uncaught (in promise) InvalidStateError: Transition was aborted because of invalid state. Page already revealed" führte – ein dokumentierter Fehler in Chromes eigener Verwaltung schneller aufeinanderfolgender Navigationen (begünstigt durch den aktiven Kirby-Seiten-Cache, siehe config.php), nicht durch Code dieses Projekts verursacht oder behebbar. Nur main blendet ein, Navbar und Breadcrumb stehen sofort (der Breadcrumb ist auf jeder Seite fast identisch – ein Einblenden wirkte als kurzes Aufblitzen). */ main { animation: page-in var(--motion-standard) var(--ease-enter) both; } /* Ausnahme Mediathek/Mitwirkende: dort ändert eine Filterung (eigene Pfade je Filter, siehe site/plugins/filterseiten, templates/ mediathek.php/mitwirkende.php) nur den Ergebnisbereich – Breadcrumb, H1 und Filter-Buttons bleiben inhaltlich identisch. Ein Enter-Keyframe auf dem ganzen main faded zwangsläufig ALLES darin mit, ungeachtet dessen, was sich tatsächlich geändert hat. Da ohne JavaScript nicht unterscheidbar ist, ob eine Navigation zu dieser Seite von einem Filter-Klick oder von woanders kam (jede Seite ist ein eigener, zustandsloser Dokument-Request), gilt diese Regel bewusst für JEDEN Aufruf dieser Templates: main selbst bekommt keine Animation mehr (erscheint sofort), stattdessen fadet gezielt nur der als .filter-content markierte Ergebnisbereich (siehe dort in den Templates) – "nur das Veränderte bewegt sich". */ body.page-mediathek main, body.page-mitwirkende main { animation: none; } body.page-mediathek .filter-content, body.page-mitwirkende .filter-content { animation: page-in var(--motion-standard) var(--ease-enter) both; } /* Bei reduzierter Bewegungspräferenz entfällt die Einblend-Animation auf main/.filter-content vollständig. Der Seitenwechsel selbst (der eigentliche Zustandswechsel) bleibt erhalten, nur die nicht- essenzielle Bewegung/Überblendung entfällt: Inhalt steht sofort in voller Deckkraft an seiner finalen Position, statt nur schneller/ kürzer zu animieren. */ @media (prefers-reduced-motion: reduce) { main, .filter-content { animation: none; } } /* Variables */ :root { /* * Spacing-Skala: T-Shirt-Größen statt px-Benennung (Werte in rem). * xxs/xs bleiben auf allen Breakpoints gleich, sm/md/lg/xl passen * sich über die @media-Regeln weiter unten pro Breakpoint an (siehe * dort für die einzelnen Stufen) – --space-120 (Sektion-zu-Footer- * Abstand) hat keine eigene Stufe mehr, sondern setzt sich aus xl + lg * zusammen (siehe .section), um den bisherigen 1:2-Rhythmus zu * Sektionsabständen (jetzt xl) exakt zu erhalten. */ --space-xxs: 0.25rem; /* 4px */ --space-xs: 0.5rem; /* 8px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ /* Einheitlicher linker/rechter Außenabstand für .grid (padding-inline) UND alle Bars außerhalb des Grids (Navbar, Breadcrumb, Footer, Mobile-Overlay – siehe dort) – ersetzt das frühere spaltenbasierte --grid-indent-1col: das Grid nutzt seine Spalten inzwischen komplett randlos aus (kein freier "1 Spalte"-Einzug mehr, siehe .span-sm/md/lg weiter unten), der Außenabstand kommt jetzt vollständig aus diesem einen Wert statt aus einer Mischung aus Spaltenbreite + Padding. Default = --space-lg (Tablet-Portrait/ Tablet-Landscape/Desktop/Screen – bewusst NICHT mehr identisch mit dem column-gap von .grid auf Tablet-Landscape/Desktop/Screen, siehe dort: der Außenabstand soll dort kleiner sein als der Abstand zwischen den Spalten). Gilt auf allen Breakpoints, auf Mobile/ Tablet-Portrait mit dem dort kleineren --space-lg (24px). */ --content-margin: var(--space-lg); /* Abstand unter der Navbar bis zur Breadcrumb-Bar (siehe .breadcrumb-bar padding-top): --space-lg, auf Mobile --space-sm (siehe @media bei --content-margin weiter unten; seit 2026-10-16, davor u. a. --space-xl bzw. --space-md/--space-sm). Grundlage für --abstand-bis-inhalt unten. */ --abstand-unter-navbar: var(--space-lg); /* Abstand unter der Navbar bis zur ersten Überschrift einer Seite MIT Breadcrumb: --abstand-unter-navbar + eine Breadcrumb-Zeile (--text-sm × --leading-sm, siehe .breadcrumb ol) + Abstand zum Inhalt (--space-xs, siehe .breadcrumb-bar padding-bottom). Gemeinsam für .section--no-breadcrumb (Startseite) und .mobile-overlay__content (Burger-Menü), seit 2026-10-16: h1 bzw. erster Menüpunkt stehen auf derselben Höhe wie die h1 einer Seite mit Breadcrumb. Ändert sich die Breadcrumb-Bar, hier mitziehen. */ --abstand-bis-inhalt: calc(var(--abstand-unter-navbar) + var(--text-sm) * var(--leading-sm) + var(--space-xs)); /* Deckelt die Inhaltsbreite auf sehr großen Bildschirmen (siehe .grid/.navbar-bar/.breadcrumb-bar/.footer, jeweils max-width + margin-inline: auto) statt sie unbegrenzt mit dem Viewport mitwachsen zu lassen – siehe ausführlichen Kommentar bei .grid für die Begründung. EINE zentrale Variable statt vier Wiederholungen desselben Werts, damit eine künftige Änderung nur hier nötig ist. */ --content-max-width: 1800px; /* Schrift von Seitentitel, Desktop-Navigation und Menü-Button (siehe .site-title/.desktop-nav/.menu-toggle): eine gemeinsame Stufe, unter 370px eine Stufe kleiner (siehe @media weiter unten; unter 340px zusätzlich das Festivalakronym statt des vollen Titels, siehe .site-title__kurz). Als eigene Variablen, damit --navbar-height direkt darunter automatisch mitrechnet. */ --navbar-text: var(--text-md); --navbar-leading: var(--leading-md); --navbar-tracking: var(--tracking-md); /* Höhe der sticky Navbar (siehe .site-header/.navbar-bar), berechnet statt geschätzt: zweimal deren padding-block (--space-xs) plus die Zeilenhöhe der Navbar-Schrift (--navbar-text/--navbar-leading). Bleibt dadurch automatisch korrekt, auch wenn sich diese Werte je Breakpoint ändern – u. a. für den Scroll-Offset von Anker-Links verwendet (siehe .block weiter unten). */ --navbar-height: calc(var(--space-xs) * 2 + var(--navbar-text) * var(--navbar-leading)); /* Border-Radius: Cards UND Pillen (.card-label--pills) sind mittlerweile eckig (kein Radius mehr) – --radius-md bleibt als einzige verbliebene Stufe für Buttons (.button), komplett rund bei üblicher Button-Höhe. */ --radius-md: 32px; /* für Buttons */ /* Schriftgrößen: gleiches Benennungsschema wie Spacing. Tablet/Mobile passen md/lg/xl an (siehe @media weiter unten), xs/sm bleiben auf allen Breakpoints gleich. */ --text-xs: 0.75rem; /* 12px */ --text-sm: 1rem; /* 16px – Navigation, Buttons, Utility, h4 */ --text-md: 1.25rem; /* 20px – h3, Text, Default */ --text-lg: 1.75rem; /* 28px – h2, Großtext */ --text-xl: 3rem; /* 48px – h1 */ /* Letter-Spacing: ein gemeinsamer Satz für --font-body UND --font-heading (bisher pro Rolle getrennte Werte) und ohne eigene Breakpoint-Anpassung mehr – der Unterschied wäre bei den jetzt gröberen Stufen kaum wahrnehmbar gewesen. */ --tracking-xs: 0.03em; --tracking-sm: 0.02em; --tracking-md: 0.01em; --tracking-lg: 0em; --tracking-xl: -0.01em; /* Line-Height, ebenfalls ohne eigene Breakpoint-Anpassung */ --leading-xs: 1.5; --leading-sm: 1.5; --leading-md: 1.45; --leading-lg: 1.35; --leading-xl: 1.15; /* Schriftarten: "serif/sans" ergab keinen Sinn mehr, seit EB Garamond durch T-Star ersetzt wurde – Rollen-Namen (body/heading) statt Stilart-Namen, Werte selbst unverändert gegenüber vorher. */ --font-body: 'T-Star', 'T-Star Fallback', Arial, Helvetica, sans-serif; /* Fließtext (vormals --font-serif, war EB Garamond) */ --font-heading: 'T-Star-Heavy', 'T-Star-Heavy Fallback', Arial, Helvetica, sans-serif; /* Überschriften/UI-Chrome (vormals --font-sans, unverändert) */ /* --font-subheading: Zwischenstufe zwischen --font-body und --font-heading – Card-Titel (.card-title--bold, .card-title bei Person/Programmpunkt), Akkordeon-Label und Downloads (siehe jeweilige Regeln). */ --font-subheading: 'T-Star-Bold', 'T-Star-Bold Fallback', Arial, Helvetica, sans-serif; /* Farben */ --color-primary: #222; /* Schwarzwert (kein Reinschwarz) – Default für allen Text */ --color-secondary: #707070; /* Dunkelgrau – 4,95:1 auf Weiß (WCAG AA) und deutlich unterscheidbar von --color-primary; Auszeichnungs-/Utility-Text */ --color-tertiary: #909090; /* Grau für Elemente, die nur das WCAG-1.4.11- Kontrastverhältnis (3:1 zu --color-background) statt des Text-Kontrasts (4.5:1) erfüllen müssen – aktuell alle Card-Border (siehe .card). 3,19:1 zu Weiß, mit etwas Sicherheitsabstand über der Mindestanforderung. */ --color-quaternary: #ddd; /* Helles Grau, nur für rein dekorative Elemente ohne jedes Kontrastverhältnis (hr, siehe dort) – WCAG 1.4.11 gilt nur für UI-Komponenten/ inhaltstragende Grafiken, nicht für rein dekorative. */ --color-quinary: #e6e6e6; /* Sehr helles Grau, nur für die Platzhalter-Fläche hinter noch ladenden Bildern (siehe "picture") – rein dekorativ, wie --color-quaternary. */ --color-background: #fff; /* Seiten-/Button-Hintergrund */ --color-error: #c0392b; /* Rotton für Fehlerzustände (z. B. templates/ error.php) – 5,44:1 auf Weiß (WCAG AA für Text, Mindestanforderung 4,5:1), mit Sicherheitsabstand wie --color-secondary/ -focus oben. */ --color-focus: #005fcc; /* Fokusring-Blau (siehe :focus-visible weiter unten) – bewusst eigens definiert statt outline-style: auto, damit die Farbe browserübergreifend identisch bleibt. 5,99:1 zu --color-background (Weiß). */ } /* Vier benannte Breakpoint-Stufen, jede nach ihrer Zuständigkeit statt nach Ordnungszahl benannt (frühere "Tablet 1"/"Tablet 2"-Bezeichnung war nicht eindeutig genug – beide Namen wurden für unterschiedliche, einander teils überlappende Bereiche verwendet). Eine einzige gemeinsame Schwelle für Layout (Grid/Spans, siehe .grid weiter unten) UND Navigation (Hauptnav → Burger-Menü, siehe @media (min-width: 1080px) weiter unten) statt zweier unabhängiger Schwellen wie zuvor: – Mobile (≤ 500px) UND Tablet-Portrait (501–720px): kleinste Schrift-/ Spacing-Stufe (Tablet-Portrait mit eigenen, etwas größeren Werten als Mobile, siehe die jeweiligen @media-Regeln direkt unten), Column-Gap/--content-margin --space-lg (24px), Burger-Menü aktiv. 2-Spalten- Grid nur auf Mobile, Tablet-Portrait bleibt 4-spaltig (siehe :root "Seitenraster" weiter unten). – Tablet-Landscape (721–1079px): 4-Spalten-Grid mit Burger-Menü, Column-Gap/--content-margin --space-lg (32px), gemeinsame Schrift-/ Spacing-Stufe mit Desktop/Screen bis auf eine eigene, kleinere --text-xl-Stufe (siehe @media-Regeln direkt unten). – Desktop (1080–1535px): Default-Werte (kein eigenes @media nötig, siehe :root Basiswerte), 8-Spalten-Grid, Column-Gap/ --content-margin --space-lg (32px), Hauptnav statt Burger-Menü. – Screen (≥ 1536px, seit 2026-10-19; 2026-10-16 kurz ab 1440px): wie Desktop, aber größere Schrift (--text-md/-lg/-xl, --text-xs/-sm bleiben) und größeres --space-xl (siehe @media direkt unten) – auf großen Bildschirmen angenehmere Zeilenlängen statt nur mehr Leerraum. Navbar-Schrift (--navbar-text = --text-md) und Logo (--text-xl) wachsen mit. (Bis 2026-09-2X gab es schon einmal eine Screen-Stufe nur für --text-xl, siehe Git-Historie.) Spaltenzahl und Span-Breiten (--grid-cols/--span-*) folgen demselben Schema, siehe :root "Seitenraster". Row-Gap von .grid/.card-grid ist bewusst die EINZIGE Ausnahme ohne eigene Breakpoint-Stufe: bleibt durchgehend bei --space-lg (siehe .grid weiter unten), unabhängig vom Breakpoint – anders als Column-Gap/ --content-margin oben, die weiterhin wie gewohnt je Stufe wechseln. */ @media only screen and (min-width: 1536px) { :root { --text-md: 1.375rem; /* 22px */ --text-lg: 2rem; /* 32px */ --text-xl: 3.25rem; /* 52px */ --space-xl: 4rem; /* 64px */ } } @media only screen and (min-width: 501px) and (max-width: 1079px) { :root { --text-md: 1.25rem; /* 20px */ --text-lg: 1.5rem; /* 24px */ --text-xl: 2.75rem; /* 44px */ } } /* Tablet-Portrait (501–720px, siehe :root-Breakpoint-Kommentar weiter oben und die entsprechende --span-md-Ausnahme bei "Seitenraster" weiter unten): --text-md/-lg/-xl etwas kleiner als auf Tablet- Landscape, auf den schmaleren Portrait-Breiten wirken sie sonst überproportional groß im Verhältnis zur Spaltenbreite. */ @media only screen and (min-width: 501px) and (max-width: 720px) { :root { --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 2.25rem; /* 36px */ } } @media only screen and (max-width: 500px) { :root { --text-md: 1.125rem; /* 18px */ --text-lg: 1.375rem; /* 22px */ --text-xl: 1.875rem; /* 30px */ } } /* Sehr schmale Smartphones (unter 370px): Seitentitel und Menü-Button in --text-sm statt --text-md (siehe --navbar-text im :root), sonst wird es in der Navbar zu eng. Eigene Schwelle nur für die Navbar. */ @media only screen and (max-width: 369px) { :root { --navbar-text: var(--text-sm); --navbar-leading: var(--leading-sm); --navbar-tracking: var(--tracking-sm); } } /* Spacing-Stufe von Mobile gilt jetzt auch für Tablet-Portrait (bis 2026-09-2X eigene, 500px-Schwelle wie --text-* oben, siehe Git- Historie) – auf den schmaleren Portrait-Breiten wirkte der sonst größere Tablet/Desktop-Wert (--space-lg/--space-xl etc.) zu groß im Verhältnis zur jetzt ebenfalls verkleinerten Schrift dort. */ @media only screen and (max-width: 720px) { :root { --space-sm: 0.75rem; /* 12px */ --space-md: 1.25rem; /* 20px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ } } /* --content-margin (siehe :root oben) ist auf allen Breakpoints --space-lg – auch auf Mobile/Tablet-Portrait (dort über die Spacing- Stufe oben 24px statt 32px); bis 2026-10 überschrieben diese beiden gezielt auf --space-md. --content-margin ist zugleich Seitenrand UND Column-Gap von .grid/.card-grid/Footer-Spalten (siehe dort). */ @media only screen and (max-width: 500px) { :root { --abstand-unter-navbar: var(--space-sm); } } /* Seitenraster: EINE zentrale Quelle für Spaltenzahl und Span-Breiten je Breakpoint (Anzahl Spalten, nicht Pixel) – .grid, .span-sm/md/lg, die Card-Grids (.card-grid), "Alle Tage" der Programm-Übersicht und die Footer-Spalten lesen alle dieselben vier Werte, statt jeweils eigene Breakpoint-Regeln mit hartcodierten Spaltenzahlen zu pflegen. – Desktop/Screen (≥ 1080px): 8 Spalten; span-sm 2, span-md 4, span-lg 8. – Tablet-Landscape (721–1079px): 4 Spalten; span-sm 2, span-md 3, span-lg 4. – Tablet-Portrait (501–720px): 4 Spalten; span-sm 2, span-md 4 (volle Breite statt 3-von-4, siehe eigene Regel unten – bewusst die einzige Ausnahme von der sonst einheitlichen 1080px-Tablet-Schwelle, siehe :root-Breakpoint-Kommentar weiter oben), span-lg 4. – Mobile (≤ 500px): 2 Spalten; alle Spans 2 (volle Breite). Column-Gap ist überall --content-margin (siehe oben), Row-Gap steuert jede Komponente selbst. */ :root { --grid-cols: 8; --span-sm: 2; --span-md: 4; --span-lg: 8; } @media only screen and (max-width: 1079px) { :root { --grid-cols: 4; --span-md: 3; --span-lg: 4; } } /* Tablet-Portrait (siehe Kommentar oben): span-md nimmt hier die volle Rasterbreite ein (4 von 4 Spalten) statt der 3-von-4-Breite auf Tablet-Landscape – auf den schmaleren Portrait-Breiten wirkt eine auf 3 Spalten begrenzte Karte/Spalte unproportional schmal. */ @media only screen and (min-width: 501px) and (max-width: 720px) { :root { --span-md: 4; } } @media only screen and (max-width: 500px) { :root { --grid-cols: 2; --span-md: 2; --span-lg: 2; } } /* Typo */ html { font-size: 16px; /* Reserviert die Breite der Scrollbar dauerhaft, damit das Öffnen des Mobile-Menüs (unterdrückt Scrollen) die Viewport-Breite nicht verändert – sonst verschieben sich Navbar/Overlay sichtbar. */ scrollbar-gutter: stable; /* Weiches Scrollen zu Anker-Links (z. B. Programm-Seite), ganz ohne JavaScript. Deaktiviert für Nutzer:innen mit reduzierter Bewegungspräferenz, siehe @media (prefers-reduced-motion) unten. */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; line-height: var(--leading-md); letter-spacing: var(--tracking-md); color: var(--color-primary); text-align: left; font-kerning: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } strong, b { font-weight: 700; /* löst automatisch den T-Star-Heavy-Schnitt auf, siehe @font-face */ } em, i { font-style: italic; /* löst automatisch den T-Star-Medium-Italic-Schnitt auf, siehe @font-face */ } /* Basiswert für JEDES