/* Liederkarussell, Gestaltung
   Grundton sind warme Naturfarben, Papier und Sand. Die Logofarben Grün und
   Orange kommen nur als Akzent vor, an Knöpfen und kleinen Marken. */

:root {
  /* Helles Leder als Grundton. Ein früheres Beige lag zu nah an der Farbe, die
     Browser für ihre Hinweisleisten nehmen, ein Grau war zu kühl. */
  --papier:      #e6d9c7;
  --papier-tief: #dacab3;
  --karte:       #f4eee4;
  --tinte:       #2a231b;
  --tinte-leise: #5f5445;
  --linie:       #c6b494;
  --bildkante:   #6a5b47;
  /* Auf dem Leder braucht das Moosgruen mehr Tiefe. Mit dem hellen Ton kam es auf
     der dunkleren Flaeche nur auf Kontrast 3,99, jetzt auf 5,4. */
  --moos:        #44502f;
  --lehm:        #9a8867;
  --logo-gruen:  #68b840;
  --logo-orange: #ff6600;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --breit: 70rem;
  --schmal: 44rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--moos); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--logo-orange); }

h1, h2, h3 { font-family: var(--serif); font-weight: normal; line-height: 1.2; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--moos); margin: 0 0 .6rem; }
h3 { font-size: 1.2rem; margin: 0 0 .35rem; color: var(--tinte); }

p { margin: 0 0 1rem; }
.schmal { max-width: var(--schmal); }
.leise { color: var(--tinte-leise); }

/* ---------- Kopfleiste ---------- */

.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .5rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopfleiste img { height: 2.1rem; width: auto; }
.kopfleiste nav { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-left: auto; }
.kopfleiste nav a {
  color: var(--tinte); text-decoration: none; font-size: .95rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.kopfleiste nav a:hover { border-bottom-color: var(--logo-gruen); color: var(--tinte); }

/* Menüknopf, nur auf schmalen Geräten sichtbar */
.menueknopf {
  display: none; align-items: center; gap: .5rem;
  background: transparent; border: 1px solid var(--linie); border-radius: 4px;
  color: var(--tinte); font: inherit; font-size: .9rem;
  padding: .35rem .7rem; cursor: pointer;
}
.menueknopf .striche,
.menueknopf .striche::before,
.menueknopf .striche::after {
  display: block; width: 16px; height: 2px; background: var(--tinte); border-radius: 1px;
}
.menueknopf .striche { position: relative; }
.menueknopf .striche::before,
.menueknopf .striche::after { content: ""; position: absolute; left: 0; }
.menueknopf .striche::before { top: -5px; }
.menueknopf .striche::after { top: 5px; }

/* Auf schmalen Geräten würden die sieben Menüpunkte die Leiste drei Zeilen hoch
   machen. Sie liegen deshalb hinter dem Menüknopf und klappen darunter auf. */
@media (max-width: 54rem) {
  .kopfleiste { flex-wrap: wrap; gap: .6rem; }
  .menueknopf { display: inline-flex; margin-left: auto; }
  .kopfleiste nav { display: none; }
  .kopfleiste.offen nav {
    display: flex; flex-direction: column; gap: 0;
    flex-basis: 100%; margin: .2rem -.4rem 0;
    border-top: 1px solid var(--linie);
  }
  .kopfleiste.offen nav a {
    padding: .7rem .4rem; border-bottom: 1px solid var(--linie);
    border-left: 3px solid transparent;
  }
  .kopfleiste.offen nav a:hover { border-bottom-color: var(--linie); border-left-color: var(--logo-gruen); }
  .kopfleiste .knopf { order: 3; }
  .menueknopf { order: 2; }
}

.knopf {
  display: inline-block;
  background: var(--logo-orange); color: var(--tinte);
  font-weight: 600; text-decoration: none;
  padding: .5rem 1.1rem; border-radius: 2rem;
  border: 2px solid transparent;
}
.knopf:hover { background: var(--tinte); color: var(--papier); }
.knopf.leer { background: transparent; border-color: var(--lehm); color: var(--tinte); }
.knopf.leer:hover { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }

/* ---------- Aufmacher ---------- */

.aufmacher {
  position: relative;
  min-height: min(78vh, 40rem);
  display: flex; align-items: flex-end;
  padding: clamp(2rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  background: #241f18 center/cover no-repeat;
  color: #f9f5ec;
}
/* Der Verlauf muss kraeftig genug sein, dass auch helle Stellen im Foto, etwa
   Scheinwerfer, die Schrift darueber nicht unlesbar machen. */
.aufmacher::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #1b1710f7 0%, #1b1710e0 38%, #1b171099 68%, #1b171029 100%);
}
.aufmacher > div {
  position: relative; z-index: 1; max-width: var(--breit); margin: 0 auto; width: 100%;
  /* Sicherheitsnetz gegen helle Bildstellen direkt hinter der Schrift */
  text-shadow: 0 1px 4px #100d0999;
}
.aufmacher h1 {
  font-size: clamp(2.6rem, 9vw, 5rem);
  margin: 0 0 .3rem; letter-spacing: -.01em;
}
.aufmacher .unterzeile { font-size: clamp(1.05rem, 2.4vw, 1.4rem); max-width: 34ch; margin-bottom: 1.2rem; }
.aufmacher .termin {
  display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline;
  font-family: var(--serif); font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  border-top: 2px solid var(--logo-gruen); padding-top: .7rem; margin-bottom: 1.6rem;
}
.aufmacher .termin b { font-weight: normal; }
.aufmacher .termin span { color: #d8cfbe; }
.aufmacher .knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; }
/* Die Knoepfe haben ihren eigenen Grund und brauchen den Schattensaum des
   Textblocks nicht. Auf dem orangen Knopf macht er die Schrift nur schmutzig. */
.aufmacher .knopf { text-shadow: none; }
/* Auf dem dunklen Bild braucht der Umrissknopf helle Schrift, sonst ist er
   nicht zu erkennen. */
.aufmacher .knopf.leer { color: #f9f5ec; border-color: #f9f5ecb3; }
.aufmacher .knopf.leer:hover { background: #f9f5ec; color: var(--tinte); border-color: #f9f5ec; }
.marke { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moos); }
/* Im Aufmacher liegt die Marke ueber dem Foto, und dort kann jederzeit ein
   Scheinwerfer hinter der Schrift stehen. Gemessen kam an der hellsten Stelle nur
   ein Kontrast von 3,2 heraus. Ein eigener dunkler Grund macht die Zeile
   unabhaengig vom Bild, dann traegt auch das Gruen. */
.aufmacher .marke {
  color: var(--logo-gruen);
  display: inline-block;
  /* Weicher dunkler Schein, der nach allen Seiten ins Durchsichtige auslaeuft.
     Ueber der Schrift deckt er fast vollstaendig, am Rand ist er verschwunden,
     deshalb sieht man keine Kante. */
  background: radial-gradient(ellipse at 50% 50%,
              #17130df5 0%, #17130deb 38%, #17130da6 60%, #17130d3d 80%, #17130d00 100%);
  padding: .5rem .9rem;
  /* Die Polsterung wieder herausrechnen, damit die Zeile mit dem Titel darunter
     auf einer Kante steht. */
  margin: 0 -.9rem .2rem;
  text-shadow: none;
}

/* ---------- Abschnitte ---------- */

section { padding: clamp(2.8rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem); }
section > .innen { max-width: var(--breit); margin: 0 auto; }
.gesattelt { background: var(--papier-tief); }

.zweispalt {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 55rem) {
  .zweispalt { grid-template-columns: 1.05fr .95fr; }
  .zweispalt.gedreht > figure { order: -1; }
}
/* Statt einer Kante loesen sich die Raender ueber die Maske auf, siehe unten
   bei .verlaufsbild. Die Fotos gehen dadurch in die Flaeche ueber. */
.zweispalt figure { margin: 0; }
figcaption { font-size: .82rem; color: var(--tinte-leise); margin-top: .4rem; }

.karten { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 1.8rem; }
.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 4px;
  padding: 1.3rem 1.3rem 1.4rem; position: relative; overflow: hidden;
}
.karte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--logo-gruen);
}
.karte:nth-child(2)::before { background: var(--logo-orange); }
.karte:nth-child(3)::before { background: var(--lehm); }
.karte p:last-child { margin-bottom: 0; }

/* ---------- Programm ---------- */

.programm {
  display: grid; gap: 1.4rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.kuenstler {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
}
.kuenstler img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #241f18; }
.kuenstler .ohne-bild {
  width: 100%; aspect-ratio: 1 / 1;
  background: repeating-linear-gradient(135deg, var(--papier-tief) 0 12px, var(--karte) 12px 24px);
  border-bottom: 1px solid var(--linie);
}
.kuenstler h3 { margin: .9rem 1rem .3rem; font-size: 1.15rem; }
.kuenstler p { margin: 0 1rem .9rem; font-size: .93rem; }
.kuenstler .weiter { margin-top: auto; padding-top: .2rem; }
.kuenstler .weiter a { font-size: .88rem; }

/* ---------- Hörprobe ---------- */

.hoerprobe {
  margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--linie);
}
.hoerprobe h3 { font-size: 1.4rem; font-family: var(--serif); color: var(--moos); }
.hoerprobe > p { max-width: var(--schmal); }
.klickschutz {
  background: var(--karte); border: 1px solid var(--linie); border-radius: 4px;
  padding: 1.6rem; text-align: center; max-width: var(--schmal);
}
.klickschutz button {
  background: var(--logo-orange); color: var(--tinte); border: 0; border-radius: 2rem;
  padding: .7rem 1.5rem; font: inherit; font-weight: 600; cursor: pointer;
}
.klickschutz button:hover { background: var(--tinte); color: var(--papier); }
.klickschutz .kleingedruckt {
  margin: 1rem 0 0; font-size: .8rem; color: var(--tinte-leise); text-align: left;
}

/* ---------- Drucksachen ---------- */

.drucksachen {
  scroll-margin-top: 1rem;
  margin-top: 2.5rem; padding-top: 1.8rem; border-top: 1px solid var(--linie);
  max-width: var(--schmal);
}
.drucksachen h3 { font-family: var(--serif); color: var(--moos); font-size: 1.25rem; }
.drucksachen .knoepfe { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ---------- Praktisches ---------- */

.fakten { display: grid; gap: 0; margin: 1.6rem 0 0; }
.fakten > div {
  display: grid; gap: .2rem 1.5rem; padding: .9rem 0;
  border-top: 1px solid var(--linie);
}
.fakten > div:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) { .fakten > div { grid-template-columns: 11rem 1fr; } }
.fakten dt, .fakten b { font-family: var(--serif); color: var(--moos); }
.fakten p { margin: 0; }

/* Einzelne Einträge haben ein kleines Bild neben dem Text */
.fakten .mit-bild dd { display: flex; gap: 1.1rem; align-items: flex-start; }
.fakten .mit-bild dd > p { flex: 1 1 12rem; }
.fakten .mit-bild figure { flex: 0 0 clamp(7rem, 24vw, 11rem); margin: 0; }
/* Hochformate bekommen eine schmalere Spalte, sonst ziehen sie die Zeile auseinander.
   Die Breite bleibt fest, damit der Platz auch vor dem Laden des Bildes reserviert ist. */
.fakten .mit-bild figure.hoch { flex-basis: clamp(5.5rem, 18vw, 8.5rem); }
.fakten .mit-bild figure img { width: 100%; }
.fakten .mit-bild figcaption { margin-top: .3rem; font-size: .74rem; }
@media (max-width: 34rem) {
  .fakten .mit-bild dd { flex-direction: column; }
  .fakten .mit-bild figure,
  .fakten .mit-bild figure.hoch { flex: 0 0 auto; width: 100%; max-width: 17rem; }
}

/* ---------- Galerie ---------- */

/* ---------- Schalter vor der Galerie ---------- */

.bilderschalter { margin-top: 2rem; }
.bilderschalter summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  padding: .6rem; text-align: center;
}
.bilderschalter summary::-webkit-details-marker { display: none; }

/* Ein richtiger Druckknopf. Die Fassung entsteht aus zwei Ringen im Schatten,
   die Woelbung aus einem Farbverlauf mit Glanzlicht oben links. */
.knopfkoerper {
  --knopf: clamp(6.5rem, 22vw, 9rem);
  width: var(--knopf); height: var(--knopf); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 36% 30%,
              #ffb066 0%, #ff8c2b 26%, #ff6600 52%, #d24800 80%, #9c3400 100%);
  box-shadow:
    0 0 0 .5rem #d9c6a4,
    0 0 0 .62rem #9c8664,
    0 .6rem 1rem #2a231b66,
    inset 0 .32rem .5rem #ffd3aa80,
    inset 0 -.45rem .7rem #8c2f0099;
  transition: transform .09s ease, box-shadow .09s ease, filter .15s ease;
}
.knopfkoerper span {
  font-family: var(--sans); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: clamp(.85rem, 2.4vw, 1.05rem);
  color: #fff6ec; text-shadow: 0 1px 2px #8c2f00cc;
}
.bilderschalter summary:hover .knopfkoerper { filter: brightness(1.06); }
.bilderschalter summary:active .knopfkoerper,
.bilderschalter[open] .knopfkoerper {
  transform: translateY(.32rem);
  box-shadow:
    0 0 0 .5rem #d9c6a4,
    0 0 0 .62rem #9c8664,
    0 .18rem .4rem #2a231b59,
    inset 0 .5rem .7rem #8c2f0099,
    inset 0 -.2rem .4rem #ffd3aa4d;
}
.bilderschalter summary:focus-visible { outline: 3px solid var(--moos); outline-offset: 4px; border-radius: 8px; }

.bilderschalter .beschriftung {
  display: block; font-family: var(--serif);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--moos);
}
.bilderschalter .anzahl {
  display: block; font-family: var(--sans); font-size: .8rem;
  color: var(--tinte-leise); letter-spacing: .04em; margin-top: .15rem;
}
.bilderschalter .auf { display: none; }
.bilderschalter[open] .auf { display: block; }
.bilderschalter[open] .zu { display: none; }

@media (prefers-reduced-motion: reduce) {
  .knopfkoerper { transition: none; }
}

.galerie {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  grid-auto-rows: 8.5rem;
  margin-top: 1.8rem;
}
.galerie a { display: block; overflow: hidden; border-radius: 3px; background: #241f18; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.galerie a:hover img { transform: scale(1.04); }
.galerie a.hoch { grid-row: span 2; }

/* Auf dem Handy zwei Spalten statt einer, sonst wird die Galerie endlos lang */
@media (max-width: 34rem) {
  .galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 6rem; gap: .4rem; }
}

/* Leuchtkasten */
#kasten {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: #16130ef2; padding: clamp(.5rem, 3vw, 2.5rem);
  align-items: center; justify-content: center;
}
#kasten.auf { display: flex; }
#kasten img { max-height: 86vh; max-width: 100%; border-radius: 3px; }
#kasten .beschriftung {
  position: absolute; bottom: .8rem; left: 0; right: 0; text-align: center;
  color: #e7dfd0; font-size: .85rem;
}
#kasten button {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: #f7f2e733; color: #f7f2e7; border: 0; border-radius: 50%;
  width: 2.8rem; height: 2.8rem; font-size: 1.4rem; cursor: pointer;
}
#kasten button:hover { background: var(--logo-orange); color: var(--tinte); }
#kasten .zurueck { left: .6rem; }
#kasten .weiter { right: .6rem; }
#kasten .zu { top: .6rem; right: .6rem; transform: none; }

/* ---------- Fuß ---------- */

footer {
  background: #241f18; color: #e8e0d2;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem) 2rem;
}
footer .innen { max-width: var(--breit); margin: 0 auto; }
footer a { color: #e8e0d2; }
footer a:hover { color: var(--logo-orange); }
footer .spalten { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
footer h3 { color: #f7f2e7; font-size: 1rem; }
footer .schluss {
  margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid #4a4136;
  font-size: .84rem; color: #b3a897; display: flex; gap: 1.2rem; flex-wrap: wrap;
}
footer .schluss a { color: #b3a897; }

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: var(--schmal); margin: 0 auto; }
.rechtstext h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); color: var(--moos); margin-bottom: 1.5rem; }
.rechtstext h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.rechtstext dl div { margin-bottom: .6rem; }
.rechtstext dt { font-weight: 600; }
.rechtstext dd { margin: 0; }
.hinweiskasten {
  background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--logo-orange);
  border-radius: 3px; padding: 1rem 1.2rem; margin: 1.5rem 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .galerie img { transition: none; }
}


/* ---------- Schwebender WhatsApp-Knopf ---------- */

/* Sitzt unten rechts und wandert beim Scrollen mit. Er erscheint erst unterhalb
   des Aufmacherbildes, weil oben schon "Schreib uns" in der Leiste steht, und er
   verschwindet, solange der Leuchtkasten der Galerie offen ist. */
.flugknopf {
  position: fixed; right: clamp(.9rem, 3vw, 1.8rem); bottom: clamp(.9rem, 3vw, 1.8rem);
  z-index: 60;
  display: flex; align-items: center; gap: .8rem;
  background: #25d366; color: #08351f; text-decoration: none;
  border-radius: 2.5rem; padding: .95rem 1.5rem .95rem 1.1rem;
  box-shadow: 0 6px 22px #2a231b59, 0 0 0 3px #ffffffcc, 0 0 0 5px #1fa85566;
  opacity: 0; transform: translateY(1.2rem) scale(.96); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, box-shadow .2s ease;
}
.flugknopf.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.flugknopf:hover {
  color: #08351f; transform: translateY(-3px);
  box-shadow: 0 10px 28px #2a231b73, 0 0 0 3px #ffffff, 0 0 0 6px #1fa85599;
}
.flugknopf svg { width: 2.5rem; height: 2.5rem; display: block; color: #08351f; flex: 0 0 auto; }
.flugknopf .wort {
  display: flex; flex-direction: column; line-height: 1.15;
  font-family: var(--serif); font-size: 1.2rem;
}
.flugknopf .wort .klein {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; opacity: .82; margin-top: .15rem;
}
.flugknopf:focus-visible { outline: 3px solid var(--moos); outline-offset: 4px; }

/* Ein paar ruhige Pulsschlaege, wenn er auftaucht, danach ist Ruhe. */
.flugknopf::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 #25d36699; pointer-events: none;
}
.flugknopf.sichtbar::before { animation: draht 2.6s ease-out 3; }
@keyframes draht {
  0%   { box-shadow: 0 0 0 0 #25d366cc; }
  70%  { box-shadow: 0 0 0 22px #25d36600; }
  100% { box-shadow: 0 0 0 0 #25d36600; }
}

/* Auf schmalen Geraeten bleibt die Beschriftung stehen, der Knopf wird nur
   schmaler. Nur die kleine Unterzeile faellt weg, sonst wird es zu gedraengt. */
@media (max-width: 34rem) {
  .flugknopf {
    padding: .7rem 1.05rem .7rem .8rem; gap: .55rem;
    left: auto; max-width: calc(100vw - 1.8rem);
  }
  .flugknopf svg { width: 1.95rem; height: 1.95rem; }
  .flugknopf .wort { font-size: 1.02rem; }
  .flugknopf .wort .klein { display: none; }
}

/* Bei geoeffneter Bildansicht stoert er nur */
body.kastenoffen .flugknopf { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .flugknopf { transition: opacity .01s; }
  .flugknopf.sichtbar::before { animation: none; }
  .flugknopf:hover { transform: none; }
}


/* ---------- Bilder, die in die Flaeche uebergehen ---------- */

/* Ein Foto soll nicht wie aufgeklebt auf der Seite liegen, sondern aus dem
   Grund auftauchen. Deshalb kein Rahmen, sondern eine Maske aus zwei
   Verlaeufen, einer senkrecht, einer waagerecht, die verschnitten werden. Die
   Raender werden dadurch wirklich durchsichtig statt uebermalt, der Untergrund
   scheint hindurch, gleich welche Farbe der Abschnitt gerade hat. Der leichte
   Warmton nimmt den Fotos die Kuehle und passt sie an das Leder an.
   Ohne Maskenunterstuetzung bleibt schlicht das ganze Bild stehen.

   Ausgenommen sind die Kuenstlerbilder, die Galerie hinter dem Schalter und die
   grosse Ansicht im Leuchtkasten. Dort waeren aufgeloeste Raender im Weg. */
.zweispalt img,
.fakten .mit-bild figure img,
.crew img {
  display: block; height: auto;
  filter: saturate(.9) sepia(.1) contrast(1.02);
  border: 0; border-radius: 0;
  -webkit-mask-image:
    linear-gradient(to bottom, #0000 0%, #000 12%, #000 68%, #0000 99%),
    linear-gradient(to right, #0000 0%, #000 11%, #000 89%, #0000 100%);
  mask-image:
    linear-gradient(to bottom, #0000 0%, #000 12%, #000 68%, #0000 99%),
    linear-gradient(to right, #0000 0%, #000 11%, #000 89%, #0000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Die kleinen Bilder bei den praktischen Angaben sind nur wenige Zentimeter
   breit. Dort muss der Auslauf schmaler sein, sonst bleibt vom Motiv nichts
   uebrig. */
.fakten .mit-bild figure img {
  -webkit-mask-image:
    linear-gradient(to bottom, #0000 0%, #000 8%, #000 80%, #0000 100%),
    linear-gradient(to right, #0000 0%, #000 7%, #000 93%, #0000 100%);
  mask-image:
    linear-gradient(to bottom, #0000 0%, #000 8%, #000 80%, #0000 100%),
    linear-gradient(to right, #0000 0%, #000 7%, #000 93%, #0000 100%);
}

/* Das Bild der Mannschaft bei "Wer dahintersteht" laeuft ueber die volle
   Spaltenbreite, die Unterschrift steht als ruhige Zeile darunter. */
.crew { margin: clamp(2rem, 5vw, 3rem) 0 0; }
.crew img { width: 100%; }
.crew figcaption {
  max-width: var(--schmal); margin: -1.4rem auto 0;
  font-family: var(--serif); font-style: italic;
  color: var(--tinte-leise); font-size: .95rem; text-align: center;
}