/* ------------------------------------------------------------------
   Konzertseite — dunkel, cineastisch, in Bewegung.

   Eigenes Blatt, nicht die Zeitungsoptik: eine Konzertseite soll den
   Abend ankuendigen, nicht eine Zeitung nachstellen. Chiaroscuro,
   entsaettigt, viel Schwarz, wenige helle Flaechen.

   Bewegung steckt in vier Dingen: die Bildfolge oben blendet weich
   ineinander und faehrt dabei langsam zu, weiche Lichtpunkte ziehen
   darueber, ein feines Korn liegt ueber der ganzen Seite, und beim
   Blaettern wandern Bild und Schrift verschieden schnell mit.
   Wer im System weniger Bewegung eingestellt hat, sieht eine ruhige
   Seite — ganz unten steht die Ausnahme.

   Die Schrift Newsreader liegt bereits auf dem Webspace und wird auch
   von der Zeitung benutzt — nichts wird von fremden Servern geladen.
   ------------------------------------------------------------------ */

@font-face{
  font-family:"Newsreader";
  src:url("/assets/fonts/newsreader-latin.woff") format("woff");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("/assets/fonts/newsreader-italic-latin.woff") format("woff");
  font-weight:400 700; font-style:italic; font-display:swap;
}

:root{
  --nacht:#0b0b0c;
  --nacht-2:#121214;
  --nacht-3:#191919;
  --creme:#f2ede4;
  --creme-leise:#b9b2a6;
  --creme-still:#6f6a62;
  --kante:rgba(242,237,228,.14);
  --akzent:#c8102e;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Helvetica Neue", Arial, system-ui, sans-serif;
  --rand:clamp(20px, 5vw, 76px);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--nacht); color:var(--creme);
  font-family:var(--serif); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}

.versal{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--creme-still);
}

/* ---------- Filmkorn ueber allem ---------- */
.korn{
  position:fixed; inset:-120px; z-index:900; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;
  animation:flimmern .9s steps(3) infinite;
}
@keyframes flimmern{
  0%{ transform:translate3d(0,0,0) }
  33%{ transform:translate3d(-14px,9px,0) }
  66%{ transform:translate3d(11px,-12px,0) }
  100%{ transform:translate3d(0,0,0) }
}

/* Kopfleiste: steht jetzt allein in gemein.css */

/* ---------- Aufmacher ---------- */
.auf{
  position:relative; min-height:min(88vh, 860px);
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
}

/* Die Bildfolge: alle Blaetter liegen uebereinander, nur eins ist da. */
.auf__buehne{ position:absolute; inset:0; z-index:0; background:var(--nacht) }
.auf__blatt{
  position:absolute; inset:0; opacity:0;
  transform:scale(1.06); filter:blur(14px) saturate(.55);
  transition:opacity 2.6s ease, transform 3.4s ease, filter 2.6s ease;
  will-change:opacity, transform, filter;
}
.auf__blatt.ist-da{ opacity:1; transform:scale(1); filter:blur(0) saturate(1) }
.auf__blatt img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.45) contrast(1.1) brightness(.68);
  animation:zufahrt-a 32s ease-in-out infinite alternate;
  will-change:transform;
}
.auf__blatt:nth-child(2n) img{ animation-name:zufahrt-b }
.auf__blatt:nth-child(3n) img{ animation-name:zufahrt-c }

/* Ken Burns — langsame Zufahrt, jedes Bild in eine andere Richtung. */
@keyframes zufahrt-a{
  from{ transform:scale(1.04) translate3d(0,0,0) }
  to  { transform:scale(1.17) translate3d(-2.2%,-1.6%,0) }
}
@keyframes zufahrt-b{
  from{ transform:scale(1.16) translate3d(1.8%,1.2%,0) }
  to  { transform:scale(1.03) translate3d(0,0,0) }
}
@keyframes zufahrt-c{
  from{ transform:scale(1.06) translate3d(1.6%,-1.2%,0) }
  to  { transform:scale(1.19) translate3d(-1.4%,1.4%,0) }
}

/* Der Trailer liegt ueber der Bildfolge und blendet sich ein, sobald er
   laeuft. Faellt er aus, bleibt die Bildfolge darunter stehen. */
.auf__film{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s ease; z-index:1;
  filter:grayscale(.18) contrast(1.04) brightness(.78);
}
.auf__film.laeuft{ opacity:1 }
.auf__ton{
  position:absolute; z-index:4; right:var(--rand); bottom:clamp(58px,7vw,84px);
  background:rgba(11,11,12,.5); color:var(--creme-leise);
  border:1px solid var(--kante); backdrop-filter:blur(6px);
  padding:8px 15px; cursor:pointer;
  font-family:var(--sans); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  transition:color .2s, border-color .2s;
}
.auf__ton:hover{ color:var(--creme); border-color:rgba(242,237,228,.4) }
.auf__ton .ton-an{ display:none }
.auf__ton.ist-laut .ton-an{ display:inline }
.auf__ton.ist-laut .ton-aus{ display:none }
/* Solange der Trailer laeuft, sagen die Striche nichts mehr aus. */
.auf.mit-film .auf__punkte{ opacity:0; transition:opacity .6s ease }

.auf__schleier{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(112% 125% at 50% 46%,
      rgba(11,11,12,0) 30%,
      rgba(11,11,12,.38) 60%,
      rgba(11,11,12,.76) 84%,
      rgba(11,11,12,.93) 100%),
    linear-gradient(180deg,
      rgba(11,11,12,.80) 0%, rgba(11,11,12,0) 26%,
      rgba(11,11,12,0) 56%, rgba(11,11,12,.88) 100%);
}

/* Weiche Lichtpunkte — unscharfe Scheinwerfer hinter der Buehne. */
.bokeh{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden }
.bokeh span{
  position:absolute; left:var(--x); top:var(--y);
  width:var(--gr); height:var(--gr); margin:calc(var(--gr) / -2);
  border-radius:50%; mix-blend-mode:screen; opacity:.22;
  background:radial-gradient(circle at 50% 50%, var(--f) 0%, rgba(0,0,0,0) 68%);
  filter:blur(26px);
  animation:schweben var(--t) ease-in-out infinite alternate;
  animation-delay:var(--v);
}
@keyframes schweben{
  from{ transform:translate3d(0,0,0) scale(1); opacity:.13 }
  to  { transform:translate3d(6vw,-7vh,0) scale(1.35); opacity:.3 }
}

.auf__zeichen{
  position:absolute; right:clamp(-30px, 2vw, 60px); top:50%; transform:translateY(-52%);
  height:min(86%, 620px); width:auto; opacity:.07; pointer-events:none; z-index:2;
}
.auf__satz{
  position:relative; z-index:4; width:100%;
  padding:0 var(--rand) clamp(44px, 7vw, 96px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(280px, 360px); gap:clamp(24px,5vw,70px); align-items:end;
}
.auf__titel{ margin:0; will-change:transform }
.auf__jahr{ display:block; color:var(--akzent); font-family:var(--sans);
  font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; margin-bottom:14px }
.auf__stadt{
  display:block; font-size:clamp(3rem, 9vw, 6.6rem); line-height:.92;
  font-weight:400; letter-spacing:.02em;
  text-shadow:0 10px 50px rgba(0,0,0,.6);
  animation:auftauchen 1.5s cubic-bezier(.16,.84,.34,1) both;
}
.auf__jahr{ animation:auftauchen 1.2s cubic-bezier(.16,.84,.34,1) both }
.auf__venue{
  display:block; font-size:clamp(1.1rem, 2.4vw, 1.9rem); line-height:1.2;
  color:var(--creme-leise); letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--sans); font-weight:300; margin-top:12px;
  animation:auftauchen 1.7s cubic-bezier(.16,.84,.34,1) both; animation-delay:.14s;
}
@keyframes auftauchen{
  from{ opacity:0; transform:translate3d(0,26px,0); filter:blur(8px) }
  to  { opacity:1; transform:none; filter:blur(0) }
}

/* Punkte und Pfeil */
.auf__punkte{
  position:absolute; z-index:4; left:var(--rand); bottom:clamp(18px,2.6vw,30px);
  display:flex; gap:8px;
}
.auf__punkte i{
  width:22px; height:2px; background:rgba(242,237,228,.22);
  transition:background .5s, width .5s;
}
.auf__punkte i.ist-da{ background:var(--akzent); width:38px }
.auf__runter{
  position:absolute; z-index:4; right:var(--rand); bottom:clamp(18px,2.6vw,30px);
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--creme-leise); text-decoration:none;
  animation:winken 2.6s ease-in-out infinite;
}
.auf__runter svg{ width:20px; height:20px }
.auf__runter:hover{ color:var(--creme) }
@keyframes winken{
  0%,100%{ transform:translateY(0); opacity:.5 }
  50%    { transform:translateY(7px); opacity:1 }
}

/* ---------- Angaben im Aufmacher ---------- */
.eck{
  background:rgba(11,11,12,.6); border:1px solid var(--kante);
  backdrop-filter:blur(8px); padding:20px 22px 22px; will-change:transform;
  animation:auftauchen 1.5s cubic-bezier(.16,.84,.34,1) both; animation-delay:.24s;
}
.eck__zeile{ display:flex; gap:12px; align-items:flex-start; padding:8px 0 }
.eck__zeile + .eck__zeile{ border-top:1px solid var(--kante) }
.eck__mal{ flex:0 0 18px; color:var(--akzent); padding-top:3px }
.eck__mal svg{ width:15px; height:15px; display:block }
.eck__wert{ font-size:.9rem; line-height:1.45 }
.eck__wert small{ display:block; font-family:var(--sans); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--creme-still); margin-bottom:2px }

.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  width:100%; margin-top:18px; padding:14px 20px;
  background:var(--akzent); color:#fff; text-decoration:none;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--akzent); transition:background .18s, color .18s, box-shadow .3s;
}
.knopf svg{ width:15px; height:15px; flex:0 0 auto }
.knopf:hover{ background:transparent; color:var(--akzent); box-shadow:0 0 34px rgba(200,16,46,.28) }
.knopf--still{
  background:transparent; color:var(--creme); border-color:var(--kante);
  cursor:default; pointer-events:none;
}
.knopf--rand{ background:transparent; color:var(--creme); border-color:rgba(242,237,228,.45) }
.knopf--rand:hover{ background:var(--creme); color:var(--nacht); box-shadow:none }
.preiszeile{ margin:10px 0 0; text-align:center; font-family:var(--sans);
  font-size:.72rem; letter-spacing:.06em; color:var(--creme-still) }
.lagezeile{
  margin:16px 0 0; padding:11px 14px; border-left:2px solid var(--akzent);
  background:rgba(200,16,46,.07); font-size:.88rem; line-height:1.5;
}

/* ---------- Auftauchen beim Blaettern ---------- */
.zeig{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .9s cubic-bezier(.16,.84,.34,1), transform .9s cubic-bezier(.16,.84,.34,1);
}
.zeig.da{ opacity:1; transform:none }

/* ---------- Fliesstext und Beiwerk ---------- */
.teil{ position:relative; z-index:2; background:var(--nacht);
  padding:clamp(44px,7vw,92px) var(--rand); border-top:1px solid var(--kante) }
.teil--eng{ padding-top:clamp(34px,5vw,64px) }
.rubrik{ display:flex; align-items:center; gap:16px; margin:0 0 22px }
.rubrik span{ font-family:var(--sans); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--creme-still) }
.rubrik i{ flex:1 1 auto; height:1px; background:var(--kante) }

.satz{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,66px) }
.satz__kopf{ margin:0 0 20px; font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.12; font-weight:400 }
.satz p{ margin:0 0 15px; color:var(--creme-leise) }
.satz p:last-child{ margin-bottom:0 }
.satz strong{ color:var(--creme); font-weight:600 }
.spruch{
  margin:0; padding-left:clamp(20px,3vw,38px); border-left:1px solid var(--kante);
  font-style:italic; font-size:clamp(1.1rem,2vw,1.45rem); line-height:1.45; color:var(--creme);
}
.spruch footer{ margin-top:16px; font-style:normal; font-family:var(--sans);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--creme-still) }

/* ---------- Bild quer ueber die Seite ---------- */
/* Festes Verhaeltnis 3,2:1 — darauf sind die Bilder in /bilder/quer/
   zugeschnitten (2560 x 800 Pixel), die Seite beschneidet sie nicht noch
   einmal. width:100% ist noetig, weil der Browser sonst bei greifender
   Hoehenbegrenzung die Breite mitkuerzt — dann stuende rechts ein
   schwarzer Balken. Auf dem Telefon waere 3,2:1 ein Briefschlitz, dort
   gilt 16:9. */
.quer{
  position:relative; z-index:1; overflow:hidden;
  width:100%; aspect-ratio:3.2 / 1; max-height:800px;
  border-top:1px solid var(--kante);
  display:flex; align-items:center; justify-content:center;
}
@media (max-width:700px){
  .quer{ aspect-ratio:16 / 9; max-height:none }
}
@media (max-width:700px){
  .quer{ aspect-ratio:16 / 9; max-height:none }
}
/* Kein Ueberstand: die Bilder sind auf das Band zugeschnitten, also darf
   nichts darueber hinausragen — sonst waere der Zuschnitt umsonst. */
.quer__bild{ position:absolute; inset:0 }
.quer__bild img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.1) brightness(.6);
}
/* Uebergang wie ein Morph: das neue Bild kommt aus der Unschaerfe und
   zieht sich scharf, das alte verliert sich weich und sinkt dabei leicht
   zurueck. Beide sind kurz gleichzeitig da — daher wirkt es, als ginge
   das eine ins andere ueber, statt dass etwas endet und beginnt. */
.quer__blatt{
  position:absolute; inset:0; opacity:0;
  filter:blur(20px) saturate(.45);
  transform:scale(1.05);
  transition:opacity 1.6s ease,
             filter 1.7s ease,
             transform 1.9s cubic-bezier(.22,.68,.32,1);
}
.quer__blatt.ist-da{ opacity:1; filter:blur(0) saturate(1); transform:scale(1) }
.quer__blatt.geht{ opacity:0; filter:blur(26px) saturate(.35); transform:scale(.965) }

/* Die Zufahrt beginnt bei voller Groesse — das Bild ist auf das Band
   zugeschnitten, im ersten Moment soll nichts fehlen. Erst danach faehrt
   es hinein. Der Ruhewert ist das Ende der Fahrt, damit beim Ausblenden
   nichts zurueckspringt.
   Dazu ein leichtes Flimmern in der Helligkeit, wie es alter Film hat:
   unregelmaessig, nie mehr als ein paar Prozent. */
.quer__blatt img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.06) brightness(.72);
  transform:scale(1.4);
}
.quer__blatt.ist-da img{
  animation:quer-zufahrt 26s linear forwards,
            film-flimmern 2.9s linear infinite;
}
@keyframes quer-zufahrt{
  from{ transform:scale(1) }
  to  { transform:scale(1.4) }
}
@keyframes film-flimmern{
  0%   { filter:grayscale(.35) contrast(1.06) brightness(.72) }
  8%   { filter:grayscale(.35) contrast(1.07) brightness(.680) }
  17%  { filter:grayscale(.35) contrast(1.06) brightness(.752) }
  23%  { filter:grayscale(.35) contrast(1.08) brightness(.697) }
  38%  { filter:grayscale(.35) contrast(1.06) brightness(.741) }
  46%  { filter:grayscale(.35) contrast(1.07) brightness(.686) }
  57%  { filter:grayscale(.35) contrast(1.06) brightness(.747) }
  63%  { filter:grayscale(.35) contrast(1.08) brightness(.702) }
  79%  { filter:grayscale(.35) contrast(1.06) brightness(.737) }
  88%  { filter:grayscale(.35) contrast(1.07) brightness(.691) }
  100% { filter:grayscale(.35) contrast(1.06) brightness(.72) }
}

/* Eine zweite Lage ueber dem Bild, die selten kurz aufleuchtet — wie ein
   Blitz im Publikum. Weiches Licht: Schwarz bleibt schwarz, nur die
   Mitten und Lichter ziehen an, so wie eine Aufhellung in Photoshop. */
.quer__blitz{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#fff; mix-blend-mode:soft-light; opacity:0;
  transition:none;   /* die Schlaege sind harte Wechsel, kein Auf- und Abregeln */
}

/* Vignette statt Verlauf: in der Mitte bleibt das Bild offen, nach aussen
   zieht es zuegig zu. Der schmale lineare Anteil haelt nur die obere und
   untere Kante dunkel, damit die Kanten des Bandes nicht hart abbrechen. */
.quer__schleier{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(118% 135% at 50% 50%,
      rgba(11,11,12,0) 32%,
      rgba(11,11,12,.42) 62%,
      rgba(11,11,12,.80) 84%,
      rgba(11,11,12,.95) 100%),
    linear-gradient(180deg,
      rgba(11,11,12,.72) 0%, rgba(11,11,12,0) 22%,
      rgba(11,11,12,0) 78%, rgba(11,11,12,.75) 100%);
}

.quer__worte{
  position:relative; z-index:2; width:100%;
  display:grid; place-items:center; padding:0 var(--rand);
}
.quer__wort{
  grid-area:1 / 1; margin:0; text-align:center;
  font-size:clamp(1.6rem, 4.4vw, 3.4rem); line-height:1.14;
  text-shadow:0 10px 46px rgba(0,0,0,.7);
  letter-spacing:.02em;
  opacity:0; transition:opacity 1.2s ease;
  pointer-events:none;
}
.quer__wort.ist-da, .quer__wort.geht{ opacity:1 }
.quer__wort span{ display:block }

/* Jeder Buchstabe blendet einzeln auf und am Ende einzeln wieder weg —
   nur Deckkraft, keine Unschaerfe, keine Bewegung von unten.
   Waehrend der Spruch steht, driften die Buchstaben auseinander: --m ist
   der Platz in der Zeile von -1 (ganz links) ueber 0 (Mitte) bis +1 (ganz
   rechts). Aussen ist der Weg am laengsten, in der Mitte bleibt alles
   fast stehen — wie ein Sternenhimmel, durch den man faehrt. Die Drift
   laeuft durch und faehrt beim Abblenden weiter, nie zurueck. */
.quer__wort i{
  display:inline-block; font-style:normal; white-space:pre;
  opacity:0;
  transform:translate3d(0,0,0);
  transition:opacity 1.6s ease calc(var(--i, 0) * 150ms),
             transform 30s linear calc(var(--i, 0) * 150ms);
}
.quer__wort.ist-da i{
  opacity:1;
  transform:translate3d(calc(var(--m, 0) * 180px), 0, 0);
}
.quer__wort.geht i{
  opacity:0;
  transform:translate3d(calc(var(--m, 0) * 260px), 0, 0);
  transition:opacity 1.1s ease calc(var(--i, 0) * 95ms),
             transform 4s ease-in 0s;
}

/* Drei kurze Worte stehen nebeneinander, nicht untereinander. */
.quer__wort--reihe span{
  display:inline-block; margin:0 .32em;
}

/* ---------- Spielstätte ---------- */
.ort{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(26px,4vw,54px); align-items:start }
.ort__name{ margin:0 0 6px; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.1;
  letter-spacing:.06em; text-transform:uppercase; font-weight:400 }
.ort__adresse{ margin:0 0 22px; color:var(--creme-leise); font-size:.97rem }
.ort__bild{ margin:0; position:relative; overflow:hidden }
.ort__bild img{ width:100%; aspect-ratio:16/10; object-fit:cover;
  filter:grayscale(.5) contrast(1.06) brightness(.8);
  transition:filter .6s ease, transform .9s cubic-bezier(.16,.84,.34,1) }
.ort__bild:hover img{ filter:grayscale(.1) contrast(1.04) brightness(.95); transform:scale(1.05) }

/* ---------- Bildergalerie ---------- */
.mosaik{
  display:grid; grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:clamp(110px, 13vw, 190px); gap:8px;
}
.mosaik figure{ margin:0; overflow:hidden; grid-row:span var(--h, 1) }
.mosaik img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.55) contrast(1.06) brightness(.72);
  transition:filter .5s ease, transform .9s cubic-bezier(.16,.84,.34,1);
}
.mosaik figure:hover img{ filter:grayscale(0) contrast(1.02) brightness(.98); transform:scale(1.07) }
.nachweis{ margin:16px 0 0; font-family:var(--sans); font-size:.66rem;
  letter-spacing:.1em; color:var(--creme-still) }

/* ---------- Weitere Termine ---------- */
.weiter{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:1px; background:var(--kante) }
.weiter li{ background:var(--nacht) }
.weiter a{ display:block; padding:22px 24px; text-decoration:none; transition:background .25s, padding-left .25s }
.weiter a:hover{ background:var(--nacht-3); padding-left:30px }
.weiter b{ display:block; font-size:1.25rem; font-weight:400; letter-spacing:.04em }
.weiter span{ display:block; margin-top:5px; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.1em; color:var(--creme-still) }

/* ---------- Fuss ---------- */
.fuss{ position:relative; z-index:2; background:var(--nacht);
  border-top:1px solid var(--kante); padding:clamp(30px,5vw,54px) var(--rand);
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap }
.fuss__marke{ text-decoration:none; display:block }
.fuss__marke img{ height:26px; width:auto; opacity:.9 }
.fuss__marke span{ display:block; font-family:var(--sans); font-size:.54rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--creme-still); margin-top:6px }
.fuss__spruch{ font-family:var(--sans); font-size:.7rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--creme-still) }
.fuss .knopf{ width:auto; margin:0 }

/* ---------- Schmale Schirme ---------- */
@media (max-width:900px){
  .auf__zeichen{ display:none }
  .auf__satz{ grid-template-columns:1fr; align-items:start }
  .satz, .ort{ grid-template-columns:1fr }
  .mosaik{ grid-template-columns:repeat(2, 1fr) }
  .spruch{ padding-left:0; border-left:0; border-top:1px solid var(--kante); padding-top:20px }
  .auf__runter{ display:none }
}
@media (max-width:560px){
  .auf{ min-height:auto; padding-top:46vh }
  .mosaik{ grid-auto-rows:120px }
  .korn{ opacity:.04 }
}

/* ---------- Wer weniger Bewegung eingestellt hat ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .korn{ animation:none }
  .auf__blatt{ transition:none; filter:none; transform:none }
  .auf__blatt:first-child{ opacity:1 }
  .auf__blatt img, .bokeh span, .auf__runter,
  .auf__stadt, .auf__jahr, .auf__venue, .eck{ animation:none !important }
  .zeig{ opacity:1; transform:none; transition:none }
  .quer__bild{ transform:none !important }
  .quer__blatt img{ animation:none; transform:none }
  .quer__wort i{ opacity:1; filter:none; transition:none }
  .quer__blitz{ display:none }
  .auf__film, .auf__ton{ display:none }
}


/* ====== Fusszeile — gleich auf allen Seiten (Konvention) ====== */
.fuss{ padding:clamp(34px,4vw,54px) var(--rand);
  border-top:1px solid var(--kante) }
.netze{ display:flex; align-items:center; justify-content:center; gap:26px; margin:0 0 28px }
.netze::before,.netze::after{ content:""; flex:1; height:1px; background:var(--kante) }
.netze a{ display:block; line-height:0; border:0; color:var(--creme-still);
  transition:color .25s ease }
.netze a:hover{ color:var(--creme) }
.netze svg{ width:24px; height:24px; fill:currentColor; display:block }
.fuss__recht{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center }
.fuss__recht a{ border:0; font-family:var(--sans); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--creme-still) }
.fuss__recht a:hover{ color:var(--creme-leise) }
.fuss__copy{ margin:16px 0 0; text-align:center; font-family:var(--sans);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--creme-still) }
.fuss__marke,.fuss__spruch,.fuss .knopf{ display:none }