/* 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; }
.brett-rahmen { border: 1px solid var(--dunkel-rand); }
.brett { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; padding: 40px 40px 60px; margin: 0; list-style: none; }   /* Vorlage: 20 px Abstand unter dem Brett */
.brettfeld { aspect-ratio: 1; border: 1px solid var(--dunkel-rand); background: var(--dunkel-grund); position: relative; }
.brettfeld.hell { background: var(--akzent); }
.brettfeld.auge { background-image: url("../bilder/auge.svg"); background-repeat: no-repeat; background-size: 76% auto; background-position: 50% 42%; }
.brettfeld.auge .pupille {
  position: absolute; left: 50%; top: 42%; width: 15%; height: 15%; border-radius: 50%;
  background: var(--dunkel-grund); transform: translate(-50%, -50%);
  transition: transform .15s ease-out;
}
.brettfeld.hell.auge .pupille { background: var(--dunkel-grund); }
.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; }
@media screen and (max-width: 991px) { .brett { gap: 8px; padding: 24px; } .willkommen h1 { font-size: 28px; } .willkommen { padding: 24px; } }
@media screen and (max-width: 479px) { .brett { gap: 5px; padding: 12px; } .brettfeld { border-width: 1px; } .willkommen { padding: 20px 15px; } .willkommen h1 { font-size: 22px; } }

/* ---------------------------------------------------- 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); }
.kasten-kopf .untertitel { margin: 0; font-size: 20px; line-height: 30px; font-weight: 700; text-transform: uppercase; color: var(--dunkel-text); }
.kasten-inhalt { padding: 40px; }
.kasten-inhalt.weit { padding: 70px 40px; }
.kasten-inhalt.kataloge { padding-bottom: 83px; }          /* Vorlage: Inhalt 577 + 60 Abstand zur Leiste */
.kasten-inhalt.essays { padding: 70px 0 0; }               /* Zeilen über die volle Kastenbreite, Leiste direkt darunter */
.kasten-fuss {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  min-height: 184px; padding: 30px 40px; border-top: 1px solid var(--dunkel-rand);
}
.kasten-fuss h2 { font-size: 44px; line-height: 1.4; margin: 0; max-width: 745px; }
.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; }
@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; min-height: 0; }
  .kasten-fuss h2 { font-size: 34px; }
}
@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; }
  .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: 26px; }
}

/* ---------------------------------------------------- Kataloge */
.katalog-kacheln { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.katalog-kachel { position: relative; aspect-ratio: 1; border: 1px solid var(--dunkel-rand); background: var(--dunkel-sektion); overflow: hidden; }
.katalog-kachel > a { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; }
.katalog-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 40%; display: block;
  max-width: none; }
.katalog-kachel .nummer { position: absolute; left: 20px; top: 16px; font-size: 22px; line-height: 33px; font-weight: 500; color: var(--dunkel-text); text-shadow: 0 0 6px rgba(0,0,0,.6); }
.katalog-kachel .schleier { position: absolute; inset: 0; background: rgba(38, 37, 36, .3); transition: background .2s ease; }
.katalog-kachel .textblock {
  position: absolute; left: 20px; right: 20px; bottom: 20px; display: grid; gap: 8px;
  background: linear-gradient(transparent, rgba(38,37,36,.85) 30%); padding: 24px 0 0;
}
.katalog-kachel h3 { font-size: 24px; line-height: 1.3; margin: 0; }
.katalog-kachel p { margin: 0; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--dunkel-text-leise); max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.katalog-kachel:hover .schleier, .katalog-kachel:focus-within .schleier { background: rgba(38, 37, 36, .6); }
.katalog-kachel:hover p, .katalog-kachel:focus-within p { max-height: 90px; }
.katalog-kachel a:focus-visible { outline: 2px solid var(--akzent); outline-offset: -4px; }
@media screen and (max-width: 991px) { .katalog-kacheln { grid-template-columns: repeat(3, 1fr); } .katalog-kachel p { display: none; } }
@media screen and (max-width: 767px) { .katalog-kacheln { grid-template-columns: repeat(2, 1fr); } .katalog-kachel h3 { font-size: 20px; } }
@media (hover: none) { .katalog-kachel p { max-height: 90px; } }   /* ohne Mauszeiger immer sichtbar */

/* ---------------------------------------------------- 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; }
.termin-karte { border: 1px solid var(--dunkel-rand); display: flex; flex-direction: column; }
.termin-karte .bild { aspect-ratio: 3 / 2; background: var(--dunkel-sektion); overflow: hidden; }
.termin-karte .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.termin-karte .text { padding: 20px; display: grid; gap: 6px; flex: 1; }
.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; }
.termin-karte h3 a { color: var(--dunkel-text); text-decoration: none; display: block; padding-block: 8px; margin-block: -8px; }
.termin-karte h3 a:hover { color: var(--akzent); }
.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; margin-top: auto; 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: Karten mit Pfeilen */
.ueber-schiene { position: relative; }
.karten-spur {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  margin: 0; padding: 0 0 20px; list-style: none; scrollbar-width: thin; scrollbar-color: var(--dunkel-rand) transparent;
}
.ueber-karte { flex: 0 0 450px; scroll-snap-align: start; border: 1px solid var(--dunkel-rand); padding: 20px; display: grid; gap: 16px; align-content: start; }
.ueber-karte h3 { font-family: var(--schrift-text); font-style: normal; font-size: 28px; line-height: 1.3; font-weight: 500; margin: 0; }
.ueber-karte p { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--dunkel-text-leise); }
.ueber-karte .bild { aspect-ratio: 408 / 230; overflow: hidden; background: var(--dunkel-sektion); }
.ueber-karte .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfeile { display: flex; justify-content: flex-end; gap: 30px; margin-top: 20px; }
.pfeil {
  width: 80px; height: 61px; display: grid; place-items: center; cursor: pointer;
  background: var(--akzent); color: var(--dunkel-grund); border: 0; font: inherit; font-size: 28px; line-height: 1;
  transition: background .2s ease;
}
.pfeil:hover { background: #fff; }
.pfeil:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.pfeil[disabled] { opacity: .35; cursor: default; }
@media screen and (max-width: 767px) { .ueber-karte { flex-basis: 85%; } .pfeile { display: none; } }

/* ---------------------------------------------------- Kontakt auf der Startseite: wie die Kontaktseite (kontakt.css) */