:root {
  --header-height: 8rem;
  --cream:      #fcf5d7; /* einheitliches Cremeweiß */
  --blue:       #3a6ea5; /* ruhiges, sattes Blau */
  --hearth-red: #e07d6e; /* helles Kaminrot, terrakotta-warm */
  --green:      #5a8e7d; /* gedecktes, natürliches Grün */
  --purple:     #7c5295; /* gedecktes Lila für den Spenden-Button */
  --ink:        #2b2b28; /* dunkler Ton für Text, kein hartes Schwarz */
  --card:       #fffbec; /* helle Karte, hebt sich vom Cremeweiß ab */
  --font-scale: 1;
}

@font-face {
  font-family: 'Ambroise';
  src: url('../ambroise-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../glacial-indifference.regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../glacial-indifference.bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, html{
  margin: 0;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

html {
  font-size: calc(100% * var(--font-scale));
}

body{
  background: var(--cream);
  font-family: 'Glacial Indifference', -apple-system, sans-serif;
}

/* Sanfter Übergang zwischen den Seiten — nur der Inhalt fadet, Header
   und schwebende Elemente bleiben stehen. Die pf-Klasse setzt ein
   Inline-Script im <head> nur bei aktivem JS — ohne JS bleibt alles
   sichtbar. Das Ausblenden beim Klick übernimmt pagefade.js. */
html.pf .section,
html.pf .site-footer {
  animation: page-fade-in .35s ease;
}

html.pf.pf-out .section,
html.pf.pf-out .site-footer {
  opacity: 0;
  transition: opacity .2s ease;
}

@keyframes page-fade-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html.pf .section,
  html.pf .site-footer {
    animation: none;
  }

  html.pf.pf-out .section,
  html.pf.pf-out .site-footer {
    transition: none;
    opacity: 1;
  }
}

/* Ambroise hat keinen fetten Schnitt — kein künstliches Fett. */
h1, h2, h3, h4,
#site-title {
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-weight: 400;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M6 3 L6 34 L14 26 L20 37 L26 34 L20 23 L31 23 Z' fill='black' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
}

.a11y-toolbar {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 40;
  display: flex;
  gap: .5rem;
}

.a11y-btn {
  font-family: inherit;
  font-size: .85rem;
  padding: .5rem .75rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .5rem;
  background: var(--ink);
  color: var(--cream);
  cursor: pointer;
}

.a11y-btn[aria-pressed="true"] {
  background: var(--blue);
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 4.75rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  transition: background-color .2s ease, transform .2s ease;
}

.back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

.back-to-top:hover {
  background: var(--purple);
  transform: translateY(-2px);
}

@media (max-width: 64rem) {
  .back-to-top {
    right: 1rem;
    bottom: 4.25rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 36rem) {
  .a11y-toolbar {
    right: 3.75rem;
    bottom: .75rem;
    gap: .4rem;
  }

  .a11y-btn {
    padding: .4rem .6rem;
    font-size: .75rem;
  }

  .a11y-btn[data-a11y-cursor] {
    display: none;
  }

  .back-to-top {
    right: .75rem;
    bottom: .75rem;
  }
}


.young-serif-regular {
  font-family: "Young Serif", serif;
  font-weight: 400;
  font-style: normal;
}




p{
  font-size: 1.3rem;
  line-height: 1.15;
  margin-top: 5px;
  margin-bottom: 10px;
  color: var(--ink);
}

.section p {
  color: inherit;
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 0;
  background: var(--cream);
  color: var(--ink);
}

#site-title {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  transform: translate(-50%);
  opacity: 1;
  transition: opacity .35s ease, transform .35s ease;
  padding: .5rem .75rem;
}

/* Logo so hoch wie die Navigation, damit der Balken flach bleibt. */
#site-title img {
  display: block;
  width: auto;
  height: 2.75rem;
}

/* Auf der Startseite steht der Titel groß auf dem Video. */
.tpl-home #site-title {
  visibility: hidden;
}

/* Startseite: Header transparent über dem Video, erst danach als Balken
   (is-solid setzt cinema.js, sobald das Video aus dem Bild ist). */
.tpl-home .site-header {
  transition: background-color .3s ease, color .3s ease;
}

.tpl-home .site-header:not(.is-solid) {
  background: transparent;
  color: var(--cream);
}

/* Beim Runterscrollen klappt das Logo weg, beim Hochscrollen kommt es
   wieder — gesteuert über die Scrollrichtung in cinema.js. */
#site-title.is-away {
  opacity: 0;
  transform: translate(-50%, calc(-50% - .75rem));
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #site-title {
    transition: opacity .35s ease;
  }
}

.site-header nav {
  flex: 1 1 0;
  min-width: 0;
  padding: .75rem;
}

.site-header nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-break {
  margin-left: auto;
}

.site-header nav a {
  display: inline-block;
  padding: .4rem 1rem;
  color: inherit;
  text-decoration: none;
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-size: 1.15rem;
  font-weight: 400;
  border-bottom: 1px solid transparent;
  transition: color .3s ease;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.nav-toggle {
  display: none;
}

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

@media (max-width: 64rem) {
  .site-header {
    align-items: center;
    padding: 0 1rem;
  }

  #site-title {
    position: static;
    order: 1;
    flex: 1 1 auto;
    display: flex;
    justify-content: start;
    margin: 0;
    padding: .25rem;
    transform: none;
  }

  #site-title img {
    height: 2.5rem;
  }

  #site-title.is-away {
    transform: translateY(-.75rem);
  }

  .nav-toggle-label {
    display: flex;
    order: 2;
    margin: 0 0 0 auto;
  }

  .site-header nav {
    order: 3;
    width: 100%;
    flex: 1 1 100%;
    padding: 0;
  }

  .nav-break {
    margin-left: 0;
  }

  .site-header nav ul {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    background: rgba(252, 245, 215, .4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 1rem 1rem;
    transition: opacity .3s ease, transform .3s ease, max-height 0s linear .3s;
  }

  .site-header nav ul li {
    width: calc(100% - 2rem);
    margin: .15rem 0;
    text-align: center;
  }

  .site-header nav ul li a {
    display: block;
    padding: .85rem;
    color: var(--ink);
  }

  .nav-toggle:checked ~ nav ul {
    max-height: 30rem;
    opacity: 1;
    transform: translateY(0);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .12);
    transition: opacity .3s ease, transform .3s ease, max-height 0s linear 0s;
  }

  body:has(#nav-toggle:checked) {
    overflow: hidden;
  }
}

.section {
  scroll-margin-top: -2rem;
  padding: calc(var(--header-height) + 5rem) 2.5rem 3rem;
  color: var(--ink);
}

.section > h2 {
  z-index: 10;
  width: fit-content;
  max-width: min(90%, 42rem);
  margin: -1.5rem auto 1.25rem;
  padding: .5rem 1.5rem;
  background: var(--cream);
  border-radius: .75rem;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 400;
  text-align: center;
  transition: background-color .8s ease, color .8s ease;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.section-start {
  padding: 0;
}

.prose {
  max-width: 40rem;
  margin: 0 auto;
}

.prose p {
  line-height: 1.65;
  margin: 0 0 1.1em;
}

.prose h2,
.prose h3 {
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 2.25rem 0 .75rem;
}

.prose h2:first-child,
.prose h3:first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  margin: 0 0 1.1em;
  padding-left: 1.25rem;
  line-height: 1.65;
}

.prose a {
  color: inherit;
}

/* Editorial emphasis for the odd standout sentence — used sparingly,
   dropped directly into a few paragraphs across the site. */
.pull-line {
  display: block;
  margin: 5rem 0 !important;
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  /* font-style: italic; */
  font-size: 1.85rem;
  line-height: 1.25 !important;
}

.project-text {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 2.5rem;
}

.project-editorial {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  max-width: 68rem;
  margin: 0 auto;
  padding: 1rem 2.5rem 3rem;
}

.project-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Pull the row after a standalone heading closer — the editorial's
   3.5rem row gap otherwise reads as too much air before its content. */
.project-row:has(> .project-col > h2:only-child) {
  margin-bottom: -2rem;
}

.project-col {
  grid-column: var(--start, auto) / span var(--span, 12);
  min-width: 0;
}

.project-col p {
  line-height: 1.65;
  margin: 0 0 1.1em;
}

.project-editorial > .project-row:first-child .project-col p {
  font-family: 'Glacial Indifference', -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  opacity: .6;
  margin: 0 0 .5em;
}

.project-editorial > .project-row:first-child .project-col p strong {
  display: inline-block;
  margin-right: .5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.project-col h1,
.project-col h2,
.project-col h3,
.project-col h4 {
  text-align: left;
  font-size: 4rem;
  line-height: 1;
  margin: 0 0 1.25rem;
}

.project-col figure {
  margin: 0;
}

.project-col figure img {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
}

/* Column widths vary per row via the Kirby layout (see projekt.txt) so
   sizing stays on the 12-col grid. Just a slight nudge off-axis here so
   it doesn't look perfectly snapped to the grid. */
@media (min-width: 56.0625rem) {
  .project-row:nth-of-type(2) .project-col:nth-of-type(1) figure img { transform: translateX(-1.5rem); }
  .project-row:nth-of-type(3) .project-col:nth-of-type(2) figure img { transform: translateX(2rem); }
  .project-row:nth-of-type(4) .project-col:nth-of-type(1) figure img { transform: translateX(1rem); }
  .project-row:nth-of-type(5) .project-col:nth-of-type(1) figure img { transform: translateX(-2rem); }
  .project-row:nth-of-type(6) .project-col:nth-of-type(2) figure img { transform: translateX(1.5rem); }
  .project-row:nth-of-type(7) .project-col:nth-of-type(1) figure img { transform: translateX(-1rem); }
}

.project-col figcaption {
  margin-top: .75rem;
  font-size: .85rem;
  opacity: .7;
}

@media (max-width: 56rem) {
  .project-row {
    grid-template-columns: 1fr;
  }

  .project-col {
    grid-column: 1 / -1;
  }
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero video,
.hero img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  /* Forces the video out of the hardware overlay compositing path, which
     otherwise ignores CSS blend modes entirely in Safari/Firefox. */
  opacity: .999;
}

.hero iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.hero-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 1.5rem;
  text-align: center;
  pointer-events: none;
  filter: drop-shadow(0 .15rem 1rem rgba(0, 0, 0, .35));
}

.hero-title img {
  display: block;
  width: min(42vw, 44rem);
  height: auto;
}

p.hero-tagline {
  margin: 0;
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  line-height: 1.3;
  color: var(--cream);
}

.hero-tagline em {
  font-style: italic;
}

.music-toggle {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: background-color .2s ease;
}

.music-toggle:hover {
  background: rgba(0, 0, 0, .5);
}

.music-toggle .music-icon-off {
  display: none;
}

.music-toggle[aria-pressed="true"] .music-icon-on {
  display: none;
}

.music-toggle[aria-pressed="true"] .music-icon-off {
  display: block;
}

@media (max-width: 36rem) {
  .music-toggle {
    right: 1rem;
    bottom: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

p.project-tagline {
  margin: 2rem 0 2.5rem;
  text-align: center;
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
}

p.project-tagline em {
  font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.tpl-bilderreihe),
  html:has(body.tpl-film) {
    scroll-snap-type: none;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, .35);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .35);
  transform: translateX(-50%);
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.hero-scroll:hover {
  background: rgba(0, 0, 0, .5);
}

@keyframes hero-scroll-bounce {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 6px);
  }
}

/* Gleicher Pfeil auf allen anderen Seiten, die man scrollen kann
   (scroll-hint.js) — fest unten in der Mitte, verschwindet beim Scrollen. */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--cream);
  background: rgba(43, 43, 40, .8); /* --ink, auf Creme besser lesbar */
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity .4s ease, visibility .4s ease, background-color .2s ease;
  animation: hero-scroll-bounce 2s ease-in-out infinite;
}

.scroll-hint.is-visible {
  opacity: 1;
  visibility: visible;
}

.scroll-hint:hover {
  background: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll,
  .scroll-hint {
    animation: none;
  }
}

/* Fotostrecke: gleiches Prinzip wie das Scroll-Konzept — ein Panel pro
   Bildschirm, sanftes Einrasten. Bild links, Zitat rechts. */
.section-bilderreihe {
  padding: 0;
}

html:has(body.tpl-bilderreihe) {
  scroll-snap-type: y mandatory;
}

/* Ohne eigenen Einrastpunkt wäre der Footer bei "mandatory" nicht erreichbar. */
.tpl-bilderreihe .site-footer,
.tpl-film .site-footer {
  scroll-snap-align: end;
}

.fotostrecke-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--header-height) 2.5rem 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.fotostrecke-headline {
  margin: 0;
  text-align: center;
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-weight: 400;
  /* so bemessen, dass der längste Satz („Sechs Persönlichkeiten.“) auch
     auf dem Handy in eine Zeile passt */
  font-size: clamp(1.75rem, 8.5vw, 5.5rem);
  line-height: 1.05;
  color: var(--ink);
}

/* Jeder Satz der Anfangsüberschrift in eigener Zeile */
.fotostrecke-headline span {
  display: block;
}

.fotostrecke-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: 96rem;
  margin: 0;
}

.fotostrecke-entry img {
  display: block;
  justify-self: end;
  max-width: 100%;
  max-height: calc(100vh - var(--header-height));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: .5rem;
}

.fotostrecke-quote {
  max-width: 32rem;
  text-align: left;
}

.fotostrecke-quote blockquote {
  margin: 0;
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.35;
  color: var(--ink);
}

.fotostrecke-name {
  margin: 1rem 0 0;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .65;
}

/* Erscheinen beim Scrollen — die reveal-Klasse setzt fotostrecke.js,
   ohne JS bleibt daher alles sofort sichtbar. */
.reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity .9s ease, transform .9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

@media (max-width: 48rem) {
  .fotostrecke-panel {
    padding: calc(var(--header-height) + 1rem) 1rem 1.5rem;
  }

  .fotostrecke-entry {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.5rem;
  }

  .fotostrecke-entry img {
    justify-self: center;
    max-height: 55vh;
  }

  .fotostrecke-quote {
    text-align: center;
  }

  .fotostrecke-quote blockquote {
    font-size: 1.35rem;
  }

  .hero-title img {
    width: 80vw;
  }

  .section,
  .project-text,
  .project-editorial {
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
  }

  .section-start {
    padding-left: 0;
    padding-right: 0;
  }

  .prose p,
  .project-col p {
    line-height: 1.45;
  }
}

/* Ausstellung, Gitti & Gerda, Über das Projekt: Zeilen aus einem seitlich
   scrollbaren Bildstreifen, der rechts aus dem Bild läuft, und einer
   schmalen, linksbündigen Textspalte darunter. */
/* Alle Zeilen zusammen auf einer Karte, die sich leicht vom Hintergrund
   abhebt. Die Karte reicht bis 1rem an den Bildschirmrand, die Fotos
   beginnen direkt an ihrer Kante, nur der Text hat Innenabstand. */
.photo-rows {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  margin-inline: -1.5rem;
  overflow: hidden;
  background: var(--card);
  border: 1px solid rgba(43, 43, 40, .08);
  border-radius: 15px;
  box-shadow: 0 .25rem 1.25rem rgba(43, 43, 40, .06);
}

.photo-row:last-child {
  padding-bottom: 2.5rem;
}

.photo-strip {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: .75rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--purple) rgba(124, 82, 149, .15);
}

/* Safari: Scrollbar dauerhaft sichtbar statt nur beim Scrollen */
.photo-strip::-webkit-scrollbar {
  height: .5rem;
}

.photo-strip::-webkit-scrollbar-track {
  background: rgba(124, 82, 149, .15);
  border-radius: 999px;
}

.photo-strip::-webkit-scrollbar-thumb {
  background: var(--purple);
  border-radius: 999px;
}

.photo-strip img {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: clamp(14rem, 44vh, 26rem);
  scroll-snap-align: start;
  cursor: pointer;
}

.photo-row-text {
  max-width: 36rem;
  margin: 1.5rem 2.5rem 0;
}

.photo-row-text p {
  font-size: 1.15rem;
}

@media (max-width: 48rem) {
  .section-ausstellung,
  .section-gitti-gerda,
  .section-projekt-scroll {
    padding: calc(var(--header-height) + 2rem) 1rem 3rem;
  }

  .photo-rows {
    gap: 3rem;
    margin-inline: -.5rem;
  }

  /* Team hat mobil den breiteren Seitenrand */
  .kontakt-photos .photo-rows {
    margin-inline: -2rem;
  }

  .photo-row:last-child {
    padding-bottom: 1rem;
  }

  .photo-strip {
    gap: .5rem;
  }

  /* Höhe nach Bildschirmbreite: ein Querformat passt ganz drauf, das
     nächste Bild schaut rechts hervor und zeigt, dass man wischen kann. */
  .photo-strip img {
    height: min(45vh, 56vw);
  }

  .photo-row-text {
    margin: 1rem 1rem 0;
  }

  .photo-row-text p {
    font-size: 1.05rem;
  }
}

/* Film: ein Einrast-Panel, das Video mittig im sichtbaren Bereich unter
   dem Header — immer so groß, dass es ganz auf den Bildschirm passt. */
.section-film {
  padding: 0;
}

html:has(body.tpl-film) {
  scroll-snap-type: y mandatory;
}

.film-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* seitlich so viel Luft, dass der feste „Nach oben“-Button nie über
     der Steuerleiste liegt */
  padding: var(--header-height) 5rem 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@media (max-width: 36rem) {
  .film-panel {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* Video + Steuerleiste zusammen passen immer ganz unter den Header.
   Breite aus der verfügbaren Höhe: 100vh minus Header, je 4.5rem Luft
   oben und unten (unten liegen die festen A-/A+-Buttons) und Steuerleiste,
   mal 16:9. */
.film-player {
  --film-controls: 3.5rem;
  width: min(100%, 80rem, calc((100vh - var(--header-height) - 9rem - var(--film-controls)) * 16 / 9));
}

.film-player video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: .5rem;
  background: var(--ink);
  cursor: pointer;
}

.film-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--film-controls);
  padding-top: .75rem;
  color: var(--ink);
}

.film-controls[hidden] {
  display: none;
}

.film-button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease;
}

.film-button:hover {
  background: rgba(43, 43, 40, .08);
}

.film-play {
  color: var(--cream);
  background: var(--ink);
}

.film-play:hover {
  background: #45453f;
}

.film-play .film-icon-pause,
.film-player.is-playing .film-play .film-icon-play,
.film-mute .film-icon-muted,
.film-mute[aria-pressed="true"] .film-icon-sound {
  display: none;
}

.film-player.is-playing .film-play .film-icon-pause,
.film-mute[aria-pressed="true"] .film-icon-muted {
  display: block;
}

.film-time {
  flex: none;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

/* Fortschrittsbalken: --progress setzt film.js (0–100 %). */
.film-progress {
  --progress: 0%;
  flex: 1;
  min-width: 0;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.film-progress::-webkit-slider-runnable-track {
  height: .3rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink) var(--progress), rgba(43, 43, 40, .2) var(--progress));
}

.film-progress::-moz-range-track {
  height: .3rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ink) var(--progress), rgba(43, 43, 40, .2) var(--progress));
}

.film-progress::-webkit-slider-thumb {
  width: .9rem;
  height: .9rem;
  margin-top: -.3rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.film-progress::-moz-range-thumb {
  width: .9rem;
  height: .9rem;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}

@media (max-width: 36rem) {
  .film-controls {
    gap: .4rem;
  }

  .film-time {
    font-size: .8rem;
  }
}

.film-text {
  padding: 3rem 2.5rem;
  scroll-snap-align: start;
}

/* Team: Fotos hinter den Kulissen im Zeilen-Layout der Ausstellung */
.kontakt-photos {
  margin-top: 5rem;
}

.kontakte {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
  max-width: 66rem;
  margin: 2rem auto 0;
}

.kontakt-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  flex: 0 1 18rem;
  text-align: center;
}

.kontakt-card img {
  display: block;
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 4 / 5;
  margin-bottom: 1rem;
  border-radius: 1.25rem;
  object-fit: cover;
}

.kontakt-card p {
  margin: 0;
}

.kontakt-name {
  font-family: 'Ambroise', 'Young Serif', Times, serif;
  font-size: 1.6rem;
}

.kontakt-role {
  font-size: .85rem;
  opacity: .7;
}

.kontakt-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: .75rem;
}

.kontakt-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  transition: background-color .2s ease, transform .2s ease;
}

.kontakt-link svg {
  width: 1.1rem;
  height: 1.1rem;
}

.kontakt-link:hover {
  background: var(--purple);
  transform: translateY(-2px);
}

.kontakt-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .9rem;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.kontakt-toggle-icon {
  width: 1rem;
  height: 1rem;
  transition: transform .3s ease;
}

.kontakt-toggle[aria-expanded="true"] .kontakt-toggle-icon {
  transform: rotate(180deg);
}

.kontakt-bio {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  text-align: left;
  transition: max-height .5s ease, opacity .4s ease;
}

.kontakt-bio.is-open {
  max-height: 60rem;
  opacity: 1;
}

.kontakt-bio-inner {
  padding-top: .75rem;
}

.kontakt-bio p {
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 .75em;
}

.site-footer {
  padding: 3rem 2.5rem 2.5rem;
  border-top: 1px solid rgba(0, 0, 0, .1);
  text-align: center;
  font-size: .75rem;
}

@media (max-width: 48rem) {
  .site-footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.footer-donate {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.footer-donate:hover {
  background: #6a4482;
  transform: translateY(-2px);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.footer-nav a:hover {
  border-bottom-color: currentColor;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.5rem;
  font-size: inherit;
  opacity: .7;
}

.footer-meta a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.footer-meta a:hover {
  border-bottom-color: currentColor;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.footer-meta p {
  margin: 0;
  font-size: inherit;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 3rem;
  background: rgba(255, 255, 255, .92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s linear 0s;
}

.lightbox img {
  display: block;
  max-width: 85vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  grid-area: 1 / 1;
  opacity: 1;
  transform: scale(.96);
  transition: transform .3s ease, opacity .2s ease;
}

.lightbox.is-open img {
  transform: scale(1);
}

.lightbox img.is-switching {
  opacity: 0;
}

.lightbox-close,
.lightbox-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: none;
  color: var(--ink);
  opacity: .4;
  cursor: pointer;
  transition: opacity .2s ease;
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
  opacity: 1;
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

.lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 48rem) {
  .lightbox {
    padding: 1.5rem;
  }

  .lightbox-close {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .lightbox-nav {
    width: 2.5rem;
    height: 2.5rem;
  }

  .lightbox-prev {
    left: .5rem;
  }

  .lightbox-next {
    right: .5rem;
  }
}