/* Seitenrahmen: Kopf, Navigation, Abschnitte, Fuß
 *
 * Maße am publishten Webflow-Stand vom 01.09.2026 gemessen (1280 px und
 * 375 px), nicht geschätzt. Abweichungen vom Original sind kommentiert.
 */

/* ---------------------------------------------------- Container
 * Abweichung vom Original (das hat keine Maximalbreite und läuft bis 1920 px
 * voll): seit 22.09.2026 auf 1440 px begrenzt — bis 1440 wie bisher, darüber
 * wächst nur der Rand. So bleiben Brett, Kacheln und Umschläge in den
 * Proportionen des 1280-px-Entwurfs, auch auf großen Displays. Kopf und Fuß
 * nutzen dieselbe Bahn. Der Textblock darunter begrenzt sich auf 1120 px.
 */
.bahn {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 40px;
}
/* Seit 23.09.2026: auf flachen Fenstern wird die
 * Bahn schmaler, damit die Bühne samt Willkommensleiste ganz ins Fenster passt.
 * Bühnenhöhe = 286 + (Bahn − 80) / 2 → Bahn ≤ 2 × Höhe − 492; 16 px Luft
 * unter der Leiste. Nie schmaler als 1120, nie breiter als 1440. */
@media screen and (min-width: 1280px) { .bahn { max-width: clamp(1120px, calc(200svh - 524px), 1440px); } }
/* Erst ab 1280 px (01.10.2026, iPad mini quer 1133 px): darunter rückte die Untergrenze 1120 die Kästen nur um wenige
 * Pixel gegenüber dem Kopf ein – sah aus wie ein Fehler und brachte die Bühne trotzdem nicht ins Fenster. */
.bahn.kopf-innen { max-width: 1440px; }   /* Kopf ausgenommen: bleibt im 1440er-Raster und nutzt den Platz, den er hat */
@media screen and (max-width: 991px) { .bahn { padding-inline: 30px; } }
@media screen and (max-width: 767px) { .bahn { padding-inline: 20px; } }
@media screen and (max-width: 479px) { .bahn { padding-inline: 15px; } }

/* Schmaler Lesetext — im Original .portfolio-details-content-block */
.bahn-eng { max-width: 1120px; margin-inline: auto; }

/* ---------------------------------------------------- Kopf
 * Liegt absolut über dem Seitenanfang; der erste Abschnitt schafft mit
 * 140 px Innenabstand oben den Platz dafür.
 */
.kopf {
  position: absolute; top: 30px; left: 0; right: 0; z-index: 40;
  padding-block: 20px;
}
@media screen and (max-width: 767px) { .kopf { top: 0; } }

/* Mitlaufender Kopf (Wunsch vom 21.09.2026, Abweichung vom Webflow-Original,
 * dessen Kopf mit der Seite wegscrollt). Am Seitenanfang unverändert an der
 * gemessenen Stelle und transparent; nach den ersten Pixeln wird er zu einem
 * flachen Balken mit Grund. Nur mit Skript (navigation.js setzt .js und
 * .gescrollt) — ohne Skript bleibt es beim absoluten Kopf von oben. */
.js .kopf {
  position: fixed; top: 0; padding-block: 50px 20px;
  background: transparent; border-bottom: 1px solid transparent;
  transition: padding .25s ease, border-color .25s ease;   /* Grundfarbe ohne Übergang: sofort deckend, sonst scheint beim schnellen Scrollen Inhalt durch */
}
.js .kopf.gescrollt { padding-block: 18px; background: var(--dunkel-grund); border-bottom-color: var(--dunkel-rand); }
.js .kopf .marke, .js .kopf .marke img { transition: height .25s ease; }
/* Im Balken: Bildzeichen 40 px (= Seitenrand), Wortmarke 52 px hoch — Versalhöhe 21/77 × 52 = 14,2 px,
 * nicht kleiner als die der Menüpunkte (Barlow 700, 20 px → 14 px). */
.js .kopf.gescrollt .kopf-innen, .js .kopf.gescrollt .marke, .js .kopf.gescrollt .marke .wort { height: 52px; }
.js .kopf.gescrollt .marke .zeichen { height: 40px; }
@media screen and (max-width: 991px) { .js .kopf { padding-block: 20px; } }   /* 01.10.2026: auch 768–991 (vorher 50) */
@media screen and (max-width: 767px) { .js .kopf { padding-block: 20px; } .js .kopf.gescrollt { padding-block: 14px; } }
@media screen and (max-width: 479px) { .js .kopf.gescrollt .kopf-innen, .js .kopf.gescrollt .marke { height: 44px; } .js .kopf.gescrollt .marke .wort { height: 38px; } .js .kopf.gescrollt .marke .zeichen { height: 34px; } }
@media (prefers-reduced-motion: reduce) { .js .kopf, .js .kopf .marke, .js .kopf .marke img { transition: none; } }
html { scroll-padding-top: 100px; }
/* Höhe des gescrollten Kopfbalkens – für Elemente, die darunter kleben (Jahresleiste der Veranstaltungen) */
:root { --kopf-balken: 98.5px; }
@media screen and (max-width: 991px) { :root { --kopf-balken: 89px; } }
@media screen and (max-width: 767px) { :root { --kopf-balken: 81px; } }
@media screen and (max-width: 479px) { :root { --kopf-balken: 73px; } }   /* Sprungziele nicht unter dem Balken */

.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  height: 59px;
}
/* Bildzeichen und Wortmarke getrennt (logo_bauen.py); Luft dazwischen wie im Logo: 13,77/77 der Höhe */
.marke { display: flex; align-items: center; gap: 10.5px; height: 59px; flex: none; }
.marke img { height: 59px; width: auto; display: block; }
@media screen and (max-width: 479px) { .marke { height: 44px; gap: 8px; } .marke img { height: 44px; } }

/* Seit 01.10.2026: altes Logo (Bildmarke 4 × 3 Felder, logo_alt_web.py) in fester Größe, oben wie im Balken (kein Ein-/Ausfahren):
 * ab 992 px 82 × 61,5 – die Mittellinie des Logos liegt dann auf der Kante des ersten Brettfelds der Bühne
 * (Bahnkante + 41 px), solange die Bühne die volle Bahn nutzt. Die Wortmarke bleibt fest bei 52 px (Balkengröße).
 * 480–991 px: 62 × 46,5 (Mittellinie = Innenkante der Kästen: Bahnkante + 31). */
.marke .zeichen { aspect-ratio: 56.5 / 42.376; width: auto; }
@media screen and (min-width: 992px) {
  .js .kopf:not(.gescrollt) { padding-top: 39.25px; }   /* Logo mittig zwischen Fensterkante und Bühnenrahmen (140): (140 − 61,5) / 2 */
  .kopf-innen, .marke, .marke .zeichen,
  .js .kopf.gescrollt .kopf-innen, .js .kopf.gescrollt .marke, .js .kopf.gescrollt .marke .zeichen { height: 61.5px; }
  .marke .wort, .js .kopf.gescrollt .marke .wort { height: 52px; }
}
@media screen and (min-width: 480px) and (max-width: 991px) {
  /* 01.10.2026: Mittellinie auf der Innenkante der Kästen (Rand 1 + Innenabstand 30 = 31) → 62 × 46,5, oben wie im Balken */
  .marke .zeichen, .js .kopf.gescrollt .marke .zeichen { height: 46.5px; }
  .marke .wort, .js .kopf.gescrollt .marke .wort { height: 52px; }
  .js .kopf.gescrollt .kopf-innen, .js .kopf.gescrollt .marke { height: 52px; }
}

.hauptmenue { display: flex; align-items: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.hauptmenue a {
  font-family: var(--schrift-text);
  font-size: 20px; font-weight: 700; line-height: 1.2;
  letter-spacing: .25px; text-transform: uppercase;
  color: var(--dunkel-text); text-decoration: none;
  transition: color .2s ease;
}
.hauptmenue a:hover, .hauptmenue a[aria-current="page"] { color: var(--akzent); }
.hauptmenue a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }

/* Menüknopf (23.09.2026): ab 992 px so breit wie früher das quadratische Bildzeichen (59 · im Balken 40), bündig an der
 * rechten Bahnkante. Striche absolut gesetzt statt per Flex — iOS-Safari streckte sie im Flex-Button nicht auf
 * Breite (Symbol unsichtbar, damit auch das X zum Schließen). Abstand der Striche --strich-abstand. */
.menueknopf {
  --kachel: 59px; --strich-abstand: 10px;
  display: none; position: relative; flex: none;
  width: var(--kachel); height: max(44px, var(--kachel)); padding: 0; margin-left: auto;
  -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; cursor: pointer;
  transition: width .25s ease, height .25s ease;
}
.js .kopf.gescrollt .menueknopf { --kachel: 40px; --strich-abstand: 8px; }
/* Mobil (01.10.2026): Striche pauschal so breit wie der Rand zwischen Kachel und Haarlinie der Kästen
 * (bis 479 px: 15, bis 991 px: 30), bündig rechts; Tippfläche bleibt 44 × 44, oben wie im Balken gleich. */
@media screen and (max-width: 991px) {
  .menueknopf, .js .kopf.gescrollt .menueknopf { --kachel: 44px; --strich: 30px; --strich-abstand: 7px; }
}
@media screen and (max-width: 479px) {
  .menueknopf, .js .kopf.gescrollt .menueknopf { --strich: 15px; --strich-abstand: 5px; }
}
.menueknopf span {
  position: absolute; right: 0; width: var(--strich, 100%); top: 50%; height: 2px; margin-top: -1px;
  background: var(--dunkel-text); transition: transform .2s ease, opacity .2s ease;
}
.menueknopf span:nth-child(1) { transform: translateY(calc(-1 * var(--strich-abstand))); }
.menueknopf span:nth-child(3) { transform: translateY(var(--strich-abstand)); }
.menueknopf[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menueknopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menueknopf[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menueknopf, .menueknopf span { transition: none; } }
.menueknopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

@media screen and (max-width: 1229px) {   /* Hamburger seit 23.09.2026 schon unter 1230 statt unter 992 */
  .menueknopf { display: block; }
  .kopf-innen nav { display: contents; }   /* darf keinen Flex-Platz belegen */
  .hauptmenue {
    position: fixed; inset: 0; z-index: 50;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    gap: 28px; background: var(--dunkel-grund);
  }
  .hauptmenue.offen { display: flex; }
  .hauptmenue a { font-size: 28px; }
  .menue-offen { overflow: hidden; }
  /* Der Knopf muss über dem geöffneten Menü bleiben */
  .menueknopf { position: relative; z-index: 60; }
}

/* ---------------------------------------------------- Abschnitte */
.abschnitt { padding-block: 100px; }
.abschnitt-erst { padding-top: var(--abstand-kopf); }          /* Platz für den absoluten Kopf */
@media screen and (max-width: 767px) { .abschnitt { padding-block: 80px; } .abschnitt-erst { padding-top: var(--abstand-kopf); } }

/* ---------------------------------------------------- Fuß
 * Original: 40 px Innenabstand, zwei Links à 20 px, weiß.
 * Erweitert um eine Zeile mit Name und Ort — das Original hat nur die Links.
 */
main { flex: 1 0 auto; }
.fuss { padding-block: 28px; flex: none; border-top: 1px solid var(--dunkel-rand); }   /* Linie über die volle Breite wie unter dem gescrollten Kopf; Abstand zum Text oben = unten */
/* Abstand vom letzten Element zum Fuß halbiert (22.09.2026): Unterseiten 50 statt 100, Startseite/Kontakt/Essays 70 statt 140 */
main > .abschnitt:last-child { padding-bottom: 50px; }
.start-kontakt .kontakt-buehne, .kontakt-info, .essay-liste-abschnitt { padding-bottom: 70px; }
@media screen and (max-width: 767px) { main > .abschnitt:last-child { padding-bottom: 40px; } }
.fuss-innen {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  align-items: center; justify-content: space-between;
}
.fuss-name { margin: 0; font-size: 16px; line-height: 1.3; color: var(--dunkel-text-leise); }
.fussmenue { display: flex; gap: 32px; margin: 0; padding: 0; list-style: none; }
.fussmenue li { display: flex; }
.fussmenue a { display: inline-block; font-size: 20px; font-weight: 400; line-height: 26px; padding-block: 9px; margin-block: -9px; color: var(--dunkel-text); text-decoration: none; }
.fussmenue a:hover { color: var(--akzent); }
.fussmenue a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; }
@media screen and (max-width: 767px) {
  .fuss-innen { flex-direction: column; text-align: center; gap: 20px; }
  .fussmenue { flex-direction: column; gap: 20px; align-items: center; }
}

/* ---------------------------------------------------- Bedienelemente
 * Original: 56 px hoch, 20 px Schrift, rahmenartige Linien.
 */
.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 0 26px;
  font-family: var(--schrift-text); font-size: 20px; font-weight: 500; line-height: 1;
  color: var(--dunkel-text); text-decoration: none;
  border: 1px solid var(--dunkel-rand);
  transition: border-color .2s ease, color .2s ease;
}
.knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.knopf-zurueck::before { content: "←"; line-height: 1; position: relative; top: -2px; }   /* Pfeilglyphe sitzt in Barlow tief; optisch mittig (wie in der Katalogliste) */

/* Sprunglink für Tastaturnutzer */
.sprung {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; background: var(--akzent); color: var(--dunkel-grund);
}
.sprung:focus { left: 8px; }