:root {
/* "Libre Caslon Text" wird per Google Fonts im jeder
HTML-Seite geladen (siehe index.html, projekte/.../index.html,
privacy/index.html). Fällt der Google-Fonts-Server aus, greifen
die folgenden Fallbacks. */
--font-serif: "Libre Caslon Text", "Caslon", "Big Caslon",
"Adobe Caslon Pro", "Caslon Pro", Georgia, "Times New Roman", serif;
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-muted: #6b6b66;
/* Link-Highlight: blauer Balken hinter weißer Schrift */
--color-link-bg: #1c3fd6;
--color-link-text: #ffffff;
/* Headline-Highlight: gleicher Look, nur schwarz statt blau */
--color-headline-bg: #000000;
--color-headline-text: #ffffff;
/* Beide Highlights teilen sich Padding & Schriftschnitt, damit sie
wie derselbe "Textmarker" wirken (siehe .link-highlight unten) */
--highlight-padding: 0 0px;
--content-width: 850px;
--wide-width: 980px;
}
/* --- Reset ---------------------------------------------------- */
* {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
/* Absicherung gegen horizontales Scrollen, falls doch mal ein
Element breiter als der Viewport wird. */
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-serif);
font-size: 12px;
line-height: 1.55;
text-align: left;
}
img,
video {
max-width: 100%;
display: block;
}
ul,
ol {
padding: 0;
margin: 0;
list-style: none;
}
h1,
h2,
h3,
p,
dl,
dd,
dt,
figure {
margin: 0;
text-align: left;
}
/* Links: blauer Balken hinter weißer Schrift.
Bewusst kein display:inline-block und kein vertikales Padding –
so bleibt der Balken exakt so hoch wie die Textzeile, statt eine
sichtbar größere Box zu bilden (wirkt wie mit der Maus markierter
Text, nicht wie ein eigenes UI-Element). */
a {
background: var(--color-link-bg);
color: var(--color-link-text);
text-decoration: none;
padding: var(--highlight-padding);
}
a:hover {
background: #000;
color: #fff;
}
/* --- Typografie-Hilfsklassen ----------------------------------- */
/* Die paar Textvarianten, die auf der Seite tatsächlich vorkommen, als
kombinierbare Klassen statt Schriftgröße/-farbe in jeder Komponente
einzeln zu wiederholen – direkt im HTML kombiniert, z.B.
class="project-entry__meta text-muted text-small". */
.text-small {
font-size: 12px;
}
.text-eyebrow {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.text-muted {
color: var(--color-muted);
}
/* --- Layout ----------------------------------------------------- */
/* margin: 0 auto zentriert die Inhaltsspalte auf der Seite; der Text
darin bleibt trotzdem linksbündig (siehe text-align:left oben). */
.wrap {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 24px;
}
.wrap--wide {
max-width: var(--wide-width);
margin: 0 auto;
padding: 0 24px;
}
/* Volle Seitenbreite (kein max-width/centering), nur mit demselben
seitlichen Gutter wie .wrap – für Bereiche, die sich über die ganze
Seite erstrecken sollen (Kontakt-Links, About, Vorträge, Footer),
während z.B. Projekte weiterhin die schmale .wrap-Spalte nutzt. */
.wrap--full {
max-width: none;
margin: 0;
padding: 0 24px;
}
/* --- Top links (Kontakt, oben links) ------------------------------ */
.top-links {
padding: 32px 24px 0;
}
.top-links a {
/* Größerer Abstand statt unsichtbarer Hit-Slop-Fläche: bei zwei
direkt benachbarten Links würden sich erweiterte Tap-Flächen
sonst überlappen. */
margin-right: 16px;
}
/* --- Sections ----------------------------------------------------- */
main {
padding: 10px 0 64px;
}
section {
padding: 40px 0;
}
/* Headlines: derselbe "Textmarker"-Look wie bei den Links (a { ... }
oben), nur schwarz statt blau und mit größerer Schrift. display:
inline statt inline-block, aus demselben Grund wie bei den Links:
sonst entsteht eine sichtbar zu große Box um den Text.
Schriftgröße bewusst deutlich größer als der 14px-Fließtext, damit
der Balken als Überschrift erkennbar ist. */
.section-title,
.project-header h1,
.gallery-section__title {
display: inline;
background: var(--color-headline-bg);
color: var(--color-headline-text);
font-weight: normal;
font-size: 24px;
line-height: 1.1;
padding: var(--highlight-padding);
}
.section-title {
/* Abstand zur Zeile darunter (erstes Projekt-Bild, Vorträge-Liste):
halb so hoch wie ein normaler Zeilenumbruch (line-height 1.55 ×
14px Fließtext ≈ 22px, davon die Hälfte ≈ 12px). Gilt für
"Projekte" wie "Vorträge", da beide dieselbe Klasse nutzen. */
margin-bottom: 12px;
}
/* --- About --------------------------------------------------------- */
/* .about-text steht in einer .wrap--full-Section (volle Breite), der
Lesetext selbst soll aber auf großen Screens nicht über die ganze
Fensterbreite laufen – daher hier eine eigene, an .wrap angelehnte
Lesebreite, linksbündig (kein margin:auto/centering). */
.about-text {
max-width: var(--content-width);
}
.about-text p + p {
margin-top: 1em;
}
/* Datenschutz/Impressum: Überschrift, die direkt auf einen Absatz
folgt, braucht denselben Zeilenabstand wie Absatz-zu-Absatz
innerhalb von .about-text. */
.about-text .section-title {
margin-top: 1em;
}
/* --- Project list on homepage --------------------------------------- */
/* Projekte stapeln sich wieder übereinander (eine Zeile pro Projekt),
wie ursprünglich. */
.project-list {
display: flex;
flex-direction: column;
gap: 36px;
}
/* .project-entry__media ist jetzt ein kleiner Cluster aus 3 Bildern
(Hauptbild + 2 kleinere Platzhalter daneben) statt einem einzelnen
Bild. Jedes Bild steckt in einem eigenen , alle verlinken auf
dieselbe Projektseite. */
.project-entry__media {
display: grid;
/* Feste Spaltenbreite (statt 1fr) – dieselbe Breite pro Kachel bei 2
und bei 3 Bildern, damit (bei gleichem aspect-ratio) auch die Höhe
überall identisch bleibt. Nur die Gesamtbreite des Clusters
unterscheidet sich dann je nach Bilderanzahl. */
/* min() statt fixem 420px: auf schmalen Screens schrumpft die Breite
mit dem verfügbaren Platz (100vw abzüglich der 24px .wrap-Gutter
auf jeder Seite), sonst bleibt sie bei den gewohnten 420px gedeckelt.
Verhindert horizontales Scrollen auf Mobile. */
--media-col-width: calc((min(420px, 100vw - 48px) - 2 * 8px) / 3);
grid-template-columns: repeat(3, var(--media-col-width));
gap: 8px;
max-width: 100%;
margin-bottom: 10px;
}
/* Projekte mit nur 2 statt 3 vorhandenen Bildern (kein _2-Bild). */
.project-entry__media--2img {
grid-template-columns: repeat(2, var(--media-col-width));
max-width: 100%;
}
.project-entry__media a {
display: block;
overflow: hidden;
/* 16:10 – dasselbe Seitenverhältnis, das die einzelnen Bilder schon
vorher hatten (siehe auch .gallery--main). Da alle Spalten gleich
breit sind (1fr), ergibt dasselbe Verhältnis pro Kachel automatisch
überall dieselbe Höhe. */
aspect-ratio: 16 / 10;
}
.project-entry__media img,
.project-entry__media video {
width: 100%;
height: 100%;
object-fit: cover;
}
.project-entry__title {
font-weight: normal;
line-height: 1.2;
}
.project-entry__meta {
margin: 0 0 8px;
}
/* --- Talks / Vorträge -------------------------------------------------- */
.talks-list {
display: flex;
flex-direction: column;
/* Größer als der Zeilenabstand innerhalb eines Eintrags (.talk-entry
gap unten), damit auf Mobile beim Umbrechen klar erkennbar bleibt,
wo ein Eintrag endet und der nächste beginnt. */
gap: 12px;
}
.talk-entry {
display: flex;
flex-wrap: wrap;
/* Kleiner Row-Gap: hält umgebrochene Zeilen innerhalb eines Eintrags
eng zusammen, damit sie als eine Einheit wirken. */
gap: 2px 10px;
align-items: baseline;
}
.talk-entry__date {
white-space: nowrap;
}
.talk-entry__title {
font-weight: bold;
}
.talk-entry__link {
white-space: nowrap;
}
/* Größere Tap-Fläche auf Touch-Geräten, ohne die Highlight-Bar selbst
zu vergrößern (--highlight-padding bleibt unangetastet). Sicher hier,
weil jeweils das einzige interaktive Element unter reinem Text steht
– keine Überlappung mit Nachbar-Links. */
.talk-entry__link a,
.site-footer a {
position: relative;
}
.talk-entry__link a::after,
.site-footer a::after {
content: "";
position: absolute;
inset: -10px;
}
/* --- Footer --------------------------------------------------- */
.site-footer {
padding: 24px 24px 40px;
text-align: left;
}
/* --- Project detail page -------------------------------------------------- */
.project-header {
/* 24px seitlich, genau wie .wrap – vorher stand hier "32px 0 40px",
wodurch bei schmalem Fenster der seitliche Gutter fehlte. */
padding: 32px 24px 40px;
max-width: var(--content-width);
margin: 0 auto;
text-align: left;
}
.project-header__subtitles {
margin-top: 8px;
}
.project-header__text {
margin-top: 16px;
}
.project-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 28px;
padding-top: 16px;
}
.project-info dt {
margin-bottom: 4px;
}
/* Zwei Felder (z.B. Jahr + Rolle) übereinander in einer gemeinsamen
Grid-Spalte gestapelt, statt sich eine eigene Spalte zu teilen. */
.project-info__group {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Ein Feld (z.B. eine lange Team-Liste) über die restlichen zwei
Spalten laufen lassen, damit Namen/Rollen nicht unnötig umbrechen. */
.project-info .span-2 {
grid-column: span 2;
}
.project-info .team-list li {
line-height: 1.4;
}
/* Galleries */
.gallery-section {
padding: 36px 0;
}
.gallery-section__title {
display: block;
/* hier bewusst wieder block statt inline: die Headline steht über
der ganzen Galerie-Breite (wrap--wide), nicht nur über der
schmalen Textspalte, daher braucht sie ihre eigene Zeile mit
eigenem margin statt im Textfluss zu stehen */
width: fit-content;
margin: 0 0 16px;
/* Linksbündig statt zentriert: das Element sitzt in einem
.wrap--wide-Wrapper (siehe HTML), der dieselbe Breite/Padding
wie die Galerie darunter hat – so fluchtet die Headline mit dem
linken Rand der Bilder. */
}
.gallery {
display: grid;
gap: 14px;
}
.gallery--main {
grid-template-columns: repeat(2, 1fr);
}
.gallery--secondary {
grid-template-columns: repeat(4, 1fr);
}
.gallery figure {
overflow: hidden;
}
.gallery--main figure {
aspect-ratio: 16 / 10;
}
.gallery--secondary figure {
aspect-ratio: 1 / 1;
}
.gallery img,
.gallery video {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery figure.span-2 {
grid-column: span 2;
}
/* --- Gallery: großes Hero-Video ------------------------------------------ */
.gallery-hero {
/* Gleich groß wie alle Abstände in .gallery--natural unten (Hero →
Grid, zwischen Spalten, zwischen gestapelten Elementen), und etwas
kleiner als die vorherigen 14px. */
margin-bottom: 10px;
}
.gallery-hero img,
.gallery-hero video {
width: 100%;
height: auto;
}
/* --- Video-Embed (z.B. Vimeo/YouTube-iFrame) ----------------------------- */
/* Responsiver Container über die aspect-ratio-Eigenschaft, da ein iframe
(anders als img/video) keine intrinsische Größe hat, an der sich die
Höhe automatisch orientieren könnte. Default 16:9, für Quellvideos mit
abweichendem Seitenverhältnis eine der Modifier-Klassen ergänzen –
sonst entstehen sichtbare Letterbox-Balken im Vimeo/YouTube-Player. */
.video-embed {
position: relative;
aspect-ratio: 16 / 9;
}
.video-embed--4-3 {
aspect-ratio: 4 / 3;
}
.video-embed--3-2 {
aspect-ratio: 3 / 2;
}
.video-embed--9-16 {
aspect-ratio: 9 / 16;
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/* --- Gallery: mehrere Video-Embeds nebeneinander -------------------------- */
.gallery--videos {
grid-template-columns: repeat(4, 1fr);
/* Gleicher Abstand zwischen den Videos wie zwischen den Bildern in
.gallery--natural darunter (dort: column-gap/figure margin je 5px). */
gap: 5px;
/* Deutlich größerer Abstand zum Bilder-Grid darunter, damit die
Video-Reihe klar als eigener Block erkennbar bleibt. */
margin-bottom: 24px;
}
/* --- Gallery: Originalformat, 3 pro Zeile --------------------------------- */
/* Wie .gallery--mixed (Masonry über CSS-Spalten), aber ohne die dort
fest vorgegebenen Seitenverhältnisse – jedes Bild/Video behält sein
eigenes Original-Seitenverhältnis und seine Originalgröße (bezogen
auf die Spaltenbreite), statt zugeschnitten zu werden. */
.gallery--natural {
/* display:block fehlte hier – ohne das greift die columns-Eigenschaft
nicht (die Basisklasse .gallery setzt display:grid, und darunter
hat "columns" keine Wirkung). Dadurch lagen Elemente in einer
einzigen Spalte gestapelt, und der Grid-gap addierte sich mit dem
eigenen margin-bottom jeder figure zu einem doppelt so großen,
ungleichmäßigen Abstand. */
display: block;
columns: 2 250px;
column-gap: 5px;
}
.gallery--natural figure {
break-inside: avoid;
margin: 0 0 5px;
}
.gallery--natural img,
.gallery--natural video {
width: 100%;
height: auto;
object-fit: initial;
display: block;
}
/* --- Gallery: Originalauflösung, linksbündig, ohne Spalten -------------- */
/* Kein Grid, keine CSS-Spalten, kein Zuschnitt: jedes Bild/Video behält
seine tatsächliche Pixelgröße (wird nur verkleinert, falls es breiter
als der Container ist) und alle Elemente reihen sich einfach
linksbündig untereinander auf (z.B. Styleframes-Bereich). */
.gallery--stack {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.gallery--stack figure {
margin: 0;
}
.gallery--stack img,
.gallery--stack video {
width: auto;
max-width: 100%;
height: auto;
object-fit: initial;
display: block;
/* Auf halbe Original-Auflösung verkleinert (zoom statt width:50%,
damit wirklich die tatsächliche Pixelgröße halbiert wird, egal wie
breit der Container ist – width:50% wäre 50% der Container-, nicht
der Bildbreite). */
zoom: 0.5;
}
/* --- Gallery: gemischte Formate ------------------------------------------ */
/* Weitere Ansicht, bei der nicht alle Bilder dasselbe Seitenverhältnis
haben. Statt eines starren Rasters mit fixer aspect-ratio pro Zelle
(wie .gallery--main/--secondary) läuft dieses Layout über CSS-Spalten
(column-count) – jedes Bild behält sein eigenes Format und die Spalten
füllen sich wie ein Mauerwerk (Masonry), ganz ohne JavaScript. */
.gallery--mixed {
columns: 3 220px;
column-gap: 14px;
display: block;
}
.gallery--mixed figure {
break-inside: avoid;
margin: 0 0 14px;
}
.gallery--mixed img,
.gallery--mixed video {
width: 100%;
height: auto;
object-fit: initial;
}
/* Vordefinierte, unterschiedliche Formate je nach Position –
simuliert unterschiedlich beschnittene Originalbilder.
.gallery--mixed figure:nth-child(3n+1) img { aspect-ratio: 3 / 4; object-fit: cover; }
.gallery--mixed figure:nth-child(3n+2) img { aspect-ratio: 4 / 3; object-fit: cover; }
.gallery--mixed figure:nth-child(3n+3) img { aspect-ratio: 1 / 1; object-fit: cover; }
.gallery--mixed figure:nth-child(5) img { aspect-ratio: 9 / 16; object-fit: cover; }*/
/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 720px) {
.project-info {
grid-template-columns: 1fr;
}
.gallery--main,
.gallery--secondary,
.gallery--videos {
grid-template-columns: 1fr;
}
.gallery figure.span-2 {
grid-column: span 1;
}
.gallery--mixed,
.gallery--natural {
columns: 1;
}
.talk-entry {
/* Mehr Row-Gap als auf Desktop: wenn Datum/Titel/Ort/Link auf
schmalen Screens umbrechen, sollen sie nicht zu eng aneinander
kleben. */
gap: 8px 10px;
}
.text-eyebrow {
/* 9px ist auf dem Handy schwer lesbar. */
font-size: 10px;
}
}