/* =============================================================
   MathiasKniepeiss · THE ART OF CREATIVITY
   main.css · handgepflegt, wird vom Build nicht angefasst
   ============================================================= */

/* ---------- Fonts (lokal, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Great Vibes';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/great-vibes-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --navy:      #012b41;
  --navy-deep: #011c2b;
  --ink:       #ffffff;
  --ink-dim:   rgba(255,255,255,.72);
  --ink-mute:  rgba(255,255,255,.48);
  --accent:    #5dc9f2;
  --bg:        #000000;
  --line:      rgba(255,255,255,.14);
  --line-soft: rgba(255,255,255,.08);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-tile: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --font-hand: 'Great Vibes', 'Snell Roundhand', cursive;
  --font-title: 'Bebas Neue', 'Oswald', 'Haettenschweiler', 'Arial Narrow', sans-serif;

  --header-h: 58px;
  --footer-h: 52px;
  --gut: clamp(16px, 3.2vw, 44px);
  --menu-w: clamp(196px, 21vw, 310px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.55,.06,.68,.19);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 350;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
/* Bilder nicht ziehbar, kein Langdruck-Menue auf iOS */
img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* Miniaturen muessen klickbar bleiben */
.strip button img, .cat img { pointer-events: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea, button { min-width: 0; max-width: 100%; }
a, button, summary, label { -webkit-tap-highlight-color: rgba(93,201,242,.22); }
::selection { background: var(--accent); color: var(--navy); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--navy); padding: .8rem 1.4rem; font-size: .85rem;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Schwarzblende zwischen den Seiten ----------
   Beim Klick auf einen internen Link faehrt sie hoch, auf der Zielseite wieder
   herunter · dadurch entfaellt das kurze Aufblitzen beim Bildwechsel. Die
   Klasse wird von einem Inline-Skript im Kopf gesetzt, also noch vor dem
   ersten Bildaufbau. */
.veil {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
}
html.veil-in .veil { opacity: 1; }
html.veil-in.veil-out .veil { opacity: 0; transition: opacity .6s var(--ease); }
html.veil-leave .veil { opacity: 1; transition: opacity .34s var(--ease); }
/* Wechsel zwischen den vier Bereichen: langsam ausblenden, ruhig aufblenden */
html.veil-leave.veil-slow .veil { transition: opacity 1.5s cubic-bezier(.45,.02,.55,.98); }
html.veil-in.veil-slow-in.veil-out .veil { transition: opacity 1s cubic-bezier(.45,.02,.55,.98); }
@media (prefers-reduced-motion: reduce) {
  .veil { display: none; }
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 1.2rem;
}
.lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-dim); max-width: 64ch; }
.dim { color: var(--ink-dim); }
.mute { color: var(--ink-mute); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 120;
  background: transparent;
  display: flex;
  align-items: center;
}
/* Weicher Verlauf statt Balken · haelt Logo und Navigation auch auf hellen
   Bildern lesbar, ohne das Foto oben abzuschneiden. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -72px 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,0) 100%);
}
.site-header > .bar {
  width: 100%;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
}
.site-header .tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(2px, 1vw, 12px);
  min-width: 0;
}

/* Hauptnavigation mittig · About und Contact rechts, gleiche Optik */
.mainnav, .utilnav { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 24px); }
.utilnav {
  gap: clamp(10px, 1.5vw, 22px);
  margin-left: clamp(6px, 1.2vw, 16px);
  padding-left: clamp(10px, 1.4vw, 18px);
  border-left: 1px solid var(--line);
}
.mainnav a, .utilnav a {
  font-size: clamp(.62rem, .78vw, .72rem);
  letter-spacing: .17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-dim);
  white-space: nowrap;
  position: relative;
  padding: 6px 0;
  transition: color .3s var(--ease);
}
.mainnav a::after, .utilnav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease-out);
}
.mainnav a:hover, .utilnav a:hover { color: var(--ink); }
.mainnav a:hover::after, .utilnav a:hover::after,
.mainnav a[aria-current="page"]::after,
.utilnav a[aria-current="page"]::after { transform: scaleX(1); }
.mainnav a[aria-current="page"],
.utilnav a[aria-current="page"] { color: var(--ink); }

/* Burger */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  justify-self: end;
}
.nav-toggle i { display: block; width: 20px; height: 1.5px; background: var(--ink); position: relative; }
.nav-toggle i::before, .nav-toggle i::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .35s var(--ease-out);
}
.nav-toggle i::before { top: -6px; }
.nav-toggle i::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] i { background: transparent; }
.nav-toggle[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1120px) {
  .site-header > .bar { grid-template-columns: auto 1fr; }
  .nav-toggle { display: flex; }
  .mainnav, .site-header .tools {
    position: fixed;
    left: 0; right: 0;
    background: var(--navy);
    flex-direction: column;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s var(--ease-out), visibility 0s linear .45s;
    z-index: 118;
  }
  .mainnav {
    top: var(--header-h);
    bottom: 172px;
    justify-content: center;
    gap: 2px;
    overflow-y: auto;
    padding: 24px var(--gut);
  }
  .site-header .tools {
    bottom: 0;
    height: 172px;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    border-top: 1px solid var(--line-soft);
  }
  .utilnav {
    margin: 0; padding: 0; border: 0;
    gap: 28px;
  }
  .utilnav a { font-family: var(--font-tile); font-size: 1.15rem; letter-spacing: .08em; color: var(--ink); }
  .utilnav a::after { display: none; }
  .site-header .tools .social,
  .site-header .tools > a { display: flex; }
  body.nav-open .mainnav, body.nav-open .site-header .tools {
    transform: translateX(0);
    visibility: visible;
    transition: transform .45s var(--ease-out), visibility 0s;
  }
  body.nav-open { overflow: hidden; }
  .mainnav a {
    font-family: var(--font-tile);
    font-size: 1.5rem;
    letter-spacing: .08em;
    color: var(--ink);
    padding: 14px 0;
    text-align: center;
  }
  .mainnav a::after { display: none; }
}
.logo { display: block; flex: none; }
.logo img { height: clamp(19px, 2.4vw, 28px); width: auto; }

.social { display: flex; align-items: center; gap: clamp(2px, 1vw, 12px); }
.social > a {
  width: 40px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.social > a:hover { color: var(--accent); transform: translateY(-2px); }
.social svg { width: 18px; height: 18px; fill: currentColor; }

.lang {
  display: flex; align-items: center; gap: 6px;
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  margin-left: clamp(6px, 1.4vw, 18px);
  padding-left: clamp(10px, 1.6vw, 20px);
  border-left: 1px solid var(--line);
}
.lang a { color: var(--ink-mute); padding: 6px 2px; transition: color .3s var(--ease); }
.lang a:hover { color: var(--accent); }
.lang a[aria-current="true"] { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  min-height: var(--footer-h);
  z-index: 120;
  background: transparent;
  display: flex;
  align-items: center;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: -72px 0 0 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,0) 100%);
}
.site-footer > .bar {
  width: 100%;
  padding: 10px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 26px;
  flex-wrap: wrap;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--ink-mute);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px clamp(12px, 1.8vw, 22px); }
.site-footer a { color: var(--ink-dim); transition: color .3s var(--ease); padding-block: 4px; }
.site-footer a:hover { color: var(--accent); }

/* Textseiten: Kopf bleibt transparent und schwebt ueber dem Inhalt. Weil der
   Hintergrund dort schwarz ist, faellt der Verlauf nicht auf · er blendet aber
   den durchlaufenden Text sauber aus. Der Fuss steht im Fluss am Seitenende. */
body.scrolls .site-header::before {
  inset: 0 0 -52px 0;
  background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.94) 52%, rgba(0,0,0,0) 100%);
}
body.scrolls .site-footer { position: static; background: var(--navy); }
body.scrolls .site-footer::before { display: none; }
body.scrolls { padding-top: var(--header-h); }

/* Startseite: der Fuss faehrt erst ein, wenn nach unten gescrollt wird */
body.has-slideshow .site-footer {
  transform: translateY(115%);
  opacity: 0;
  transition: transform .55s var(--ease-out), opacity .45s var(--ease);
}
body.has-slideshow.footer-on .site-footer { transform: none; opacity: 1; }
body.has-slideshow .dots {
  transition: bottom .55s var(--ease-out);
  bottom: clamp(16px, 3.4vh, 34px);
}
body.has-slideshow.footer-on .dots { bottom: calc(var(--footer-h) + clamp(8px, 1.6vh, 18px)); }

/* Auf schmalen Screens umbricht der Fuss sonst auf zwei Zeilen und schiebt
   sich ueber Punkte, Ecklinks und Thumbnail-Leiste. */
@media (max-width: 900px) {
  :root { --footer-h: 46px; }
  .site-footer > .bar { font-size: .68rem; gap: 8px 14px; flex-wrap: nowrap; justify-content: center; }
  .site-footer nav { flex-wrap: nowrap; gap: clamp(10px, 3vw, 22px); }
  .site-footer a { white-space: nowrap; }
  .site-footer > .bar > p { display: none; }
  body.scrolls .site-footer > .bar { flex-wrap: wrap; }
  body.scrolls .site-footer > .bar > p { display: block; }
}

/* ---------- Buehne (fixe Seiten: Home, Sektionen, Galerien) ---------- */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ---------- Startseite: Vollbild-Slideshow im Loop ---------- */
.slideshow { position: absolute; inset: 0; background: #000; overflow: hidden; }

/* Echte Ueberblendung ohne Durchsacken: das alte Bild bleibt voll deckend
   liegen (.is-prev), das neue blendet darueber auf. Wuerden beide gleichzeitig
   halbtransparent sein, wuerde die Mitte der Blende sichtbar abdunkeln. */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.slide.is-prev { opacity: 1; visibility: visible; z-index: 1; }
.slide.is-on {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  /* gleichmaessige Kurve · die Standardkurve waere vorne zu schnell
     und die Blende wirkte trotz 2,2 s kurz */
  animation: slideIn 2.2s cubic-bezier(.45,.02,.55,.98) both;
}
/* Die neue Ebene blendet auf und faehrt dabei ein Stueck heran · zusammen mit
   dem weiterlaufenden Ken-Burns ergibt das eine ruhige Kamerafahrt statt
   eines Schnitts. */
@keyframes slideIn {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}

.slide img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .92;
  transform: scale(1.001);
}
/* Dauer = Standzeit + Blende. Die abgehende Ebene behaelt den Endzustand,
   sonst schnappt ihr Bild beim Klassenwechsel sichtbar auf den Anfang zurueck ·
   genau das war das Zucken beim Uebergang. */
.slide.is-on img { animation: kenburns 5.7s linear both; }
.slide.is-prev img { transform: scale(1.07); }
@keyframes kenburns { from { transform: scale(1.001); } to { transform: scale(1.07); } }

.slide::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(0,0,0,.42) 100%);
}

/* Titelkarte im Stil eines Filmtitels */
.slide__title {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 6vw;
  pointer-events: none;
  user-select: none;
  max-width: 100%;
}
.slide__num {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(.58rem, .78vw, .7rem);
  letter-spacing: .62em;
  text-indent: .62em;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: clamp(.9rem, 2vh, 1.5rem);
  opacity: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,.9);
}
.slide__word {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.6rem, 9.5vw, 9.5rem);
  line-height: .9;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  text-shadow: 0 6px 46px rgba(0,0,0,.72), 0 0 100px rgba(0,0,0,.5);
}
.slide__rule {
  display: block;
  height: 1px;
  width: 0;
  margin: clamp(1rem, 2.4vh, 1.8rem) auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
}
.slide.is-on .slide__num  { animation: tFade 1.1s .5s var(--ease-out) forwards; }
.slide.is-on .slide__word { animation: tWord 1.8s .15s var(--ease-out) forwards; }
.slide.is-on .slide__rule { animation: tRule 1.8s .6s var(--ease-out) forwards; }
/* Die abgehende Ebene haelt ihren Endzustand, bis sie ausgeblendet ist */
.slide.is-prev .slide__num  { opacity: 1; }
.slide.is-prev .slide__word { opacity: .97; transform: none; letter-spacing: .05em; filter: none; }
.slide.is-prev .slide__rule { width: min(360px, 36vw); }
@keyframes tFade { to { opacity: 1; } }
@keyframes tWord {
  from { opacity: 0; transform: translateY(22px); letter-spacing: .3em; filter: blur(6px); }
  to   { opacity: .97; transform: none; letter-spacing: .05em; filter: none; }
}
@keyframes tRule { to { width: min(360px, 36vw); } }

/* Fortschrittspunkte */
.dots {
  position: absolute;
  left: 50%;
  bottom: calc(var(--footer-h) + clamp(8px, 1.6vh, 18px));
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  gap: 12px;
}
.dots button { width: 34px; height: 22px; padding: 0; display: flex; align-items: center; }
.dots button::before {
  content: "";
  width: 100%; height: 2px;
  background: rgba(255,255,255,.32);
  transition: background .35s var(--ease);
}
.dots button[aria-current="true"]::before { background: var(--accent); }
.dots button:hover::before { background: rgba(255,255,255,.75); }

@media (max-width: 620px) {
  .slide__word { font-size: clamp(2.1rem, 13vw, 4.6rem); }
  .slide__num { letter-spacing: .42em; text-indent: .42em; }
}

/* ---------- Sektionsseite (Fullscreen-Bild + Eckenlinks) ---------- */
.section-stage { position: absolute; inset: 0; }
.section-stage__bg { position: absolute; inset: 0; z-index: -2; }
.section-stage__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.section-stage::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.25) 0%, rgba(0,0,0,.72) 100%);
}

/* Sektions-Menue · zentriert, links- oder rechtsbuendig */
.section-menu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bewusst kein justify-content:center · bei ueberlangem Menue waere der
     obere Teil sonst abgeschnitten und nicht scrollbar. Die auto-Margins
     zentrieren, solange Platz ist, und geben ihn frei, sobald es eng wird. */
  justify-content: flex-start;
  gap: 0;
  z-index: 6;
  padding: calc(var(--header-h) + 14px) var(--gut) calc(var(--footer-h) + 14px);
  text-align: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.section-menu > *:first-child { margin-top: auto; }
.section-menu > *:last-child  { margin-bottom: auto; }
.section-menu--left  { align-items: flex-start; text-align: left; }
.section-menu--right { align-items: flex-end;  text-align: right; }

.section-menu h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.5rem, 4vw, 3rem);
  letter-spacing: clamp(.14em, .55vw, .28em);
  text-transform: uppercase;
  margin: 0 0 clamp(10px, 2.2vh, 26px);
  text-shadow: 0 2px 26px rgba(0,0,0,.75);
}
/* Oberpunkte bleiben einzeilig · "Contemporary Stagings" brach sonst um */
.section-menu > a,
.section-menu > details > summary {
  white-space: nowrap;
  font-size: clamp(.66rem, .86vw, .76rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 4px 0;
  min-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .3s var(--ease);
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
}
.section-menu--left  > a, .section-menu--left  details > summary { justify-content: flex-start; }
.section-menu > details > summary { color: var(--ink); }
.section-menu--right > a, .section-menu--right details > summary { justify-content: flex-end; }
.section-menu > a:hover { color: var(--accent); }

/* Aufklappbare Ebenen */
.section-menu details { width: auto; max-width: 100%; }
.section-menu details > summary {
  list-style: none;
  cursor: pointer;
  gap: .6rem;
}
.section-menu details > summary::-webkit-details-marker { display: none; }
.section-menu details > summary::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s var(--ease-out);
  flex: none;
}
.section-menu--right details > summary::after { order: -1; }
.section-menu details[open] > summary::after { transform: rotate(-135deg) translate(-2px, 2px); }
.section-menu details > summary:hover { color: var(--accent); }

/* Untermenue · untereinander */
.submenu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 4px;
  animation: fadeUp .45s var(--ease-out);
}
.section-menu--left  .submenu { align-items: flex-start; padding-left: clamp(10px, 1.2vw, 18px); }
/* Rechts schliesst das Untermenue buendig mit der Hauptebene ab · die
   Hierarchie traegt hier die kleinere, ruhigere Schrift, nicht ein Einzug. */
.section-menu--right .submenu { align-items: flex-end;  padding-right: 0; }
.section-menu:not(.section-menu--left):not(.section-menu--right) .submenu { align-items: center; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.submenu a,
.submenu details > summary {
  font-size: clamp(.6rem, .76vw, .68rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  padding: 3px 0;
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: .55rem;
  transition: color .3s var(--ease);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  white-space: nowrap;
}
.submenu a:hover, .submenu details > summary:hover { color: var(--accent); }
.submenu details > summary { cursor: pointer; list-style: none; }
.submenu details > summary::-webkit-details-marker { display: none; }
.submenu details > summary::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s var(--ease-out);
  flex: none;
}
.section-menu--right .submenu details > summary::after { order: -1; }
.submenu details[open] > summary::after { transform: rotate(-135deg) translate(-2px, 2px); }

/* Zwischen 900 und 1300 Pixel ist die Menuspalte zu schmal fuer die langen
   Serientitel · dort brechen sie innerhalb der Flaeche um, statt ueber das
   Bild hinauszulaufen. */
@media (max-width: 1300px) {
  .submenu a,
  .submenu details > summary { white-space: normal; line-height: 1.35; }
  .section-menu--right .submenu a,
  .section-menu--right .submenu details > summary { text-align: right; }
}

/* dritte Ebene */
.submenu .submenu {
  padding: 0 0 4px;
  border-left: 1px solid var(--line-soft);
}
.section-menu--left  .submenu .submenu { padding-left: 14px; margin-left: 3px; }
.section-menu--right .submenu .submenu {
  padding-right: 14px; margin-right: 3px;
  border-left: 0; border-right: 1px solid var(--line-soft);
}
.submenu .submenu a { font-size: clamp(.57rem, .7vw, .63rem); letter-spacing: .1em; color: var(--ink-mute); }
.submenu .submenu a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .section-menu { padding: calc(var(--header-h) + 18px) 16px calc(var(--footer-h) + 18px); }
  .section-menu h1 { margin-bottom: 12px; }
  .submenu a, .submenu details > summary { font-size: .66rem; padding: 5px 0; min-height: 28px; }
  .section-menu > a, .section-menu > details > summary { font-size: .76rem; min-height: 32px; }
}

/* Bereichsmenue, das auf den Galerieseiten stehen bleibt.
   Es schwebt ueber der Buehne · die Galerie bekommt dafuer eine Spalte
   Platz, damit Bild und Pfeile nicht darunter geraten. */
.section-menu--gallery {
  pointer-events: none;
  padding-top: calc(var(--header-h) + 12px);
  padding-bottom: calc(var(--footer-h) + 12px);
  z-index: 7;
  width: var(--menu-w);
  inset: 0 auto 0 0;
}
.section-menu--gallery.section-menu--right { inset: 0 0 0 auto; }
/* Abgedunkelte Flaeche hinter der Menuespalte · eigenes Element, weil die
   Spalte selbst senkrecht scrollen kann und den Verlauf sonst abschneidet. */
.menu-veil {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 6;
  pointer-events: none;
  width: calc(var(--menu-w) + 260px);
}
.menu-veil--left {
  left: 0;
  background: linear-gradient(90deg,
              rgba(0,0,0,0.50) 0%,
              rgba(0,0,0,0.50) 42%,
              rgba(0,0,0,0.494) 46.1%,
              rgba(0,0,0,0.475) 50.3%,
              rgba(0,0,0,0.445) 54.4%,
              rgba(0,0,0,0.406) 58.6%,
              rgba(0,0,0,0.358) 62.7%,
              rgba(0,0,0,0.306) 66.9%,
              rgba(0,0,0,0.250) 71.0%,
              rgba(0,0,0,0.194) 75.1%,
              rgba(0,0,0,0.142) 79.3%,
              rgba(0,0,0,0.094) 83.4%,
              rgba(0,0,0,0.055) 87.6%,
              rgba(0,0,0,0.025) 91.7%,
              rgba(0,0,0,0.006) 95.9%,
              rgba(0,0,0,0.000) 100.0%);
}
.menu-veil--right {
  right: 0;
  background: linear-gradient(270deg,
              rgba(0,0,0,0.50) 0%,
              rgba(0,0,0,0.50) 42%,
              rgba(0,0,0,0.494) 46.1%,
              rgba(0,0,0,0.475) 50.3%,
              rgba(0,0,0,0.445) 54.4%,
              rgba(0,0,0,0.406) 58.6%,
              rgba(0,0,0,0.358) 62.7%,
              rgba(0,0,0,0.306) 66.9%,
              rgba(0,0,0,0.250) 71.0%,
              rgba(0,0,0,0.194) 75.1%,
              rgba(0,0,0,0.142) 79.3%,
              rgba(0,0,0,0.094) 83.4%,
              rgba(0,0,0,0.055) 87.6%,
              rgba(0,0,0,0.025) 91.7%,
              rgba(0,0,0,0.006) 95.9%,
              rgba(0,0,0,0.000) 100.0%);
}
@media (max-width: 900px) {
  .menu-veil { display: none; }
}

.section-menu--gallery a,
.section-menu--gallery summary { pointer-events: auto; }

/* Statt einer grossen Flaeche traegt jeder Menuepunkt seinen eigenen weichen
   Schatten · auf dunklen Motiven kaum sichtbar, auf hellen rettet er die
   Lesbarkeit. */

.section-menu--gallery a[aria-current="page"] { color: var(--accent); }
.section-menu--gallery .submenu a[aria-current="page"] { color: var(--accent); }

.gallery-back {
  display: none;
  position: absolute;
  top: calc(var(--header-h) + 8px);
  left: var(--gut);
  z-index: 7;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
  padding: 6px 0;
}
.gallery-back:hover { color: var(--accent); }

/* Kuerzel wie gFoC behalten ihre Schreibweise · sonst wuerde daraus GFOC. */
.gallery.is-abbr .gallery__caption span { text-transform: none; letter-spacing: .2em; }
.section-menu a.is-abbr, .submenu a.is-abbr { text-transform: none; letter-spacing: .14em; }

/* ---------- Galerie ---------- */
.gallery { position: absolute; inset: 0; }

/* Die Buehne laeuft randlos · Kopf und Fuss liegen als Verlauf darueber. */
.gallery__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gframe {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Querformat: fuellt die Seite von Kante zu Kante */
.gallery.is-landscape #gimg {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
.gallery.is-landscape .mirror { display: none; }

/* Hochformat: exakt auf Seitenhoehe, komplett sichtbar. Links und rechts
   laeuft dasselbe Bild gespiegelt und transparent weiter, damit die Flaeche
   geschlossen bleibt statt schwarz. */
.gallery.is-portrait #gimg {
  height: 100%;
  width: auto;
  /* auf schmalen Screens wuerde ein Hochformat auf voller Hoehe seitlich
     hinauslaufen · dort begrenzt die Breite */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 2;
}
.mirror {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.mirror img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .62;
  /* Leichte Unschaerfe · das Motiv bleibt erkennbar, tritt aber hinter das
     Hauptbild zurueck. Hochskaliert, sonst franst der Weichzeichner die
     Panelkanten aus. */
  filter: blur(22px) saturate(1.02) brightness(.7);
  will-change: filter;
}
.mirror--l { left: 0; }
.mirror--r { right: 0; }
/* Die beiden Seiten sind unterschiedlich gespiegelt, damit links und rechts
   nicht dasselbe Farbfeld steht: links waagrecht, rechts um 180 Grad. */
.mirror--l img { transform: scale(-1.2, 1.2); }
.mirror--r img { transform: scale(-1.2, -1.2); }
.gframe {
  position: relative;
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gimg {
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  transition: opacity .55s var(--ease);
}
#gimg.is-on { opacity: 1; }
/* Miniaturen und Bildname sitzen zusammen ueber dem Fuss · als Spalte, damit
   die Hoehe des Namens nicht von Hand eingerechnet werden muss. */
.gallery__bottom {
  --bottom-gap: 9px;
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--footer-h) - 14px);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--bottom-gap);
  background: none;
  padding-top: 16px;
  /* Gleicher Abstand unter dem letzten Element wie darueber · sonst klebt der
     Bildname am unteren Rand des Verlaufs statt mittig darin zu sitzen. */
  padding-bottom: var(--bottom-gap);
}

.gallery__caption {
  position: static;
  /* Seitenrand freihalten · lange Kooperationszeilen brechen sonst bis an die
     Bildkante und werden auf dem Handy unleserlich. */
  padding-inline: var(--gut);
  font-size: clamp(.72rem, 1.15vw, .92rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 40px rgba(0,0,0,.8);
  text-align: center;
  pointer-events: none;
  /* Ruhiger Streifen hinter Titel und Untertitel · haelt beide auch auf
     hellen Motiven lesbar, ohne das Bild grossflaechig abzudunkeln. Oben und
     unten laeuft er weich aus, damit keine Kante im Bild steht. */
  background: none;
  padding-block: 7px;
  position: relative;
  isolation: isolate;
}
/* Der Name steht frei auf dem Bild · Weiss plus weicher Schatten halten ihn
   auch auf hellen Motiven lesbar, ganz ohne Flaeche dahinter. */
/* Zweite Zeile unter dem Bildnamen · Kooperationspartner und Aehnliches.
   Leer bleibt sie unsichtbar und nimmt keinen Platz weg. */
/* Der Streifen liegt als eigene Ebene hinter dem Text und ragt oben wie unten
   weit darueber hinaus · dadurch bleibt der Verlauf lang und weich, ohne die
   Leiste hoeher zu machen und die Miniaturen nach oben zu schieben. */
.gallery__caption::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  /* Fester Streifen von 200px · mittig um Titel und Untertitel gelegt,
     unabhaengig davon, ob eine zweite Zeile vorhanden ist. */
  top: 50%;
  height: 200px;
  transform: translateY(-50%);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(0,0,0,0)   0%,  rgba(0,0,0,.05) 14%,
              rgba(0,0,0,.15) 26%, rgba(0,0,0,.30) 38%,
              rgba(0,0,0,.42) 50%,
              rgba(0,0,0,.30) 62%, rgba(0,0,0,.15) 74%,
              rgba(0,0,0,.05) 86%, rgba(0,0,0,0) 100%);
}

.gallery__caption small {
  display: block;
  margin-top: 3px;
  font-size: clamp(.6rem, .88vw, .7rem);
  letter-spacing: .14em;
  text-transform: none;
  color: var(--ink);
  text-wrap: balance;
}
.gallery__caption small:empty { display: none; }
.gallery__caption span {
  display: inline-block;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  max-width: min(92%, 60ch);
}
/* Kopfzeile der Bildleiste · Serientitel links, Zaehler rechts, beide
   direkt ueber den Miniaturen und in vollem Weiss. Die seitliche Polsterung
   erbt sie von .gallery__bottom · dadurch beginnt der Titel exakt an der
   Kante der Menuflaeche. */
.gallery__meta {
  position: absolute;
  top: calc(var(--header-h) + 6px);
  left: 0; right: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--gut);
  pointer-events: none;
}
/* Der Serientitel setzt genau dort an, wo die Menuflaeche endet · der Zaehler
   bleibt rechtsbuendig. Auf der Kunstseite liegt das Menu rechts, dort weicht
   der Zaehler aus und der Titel steht am linken Rand. */
/* Der Serientitel steht auf allen Galerieseiten an derselben Stelle · dort,
   wo auf den Fotografieseiten die Menuflaeche endet. Der Zaehler weicht der
   Menuflaeche aus, die auf den Kunstseiten rechts liegt. */
.gallery--left  .gallery__meta,
.gallery--right .gallery__meta { padding-left:  calc(var(--menu-w) + 14px); }
.gallery--right .gallery__meta { padding-right: calc(var(--menu-w) + 14px); }
.gallery__title {
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.8);
}
.gallery__counter {
  margin-left: auto;
  font-size: .74rem;
  letter-spacing: .18em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 14px rgba(0,0,0,.95), 0 0 30px rgba(0,0,0,.8);
}
/* Der Knopf sitzt mittig unter dem Bildnamen, ueber der Fusszeile. */
.gallery__bottom > .gallery__info-btn {
  align-self: center;
  /* Rueckt naeher an den Bildnamen darueber · die Flex-Luecke von 9px wird
     hier bewusst wieder eingezogen. */
  margin-top: -5px;
}
.gallery__info-btn {
  font: inherit;
  font-size: .63rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* Reines Weiss und kraeftigerer Schnitt · so bleibt die Schrift auch ueber
     hellen Bildern lesbar. Die Farbe war schon Weiss, gefehlt hat das Gewicht. */
  color: #fff;
  font-weight: 600;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  padding: 6px 15px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color .3s var(--ease), border-color .3s var(--ease),
              background .3s var(--ease);
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.gallery__info-btn:hover,
.gallery__info-btn[aria-expanded="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,0,0,.5);
}

/* ---- Textebene ueber dem Bild ---- */
.infolayer {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: rgba(1, 43, 65, .58);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.infolayer[hidden] { display: none; }
.infolayer.is-open { opacity: 1; }
.infolayer__sheet {
  position: relative;
  width: min(760px, 100%);
  padding: calc(var(--header-h) + 26px) clamp(20px, 4vw, 56px) calc(var(--footer-h) + 26px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transform: translateY(14px);
  transition: transform .5s var(--ease-out);
}
.infolayer.is-open .infolayer__sheet { transform: none; }
.infolayer__close {
  position: sticky;
  top: 0;
  float: right;
  margin-right: -6px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  background: none; border: 0; cursor: pointer;
  transition: color .3s var(--ease);
}
.infolayer__close:hover { color: var(--accent); }
.infolayer__close svg { width: 20px; height: 20px; }
.infolayer__body { color: rgba(255,255,255,.86); }
.infolayer__body h2 {
  font-family: var(--font-title, inherit);
  font-size: clamp(.86rem, 1.5vw, 1.06rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 34px 0 12px;
}
.infolayer__body > *:first-child { margin-top: 0; }
.infolayer__body p {
  font-size: clamp(.8rem, 1.05vw, .9rem);
  line-height: 1.62;
  margin: 0 0 12px;
}
.infolayer__body ul { list-style: none; padding: 0; margin: 0; }
.infolayer__body ul li {
  font-size: clamp(.78rem, 1vw, .87rem);
  line-height: 1.5;
  padding: 6px 0 6px 18px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.infolayer__body ul li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 1px; background: var(--accent);
}
.infolayer__body dl { margin: 0; }
.infolayer__body dt {
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 16px 0 4px;
}
.infolayer__body a {
  color: var(--accent);
  border-bottom: 1px solid rgba(93,201,242,.35);
  transition: border-color .3s var(--ease);
}
.infolayer__body a:hover { border-bottom-color: var(--accent); }
.infolayer__body dd {
  margin: 0;
  font-size: clamp(.78rem, 1vw, .87rem);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .infolayer__sheet { padding-left: 18px; padding-right: 18px; }
  .gallery__info-btn { font-size: .6rem; padding: 5px 12px; }
}


/* Thumbnail-Leiste ueber dem Footer */
/* Miniaturleiste mit Pfeilen links und rechts */
.striprow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 18px);
  padding: 0 var(--gut);
  pointer-events: auto;
}
/* Die Leiste ist nur so breit wie ihre Miniaturen · dadurch stehen die Pfeile
   direkt daneben. Bei vielen Bildern waechst sie bis zur verfuegbaren Breite
   und wird scrollbar. */
.striprow .strip { flex: 0 1 auto; min-width: 0; padding: 0; }
.sarrow {
  flex: none;
  width: clamp(24px, 2.4vw, 34px);
  height: clamp(24px, 2.4vw, 34px);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  opacity: .6;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  /* Kraeftiger Schatten · sonst verschwinden weisse Pfeile auf hellen Bildern */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8));
}
.sarrow svg { display: block; width: 100%; height: 100%; }
.sarrow:hover { opacity: 1; }
.sarrow--prev:hover { transform: translateX(-2px); }
.sarrow--next:hover { transform: translateX(2px); }
/* Kein Weiterschalten moeglich · bleibt gedaempft und reagiert nicht */
.sarrow[disabled] { opacity: .6; cursor: default; transform: none; }
.sarrow[disabled]:hover { opacity: .6; transform: none; }

.strip {
  position: static;
  background: none;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.strip::-webkit-scrollbar { height: 5px; }
.strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); }
.strip ul { display: flex; gap: 7px; list-style: none; margin: 0; padding: 0; justify-content: center; min-width: min-content; }
.strip li { flex: none; }
/* Abstand zwischen zwei Serien · optische Gruppierung */
.strip li.is-newgroup { margin-left: clamp(18px, 2.2vw, 34px); position: relative; }
.strip li.is-newgroup::before {
  content: "";
  position: absolute;
  left: calc(clamp(18px, 2.2vw, 34px) / -2);
  top: 18%; bottom: 18%;
  width: 1px;
  background: rgba(255,255,255,.22);
}
.strip button {
  display: block;
  width: clamp(52px, 6.4vw, 78px);
  height: clamp(38px, 4.6vw, 56px);
  padding: 0;
  border: 1px solid rgba(255,255,255,.22);
  opacity: .55;
  box-shadow: 0 4px 16px rgba(0,0,0,.55);
  transition: opacity .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  overflow: hidden;
}
.strip button img { width: 100%; height: 100%; object-fit: cover; }
.strip button:hover { opacity: .92; transform: translateY(-2px); }
.strip button[aria-current="true"] { opacity: 1; border-color: var(--accent); transform: translateY(-2px); }

@media (max-width: 900px) {
  /* Auf schmalen Screens frisst die Menuespalte zu viel Bild ·
     dort fuehrt ein Rueckweg auf die Bereichsseite. */
  .section-menu--gallery { display: none; }
  .gallery--left, .gallery--right { padding-left: 0; padding-right: 0; }
  /* ohne Seitenmenu faellt der Einzug weg · die Kopfzeile rueckt unter den
     Rueckweg zur Bereichsseite, damit sich beide nicht ueberlagern. */
  .gallery--left  .gallery__meta,
  .gallery--right .gallery__meta { padding-left:  var(--gut); }
  .gallery--right .gallery__meta { padding-right: var(--gut); }
  .gallery__meta { top: calc(var(--header-h) + 46px); }
  .gallery-back { display: block; }
}

/* Galerie-Uebersicht (Kategorien) */
.cat-grid--left  { padding-left:  var(--menu-w); }
.cat-grid--right { padding-right: var(--menu-w); }
@media (max-width: 900px) {
  .cat-grid--left, .cat-grid--right { padding-left: var(--gut); padding-right: var(--gut); }
}
.cat-grid {
  position: absolute; inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: calc(var(--header-h) + clamp(16px, 3vh, 38px)) var(--gut)
           calc(var(--footer-h) + clamp(20px, 4vh, 44px));
}
.cat-grid h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: clamp(20px, 4vh, 44px);
}
.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(10px, 1.6vw, 20px);
  max-width: 1600px;
  margin-inline: auto;
}
.cat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #0a0a0a;
  isolation: isolate;
}
.cat img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .38;
  transition: opacity .55s var(--ease), transform 1.2s var(--ease-out);
}
.cat:hover img { opacity: .72; transform: scale(1.05); }
.cat span {
  font-size: clamp(.72rem, 1.1vw, .88rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 14px;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
  transition: color .3s var(--ease);
}
.cat:hover span { color: var(--accent); }
.cat small {
  position: absolute;
  bottom: 8px; right: 10px;
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* ---------- Inhaltsseiten (About, Workshops, Recht) ---------- */
.doc {
  padding: clamp(38px, 7vh, 90px) var(--gut) clamp(50px, 9vh, 110px);
  max-width: 1180px;
  margin-inline: auto;
}
.doc__hero { margin-bottom: clamp(28px, 5vh, 60px); }
.doc h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: .38em;
}
.doc h2 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.86rem, 1.4vw, 1rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: clamp(30px, 4.6vh, 54px) 0 1.1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
}
.doc h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: .98rem;
  letter-spacing: .02em;
  text-transform: none;
  margin: 1.7em 0 .5em;
}
.doc p, .doc li { color: var(--ink-dim); }
.doc li { margin-bottom: .3rem; }
.doc ul:not(.tl) { margin-bottom: 1.1rem; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.doc .lead { color: var(--ink); font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.55; }
.doc ul { padding-left: 1.15rem; margin: 0 0 1.4rem; }
.doc li { margin-bottom: .45rem; }
.doc__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 48px); }
.doc__cols > * { min-width: 0; }

.portrait {
  float: right;
  width: clamp(200px, 26vw, 380px);
  margin: 0 0 clamp(18px, 3vw, 34px) clamp(20px, 3vw, 44px);
}
@media (max-width: 640px) { .portrait { float: none; width: 100%; margin: 0 0 24px; } }

/* Intro der About-Seite: Text links, Portrait rechts */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 330px);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  margin-bottom: clamp(20px, 3vw, 34px);
}
.about-intro__text { text-align: left; }
.about-intro__text h2 { margin-top: 0; }
.about-intro__portrait { margin: 0; }
.about-intro__portrait img {
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
  transition: filter .6s var(--ease);
}
.about-intro__portrait:hover img { filter: none; }
@media (max-width: 760px) {
  .about-intro { grid-template-columns: 1fr; gap: 22px; }
  .about-intro__portrait { max-width: 260px; }
}

/* Zeitleiste / Listen */
.tl { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.tl li {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 2px clamp(12px, 2vw, 28px);
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 620px) { .tl li { grid-template-columns: 1fr; gap: 1px; padding: 8px 0; } }
.tl b {
  color: var(--accent);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: .05em;
  font-size: .86rem;
}
.tl span { color: var(--ink-dim); font-size: .94rem; }
.tl span em { color: var(--ink); font-style: normal; font-weight: 500; }

/* Kontaktbereich am Seitenende */
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 4vw, 60px);
  margin-top: clamp(46px, 7vh, 90px);
  padding: clamp(26px, 4vw, 46px) clamp(22px, 3.4vw, 44px);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  transition: border-color .45s var(--ease);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .6s var(--ease-out);
}
.cta:hover { border-color: var(--accent); }
.cta:hover::before { transform: none; }
.cta__in { display: block; min-width: 0; }
.cta__label {
  display: block;
  font-size: .64rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .5rem;
  transition: color .45s var(--ease);
}
.cta__big {
  display: block;
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 4.4vw, 3.4rem);
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .45s var(--ease);
}
.cta__meta {
  display: block;
  margin-top: .7rem;
  font-size: .84rem;
  color: var(--ink-mute);
  transition: color .45s var(--ease);
}
.cta__arrow {
  width: clamp(34px, 5vw, 54px);
  height: auto;
  flex: none;
  color: var(--ink);
  transition: transform .5s var(--ease-out), color .45s var(--ease);
}
.cta:hover .cta__label,
.cta:hover .cta__big,
.cta:hover .cta__meta,
.cta:hover .cta__arrow { color: var(--navy); }
.cta:hover .cta__arrow { transform: translateX(10px); }
@media (max-width: 560px) {
  .cta { flex-direction: column; align-items: flex-start; gap: 20px; }
  .cta__arrow { align-self: flex-end; }
}

/* Karten */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(12px, 1.8vw, 22px); margin-bottom: 1.6rem; }
.cards > * { min-width: 0; }
.card {
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-soft);
  padding: clamp(20px, 2.6vw, 30px);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.card:hover { border-color: rgba(93,201,242,.4); background: rgba(255,255,255,.055); }
.card b { display: block; color: var(--accent); font-weight: 400; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 1rem; }
.card h3 { margin-top: 0; }
.card p, .card li { font-size: .94rem; }
.card ul { margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 46px;
  padding: .8rem 1.6rem;
  border: 1px solid var(--ink);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--navy); text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }

.note {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  color: var(--ink-mute);
  font-size: .9rem;
  margin: 1.6rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .submenu, .slide.is-on img { animation: none !important; }
  .slide { transition: opacity .3s linear; }
  .cat img, .gallery__stage img { transition: none !important; }
  .enter-init { opacity: 1; }
}

/* ---------- Sehr niedrige Viewports ---------- */
@media (max-height: 560px) {
  :root { --header-h: 50px; --footer-h: 42px; }
  .section-menu { padding-top: 58px; }
  .section-menu h1 { margin-bottom: 10px; }
}

/* ---------- KI-Seite · fester Hintergrund ----------
   Das Bild haengt direkt am body und wird dadurch als Wurzelhintergrund der
   Seite gezeichnet, nicht als eigene Ebene darueber. Chromium und Safari
   behandeln diesen Fall gesondert und legen dafuer KEINE zusammengesetzte
   Ebene an · genau die war es, die beim Scrollen eine Naht zeigen konnte.
   Die Abdunklung steckt fest in der Datei, es gibt keine Transparenz.
   Den Dateinamen setzt build.py als kurzes style-Element in die Seite. */
body.ai-page, body.live-page, body.about-page {
  background-color: var(--navy-deep);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.doc--ai, .doc--live { position: relative; }
.doc--ai .card, .doc--live .card { background: rgba(1,28,43,.42); }
/* Auf dieser Seite darf nichts einen backdrop-filter tragen. Er zwingt den
   Browser, den festen Hintergrund in eine eigene Textur zu kopieren · deren
   Unterkante war die Linie, die quer ueber die Seite lief. */
.doc--ai .card:hover, .doc--live .card:hover { background: rgba(1,28,43,.58); }
.card b.card__role {
  display: block;
  color: var(--ink);
  font-weight: 400;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: none;
  margin: -.2rem 0 .9rem;
}
.card__more { margin: 1rem 0 0; font-size: .86rem; }

/* Kennzahlen */
.doc .stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(12px, 1.8vw, 26px);
  padding: 0;
  margin: clamp(26px, 4vh, 46px) 0 .4rem;
}
.doc .stats li {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.doc .stats b {
  display: block;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--accent);
}
.doc .stats span {
  display: block;
  margin-top: .5rem;
  color: var(--ink-dim);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- KI-Seite · Kopf und Fuss halb transparent ueber dem Bild ---------- */
body.ai-page.scrolls .site-header::before,
body.live-page.scrolls .site-header::before,
body.about-page.scrolls .site-header::before {
  /* nur der Kopfbereich · nach 34 px unter der Leiste ist nichts mehr da */
  inset: 0 0 -34px 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.55) 0%,
    rgba(0,0,0,.44) 40%,
    rgba(0,0,0,.20) 70%,
    rgba(0,0,0,.05) 88%,
    rgba(0,0,0,0) 100%);
}
/* Der Fuss traegt hier keine Flaeche, sondern nur einen weichen Verlauf.
   WICHTIG: position relative. Ohne sie ist der Fuss auf Textseiten statisch,
   und das absolut gesetzte ::before haengt sich dann an den Seitenanfang statt
   an den Fuss · es zieht sich dann als dunkler Verlauf ueber die erste
   Bildschirmhoehe der Seite und endet dort mit einer harten Kante. */
body.ai-page.scrolls .site-footer,
body.live-page.scrolls .site-footer,
body.about-page.scrolls .site-footer {
  position: relative;
  background: transparent;
}
body.ai-page.scrolls .site-footer::before,
body.live-page.scrolls .site-footer::before,
body.about-page.scrolls .site-footer::before {
  display: block;
  inset: -72px 0 0 0;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,0) 100%);
}

/* Karten in festen Dreierreihen */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards--4 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards--3 { grid-template-columns: 1fr; } }

.sec-lead { max-width: 74ch; margin: -.2rem 0 clamp(18px, 2.6vh, 30px); }

/* Bildwelten */
.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  margin-bottom: 1.4rem;
}
.shots figure { margin: 0; overflow: hidden; background: rgba(1,28,43,.5); }
.shots img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.shots figure:hover img { transform: scale(1.04); }
.shots .is-portrait img { object-position: center 32%; }
@media (max-width: 860px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shots { grid-template-columns: 1fr; } }

/* Videobeispiele */
.clips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
  margin-bottom: 1.4rem;
}
.clips figure { margin: 0; }
.clips video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
  border: 1px solid var(--line-soft);
  object-fit: cover;
}
.clip--quer video { aspect-ratio: 16 / 9; }
.clip--hoch video { aspect-ratio: 6 / 7; }
.clips figcaption { padding-top: .7rem; }
.clips figcaption b {
  display: block;
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--ink);
}
.clips figcaption span { display: block; color: var(--ink-dim); font-size: .86rem; margin-top: .15rem; }
@media (max-width: 860px) { .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .clips { grid-template-columns: 1fr; } }

/* Verweiskacheln statt schmaler Buttons */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: .4rem;
}
.doc .tiles a.tile {
  position: relative;
  display: block;
  padding: 20px 46px 20px 22px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(1,28,43,.42);
  border: 1px solid var(--line-soft);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.doc .tiles a.tile:hover {
  background: rgba(1,28,43,.68);
  border-color: rgba(93,201,242,.45);
  transform: translateY(-2px);
}
.tile b {
  display: block;
  font-weight: 500;
  font-size: .98rem;
  letter-spacing: .02em;
  margin-bottom: .3rem;
}
.tile span { display: block; color: var(--ink-dim); font-size: .86rem; line-height: 1.45; }
.tile i {
  position: absolute;
  top: 20px;
  right: 20px;
  font-style: normal;
  color: var(--accent);
  transition: transform .35s var(--ease);
}
.doc .tiles a.tile:hover i { transform: translateX(4px); }

/* ENDLIVITY-Logo als Kopfzeile der KI-Seite */
.ai-logo {
  display: flex;
  justify-content: center;
  padding: clamp(30px, 6vh, 70px) var(--gut) 0;
}
.ai-logo img {
  width: clamp(104px, 12vw, 168px);
  height: auto;
  opacity: .95;
}
body.ai-page .doc--ai { padding-top: clamp(24px, 4vh, 46px); }

/* Eingebettetes YouTube-Video · laedt erst nach dem Klick */
.ytbox { margin: clamp(16px, 2.4vw, 30px) 0 0; }
.ytbox .yt {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-soft);
  background: #000;
  cursor: pointer;
  overflow: hidden;
}
.ytbox .yt img { display: block; width: 100%; height: auto; transition: transform .7s var(--ease), opacity .4s var(--ease); }
.ytbox .yt:hover img { transform: scale(1.02); opacity: .9; }
.yt__play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: clamp(58px, 6vw, 84px);
  height: clamp(58px, 6vw, 84px);
  border-radius: 50%;
  background: rgba(1,28,43,.62);
  border: 1px solid rgba(255,255,255,.55);
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.yt__play::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.ytbox .yt:hover .yt__play { background: rgba(93,201,242,.85); border-color: rgba(255,255,255,.9); }
.ytbox iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line-soft); background: #000; }
.ytbox figcaption { padding-top: .8rem; }
.ytbox figcaption b { display: block; font-weight: 500; font-size: 1.02rem; color: var(--ink); }
.ytbox figcaption span { display: block; color: var(--ink-dim); font-size: .9rem; margin-top: .2rem; }
.yt__note { font-size: .8rem !important; opacity: .62; margin-top: .5rem !important; }


.doc--ai .card, .doc--ai .tile, .doc--live .card { background: rgba(1,28,43,.58); }
.doc--ai .card:hover, .doc--live .card:hover { background: rgba(1,28,43,.72); }
.doc .tiles a.tile { background: rgba(1,28,43,.58); }
.doc .tiles a.tile:hover { background: rgba(1,28,43,.76); }
@media (max-width: 620px) { .tiles { grid-template-columns: 1fr; } }
.doc--ai h2 a { color: inherit; }
.doc--ai h2 a:hover { color: var(--ink); }

/* Abschlusszeile zur Studioseite · kleiner und kraeftiger als die uebrigen Titel */
.doc--ai h2.h2--cta, .doc--live h2.h2--cta {
  font-size: clamp(.72rem, 1vw, .82rem);
  font-weight: 600;
  letter-spacing: .2em;
}

/* Einstiegssatz der KI-Seite · kleiner und kraeftiger als der uebrige Vorspann */
.doc--ai .lead, .doc--live .lead {
  font-size: clamp(.94rem, 1.2vw, 1.06rem);
  font-weight: 600;
  line-height: 1.5;
  max-width: 78ch;
}

/* Zeitleisten auf der Auftritte-Seite · viele Zeilen, deshalb ruhiger */
.doc--live .tl { margin-bottom: .4rem; }
.doc--live .tl li { grid-template-columns: 132px minmax(0, 1fr); padding: 9px 0; }
.doc--live .tl b { white-space: nowrap; }
.doc--live .tl em { color: var(--ink); font-style: normal; font-weight: 500; }
/* Links in den Listen und im Fliesstext dieser Seite: nur Farbe, keine Linie */
.doc--live a { text-decoration: none; }
.doc--live a:hover { color: #fff; }
.doc--live .tl a { color: var(--accent); text-decoration: none; }
.doc--live .tl a:hover { color: #fff; }
@media (max-width: 620px) {
  .doc--live .tl li { grid-template-columns: 1fr; }
  .doc--live .tl b { margin-bottom: 2px; }
}

/* Bildbaender zwischen den Abschnitten · 21:9, deutlich zurueckgenommen */
.band {
  margin: clamp(30px, 5vh, 58px) 0;
  overflow: hidden;
  background: #000;
}
.band img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  opacity: .6;
  transition: opacity .6s var(--ease);
}
.band:hover img { opacity: .82; }

/* Die drei Formate · je eine volle Zeile, Nummer gross zur Linken */
.formate { margin-bottom: 1.2rem; }
.format {
  display: grid;
  grid-template-columns: clamp(76px, 9vw, 132px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(20px, 3vh, 34px) 0;
  border-top: 1px solid var(--line-soft);
}
.format:last-child { border-bottom: 1px solid var(--line-soft); }
.format > b {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--accent);
}
.format h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 500;
  letter-spacing: .01em;
}
.format__text { max-width: 68ch; }
.format__text p { margin: 0 0 .7rem; }
.format__text p:last-child { margin-bottom: 0; }
.format__text a { color: var(--accent); text-decoration: none; }
.format__text a:hover { color: #fff; }
.format__liste {
  list-style: none;
  margin: 0 0 .8rem;
  padding: 0;
}
.format__liste li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .3rem;
  color: var(--ink);
  font-weight: 500;
}
.format__liste li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 5px; height: 5px;
  background: var(--accent);
}
@media (max-width: 620px) {
  .format { grid-template-columns: 1fr; gap: 6px; }
  .format > b { font-size: 1.6rem; }
}

/* Kraeftiger Handlungsknopf · gefuellt statt nur umrandet */
.doc .btn.btn--gross {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--navy);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 16px 34px;
  text-decoration: none;
  transition: background .35s var(--ease), transform .35s var(--ease),
              box-shadow .35s var(--ease);
}
.doc .btn.btn--gross:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* About-Seite · Kopf ruhiger, Name und Vorspann kleiner */
.doc--about h1 {
  font-size: clamp(1.5rem, 2.4vw, 2.05rem);
  margin-bottom: .5em;
}
.doc--about .lead {
  font-size: clamp(.92rem, 1.15vw, 1.02rem);
  font-weight: 400;
  line-height: 1.6;
  max-width: 72ch;
}

/* Links auf der About-Seite ohne Linie · wie auf der Auftritte-Seite */
.doc--about a { text-decoration: none; }
.doc--about a:hover { color: #fff; }

/* Zitat im Einleitungstext · in der Schreibschrift der Seite */
.mk-quote {
  margin: clamp(28px, 4.5vh, 50px) 0 0;
  padding-left: clamp(16px, 2vw, 26px);
  border-left: 2px solid var(--accent);
}
.mk-quote p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(.78rem, 1.02vw, .92rem);
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--ink) !important;
  max-width: none;
}
@media (min-width: 900px) { .mk-quote p { white-space: nowrap; } }
.mk-quote p::before { content: "\201C"; }
.mk-quote p::after  { content: "\201D"; }

/* Hervorhebungen in den Zeitleisten der About-Seite */
.tl span strong { color: var(--ink); font-weight: 600; }

/* Kontaktseite · Kopf ohne Augenbraue, Vorspann zurueckhaltender */
.doc__hero--flach .eyebrow { margin-bottom: 1.1rem; }
.doc .lead--klein {
  font-size: clamp(.92rem, 1.15vw, 1.02rem);
  line-height: 1.6;
  max-width: 62ch;
}

/* Kontaktseite · Fuss ohne eigene Flaeche, er sitzt auf dem Seitenhintergrund */
body.kontakt-page.scrolls .site-footer { background: transparent; }

/* Nummerierte Zwischentitel · weiss und kraeftig */
.doc--live h2.h2--nr,
.doc--about h2.h2--nr {
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(.92rem, 1.5vw, 1.08rem);
  letter-spacing: .2em;
}
/* Auf der Auftritte-Seite im selben Zuschnitt wie "Drei Formate" darueber,
   die Ziffer jedoch in Tuerkis. */
.doc--live h2.h2--nr {
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  letter-spacing: .18em;
  line-height: 1.25;
}
h2.h2--nr .nr { color: var(--accent); font-weight: 400; margin-right: .35em; }

/* Fotografennachweis · sitzt rechts unten im Bild */
.band, .about-intro__portrait { position: relative; }
.bild-credit {
  position: absolute;
  right: clamp(8px, 1vw, 14px);
  bottom: clamp(6px, .8vw, 11px);
  z-index: 2;
  font-size: clamp(.58rem, .72vw, .68rem);
  letter-spacing: .1em;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 1px 10px rgba(0,0,0,.7);
  pointer-events: none;
}

/* Informationen-Knopf auf der Kunstseite · genau in der Bildmitte.
   Die Textebene selbst ist dieselbe wie in den Serien. */
.section-info {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  /* Unten mittig · auf derselben Hoehe wie der Knopf in den Serien. */
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--footer-h) - 6px);
  pointer-events: none;
}
.section-info .gallery__info-btn { pointer-events: auto; }

/* ================================================================
   Mobile Feinschliff · Lesbarkeit und Fingerziele
   Google verlangt auf Telefonen mindestens 12 px Schrift und
   Bedienelemente von rund 44 px. Alles hier greift nur auf kleinen
   Schirmen beziehungsweise bei Bedienung mit dem Finger.
   ================================================================ */
@media (max-width: 860px) {
  /* Begriffe in der Textebene · das ist echter Lesetext, nicht nur Beschriftung */
  .infolayer__body dt { font-size: .8rem; letter-spacing: .14em; }
  /* Bildtitel unter dem Foto */
  .gallery__caption small { font-size: .78rem; }
  .gallery__caption { font-size: .8rem; }
  /* Knopf Informationen · war 9,6 px */
  .gallery__info-btn { font-size: .78rem; padding: 8px 16px; }
  /* Untermenue im Schubfach */
  .submenu a, .submenu details > summary { font-size: .78rem; min-height: 34px; }
  /* Zurueck-Verweis ueber der Galerie und Bildzaehler */
  .gallery-back { font-size: .78rem; }
  .gallery__title, .gallery__counter { font-size: .78rem; }
  /* Fusszeile */
  .site-footer .bar, .site-footer .bar a, .site-footer .bar span { font-size: .78rem; }
  /* Augenbrauen-Beschriftung ueber den Ueberschriften */
  .eyebrow { font-size: .78rem; }
  /* Textebene · auf dem Telefon fuellt der Text den ganzen Schirm, deshalb
     ein dichterer Schleier. Faellt der Weichzeichner aus, bleibt der Text lesbar. */
  .infolayer { background: rgba(1, 43, 65, .88); }
  .infolayer__sheet { padding-bottom: calc(var(--footer-h) + 56px); }
  /* Waehrend die Textebene offen ist, tritt das Bereichsmenue zurueck ·
     sonst schimmern die Kategorienamen durch den Text. */
  body.info-offen .section-menu { opacity: 0; pointer-events: none; }
  /* Weicher Auslauf unten · sonst laeuft der Text in die Fusszeile hinein. */
  .infolayer::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--footer-h) + 34px);
    background: linear-gradient(to top, rgba(1,43,65,.98) 45%, rgba(1,43,65,0));
    pointer-events: none;
  }
}

/* Fingerbedienung · Sprachumschalter und Zurueck-Verweis vergroessern */
@media (pointer: coarse) {
  .lang { font-size: .82rem; }
  .lang a { padding: 12px 8px; }
  .gallery-back { padding: 10px 6px; margin: -10px -6px; }
  .site-footer .bar nav a { padding: 8px 0; display: inline-block; }
}