/* Grundlage: Schrift, Farbe, Maße.
   Alles Weitere setzt auf diesen Variablen auf. */

/* Libre Franklin, variabel — alle Schnitte von 100 bis 900 in einer Datei.
   Deshalb sind es rund 29 kB und nicht neunmal so viel.

   Zwei Teilmengen statt einer: Google liefert die Schrift nach Zeichenbereich
   getrennt aus. "latin" trägt Deutsch samt Umlauten, Anführungszeichen und
   Halbgeviertstrich; "latin-ext" die osteuropäischen Zeichen, die in Namen von
   Mitwirkenden vorkommen können. Über unicode-range lädt der Browser die
   zweite Datei nur, wenn er sie wirklich braucht. */

@font-face {
    font-family: 'Libre Franklin';
    src: url('../schriften/LibreFranklin-latin.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    /* swap: der Text ist sofort lesbar, auch bevor die Schrift da ist.
       Bei einer Seite, die vor allem aus Bildern besteht, ist ein
       unsichtbarer Text die schlechtere Wahl. */
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Libre Franklin';
    src: url('../schriften/LibreFranklin-latin-ext.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

:root {
    /* Papierweiß statt Bildschirmweiß: Reines #FFF lässt Tonfotografie
       grau und tot aussehen. Der Grund ist einen Hauch warm. */
    --farbe-grund: #FBFAF7;
    /* Sehr dunkles Warmgrau statt Schwarz: Reines Schwarz auf Weiß
       flimmert im Fließtext. */
    --farbe-text: #1A1917;
    --farbe-gedaempft: #6E6A63;
    --farbe-linie: #E2DFD8;
    /* Ein eigener Ton allein für die Wortmarke auf dem Eingang.
       --farbe-text ist mit #1A1917 so dunkel, dass es als Schwarz liest; in
       Schaugröße wollten wir dort ein erkennbares, warmes Grau. Bewusst nicht
       in der Palette von theme.json: Das ist ein Ton der Gestaltung, keine
       Farbe, die Clara einem Absatz zuweisen können soll.
       Kontrast auf dem Grund: 9,6:1 — über AAA. */
    --farbe-marke: #4A4139;

    --schrift: 'Libre Franklin', system-ui, -apple-system, sans-serif;

    /* Eine Maßreihe statt frei gewählter Abstände. Großzügig — das ist
       der halbe Unterschied zwischen Galerie und Gedränge. */
    --mass-1: 0.375rem;
    --mass-2: 0.75rem;
    --mass-3: 1.5rem;
    --mass-4: 3rem;
    --mass-5: 6rem;
    --mass-6: 10rem;

    --breite-seite: 76rem;
    --breite-satz: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--farbe-grund);
    color: var(--farbe-text);
    font-family: var(--schrift);
    font-size: 1.0625rem;
    font-weight: 380;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Sichtbarer Fokus. Der Standardrahmen wird viel zu oft weggeräumt;
   ohne ihn ist die Seite mit der Tastatur unbedienbar. */
:focus-visible { outline: 2px solid var(--farbe-text); outline-offset: 3px; }

h1, h2, h3 { font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; margin: 0; }

.seite { max-width: var(--breite-seite); margin-inline: auto; padding-inline: var(--mass-3); }
.satz  { max-width: var(--breite-satz); }

/* Werkangaben, Bildunterschriften, Nachweise: klein, gedämpft, etwas
   weiter gesetzt, damit sie neben dem Titel zurücktreten. */
.klein {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--farbe-gedaempft);
    letter-spacing: 0.01em;
}

/* Bilder blenden beim Erscheinen leise ein — die einzige Bewegung auf
   dieser Seite. Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: no-preference) {
    .einblenden { animation: hanzal-einblenden 0.5s ease-out both; }
    @keyframes hanzal-einblenden {
        from { opacity: 0; transform: translateY(0.5rem); }
        to   { opacity: 1; transform: none; }
    }
}

.nur-fuer-screenreader {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Der Sprunglink muss sichtbar werden, sobald er den Fokus hat.
   Ohne diese Regel bliebe er auch dann 1x1 Pixel groß: Vorleseprogramme
   fänden ihn, sehende Tastaturnutzer sprängen ins Leere und wüssten nicht,
   wo sie sind. Das ist der häufigste halbfertige Sprunglink im Netz. */
.nur-fuer-screenreader:focus {
    position: fixed;
    top: var(--mass-2);
    left: var(--mass-2);
    z-index: 200;
    width: auto; height: auto;
    margin: 0;
    padding: var(--mass-2) var(--mass-3);
    overflow: visible;
    clip-path: none;
    background: var(--farbe-grund);
    border: 1px solid var(--farbe-text);
    text-decoration: none;
}

/* --- Kopf und Fuß --- */

.kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mass-3);
    padding-block: var(--mass-3) var(--mass-5);
}

.kopf__marke {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.kopf__marke a { text-decoration: none; }

.kopf__rechts { display: flex; align-items: baseline; gap: var(--mass-3); }

.menue { display: flex; gap: var(--mass-3); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.menue a { text-decoration: none; color: var(--farbe-gedaempft); }
.menue a:hover, .menue .current-menu-item a { color: var(--farbe-text); }

.sprachen { display: flex; gap: var(--mass-1); }
.sprachen a { text-decoration: none; }
.sprachen__aktiv { color: var(--farbe-text); }

.fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--mass-2);
    margin-top: var(--mass-6);
    padding-block: var(--mass-3);
    border-top: 1px solid var(--farbe-linie);
}
.fuss__kontakt { display: flex; gap: var(--mass-3); margin: 0; }

@media (max-width: 40rem) {
    .kopf { flex-direction: column; align-items: flex-start; gap: var(--mass-2); padding-bottom: var(--mass-4); }
}

/* --- Übersicht --- */

.jahrgruppe {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: var(--mass-3);
    margin-bottom: var(--mass-6);
}

/* Die Jahreszahl ist eine ruhige Marke am Rand, keine Überschrift, die
   mit den Werktiteln konkurriert. Deshalb klein, gedämpft und klebend —
   sie begleitet die Gruppe beim Scrollen. */
.jahrgruppe__jahr {
    position: sticky;
    top: var(--mass-3);
    align-self: start;
    margin: 0;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.raster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mass-4) var(--mass-3);
    align-items: start;
}

.kachel__link { display: block; text-decoration: none; }

/* Auf gemeinsame Höhe gebracht, nicht auf gemeinsame Breite.
   
   Der Grund ist bei diesem Werk handfest: Claras Aufnahmen reichen vom
   Querformat 3508x2481 bis zum Hochformat 1080x1350. Auf gemeinsame Breite
   gebracht ergibt das Bildhöhen zwischen 330 und 780 Pixeln — und in einem
   zweispaltigen Raster darunter Löcher von mehreren hundert Pixeln, weil
   jede Zeile so hoch wird wie ihr höchstes Bild.
   
   Auf gemeinsame Höhe ist zugleich die Art, wie man Werke im Raum hängt:
   nicht gleich breit, sondern auf einer Linie. Beschnitten wird weiterhin
   nichts — die Bilder werden nur skaliert. */
.kachel__bild {
    height: clamp(14rem, 27vw, 26rem);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left top;
}
.kachel__leer {
    display: block;
    height: clamp(14rem, 27vw, 26rem);
    aspect-ratio: 4 / 3;
    background: var(--farbe-linie);
}

.kachel__titel { margin: var(--mass-2) 0 0; font-size: 1.0625rem; font-weight: 500; }
.kachel__angaben { margin: var(--mass-1) 0 0; }

/* 17 px Titel, 15 px Unterüberschrift, 13 px Angaben — auf der Kachel
   bleibt für eine Leiter wenig Platz, also fällt jede Stufe klein aus. */
.kachel__untertitel {
    margin: var(--mass-1) 0 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--farbe-gedaempft);
}

.kachel__link:hover .kachel__titel { text-decoration: underline; text-underline-offset: 0.2em; }

@media (max-width: 52rem) {
    .jahrgruppe { grid-template-columns: 1fr; gap: var(--mass-2); }
    .jahrgruppe__jahr { position: static; }
    .raster { grid-template-columns: 1fr; gap: var(--mass-4); }

    /* Auf einer Spalte gibt es keine Zeile, die man ausrichten müsste — die
       gemeinsame Höhe wäre hier nur noch eine Verkleinerung. Ein Hochformat
       schrumpfte auf dem Telefon auf 150 Pixel Breite. Also volle Breite. */
    .kachel__bild { height: auto; width: 100%; }
    .kachel__leer { height: auto; }
}

/* --- Projektseite --- */

.projekt__aufmacher { margin: 0 0 var(--mass-4); }
.projekt__aufmacher figcaption { margin-top: var(--mass-1); }

.projekt__kopf {
    display: grid;
    grid-template-columns: 1fr 18rem;
    gap: var(--mass-4);
    align-items: start;
    margin-bottom: var(--mass-5);
}

.projekt__titel { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 400; }

/* Die Unterüberschrift ergänzt den Titel, sie konkurriert nicht mit ihm:
   deutlich kleiner als der Titel, aber größer als die Werkangaben — eine
   zweite Stimme, kein Etikett. Der hgroup selbst gibt man keinen Abstand;
   den setzt das Raster des Kopfes. */
.projekt__benennung { margin: 0; }
.projekt__untertitel {
    margin: var(--mass-2) 0 0;
    font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
    font-weight: 350;
    line-height: 1.35;
    color: var(--farbe-gedaempft);
    max-width: var(--breite-satz);
    text-wrap: balance;
}

.werkangaben { display: grid; grid-template-columns: auto 1fr; gap: var(--mass-1) var(--mass-2); margin: 0; }
.werkangaben dt { color: var(--farbe-gedaempft); }
.werkangaben dd { margin: 0; color: var(--farbe-text); }

.projekt__inhalt { max-width: var(--breite-satz); }
/* Bilder, Galerien, Video und Ton dürfen aus dem Satzspiegel heraustreten. */
.projekt__inhalt :is(figure, .wp-block-gallery, .wp-block-video, .wp-block-audio) {
    max-width: none;
    width: min(100%, var(--breite-seite));
    margin-block: var(--mass-4);
}
.projekt__inhalt figcaption { font-size: 0.8125rem; color: var(--farbe-gedaempft); margin-top: var(--mass-1); }

/* Eingebettete Abspieler von außen.
   
   Der Einbettungscode von YouTube bringt feste Maße mit — width="560"
   height="315" —, und ein iframe schrumpft von sich aus nicht. Auf dem
   Telefon steht er damit 185 px über den Bildschirmrand hinaus und schiebt
   die ganze Seite seitlich weg; in der Textspalte am Schreibtisch sind es
   16 px. Beides fällt beim Einfügen nicht auf, weil der Editor breiter ist
   als die fertige Seite.
   
   Die erste Regel gilt jedem eingebetteten Rahmen und verhindert nur das
   Überlaufen. Das Seitenverhältnis wird ausdrücklich nur denen von YouTube
   gesetzt: 16:9 ist dort die Regel, aber ein Tonabspieler oder eine Karte
   hätte ein anderes, und eine pauschale Vorgabe machte aus einem richtigen
   Rahmen einen falschen. */
.projekt__inhalt iframe {
    display: block;
    max-width: 100%;
}

.projekt__inhalt iframe[src*="youtube.com"],
.projekt__inhalt iframe[src*="youtube-nocookie.com"],
.projekt__inhalt iframe[src*="youtu.be"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Fotografennachweise auf dem Telefon.
   
   Zwei Dinge stimmen dort nicht. Erstens legt der Galerie-Block die
   Bildunterschrift als weiße Schrift auf einen abgedunkelten Streifen mitten
   aufs Bild. Auf dem Schreibtisch mag das gehen; auf dem Telefon ist ein
   Galeriebild rund 160 px breit, und „Foto: Felix Kenter" deckt dann ein
   Viertel der Arbeit zu. Zweitens ist der Nachweis dort das Auffälligste am
   Bild, obwohl er das Leiseste sein soll.
   
   Der Nachweis rückt deshalb unter das Bild und wird eine Spur kleiner —
   genau die Setzweise, die das Aufmacherbild und Abschnitt 5.5 des Spec
   ohnehin vorsehen: klein und gedämpft unter dem Bild, nicht darauf.
   
   Zur Erinnerung, falls die Regeln je überflüssig wirken: Das
   :not(#individual-image) und die zusätzliche Klasse davor sind nötig, weil
   der Kern seine eigenen Regeln mit der Gewichtung einer ID setzt. */
@media (max-width: 40rem) {
    .projekt__aufmacher figcaption,
    .projekt__inhalt figcaption {
        font-size: 0.75rem;
    }

    .projekt__inhalt .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
        position: static;
        max-width: none;
        padding: 0;
        margin-top: var(--mass-1);
        background: none;
        color: var(--farbe-gedaempft);
        /* Die Größe steht hier noch einmal, obwohl sie eine Regel weiter
           oben schon gesetzt ist: Der Kern setzt sie am Galeriebild mit drei
           Klassen, und dagegen kommt `.projekt__inhalt figcaption` nicht an. */
        font-size: 0.75rem;
        text-align: left;
    }

    .projekt__inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
        content: none;
    }
}

.projekt__weiter { margin-top: var(--mass-6); padding-top: var(--mass-3); border-top: 1px solid var(--farbe-linie); }
.projekt__weiter a { display: grid; gap: var(--mass-1); text-decoration: none; }
.projekt__weiter-titel { font-size: 1.375rem; }

@media (max-width: 52rem) {
    .projekt__kopf { grid-template-columns: 1fr; gap: var(--mass-3); margin-bottom: var(--mass-4); }
}

/* --- Abspieler --- */

/* Nur verstecken, wo ein Ersatz danebensteht.
   Das Attribut setzt hanzal_medienbloecke() beim Ausliefern — es gibt also
   genau dort, wo unser Abspieler entsteht. Ohne diese Bedingung galt die
   Regel auch im Blockeditor, der dieselbe Datei über add_editor_style()
   bekommt: Dort zeichnet sich der Block in JavaScript, der PHP-Filter läuft
   nie, und wo der Abspieler stehen sollte, blieb ein leerer Kasten. */
.wp-block-audio audio[data-hanzal-abspieler] { display: none; }

.abspieler {
    display: flex;
    align-items: center;
    gap: var(--mass-2);
    padding: var(--mass-2) 0;
    border-top: 1px solid var(--farbe-linie);
    border-bottom: 1px solid var(--farbe-linie);
}

.abspieler__knopf {
    flex: none;
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    background: none;
    border: 1px solid var(--farbe-linie);
    border-radius: 50%;
    color: var(--farbe-text);
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
}
.abspieler__knopf:hover { border-color: var(--farbe-text); }

.abspieler__balken { flex: 1; height: 2px; background: var(--farbe-linie); cursor: pointer; }
.abspieler__stand { height: 100%; width: 0; background: var(--farbe-text); }
.abspieler__zeit { flex: none; font-variant-numeric: tabular-nums; }

/* --- Video --- */
.wp-block-video video { width: 100%; background: var(--farbe-text); }

/* --- Leuchtkasten --- */

.leuchtkasten {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    gap: var(--mass-2);
    padding: var(--mass-3);
    background: color-mix(in srgb, var(--farbe-grund) 96%, black);
}
.leuchtkasten[hidden] { display: none; }

.leuchtkasten__buehne { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: var(--mass-2); }
.leuchtkasten__buehne img { max-height: 82vh; max-width: 100%; width: auto; margin-inline: auto; }

.leuchtkasten button {
    background: none; border: 0; cursor: pointer;
    color: var(--farbe-text); font-size: 2rem; line-height: 1;
    padding: var(--mass-2);
    font-family: inherit;
}
.leuchtkasten button[hidden] { display: none; }
.leuchtkasten__zu { position: absolute; top: var(--mass-2); right: var(--mass-3); font-size: 2.5rem; }

/* Bilder im Projekt sind bedienbar — das muss man auch mit der Tastatur
   sehen können. */
.projekt__inhalt img:focus-visible,
.projekt__aufmacher img:focus-visible { outline: 2px solid var(--farbe-text); outline-offset: 3px; }

/* --- Inhaltsseiten und Vita --- */

.seiteninhalt { padding-bottom: var(--mass-5); }
.seiteninhalt__titel { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 400; margin-bottom: var(--mass-4); }
/* Zwei Maße statt einem.
   
   Fließtext liest sich bei etwa 34 rem am besten — darüber verliert das
   Auge beim Zeilenwechsel die Spur. Eine Ausstellungsliste ist aber kein
   Fließtext, sondern eine Folge kurzer Einträge: Bei 34 rem bricht
   „Rendez Vous DFG 2025, Gruppenausstellung im Deutsch-Französischen
   Garten Saarbrücken“ auf drei Zeilen um und wirkt gedrängt. Deshalb ist
   der Block breiter und nur die Absätze bleiben schmal. */
.seiteninhalt__text { max-width: 46rem; }
.seiteninhalt__text p { max-width: var(--breite-satz); }
.seiteninhalt__text > * + * { margin-top: var(--mass-3); }
.seiteninhalt__text h2 { font-size: 1.0625rem; font-weight: 500; margin-top: var(--mass-5); }
.seiteninhalt__text h3 { font-size: 0.8125rem; font-weight: 500; color: var(--farbe-gedaempft); margin-top: var(--mass-4); }

/* Die Vita besteht aus drei langen Listen — Ausstellungen, Performances,
   kuratorische Praxis. Ohne Aufzählungszeichen und mit Luft dazwischen
   liest sich das wie ein gesetzter Lebenslauf und nicht wie eine Notiz.

   Der Einzug mit negativem text-indent ist Absicht: Schreibt Clara eine
   Zeile als "2026   „Bojen“ Performance …", hängt die Jahreszahl links
   heraus und die Folgezeilen stehen bündig darunter — die übliche Setzweise
   einer Ausstellungsliste, ohne dass sie eine Tabelle bauen muss. */
.seiteninhalt__text ul { list-style: none; padding: 0; margin: var(--mass-2) 0 0; }
.seiteninhalt__text li + li { margin-top: var(--mass-2); }
.seiteninhalt__text li { padding-left: 3.5rem; text-indent: -3.5rem; }

/* --- Portfolio als Blattfolge --- */

.portfolio { padding-bottom: var(--mass-5); }
.portfolio__titel { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: 400; margin-bottom: var(--mass-4); }

/* Die Spaltenzahl aus dem Editor gilt hier nicht.
   
   Der Galerie-Block bringt eine eigene Flex-Aufteilung mit und stellt die
   Bilder von Haus aus nebeneinander. Ein A4-Blatt in halber Breite ist aber
   kein Blatt mehr, sondern ein Briefmarkenbild. Die Vorlage setzt deshalb
   einspaltig durch — Clara pflegt Inhalt, nicht Gestaltung. */
.portfolio__blaetter .wp-block-gallery.has-nested-images { display: block; }

.portfolio__blaetter > * + * { margin-top: var(--mass-3); }

/* Das :not(#individual-image) ist kein Tippfehler und keine Zierde.
   
   Der Kern setzt Breite und Rand eines Galeriebildes mit genau diesem Kniff
   und erkauft sich damit die Gewichtung einer ID. Eine Regel ohne ihn
   verlöre — mit noch so vielen Klassen. Wir nehmen denselben Kniff und
   hängen eine Klasse mehr davor. Das ist der Grund, warum hier kein
   !important steht. */
.portfolio__blaetter .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0 0 var(--mass-3);
}

/* Ein Blatt füllt die Breite. Die Haarlinie ist keine Zierde: Die Blätter
   sind selbst papierweiß und schwömmen ohne Kante in den Grund der Seite. */
.portfolio__blaetter .wp-block-gallery.has-nested-images figure.wp-block-image img,
.portfolio__blaetter img {
    width: 100%;
    border: 1px solid var(--farbe-linie);
    cursor: zoom-in;
}

.portfolio__blaetter img:focus-visible { outline: 2px solid var(--farbe-text); outline-offset: 3px; }

/* Der Kern legt Bildunterschriften in der Galerie als weiße Schrift auf
   einen abgedunkelten Streifen mitten aufs Bild. Auf einem gesetzten
   Portfolioblatt wäre das eine Beschriftung quer über die Arbeit. */
.portfolio__blaetter .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    position: static;
    max-width: none;
    padding: 0;
    margin-top: var(--mass-1);
    background: none;
    color: var(--farbe-gedaempft);
    font-size: 0.8125rem;
    text-align: left;
}

.portfolio__blaetter .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
    content: none;
}


/* --- Eingang --- */

/* Eine Tür, kein Vorzimmer mit Möbeln: Wortmarke, Objekt, Verweis auf die
   Arbeiten, sonst nichts. Der Bildschirm wird ausgefüllt, ohne dass gescrollt
   werden muss — 100svh statt 100vh, weil die Leiste mobiler Browser sonst
   einen Teil abschneidet und der Verweis genau darunter verschwindet. */
/* Die Aufnahme liegt hinter dem Text, stark vergrößert und weit
   zurückgenommen — sie ist Grund, nicht Gegenstand. Deshalb steht sie außer
   Fluss und der Inhalt richtet sich allein an sich selbst aus.

   `min-height` lässt dem Fuß darunter seinen Platz: Der Eingang nimmt den
   Bildschirm minus dem, was der Fuß braucht. Zusammen ergibt das genau eine
   Bildschirmhöhe, ohne dass irgendetwas absolut gesetzt werden müsste.

   `overflow: hidden` ist nicht Kosmetik — ohne die Klammer schöbe die auf das
   Doppelte vergrößerte Aufnahme die Seite in beide Richtungen auf. */
.eingang {
    min-height: calc(100svh - 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--mass-5);
    padding: var(--mass-4) var(--mass-3);
    text-align: center;
}

.eingang__ecke {
    position: absolute;
    top: var(--mass-3);
    right: var(--mass-3);
}

/* Kein align-self mehr: In der früheren Rasteranordnung steuerte es die
   senkrechte Achse, in der jetzigen Flex-Spalte steuert dasselbe Wort die
   waagerechte — und schob die Wortmarke an den rechten Rand. */
.eingang__marke {
    margin: 0;
    /* Mitwachsend wie der Werktitel auf der Projektseite: Der Eingang muss
       auf eine Bildschirmhöhe passen, eine feste Größe wäre auf dem Telefon
       zu groß und am Schreibtisch zu klein. */
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    font-weight: 700;
    color: var(--farbe-marke);
    /* Vorher +0.01em. In Schaugröße wirkt eine positive Laufweite
       auseinandergefallen — dieselbe Verengung wie bei den Überschriften. */
    letter-spacing: -0.015em;
}

/* Die Bühne behält ihre Größe, ob dort ein Standbild oder ein Canvas steht.
   Ohne feste Proportion springt das Layout in dem Augenblick, in dem das
   Modell fertig geladen ist — und zwar genau dann, wenn jemand hinsieht. */
/* Hochformat, weil die Arbeit hochformatig ist — ein quadratischer Rahmen um
   ein stehendes Objekt ist zur Hälfte Leere.

   Mittig gesetzt und aus dem Fluss genommen: Der Text soll sich nicht an der
   Aufnahme ausrichten, sondern am Bildschirm. z-index unter null legt sie
   hinter alles; da .eingang keinen eigenen Grund malt, bleibt das Papierweiß
   des Körpers sichtbar. */
/* Am Bildfenster festgemacht und nicht am Eingang: Sonst endete die
   Aufnahme genau dort, wo der Eingang aufhört, und schnitte auf einer
   waagerechten Linie über dem Fuß ab — das sieht nach Versehen aus. So läuft
   sie durch, auch hinter dem Fuß.

   Die Klammer sitzt deshalb am Körper und trägt eine eigene Klasse: Ein
   overflow am body gilt sonst für jede Seite der Website, und auf allen
   anderen muss gescrollt werden können. */
.eingang-seite { overflow: hidden; }

.eingang__buehne {
    position: fixed;
    left: 50%;
    top: 50%;
    height: min(66svh, 40rem);
    aspect-ratio: 41 / 70;
    translate: -50% -50%;
    scale: 2;
    opacity: 0.2;
    z-index: -1;
}

.eingang__buehne > img,
.eingang__buehne > canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.eingang__tuer {
    margin: 0;
}

.eingang__tuer a {
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--farbe-gedaempft);
    text-decoration: none;
    border-bottom: 1px solid var(--farbe-linie);
    padding-bottom: 0.2em;
}

.eingang__tuer a:hover { color: var(--farbe-text); border-bottom-color: var(--farbe-gedaempft); }

/* Im Fluss und nicht absolut gesetzt.
   Ein absolut gesetzter Fuß klebt unten am Bildschirm — und legt sich über
   den Verweis auf die Arbeiten, sobald der Inhalt höher wird als der
   Bildschirm: kurzes Fenster, Zoom, größere Schrift. Am 2026-08-28 genau so
   passiert. Im Fluss kann das prinzipiell nicht mehr geschehen. */
.eingang__fuss {
    display: flex;
    justify-content: center;
    padding-block: var(--mass-3);
}

.eingang__fuss .menue { gap: var(--mass-2); }

@media (max-width: 34rem) {
    /* Auf dem Telefon ist der Bildschirm schmal: Bei doppelter Vergrößerung
       stünde von der Arbeit nur noch ein Ausschnitt aus der Mitte da. Die
       Aufnahme wird deshalb kleiner angesetzt, damit die Form lesbar bleibt.
       Der Fuß braucht hier keine Sonderregel mehr — er steht ohnehin im
       Fluss. */
    .eingang { gap: var(--mass-4); }
    .eingang__buehne { height: min(52svh, 26rem); }
}

/* Ohne diesen Hinweis merkt niemand, dass sich das Objekt drehen lässt —
   und eine Bedienung, die niemand findet, gibt es nicht. */
.eingang__buehne > canvas { cursor: grab; }
.eingang__buehne > canvas:active { cursor: grabbing; }