/* Startseite
 *
 * Gemessen an „Home“ des Webflow-Stands (1280 px):
 *   Bühne: Rahmen 1200 × 767 bei 40/140 · Schachbrett 8 × 4 Felder 131 px, Abstand 10,
 *          bei 81/181 (Innenabstand 40) · Feld dunkel #262524 / hell #ece6e3 mit 1-px-Rand,
 *          Auge 100 px bei 50 % / 42 % · Leiste 1198 × 111, Innenabstand 30/40, Linie oben,
 *          Überschrift 36/50,4
 *   Sektionen: Innenabstand 140 (Kataloge, Kontakt) bzw. 100 oben / 140 unten (Essays, Über uns)
 *   Kasten: Rahmen 1200 · Kopfzeile 71 hoch (Innenabstand 20/16/20/40, Untertitel 20/700
 *           Versalien) · Inhalt Innenabstand 40 bzw. 70 · Abschlussleiste 184 hoch
 *           (Innenabstand 30/40, Linie oben, h2 44/61,6 max 650–745, Knopf 56 hoch hell)
 *   Kataloge: Kacheln 272 × 272, Abstand 10, vier je Reihe · Titel 24 · Text 18/27
 *   Essays: Zeilen 1198 × 100, Abstand 30 (wie Essay-Übersicht)
 *   Über uns: Karten 450 breit, Innenabstand 20, Rand 1 px, Titel 28/36,4, Text 16/24,
 *             Bild 408 breit · Pfeile 80 × 61 hell, rechts unten
 * Weggelassen: Veranstaltungs-Akkordeon (durch Karten ersetzt, wie Abschnitt 8),
 * „Testimonial“ und „Career“ (Intario-Platzhalter), fünfte Über-uns-Karte (englisch).
 */

/* ---------------------------------------------------- Bühne */
.buehne { padding-top: 140px; }
/* Bis 991 px (01.10.2026, iPad hoch): Logo mittig zwischen Fensterkante und Bühnenrahmen – Logo oben 30,75 (bzw. 27,5),
 * 37,5 (bzw. 44) hoch → Rahmen bei 99 statt 140. */
@media screen and (max-width: 991px) { .buehne { padding-top: 99px; } }
.brett-rahmen { border: 1px solid var(--dunkel-rand); }
/* minmax(0, …) und min-width: 0 — Safari lässt die Spuren sonst nicht unter die Feldgröße schrumpfen (Brett rechts abgeschnitten) */
.brett { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding: 40px; margin: 0; list-style: none; }   /* rundum 40 (Vorlage hatte unten 60) */
.brettfeld { aspect-ratio: 1; min-width: 0; border: 1px solid var(--dunkel-rand); background: var(--dunkel-grund); position: relative; }
.brettfeld.hell { background: var(--akzent); }
/* Auge: eingebettetes SVG, 76 % der Feldbreite, Mitte bei 42 % der Höhe (wie Vorlage: 100 px bei 50 % / 42 %) */
.auge-bild { position: absolute; left: 12%; top: 23.8%; width: 76%; height: auto; overflow: visible; pointer-events: none; }
.auge-bild .apfel { fill: #fff; }
.auge-bild .pupille { fill: #71716e; transition: transform .18s ease-out; }                     /* Pupil.svg des Entwurfs: grau */
.auge-bild .lid { fill: none; stroke: #f1e6e4; stroke-width: 6.01; stroke-linecap: round; stroke-linejoin: round; }   /* dunkles Feld: Wimpern hellcreme */
.brettfeld.hell .auge-bild .lid { stroke: #21211e; }
@media (prefers-reduced-motion: reduce) { .auge-bild .pupille { transition: none; } }
/* Themenworte der Projekte auf freien Feldern: Serife kursiv, Größe folgt der Feldbreite, unten links, Link zur Projektseite */
.brett-rahmen { container-type: inline-size; }
.brettfeld { --feld: calc((100cqw - 152px) / 8); }
.brettfeld.wort { display: grid; align-content: end; padding: calc(var(--feld) * .09); }
.brettfeld .w { justify-self: start; font-family: var(--schrift-display); font-style: italic; font-weight: 500; font-optical-sizing: none;
  font-size: calc(var(--feld) * .19); line-height: 1.1; white-space: nowrap; color: var(--dunkel-text); text-decoration: none; transition: color .2s ease; }
.brettfeld .w::after { content: ""; position: absolute; inset: 0; }        /* ganzes Feld klickbar */
.brettfeld.hell .w { color: var(--dunkel-grund); }
/* Beim Überfahren: dunkle Felder deutlich (Beige → Weiß wäre zu wenig, daher zusätzlich Feldgrund heller), helle Felder nur leicht (Braun) */
.brettfeld.wort { transition: background-color .25s ease; }
.brettfeld.wort:hover { background: #2e2d2c; }   /* nur wenige Prozent heller als #262524 */
.brettfeld.wort:hover .w { color: #fff; }
.brettfeld.hell.wort:hover { background: #e2dbd7; }
.brettfeld.hell.wort:hover .w { color: #4a423d; }
.brettfeld .w:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
.willkommen { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 40px; border-top: 1px solid var(--dunkel-rand); }
.willkommen h1 { font-size: 36px; line-height: 1.4; margin: 0; font-family: var(--schrift-display); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; hyphens: manual; }
@media screen and (max-width: 991px) { .brett { gap: 8px; padding: 24px; } .brettfeld { --feld: calc((100cqw - 106px) / 8); } .willkommen h1 { font-size: 28px; } .willkommen { padding: 24px; } }
@media screen and (max-width: 767px) { .brettfeld .w { display: none; } }   /* Felder zu klein für Worte */
@media screen and (max-width: 479px) { .brett { gap: 5px; padding: 12px; } .brettfeld { border-width: 1px; } .willkommen { padding: 20px 15px; } .willkommen h1 { font-size: 22px; } }

/* Kontaktkasten blendet beim Hineinscrollen ein (startseite.js setzt .sichtbar; ohne Skript sofort sichtbar) */
.js .erscheint { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .erscheint.sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .erscheint { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------- Gemeinsames Kastenraster */
.start-abschnitt { padding: 140px 0; }
.start-abschnitt.knapp { padding-top: 100px; }
.kasten { border: 1px solid var(--dunkel-rand); }
.kasten-kopf { display: flex; align-items: center; min-height: 71px; padding: 20px 16px 20px 40px; border-bottom: 1px solid var(--dunkel-rand); }
/* Schräge hinter dem Untertitel (Vorlage: .subtitle-rotate-shape, 70 breit, volle Kopfhöhe, 15 px Abstand) */
.kasten-kopf .schraege { align-self: stretch; width: 70px; margin: -20px 0 -20px 15px; flex: none;
  background: linear-gradient(to top left, transparent calc(50% - .6px), var(--dunkel-rand) calc(50% - .6px), var(--dunkel-rand) calc(50% + .6px), transparent calc(50% + .6px)); }
.kasten-kopf .untertitel { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; text-transform: uppercase; color: var(--dunkel-text); }   /* größer als die Kacheltitel (26 px) */
/* Katalog-Übersicht: Titel und Vorspann links, Bestellknopf rechts auf Höhe des Vorspanns; 40 px Luft zum Kasten */
.katalog-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 40px; }
.katalog-kopf .knopf { white-space: nowrap; flex: none; margin-bottom: -13px; }   /* Knopftext auf der Zeile des Vorspanns: (56 − 30) / 2 */
.katalog-vorspann { max-width: none; }
@media screen and (max-width: 767px) { .katalog-kopf { flex-direction: column; align-items: flex-start; gap: 20px; } }
.kasten-inhalt { padding: 40px; }   /* rundum gleich (22.09.2026) */
.kasten-inhalt.weit { padding: 70px 40px; }
.kasten-inhalt.essays { padding: 40px 0 0; }   /* unten 0: der Hinweis „Weitere Essays …“ hat oben und unten gleiche Luft (01.10.2026) */               /* Zeilen über die volle Kastenbreite, Leiste direkt darunter */
/* Nur waagrechte Linien (wie im Entwurf): seitlich liegt der Kastenrand, unten die Leiste – keine doppelten Linien */
.essays .essay-zeile { border-left: 0; border-right: 0; }
/* Essay-Zeile mit Bild: wächst beim Überfahren von 100 auf 300 px und gibt das Foto (mit Schleier) frei – nach dem Entwurf */
.essays .essay-zeile.mit-bild { position: relative; overflow: hidden; height: 100px; min-height: 0; transition: height .7s cubic-bezier(.45, 0, .2, 1);
  grid-template-rows: 1fr auto 1fr; align-items: center; }   /* feste Höhe: Wachsen ab dem ersten Moment sichtbar */   /* Luft oben · Inhalt · Luft unten, gleich groß – der Text bleibt mittig */
.essays .essay-zeile.mit-bild > h3, .essays .essay-zeile.mit-bild > .von, .essays .essay-zeile.mit-bild > .knopf, .essays .essay-zeile.mit-bild > .ausstehend { grid-row: 2; }
.essays .essay-zeile.mit-bild > * { position: relative; z-index: 1; }
.essays .essay-zeile.mit-bild h3 { position: static; }   /* der gestreckte Link bezieht sich auf die Zeile */
.essays .essay-zeile .hintergrund { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .6s ease; }
.essays .essay-zeile .hintergrund img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.4s ease; }
.essays .essay-zeile .hintergrund::after { content: ""; position: absolute; inset: 0; background: rgba(6, 6, 6, .55); }
.essays .essay-liste:not(.gesteuert) .essay-zeile.mit-bild:hover, .essays .essay-zeile.aktiv { height: 300px; }
.essays .essay-liste:not(.gesteuert) .essay-zeile.mit-bild:hover .hintergrund, .essays .essay-zeile.aktiv .hintergrund { opacity: 1; }
.essays .essay-liste:not(.gesteuert) .essay-zeile.mit-bild:hover .hintergrund img, .essays .essay-zeile.aktiv .hintergrund img { transform: none; }
@media (prefers-reduced-motion: reduce) { .essays .essay-zeile.mit-bild, .essays .essay-zeile .hintergrund, .essays .essay-zeile .hintergrund img { transition: none; } .termin-karte .bild img { transition: none; } }
/* Schmaler (01.10.2026, iPad quer): Titel brach neben Autor und Knopf zweizeilig um und wurde von der festen Höhe
 * abgeschnitten. Bis 1229 px steht der Autor unter dem Titel, der Knopf rechts über beide Zeilen – passt in 100 px. */
@media screen and (max-width: 1229px) {
  .essays .essay-zeile.mit-bild { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto 1fr; row-gap: 2px; }
  .essays .essay-zeile.mit-bild > h3 { grid-row: 2; grid-column: 1; }
  .essays .essay-zeile.mit-bild > .von { grid-row: 3; grid-column: 1; }
  .essays .essay-zeile.mit-bild > .knopf, .essays .essay-zeile.mit-bild > .ausstehend { grid-row: 2 / 4; grid-column: 2; }
  .essays .essay-zeile.mit-bild .von a { padding-block: 0; }
}
/* Ohne Maus (Tablet, Handy) und bis 991 px: kein Aufklappen – Zeilen wachsen mit dem Inhalt, kein Hintergrundbild.
 * (zeilen.js schaltet sich ohne Hover ohnehin ab; die reine CSS-Hover-Regel bliebe nach einem Tipp „kleben“.) */
@media (hover: none), screen and (max-width: 991px) {
  .essays .essay-zeile.mit-bild,
  .essays .essay-liste:not(.gesteuert) .essay-zeile.mit-bild:hover, .essays .essay-zeile.aktiv { height: auto; min-height: 100px; padding-block: 24px; transition: none; }
  .essays .essay-zeile .hintergrund { display: none; }
}
.kasten-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 30px 40px; border-top: 1px solid var(--dunkel-rand);
}
/* Abweichung von der Vorlage (44/61,6, zweizeilig, Leiste 184 hoch) auf Wunsch vom 21.09.2026:
 * Größe wie die Willkommenszeile der Bühne (36/50,4) und einzeilig, wo es passt. */
.kasten-fuss h2 { font-size: 36px; line-height: 1.4; margin: 0; }
.knopf-voll { background: var(--akzent); color: var(--dunkel-grund); border-color: transparent; padding: 0 25px; white-space: nowrap; }
.knopf-voll:hover { background: #fff; color: var(--dunkel-grund); }
.kasten-fuss .knopf { white-space: nowrap; }
/* Knöpfe der Abschlussleisten: beim Überfahren wird die Fläche durchsichtig, vier Linien wachsen aus der Mitte
 * und laufen 14 px über die Ecken hinaus (::before waagrecht, ::after senkrecht). Reines CSS. */
.katalog-kopf .knopf, .kasten-fuss .knopf { position: relative; transition: background-color .35s ease, color .35s ease, border-color .35s ease; }
.katalog-kopf .knopf::before, .katalog-kopf .knopf::after, .kasten-fuss .knopf::before, .kasten-fuss .knopf::after { content: ""; position: absolute; pointer-events: none; border: 0 solid var(--dunkel-rand-hell, #6e6d6b); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.katalog-kopf .knopf::before, .kasten-fuss .knopf::before { inset: -1px -14px; border-width: 1px 0; transform: scaleX(0); }
.katalog-kopf .knopf::after, .kasten-fuss .knopf::after { inset: -14px -1px; border-width: 0 1px; transform: scaleY(0); }
.katalog-kopf .knopf:hover, .katalog-kopf .knopf:focus-visible, .kasten-fuss .knopf:hover, .kasten-fuss .knopf:focus-visible { background: transparent; color: #fff; border-color: transparent; }
.katalog-kopf .knopf:hover::before, .katalog-kopf .knopf:hover::after, .kasten-fuss .knopf:hover::before, .kasten-fuss .knopf:hover::after, .kasten-fuss .knopf:focus-visible::before, .kasten-fuss .knopf:focus-visible::after { transform: none; }
@media (prefers-reduced-motion: reduce) { .kasten-fuss .knopf, .katalog-kopf .knopf::before, .katalog-kopf .knopf::after, .kasten-fuss .knopf::before, .kasten-fuss .knopf::after { transition: none; } }
@media screen and (max-width: 991px) {
  .start-abschnitt { padding: 100px 0; } .start-abschnitt.knapp { padding-top: 80px; }
  .kasten-inhalt, .kasten-inhalt.weit, .kasten-inhalt.kataloge { padding: 30px; }
  .kasten-inhalt.essays { padding: 30px 0 0; }
  .kasten-fuss { flex-direction: column; align-items: flex-start; padding: 30px; }
  .kasten-fuss h2 { font-size: 28px; }
  /* 01.10.2026 (iPad hoch): Abschnittstitel so groß wie „Herzlich willkommen“ (28) und auf der Kachelkante (30) –
   * Essay-Zeilen und Hinweis ebenfalls auf 30. */
  .kasten-kopf { padding-left: 30px; } .kasten-kopf .untertitel { font-size: 28px; line-height: 34px; }
  .essays .essay-zeile, .kasten-inhalt .essay-ausblick { padding-left: 30px; padding-right: 30px; }
}
@media screen and (max-width: 479px) {
  .start-abschnitt, .start-abschnitt.knapp { padding: 60px 0; }
  .kasten-kopf { padding: 14px 15px; min-height: 0; } .kasten-kopf .untertitel { font-size: 17px; } .essays .essay-zeile, .kasten-inhalt .essay-ausblick { padding-left: 15px; padding-right: 15px; } .kasten-kopf .schraege { margin-block: -14px; width: 50px; }
  .kasten-inhalt, .kasten-inhalt.weit, .kasten-inhalt.kataloge { padding: 15px; }
  .kasten-inhalt.essays { padding: 15px 0 0; }
  .kasten-fuss { padding: 24px 15px; } .kasten-fuss h2 { font-size: 22px; }
}

/* ---------------------------------------------------- Kataloge
 * Vorlage (1280 px): je Katalog ein Kachelpaar — Textkachel (Rand 1 px, Nummer 22/33 oben
 * links bei 20/20, Titel 24/31,2 unten links, Kurzzeile 18/27 auf Hover) und Bildkachel
 * (270 × 270 im 1-px-Rand, Schleier rgba(38,37,36,.3)). Kacheln 272, Abstand 10, vier je
 * Reihe; in jeder zweiten Reihe steht das Bild links. Zwischen den Reihen eine 1-px-Linie
 * mit je 16 px Abstand (Reihe 2 beginnt 305 px unter Reihe 1).
 */
.katalog-paare {
  --spalten: 4; --k: calc((100cqw - (var(--spalten) - 1) * 10px) / var(--spalten));
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 33px 10px;
  /* Trennlinien zwischen den Reihen: Kachelhöhe + 16 px, dann 1 px Linie, dann 16 px */
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--k) + 16px),
    var(--dunkel-rand) calc(var(--k) + 16px), var(--dunkel-rand) calc(var(--k) + 17px),
    transparent calc(var(--k) + 17px), transparent calc(var(--k) + 33px));
}
.kasten-inhalt.kataloge { container-type: inline-size; padding-bottom: 0; }
.kasten-inhalt.kataloge + .kasten-fuss { margin-top: 40px; }
.katalog-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.katalog-paar:nth-child(4n+3) .kk-bild, .katalog-paar:nth-child(4n+4) .kk-bild { order: -1; }   /* jede zweite Reihe: Bild links */
/* Titel und Jahreszeile zum Bild hin: in Reihen mit Bild rechts rechtsbündig („Zickzack“, Wunsch vom 22.09.2026); die Nummer bleibt links oben */
.katalog-paar:nth-child(4n+1) .kk-text, .katalog-paar:nth-child(4n+2) .kk-text { text-align: right; }
.katalog-paar:nth-child(4n+1) .kk-text .textblock, .katalog-paar:nth-child(4n+2) .kk-text .textblock { justify-items: end; }
.kk { position: relative; display: block; aspect-ratio: 1; border: 1px solid var(--dunkel-rand); color: inherit; text-decoration: none; overflow: hidden; background: var(--dunkel-grund); }
.kk-text .nummer { position: absolute; left: 16px; top: 20px; font-size: 22px; line-height: 33px; font-weight: 500; color: var(--dunkel-text); }
/* Kurztext klappt über die Rasterzeilenhöhe auf (0fr → 1fr) – gleichmäßig wie bei Über uns, kein Ploppen; drei Zeilen wie eine */
.kk-text .textblock { position: absolute; left: min(16px, 5.9cqw); right: min(16px, 5.9cqw); bottom: min(16px, 5.9cqw); display: grid; grid-template-rows: auto auto 0fr; transition: grid-template-rows .45s cubic-bezier(.22, .61, .36, 1); }
.katalog-paar:hover .kk-text .textblock, .kk-text:focus-visible .textblock { grid-template-rows: auto auto 1fr; }
.kk-text h3 { font-size: 24px; line-height: 1.3; margin: 0; max-width: 220px; transition: color .2s ease; }
/* Titel einzeilig im Duktus des Logos: VERSAL in Barlow Bold, „&thema“ klein in Source Serif
 * Medium Italic — Serifenteil 1,26 × so groß wie die Grotesk (die für das Logo freigegebene
 * Proportion), Et-Zeichen aufrecht (kommt site-weit aus schriften.css). */
/* Größe und Seitenabstand folgen der Kachelbreite (26 px / 16 px bei 272 px Kachel): der längste Titel („SCHACH&religion“) bleibt einzeilig */
.kk { container-type: inline-size; }
/* Katalog-Übersicht (01.10.2026): Preis in eigener Zeile, ohne Trennpunkt. „Jahr · Seiten · Preis“ passte auch in der
 * breitesten Kachel (271 px) nicht immer in eine Zeile – auf dem iPhone brach u. a. das €-Zeichen einzeln um. */
.kk-text .preis { display: block; } .kk-text .preis-trenner { display: none; }
.kk-text h3 { font-size: clamp(13px, 9.56cqw, 26px); line-height: 1.3; margin: 0; white-space: nowrap; font-weight: 500; transition: color .2s ease; }
.kk-text h3 .versal { font-family: var(--schrift-text); font-style: normal; font-weight: 700; letter-spacing: .005em; text-transform: uppercase; }
.kk-text h3.zweizeilig { line-height: 1.08; }
.kk-text h3.zweizeilig .klein { display: block; }   /* lange Titel (Machtspiele, Krone): Serifenteil in die zweite Zeile */
.kk-text h3 .klein { font-size: 1.26em; text-transform: lowercase; }
/* Et-Zeichen wie im Logo: aufrechte Form, von Hand um den Winkel der Kursiven (12°) schräg gestellt;
 * etwas Luft zu „SCHACH“ (wie im Logo, 0,047 em) und etwas mehr zum Thema. */
.kk-text h3 .et { display: inline-block; font-style: normal; transform: skewX(-12deg); transform-origin: 50% 100%; margin: 0 .183em 0 0; }   /* links 0: das gekippte Zeichen (Drehpunkt unten) wirkt sonst weiter entfernt als im Logo, wo 0,047 Geviert stehen */
/* Jahr als Unterzeile in Barlow normal; Abstand Titel → Jahr (4) kleiner als Jahr → Kurztext (18) */
.kk-text .jahr { margin-top: 4px; font-size: 20px; line-height: 28px; font-weight: 400; color: var(--dunkel-text-leise); }
.kk-text p { margin: 0; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--dunkel-text-leise);
  min-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px); padding-top: 0;   /* Luft über dem Text erst im offenen Zustand – ein fester Innenabstand bliebe auch zugeklappt stehen */
  transition: opacity .4s ease .05s, transform .45s cubic-bezier(.22, .61, .36, 1), padding .45s cubic-bezier(.22, .61, .36, 1); }
.katalog-paar:hover .kk-text p, .kk-text:focus-visible p { opacity: 1; transform: none; padding-top: 18px; }
.katalog-paar:hover .kk-text h3, .kk-text:focus-visible h3 { color: var(--akzent); }
.kk-text:focus-visible { outline: 2px solid var(--akzent); outline-offset: -4px; }
/* Bildkachel: heller Grund wie die Mockups des Entwurfs (Ecken dort 232/240/243 bis 249/255/255) */
/* Bildkachel: das helle Beige der Brettfelder in der Bühne (--akzent) */
.kk-bild { background: var(--akzent); display: grid; place-items: center; }
.kk-bild img { display: block; width: auto; height: auto; max-width: min(56%, var(--bw)); max-height: min(70%, var(--bh)); }
.kk-liegend img {
  transform: perspective(900px) rotateX(38deg) rotateZ(-24deg) translateY(-4%);
  box-shadow: 1px 1px 0 #d6cfcb, 2px 2px 0 #cbc3bf, 3px 3px 0 #c0b8b4, 4px 4px 0 #b5ada9, 16px 22px 24px rgba(60, 50, 45, .35);
  transition: transform .4s ease;
}
.katalog-paar:hover .kk-liegend img { transform: perspective(900px) rotateX(30deg) rotateZ(-20deg) translateY(-6%); }
/* Bild rechts (Paare 4n+1, 4n+2): Aufbau an der senkrechten Achse gespiegelt – das Buch kippt zur Textkachel hin
 * (nur die Drehung; Schatten bleibt wie überall, damit das Licht von derselben Seite kommt) */
.katalog-paar:nth-child(4n+1) .kk-liegend img, .katalog-paar:nth-child(4n+2) .kk-liegend img { transform: perspective(900px) rotateX(38deg) rotateZ(24deg) translateY(-4%); }
.katalog-paar:nth-child(4n+1):hover .kk-liegend img, .katalog-paar:nth-child(4n+2):hover .kk-liegend img { transform: perspective(900px) rotateX(30deg) rotateZ(20deg) translateY(-6%); }
.kk-voll img { max-width: none; max-height: none; width: 100%; height: 100%; object-fit: cover; }
.kk-klein img { max-width: min(80%, var(--bw)); max-height: var(--bh); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 58%, transparent 100%); }   /* heller Fotogrund läuft weich in den Kachelgrund aus */
.kk-klein { background: var(--akzent); }
/* Kein Dunkelschleier wie in der Vorlage (rgba 38/37/36, .3): er machte aus dem Beige ein Grau.
 * Nur das Mockup-Foto (Film) bleibt leicht abgedunkelt, damit es neben dem Beige nicht herausfällt. */
.kk-bild .schleier { position: absolute; inset: 0; background: transparent; transition: background .25s ease; pointer-events: none; }
.kk-voll .schleier { background: rgba(38, 37, 36, .12); }
.katalog-paar:hover .kk-voll .schleier { background: transparent; }
/* Zwei Paare je Reihe bis 700 px (01.10.2026, iPad hoch), darunter ein Paar je Reihe im Zickzack */
@media screen and (min-width: 700px) and (max-width: 991px) {
  .kk-text .nummer { font-size: 18px; left: 12px; top: 10px; } .kk-text .jahr { font-size: 16px; line-height: 22px; }
}
@media screen and (max-width: 699px) {
  .katalog-paare { --spalten: 2; grid-template-columns: 1fr; }
  .katalog-paar:nth-child(4n+3) .kk-bild, .katalog-paar:nth-child(4n+4) .kk-bild { order: 0; }
  .katalog-paar:nth-child(even) .kk-bild { order: -1; }
  /* Einspaltig: Zickzack je Paar statt je Reihe – ungerade Paare Bild rechts, gerade Bild links; Text und Buch
   * zeigen immer zur Mitte. Selektoren mit :nth-child, damit sie die Desktop-Regeln (4n+1/4n+2) sicher überschreiben. */
  .katalog-paar:nth-child(even) .kk-text { text-align: left; } .katalog-paar:nth-child(even) .kk-text .textblock { justify-items: start; }
  .katalog-paar:nth-child(odd) .kk-text { text-align: right; } .katalog-paar:nth-child(odd) .kk-text .textblock { justify-items: end; }
  .katalog-paar:nth-child(even) .kk-liegend img { transform: perspective(900px) rotateX(38deg) rotateZ(-24deg) translateY(-4%); }
  .katalog-paar:nth-child(even):hover .kk-liegend img { transform: perspective(900px) rotateX(30deg) rotateZ(-20deg) translateY(-6%); }
  .katalog-paar:nth-child(odd) .kk-liegend img { transform: perspective(900px) rotateX(38deg) rotateZ(24deg) translateY(-4%); }
  .katalog-paar:nth-child(odd):hover .kk-liegend img { transform: perspective(900px) rotateX(30deg) rotateZ(20deg) translateY(-6%); }
}
@media screen and (max-width: 991px) {
  .kk-text p { display: none; }
  .kasten-inhalt.kataloge + .kasten-fuss { margin-top: 30px; }
}
@media screen and (max-width: 479px) {
  .kk-text .nummer { left: 12px; top: 10px; font-size: 18px; }
  .kk-text .textblock { bottom: 12px; }
  .kk-text .jahr { font-size: 14px; line-height: 19px; margin-top: 2px; }
  .kasten-inhalt.kataloge + .kasten-fuss { margin-top: 15px; }
}
@media (prefers-reduced-motion: reduce) { .kk-liegend img, .kk-text p, .kk-text .textblock, .kk-bild .schleier { transition: none; } }

/* ---------------------------------------------------- Veranstaltungen (Ersatz für das Akkordeon) */
.termin-karten { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Quadratisch wie die Brettfelder: Foto (falls vorhanden) füllt die Kachel, Text liegt unten auf einem Schleier */
.termin-karte { border: 1px solid var(--dunkel-rand); aspect-ratio: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--dunkel-grund); isolation: isolate; }
.termin-karte .bild { position: absolute; inset: 0; z-index: -1; background: var(--dunkel-grund); isolation: isolate; }   /* hinter dem (nicht positionierten) Text, damit der gestreckte Link die ganze Kachel deckt */
/* Ohne Foto: Kacheln im Schachbrett-Wechsel dunkel · hell · dunkel · hell (Text auf hellem Grund dunkel) */
@media screen and (min-width: 992px), screen and (max-width: 479px) {
  .termin-karte:nth-child(even) .bild:empty { background: var(--akzent); }
  .termin-karte:nth-child(even):has(.bild:empty) time, .termin-karte:nth-child(even):has(.bild:empty) h3 a, .termin-karte:nth-child(even):has(.bild:empty) .ort { color: var(--dunkel-grund); }
  .termin-karte:nth-child(even):has(.bild:empty) .projekt-tag { color: #7a6f68; }
  .termin-karte:nth-child(even):has(.bild:empty):hover h3 a { color: #5a514c; }
  .termin-karte:nth-child(even):has(.bild:empty) .pfeil-schraeg { stroke: #7a6f68; }
  .termin-karte:nth-child(even):has(.bild:empty):hover .pfeil-schraeg { stroke: var(--dunkel-grund); }
}
/* Zwei Spalten (480–991 px): Schachbrett statt Streifen – zweite Reihe getauscht (hell = 2. und 3. Kachel), 01.10.2026 */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)) .bild:empty { background: var(--akzent); }
  .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty) time, .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty) h3 a, .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty) .ort { color: var(--dunkel-grund); }
  .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty) .projekt-tag { color: #7a6f68; }
  .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty):hover h3 a { color: #5a514c; }
  .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty) .pfeil-schraeg { stroke: #7a6f68; }
  .termin-karte:is(:nth-child(4n+2), :nth-child(4n+3)):has(.bild:empty):hover .pfeil-schraeg { stroke: var(--dunkel-grund); }
}
.termin-karte .bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; will-change: transform; position: relative; z-index: 0; }
.termin-karte:hover .bild img { transform: scale(1.04); }
.termin-karte .bild:not(:empty)::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(38, 37, 36, .96) 30%, rgba(38, 37, 36, .55) 65%, rgba(38, 37, 36, .15)); }
.termin-karte .text { padding: 20px; display: grid; gap: 6px; }
/* Pfeil oben rechts (nur wenn es eine Seite gibt): drei Striche, 45° nach rechts oben */
.termin-karte .pfeil-schraeg { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; fill: none; stroke: var(--dunkel-text-leise); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s ease, transform .3s ease; }
.termin-karte:hover .pfeil-schraeg { stroke: var(--akzent); transform: translate(2px, -2px); }
.termin-karte time { font-size: 16px; color: var(--dunkel-text-leise); font-variant-numeric: tabular-nums; }
.termin-karte h3 { font-family: var(--schrift-text); font-style: normal; font-weight: 600; font-size: 20px; line-height: 1.4; margin: 0; }
/* Die ganze Kachel ist klickbar (gestreckter Link der Überschrift); der Projekt-Link darunter bleibt eigenständig */
.termin-karte h3 a { color: var(--dunkel-text); text-decoration: none; display: block; padding-block: 8px; margin-block: -8px; transition: color .3s ease; }
.termin-karte h3 a::after { content: ""; position: absolute; inset: 0; }
.termin-karte:hover h3 a, .termin-karte h3 a:focus-visible { color: var(--akzent); }
.termin-karte h3 a:focus-visible { outline: none; }
.termin-karte:has(h3 a:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.termin-karte .projekt-tag { position: relative; z-index: 1; }
.termin-karte .ort { margin: 0; font-size: 16px; line-height: 1.5; color: var(--dunkel-text-leise); }
.termin-karte .projekt-tag { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; color: var(--akzent); text-decoration: none; padding-top: 8px; display: inline-block; line-height: 20px; padding-block: 12px; margin-bottom: -12px; }
@media screen and (max-width: 991px) { .termin-karten { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .termin-karten { grid-template-columns: 1fr; } }

/* ---------------------------------------------------- Über uns: vier quadratische Kacheln wie die Veranstaltungen */
.ueber-karten { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ueber-karte { border: 1px solid var(--dunkel-rand); aspect-ratio: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--dunkel-grund); }
/* Ohne Fotos: Schachbrett-Wechsel dunkel · hell · dunkel · hell wie bei den Veranstaltungskacheln */
@media screen and (min-width: 700px), screen and (max-width: 479px) {
  .ueber-karte:nth-child(even) { background: var(--akzent); }
  .ueber-karte:nth-child(even) h3 { color: var(--dunkel-grund); }
  .ueber-karte:nth-child(even) p { color: #3a3532; }
}
/* Zwei Spalten (480–699 px): Schachbrett statt Streifen – zweite Reihe getauscht, 01.10.2026 */
@media screen and (min-width: 480px) and (max-width: 699px) {
  .ueber-karte:is(:nth-child(4n+2), :nth-child(4n+3)) { background: var(--akzent); }
  .ueber-karte:is(:nth-child(4n+2), :nth-child(4n+3)) h3 { color: var(--dunkel-grund); }
  .ueber-karte:is(:nth-child(4n+2), :nth-child(4n+3)) p { color: #3a3532; }
}
.ueber-karte .text { position: relative; padding: 20px; display: grid; gap: 10px; align-content: end; }   /* Kurztext dauerhaft sichtbar (22.09.2026) */
.ueber-karte h3 { font-family: var(--schrift-text); font-style: normal; font-size: 20px; line-height: 1.3; font-weight: 600; margin: 0; }
.ueber-karte p { margin: 0; font-size: 15px; line-height: 22px; color: var(--dunkel-text-leise); }
/* 700–991 px (01.10.2026, iPad hoch): vier in einer Reihe, Schrift kleiner; die Kachel darf höher als breit werden,
 * wenn der Text sonst nicht passt (overflow sichtbar → Mindesthöhe aus dem Inhalt). */
@media screen and (min-width: 700px) and (max-width: 991px) {
  .ueber-karten { grid-template-columns: repeat(4, minmax(0, 1fr)); container-type: inline-size; }
  /* mindestens quadratisch (Kachelbreite = (100cqw − 3 × 10) / 4), höher nur wenn der Text es braucht; alle gleich hoch */
  .ueber-karte { overflow: visible; min-width: 0; aspect-ratio: auto; min-height: calc((100cqw - 30px) / 4); }
  .ueber-karte .text { padding: 14px; gap: 6px; }
  .ueber-karte h3 { font-size: 15px; line-height: 1.3; }
  .ueber-karte p { font-size: 14px; line-height: 20px; }
}
@media screen and (max-width: 699px) { .ueber-karten { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 479px) { .ueber-karten { grid-template-columns: 1fr; } }
/* ---------------------------------------------------- Kontakt auf der Startseite: wie die Kontaktseite (kontakt.css) */