/* ==========================================================================
   EL AITSCH · Effzeh
   Landingpage fuer die Lieder, die fuer den 1. FC Koeln entstanden sind.

   Erbt Struktur, Typografie und Fusszeile aus ../assets/elaitsch.css.
   Hier werden die sieben Farbvariablen getauscht plus alles, was
   ausschliesslich zu dieser Seite gehoert.

   Farbwerte GEMESSEN, nicht geschaetzt:
     #E82028  gemessen aus dem Cover "Wenn Koelsch kein Bier ist" (haeufigstes
              klares Rot). Das Lied steht seit 31.08.2026 nicht mehr auf der
              Seite, die Farbe bleibt.
     #C82040  aus dem Schal auf dem Stadionfoto
     #587800  aus dem Rasen auf dem Cover "Woran hat et jelegen?"
     #101010  dunkelste Flaeche derselben Vorlage

   Gestaltung nach dem Apple-Design-Skill:
   Rueckmeldung auf Druck statt auf Loslassen, Federn statt fester Laufzeiten,
   durchscheinende Materialien, groessenabhaengige Laufweite, weiche Grenzen.
   ========================================================================== */

:root{
  /* --- die sieben geerbten Variablen, neu belegt --- */
  --bg:#130A0B;              /* fast schwarz, mit rotem Unterton */
  --bg-2:#1E1012;            /* angehobene Flaeche */
  --text:#F7F2EF;            /* das Weiss aus Trikot und Schal */
  --muted:#C3A7A4;           /* warmes Grau, aus Haut und Wolle gemessen */
  --gold:#FF4A4A;            /* Verweise: helles Rot, 5,9:1 auf dem Grund */
  --gold-hell:#FF7A72;
  --linie:rgba(255,74,74,.20);

  /* --- seiteneigene Toene --- */
  --fc-rot:#E82028;          /* das Rot des Vereins, aus dem Cover gemessen */
  --fc-tief:#D81824;         /* Flaechen, die weisse Schrift tragen: 5,2:1 */
  --schal:#C82040;
  --rasen:#587800;
  --tiefe:#0C0607;           /* tiefster Grund, unter allem */

  --glas:rgba(30,16,18,.62);
  --glas-kante:rgba(255,206,200,.20);
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

body{
  background:var(--tiefe);
  overflow-x:hidden;
}

/* Die Hauptseite setzt oben Platz fuer die Navigationspille frei.
   Diese Seite hat keine, also weg damit. */
main{padding-top:0}

section{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--linie)}
section.hell{background:var(--bg-2)}
section.ohne-linie{border-top:0}

/* Laufweite ist groessenabhaengig, nie ein Wert fuer alles.
   Grosse Schrift laeuft enger, kleine Schrift luftiger. */
h2{letter-spacing:-.018em;line-height:1.14}
h3{letter-spacing:-.005em}

::selection{background:var(--fc-rot);color:#fff}

:where(a,button,summary):focus-visible{
  outline:3px solid var(--gold-hell);
  outline-offset:3px;
  border-radius:6px;
}

/* --------------------------------------------------------------------------
   Schwebende Bedienelemente
   Durchscheinende Schicht ueber dem Inhalt, nicht ein undurchsichtiger
   Streifen, der Platz wegnimmt. Helle Oberkante = Licht faengt sich im
   Material.
   -------------------------------------------------------------------------- */

.schweber{
  position:fixed;top:1rem;z-index:80;
  display:flex;align-items:center;
}
.schweber.links{left:1rem}
.schweber.rechts{right:1rem}

.heim{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem .95rem .5rem .7rem;
  border-radius:999px;
  text-decoration:none;color:var(--text);
  font-family:var(--serif);font-weight:700;font-size:.78rem;letter-spacing:.045em;
  background:var(--glas);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  border-top-color:var(--glas-kante);
  box-shadow:0 6px 20px rgba(12,6,7,.5);
  touch-action:manipulation;
}
.heim img{width:1.15rem;height:auto;display:block}
.heim .pfeil{
  font-family:var(--sans);font-weight:400;font-size:.9rem;
  color:var(--muted);margin-right:-.15rem;
}
.heim:hover{color:var(--gold-hell)}

/* Rut un Wiess als kleines Zeichen, kein Vereinswappen. */
.farbzeichen{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border-radius:999px;
  background:var(--glas);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  border-top-color:var(--glas-kante);
  box-shadow:0 6px 20px rgba(12,6,7,.5);
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);
}
.farbzeichen i{
  width:.62rem;height:.62rem;border-radius:50%;display:block;flex:none;
  background:linear-gradient(135deg,var(--fc-rot) 0 50%,#fff 50% 100%);
}

/* Scroll-Kante statt harter Trennlinie: die Unschaerfe verlaeuft nach unten
   ins Nichts, sichtbar nur dort, wo schwebende Bedienung Inhalt ueberlappt. */
.kante{
  position:fixed;inset:0 0 auto 0;height:5.5rem;z-index:70;
  pointer-events:none;opacity:0;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  mask-image:linear-gradient(to bottom,#000 42%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,#000 42%,transparent);
  background:linear-gradient(to bottom,rgba(12,6,7,.6),transparent);
  transition:opacity .28s ease;
}
.kante.sichtbar{opacity:1}

/* --------------------------------------------------------------------------
   Buehne
   Ein Bild, das den ganzen Schirm fuellt, und darauf so wenig wie moeglich.
   -------------------------------------------------------------------------- */

/* Zwei Spalten statt Schrift auf dem Gesicht: links der Satz, rechts das Bild
   in voller Hoehe. Beides bekommt seinen eigenen Platz, nichts ueberlagert
   etwas. Das Bild blutet nach rechts aus dem Schirm. */
.buehne{
  position:relative;
  min-height:min(100svh,52rem);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;
  /* elaitsch.css kennt .buehne schon und setzt dort 64px Abstand nach oben.
     Hier soll das Bild am oberen Rand kleben, also zuruecksetzen. */
  margin:0;padding:0;border:0;overflow:hidden;
  background:var(--tiefe);
}
.buehne .satz{
  padding:clamp(5.5rem,13vh,7.5rem) clamp(1.5rem,3.5vw,3rem)
          clamp(3rem,8vh,5rem) clamp(1.5rem,7vw,6rem);
  position:relative;z-index:1;
}
.buehne .foto{position:relative;align-self:stretch;overflow:hidden}
.buehne .grund{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:52% 34%;
  /* Grosse Flaechen bleiben ruhig: kein Parallax, nur ein Standbild. */
}
/* Weiche Kante statt harter Naht: das Bild laeuft nach links in den Grund
   aus, oben nimmt ein Hauch Schatten dem Himmel Licht, damit die
   schwebende Bedienung lesbar bleibt. */
.buehne .schleier{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,var(--tiefe) 0,rgba(12,6,7,.92) 6%,rgba(12,6,7,.5) 18%,rgba(12,6,7,.12) 34%,rgba(12,6,7,0) 52%),
    linear-gradient(to bottom,rgba(12,6,7,.5) 0,rgba(12,6,7,0) 22%);
}

.buehne .augen{color:#fff}
.buehne .augen::before{background:var(--fc-rot);width:34px;height:3px}

.titel{
  font-size:clamp(2.6rem,9vw,6.2rem);
  line-height:.98;
  letter-spacing:-.034em;      /* grosse Schrift laeuft enger */
  margin:0 0 1.1rem;
  max-width:14ch;
  text-shadow:0 2px 30px rgba(12,6,7,.55);
}
/* Der Vereinsname bleibt zusammen. Ein Umbruch mitten in "Rut un Wiess"
   waere genau der Umbruch, den man nicht machen darf. */
.titel em{
  font-style:normal;color:var(--fc-rot);
  display:inline-block;text-wrap:nowrap;
  text-shadow:0 2px 24px rgba(12,6,7,.8);
}

.buehne .lead{
  font-size:clamp(1.06rem,2.2vw,1.34rem);
  line-height:1.55;
  max-width:34ch;color:var(--text);
  margin:0 0 .5rem;
}
.buehne .klein{
  font-size:.95rem;color:var(--muted);max-width:38ch;margin:0;
}

/* Hinweis nach unten. Steht in der Textspalte, nicht auf der Bildkante.
   Winkt langsam, aber nicht im Sekundentakt. */
.runter{
  position:absolute;bottom:2rem;z-index:2;
  left:clamp(1.5rem,7vw,6rem);
  display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  margin:0;
}
.runter i{
  width:1px;height:2.1rem;display:block;
  background:linear-gradient(to bottom,var(--fc-rot),transparent);
  animation:tropfen 2.6s cubic-bezier(.4,0,.2,1) infinite;
  transform-origin:top;
}
@keyframes tropfen{
  0%,100%{transform:scaleY(.25);opacity:.35}
  45%    {transform:scaleY(1);  opacity:1}
}

/* --------------------------------------------------------------------------
   Zahlen
   Der Weg als Kennzahl. Drei Kacheln, gleich schwer, klar zugeordnet.
   -------------------------------------------------------------------------- */

.strecke{
  list-style:none;padding:0;margin:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.strecke li{
  padding:1.5rem 1.4rem;
  border-radius:1.1rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-top-color:rgba(255,255,255,.12);
}
.strecke b{
  display:block;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(2rem,5vw,2.9rem);line-height:1;
  letter-spacing:-.03em;                 /* gross laeuft eng */
  color:var(--text);margin-bottom:.45rem;
}
.strecke b small{
  font-size:.42em;letter-spacing:.02em;color:var(--muted);
  font-weight:700;margin-left:.28em;
}
.strecke span{
  display:block;font-size:.88rem;line-height:1.5;color:var(--muted);
  letter-spacing:.005em;                 /* klein laeuft luftiger */
}

/* --------------------------------------------------------------------------
   Erzaehlung
   -------------------------------------------------------------------------- */

.erzaehlung p{font-size:1.05rem;max-width:60ch}
.erzaehlung p.gross{
  font-size:clamp(1.2rem,2.5vw,1.6rem);
  line-height:1.42;letter-spacing:-.012em;
  color:var(--text);max-width:36ch;
  /* Der Umbruch verteilt sich gleichmaessig, statt eine kurze Zeile
     alleine stehen zu lassen. */
  text-wrap:balance;
}

/* Ein Satz, der fuer sich steht. */
.zeile{
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  padding:clamp(2.6rem,6vw,4rem) 0;
  background:
    radial-gradient(70% 130% at 50% 0%,rgba(232,32,40,.13),transparent 70%);
}
.zeile q{
  display:block;quotes:none;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.5rem,4.4vw,2.9rem);
  line-height:1.16;letter-spacing:-.026em;
  max-width:19ch;margin:0 auto;text-align:center;
  text-wrap:balance;
}
.zeile .quelle{
  display:block;text-align:center;margin:1.5rem 0 0;
  font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* Zwei Spalten: Text und Bild. Das Bild ist nicht Dekoration,
   es ist der Beleg fuer den Satz daneben. */
.paar{
  display:grid;gap:clamp(2rem,5vw,3.4rem);
  grid-template-columns:1.15fr .85fr;align-items:center;
}
.paar .bild{
  margin:0;position:relative;
  border-radius:1.3rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-top-color:rgba(255,255,255,.16);
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
.paar .bild img{display:block;width:100%;height:auto}
.paar .bild figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:2.4rem 1.1rem .9rem;
  font-size:.8rem;line-height:1.45;color:#fff;
  background:linear-gradient(to top,rgba(12,6,7,.85),transparent);
}

/* --------------------------------------------------------------------------
   Die Lieder
   Eine Karte je Lied. Das Cover traegt die Karte, nicht ein Rahmen.
   -------------------------------------------------------------------------- */

.lieder{
  list-style:none;padding:0;margin:0;
  display:grid;gap:clamp(1.4rem,3vw,2rem);
  /* Die Spuren teilen sich den Platz gleichmaessig auf (1fr), die Karte selbst
     hat eine Obergrenze und stellt sich mittig hinein. So blaehen sich weder
     zwei Karten auf die volle Breite auf, noch verhindert eine feste Spurbreite,
     dass bei fuenf Liedern drei nebeneinander passen. */
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
}
.lieder .lied{max-width:23rem;width:100%;justify-self:center}
.lied{
  display:flex;flex-direction:column;
  border-radius:1.3rem;overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.15);
  box-shadow:0 16px 44px rgba(0,0,0,.38);
}
.lied .huelle{
  position:relative;aspect-ratio:1;overflow:hidden;background:var(--bg-2);
}
.lied .huelle img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.22,.9,.28,1);
}
.lied:hover .huelle img{transform:scale(1.035)}
/* Nummer im Cover: ordnet die drei Lieder, ohne einen Balken zu brauchen. */
.lied .nr{
  position:absolute;top:.8rem;left:.8rem;
  width:1.9rem;height:1.9rem;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:.72rem;font-weight:700;color:#fff;
  background:rgba(12,6,7,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);
}
.lied .inhalt{padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.lied h3{
  font-size:1.14rem;line-height:1.25;letter-spacing:-.012em;
  margin:0 0 .1rem;color:var(--text);
}
.lied .unter{
  font-size:.9rem;color:var(--muted);margin:0 0 .7rem;line-height:1.4;
}
.lied p{font-size:.93rem;color:var(--muted);margin:0 0 1.1rem;max-width:none}
.lied .marken{
  display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;
  list-style:none;padding:0;
}
.lied .marken li{
  font-family:var(--mono);font-size:.63rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
  padding:.28rem .55rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.11);
}
.lied .hoeren{margin-top:auto}

/* --------------------------------------------------------------------------
   Tasten
   Rueckmeldung kommt beim Druecken (song.js), nicht erst beim Loslassen.
   -------------------------------------------------------------------------- */

.hoeren{display:flex;flex-wrap:wrap;gap:.55rem}

.taste{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.65rem 1.05rem;border-radius:999px;
  font-family:var(--serif);font-weight:700;font-size:.84rem;
  text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-top-color:rgba(255,255,255,.2);
  touch-action:manipulation;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
  will-change:transform;
}
.taste svg{width:1.1rem;height:1.1rem;flex:none}
.taste:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.24);color:#fff}
.taste.stark{
  background:var(--fc-tief);color:#fff;border-color:transparent;
  box-shadow:0 8px 22px rgba(216,24,36,.3);
}
.taste.stark:hover{background:var(--fc-rot);color:#fff}

.hinweis{font-size:.83rem;color:var(--muted);max-width:52ch;margin:1rem 0 0}

/* --------------------------------------------------------------------------
   Hörprobe
   Fuer die Lieder, die es noch nicht bei den Streamingdiensten gibt.
   Die Tondatei liegt auf unserem eigenen Server und wird erst geladen, wenn
   jemand wirklich draufdrueckt .. deshalb steht die Dauer erst danach da.
   -------------------------------------------------------------------------- */

/* An den unteren Rand der Karte, damit die Knoepfe ueber alle Karten hinweg
   auf einer Linie sitzen .. auch wenn die Texte verschieden lang sind. */
.hoerprobe{margin:auto 0 1rem}
.probe-knopf{
  display:inline-flex;align-items:center;gap:.55rem;width:100%;
  padding:.62rem .95rem;border-radius:999px;
  font-family:var(--serif);font-weight:700;font-size:.84rem;
  color:#fff;background:var(--fc-tief);
  border:1px solid transparent;cursor:pointer;
  box-shadow:0 8px 22px rgba(216,24,36,.28);
  touch-action:manipulation;will-change:transform;
  transition:background .18s ease;
}
.probe-knopf:hover{background:var(--fc-rot)}
.probe-knopf svg{width:.95rem;height:.95rem;flex:none}
.probe-knopf .ikon-pause{display:none}
.hoerprobe.laeuft .probe-knopf .ikon-play{display:none}
.hoerprobe.laeuft .probe-knopf .ikon-pause{display:block}
.probe-text{flex:1;text-align:left}
.probe-zeit{
  font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.06em;opacity:.85;font-variant-numeric:tabular-nums;
}

/* Der Balken waechst von links. scaleX statt width, damit der Browser nur
   zusammensetzt und nicht bei jedem Bild neu rechnet. */
.probe-balken{
  height:3px;margin:.5rem .3rem 0;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.12);
}
.probe-balken i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left center;
  background:var(--fc-rot);
}
.hoerprobe.fehler .probe-knopf{background:rgba(255,255,255,.09);color:var(--muted)}

/* Wo es die Lieder gibt. Direkte Album-Adressen existieren fuer die drei
   neuen noch nicht, deshalb der Sammelverweis auf alle Plattformen. */
.ueberall{margin:0}
.ueberall a{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:var(--serif);font-weight:700;font-size:.82rem;
  color:var(--gold);text-decoration:none;
}
.ueberall a:hover{color:var(--gold-hell)}
.ueberall .pfeil{transition:transform .2s cubic-bezier(.22,.9,.28,1)}
.ueberall a:hover .pfeil{transform:translateX(.22rem)}

/* Marke fuer die frisch erschienenen Lieder .. ersetzt dort die Nummer. */
.lied .neu{
  position:absolute;top:.8rem;left:.8rem;
  padding:.28rem .6rem;border-radius:999px;
  font-family:var(--mono);font-size:.62rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:#fff;
  background:var(--fc-tief);
  box-shadow:0 4px 14px rgba(216,24,36,.4);
}

/* --------------------------------------------------------------------------
   Die Trikot-Sammlung
   Ein Bild je Shirt, immer derselbe Standort, dieselbe Haltung .. daraus wird
   ein Daumenkino. Der Clip laeuft nur im Blick und nur, wenn Bewegung
   erwuenscht ist. Ton hat er keinen.
   -------------------------------------------------------------------------- */

.sammlung .paar{align-items:center}
.trikots{
  position:relative;margin:0;
  border-radius:1.4rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-top-color:rgba(255,255,255,.18);
  box-shadow:0 24px 64px rgba(0,0,0,.55);
  background:var(--bg-2);
  max-width:23rem;
  opacity:0;transform:translateY(.8rem) scale(.985);
  transition:opacity .7s cubic-bezier(.22,.9,.28,1),
             transform .7s cubic-bezier(.22,.9,.28,1);
}
.trikots.da{opacity:1;transform:none}
.trikots video,.trikots img{display:block;width:100%;height:auto}
/* Ein Hauch Innenschatten legt das Bild in den Rahmen, statt es aufzukleben. */
.trikots::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),
             inset 0 -60px 70px -60px rgba(12,6,7,.9);
  border-radius:inherit;
}
.trikots figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:2.4rem 1.1rem .9rem;
  font-size:.78rem;line-height:1.45;color:#fff;
  background:linear-gradient(to top,rgba(12,6,7,.88),transparent);
}

/* --------------------------------------------------------------------------
   Clips
   Kein eingebetteter Abspieler. Ein Link, der erst auf Klick nach draussen
   fuehrt .. genau das verspricht die Fusszeile.
   -------------------------------------------------------------------------- */

.clips{
  list-style:none;padding:0;margin:0;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
}
.clip{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.2rem 1.3rem;border-radius:1.1rem;
  text-decoration:none;color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-top-color:rgba(255,255,255,.15);
  touch-action:manipulation;
  transition:background .2s ease,border-color .2s ease;
  will-change:transform;
}
.clip:hover{background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.2);color:var(--text)}
.clip .knopf{
  width:2.5rem;height:2.5rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:var(--fc-tief);color:#fff;
  box-shadow:0 6px 18px rgba(216,24,36,.34);
}
.clip .knopf svg{width:.95rem;height:.95rem}
/* Die Karte traegt .taste wegen der Druckrueckmeldung. Deren fette
   Auszeichnungsschrift darf aber nicht auf den Fliesstext durchschlagen. */
.clip{font-family:var(--sans);font-weight:400;font-size:1rem}
.clip b{
  display:block;font-family:var(--serif);font-weight:700;
  font-size:1rem;line-height:1.3;
  letter-spacing:-.008em;margin-bottom:.25rem;color:var(--text);
}
.clip span{
  display:block;font-family:var(--sans);font-weight:400;
  font-size:.88rem;color:var(--muted);line-height:1.55;
}
.clip span.wann{
  display:block;margin-top:.6rem;
  font-family:var(--mono);font-size:.64rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}

/* --------------------------------------------------------------------------
   Finale
   -------------------------------------------------------------------------- */

.finale{
  text-align:center;
  background:
    radial-gradient(80% 120% at 50% 100%,rgba(232,32,40,.16),transparent 70%),
    var(--bg-2);
}
.finale .hoeren{justify-content:center}
.finale h2{max-width:18ch;margin-inline:auto}
.finale .hinweis{margin-inline:auto;text-align:center}

.mehr{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--serif);font-weight:700;font-size:.92rem;
  text-decoration:none;color:var(--gold);
}
.mehr:hover{color:var(--gold-hell)}
.mehr .pfeil{transition:transform .2s cubic-bezier(.22,.9,.28,1)}
.mehr:hover .pfeil{transform:translateX(.25rem)}

/* --------------------------------------------------------------------------
   Auftritt beim Scrollen
   -------------------------------------------------------------------------- */

.rein{opacity:0;transform:translateY(.9rem)}
.rein.da{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.9,.28,1),
             transform .6s cubic-bezier(.22,.9,.28,1);
}

/* --------------------------------------------------------------------------
   Schmale Schirme
   -------------------------------------------------------------------------- */

@media (max-width:860px){
  .paar{grid-template-columns:1fr}
  .paar .bild{max-width:22rem;margin-inline:auto}
  .titel{max-width:none}

  /* Untereinander statt nebeneinander: erst das Bild, dann der Satz.
     Auch hier liegt keine Schrift auf dem Gesicht. */
  .buehne{
    grid-template-columns:1fr;min-height:0;
    grid-template-areas:"foto" "satz";
  }
  .buehne .foto{grid-area:foto;aspect-ratio:1;align-self:auto}
  .buehne .satz{grid-area:satz;padding:2.2rem 1.5rem clamp(2.5rem,8vw,4rem)}
  .buehne .grund{object-position:52% 30%}
  .buehne .schleier{
    background:linear-gradient(to bottom,rgba(12,6,7,.5) 0,rgba(12,6,7,0) 26%,rgba(12,6,7,0) 74%,var(--tiefe) 100%);
  }
  .runter{display:none}
}
@media (max-width:520px){
  .schweber.rechts .farbzeichen span{display:none}
  .farbzeichen{padding:.5rem .6rem}
}

/* --------------------------------------------------------------------------
   Rueckicht auf die Einstellungen des Betrachters
   Weniger Bewegung heisst nicht weniger Rueckmeldung, sondern eine
   sanftere ohne Weg durch den Raum.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rein{opacity:1;transform:none}
  .rein.da{transition:none}
  .runter i{animation:none;transform:scaleY(1);opacity:.7}
  .lied .huelle img{transition:none}
  .lied:hover .huelle img{transform:none}
  .mehr .pfeil{transition:none}
  .ueberall .pfeil{transition:none}
  /* Das Daumenkino erscheint ohne Weg durch den Raum. */
  .trikots{opacity:1;transform:none;transition:none}
}

/* Durchscheinendes wird milchig statt unscharf, wenn das gewuenscht ist. */
@media (prefers-reduced-transparency:reduce){
  .heim,.farbzeichen{
    background:#241416;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .lied .nr{background:rgba(12,6,7,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
  .kante{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(to bottom,rgba(12,6,7,.92),transparent)}
}

/* Mehr Kontrast: feste Flaechen, klare Kanten. */
@media (prefers-contrast:more){
  :root{--muted:#E4D2CF;--linie:rgba(255,120,116,.6)}
  .strecke li,.lied,.clip,.taste{
    background:#201113;border-color:rgba(255,255,255,.42);
  }
  .taste.stark,.probe-knopf,.lied .neu{background:#C4101C}
  .probe-balken{background:rgba(255,255,255,.3)}
  .buehne .schleier{
    background:linear-gradient(to top,rgba(12,6,7,.97) 0,rgba(12,6,7,.88) 34%,rgba(12,6,7,.5) 70%,rgba(12,6,7,.25) 100%);
  }
}