/* ==========================================================================
   EL AITSCH · Songseiten
   Erbt Struktur, Typografie und Fußzeile aus ../assets/elaitsch.css.
   Hier werden nur die sieben Farbvariablen getauscht plus alles, was
   ausschliesslich zu einer Songseite gehoert.

   Farbwerte gemessen aus dem Cover von "Donna and Bob".
   Gestaltung nach dem Apple-Design-Skill: Reaktion auf Druck statt auf
   Loslassen, Federn statt fester Laufzeiten, durchscheinende Materialien,
   groessenabhaengige Laufweite.
   ========================================================================== */

:root{
  /* --- die sieben geerbten Variablen, neu belegt --- */
  --bg:#1A0B08;              /* Schatten unter den Palmen, noch etwas tiefer */
  --bg-2:#2A1310;            /* angehobene Flaeche */
  --text:#FFF1E2;            /* warmes Creme, kein reines Weiss */
  --muted:#D2A895;           /* Sand im Abendlicht */
  --gold:#FDC068;            /* die Sonne im Cover */
  --gold-hell:#FFD79A;
  --linie:rgba(253,192,104,.22);

  /* --- songeigene Toene --- */
  --sonne:#FAB83E;
  --flamme:#F88645;
  --glut:#CE5A1E;
  --rose:#C76253;
  --daemmer:#784F6D;         /* der violette Himmel ganz oben */
  --tiefe:#100805;           /* Palmensilhouette */

  --glas:rgba(42,19,16,.62);
  --glas-kante:rgba(255,214,166,.20);
}

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

body{
  background:var(--tiefe);
  /* Abstaende in rem, damit groessere Schrift die Seite nicht sprengt */
  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}
section.hell{background:var(--bg-2)}

/* Typografie: 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(--flamme);color:var(--tiefe)}

:where(a,button,summary):focus-visible{
  outline:3px solid var(--sonne);
  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. Die groessere Flaeche bekommt mehr Unschaerfe und mehr Schatten.
   -------------------------------------------------------------------------- */

.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(16,8,5,.45);
  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)}

/* Sprachumschalter: ein Segment-Regler mit federndem Zeiger.
   Der Zeiger wird von JS positioniert und ist jederzeit unterbrechbar. */
.sprache{
  position:relative;display:flex;padding:.28rem;
  border-radius:999px;
  background:var(--glas);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.10);
  border-top-color:var(--glas-kante);
  box-shadow:0 8px 26px rgba(16,8,5,.5);
}
.sprache .zeiger{
  position:absolute;top:.28rem;left:.28rem;
  height:calc(100% - .56rem);
  border-radius:999px;
  background:var(--gold);
  box-shadow:0 2px 10px rgba(253,192,104,.34);
  pointer-events:none;
}
.sprache button{
  position:relative;z-index:1;
  appearance:none;border:0;background:none;cursor:pointer;
  padding:.42rem .8rem;
  font-family:var(--serif);font-weight:700;font-size:.74rem;letter-spacing:.1em;
  color:var(--muted);
  transition:color .18s ease;
  touch-action:manipulation;
}
.sprache button[aria-pressed="true"]{color:var(--tiefe)}

/* 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(16,8,5,.55),transparent);
  transition:opacity .28s ease;
}
.kante.sichtbar{opacity:1}

/* --------------------------------------------------------------------------
   Buehne
   -------------------------------------------------------------------------- */

.buehne{
  position:relative;
  padding:clamp(6rem,14vw,8.5rem) 0 clamp(3.5rem,8vw,5.5rem);
  border:0;overflow:hidden;
  background:var(--tiefe);
}
/* Das Standbild liegt schon weichgezeichnet auf dem Server (8 kB statt 291 kB)
   und wird hier noch einmal verwischt. Uebrig bleibt reine Abendfarbe, kein
   zweites Bild neben dem Cover. Dieselbe Idee wie beim Abspielbildschirm der
   Musikdienste: das Werk selbst faerbt den Hintergrund. */
.buehne .grund{
  position:absolute;inset:-5%;
  background:url(assets/hintergrund-weich.jpg) center/cover no-repeat;
  filter:blur(14px) saturate(1.18);
  opacity:.55;
  transform:scale(1.04);
}
.buehne .schleier{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 46% 10%,rgba(120,79,109,.34),transparent 64%),
    radial-gradient(85% 60% at 62% 52%,rgba(206,90,30,.26),transparent 70%),
    linear-gradient(to bottom,rgba(16,8,5,.72) 0%,rgba(16,8,5,.44) 30%,rgba(26,11,8,.86) 78%,var(--bg) 100%);
}
.buehne .wrap{position:relative;z-index:1}

.buehne-satz{
  display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,3.6rem);align-items:center;
}

/* Das lebende Cover. Der Clip liegt auf dem eigenen Server, laeuft stumm
   in Schleife und hat deshalb bewusst keinen Abspielknopf. */
.platte{
  position:relative;aspect-ratio:1;border-radius:1.5rem;overflow:hidden;
  background:var(--bg-2);
  box-shadow:
    0 2px 0 rgba(255,214,166,.16) inset,
    0 1.5rem 3.5rem rgba(16,8,5,.62),
    0 0 5rem rgba(206,90,30,.28);
  /* Startzustand: das Material kommt an, statt nur einzublenden */
  opacity:0;transform:scale(.965);filter:blur(10px);
  will-change:transform,opacity,filter;
}
.platte.da{opacity:1;transform:none;filter:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.9,.28,1),filter .6s ease}
.platte video,.platte img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.platte::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,214,166,.16) inset;
}

.buehne .augen{color:var(--sonne)}
.buehne .augen::before{background:var(--sonne)}

/* Gross gesetzte Schrift laeuft enger und steht dichter. */
.titel{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(2.6rem,8.4vw,5rem);
  line-height:1.02;letter-spacing:-.035em;
  margin:0 0 .35rem;
  background:linear-gradient(112deg,var(--text) 8%,var(--gold-hell) 46%,var(--flamme) 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.kuenstler{
  font-family:var(--mono);font-size:.8rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.4rem;
}
.buehne .lead{
  font-size:clamp(1.06rem,1.7vw,1.24rem);line-height:1.6;
  max-width:34ch;color:var(--text);
}

/* --------------------------------------------------------------------------
   Hoeren: das einzige Handlungsziel der Seite
   -------------------------------------------------------------------------- */

.hoeren{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 1rem}

.taste{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.85rem 1.35rem;border-radius:999px;
  font-family:var(--serif);font-weight:700;font-size:.92rem;
  text-decoration:none;
  background:rgba(255,241,226,.07);
  border:1px solid rgba(255,214,166,.22);
  color:var(--text);
  /* JS federt den Massstab. Kein transition auf transform, sonst kaempfen
     Feder und Uebergang gegeneinander. */
  will-change:transform;
  transition:background .16s ease,border-color .16s ease;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.taste svg{width:1.15rem;height:1.15rem;flex:none}
.taste:hover{background:rgba(255,241,226,.13);border-color:rgba(255,214,166,.4);color:var(--text)}
.taste.stark{
  background:var(--gold);border-color:transparent;color:var(--tiefe);
  box-shadow:0 .6rem 1.6rem rgba(253,192,104,.26);
}
.taste.stark:hover{background:var(--gold-hell);color:var(--tiefe)}

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

/* --------------------------------------------------------------------------
   Die Zeile
   -------------------------------------------------------------------------- */

.zeile{
  border-top:1px solid var(--linie);
  background:
    radial-gradient(80% 130% at 50% 0%,rgba(206,90,30,.20),transparent 70%),
    var(--bg);
  text-align:center;
}
.zeile q{
  display:block;quotes:"\201E" "\201C";
  font-family:var(--serif);font-weight:800;
  font-size:clamp(1.7rem,5.2vw,3.1rem);
  line-height:1.18;letter-spacing:-.028em;
  color:var(--text);
  max-width:16ch;margin:0 auto;text-wrap:balance;
}
.zeile .quelle{
  color:var(--muted);font-size:.92rem;
  max-width:44ch;margin:1.6rem auto 0;
}
.winker{
  display:block;width:2.6rem;height:2.6rem;margin:0 auto 1.6rem;
  color:var(--sonne);
}

/* --------------------------------------------------------------------------
   Text, Zahlen, Fakten
   -------------------------------------------------------------------------- */

.erzaehlung p{font-size:1.04rem;max-width:60ch}
.erzaehlung p.gross{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(1.15rem,2.2vw,1.42rem);line-height:1.42;letter-spacing:-.012em;
  color:var(--text);max-width:26ch;
}

.zahlen-reihe{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;margin:2.4rem 0 0;padding:0;list-style:none;
}
.zahlen-reihe li{
  padding:1.3rem 1.1rem;border-radius:1rem;
  background:rgba(255,241,226,.045);
  border:1px solid var(--linie);
}
.zahlen-reihe b{
  display:block;font-family:var(--serif);font-weight:800;
  font-size:clamp(1.5rem,3.6vw,2.1rem);line-height:1;letter-spacing:-.03em;
  color:var(--gold);margin-bottom:.45rem;
}
.zahlen-reihe span{font-size:.86rem;color:var(--muted);line-height:1.45}

.herkunft{list-style:none;padding:0;margin:0 0 2rem;max-width:60ch}
.herkunft li{
  display:grid;grid-template-columns:1.6rem 1fr;gap:.9rem;
  padding:1rem 0;border-bottom:1px solid var(--linie);
}
.herkunft li:first-child{border-top:1px solid var(--linie)}
.herkunft .mark{
  width:1.6rem;height:1.6rem;border-radius:999px;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;font-family:var(--mono);
}
.herkunft .mensch{background:rgba(253,192,104,.16);color:var(--gold)}
.herkunft .maschine{background:rgba(120,79,109,.34);color:#E4C4DA}
.herkunft b{display:block;color:var(--text);font-family:var(--serif);font-size:1rem;margin-bottom:.15rem}
.herkunft span{color:var(--muted);font-size:.92rem;line-height:1.55}

.fakten{width:100%;border-collapse:collapse;max-width:36rem;font-size:.95rem}
.fakten th,.fakten td{
  text-align:left;padding:.85rem 0;border-bottom:1px solid var(--linie);
  vertical-align:baseline;
}
.fakten th{
  font-family:var(--mono);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  width:11rem;
}
.fakten td{color:var(--text)}

/* --------------------------------------------------------------------------
   Abschluss
   -------------------------------------------------------------------------- */

.finale{
  text-align:center;border-top:1px solid var(--linie);
  background:
    radial-gradient(70% 110% at 50% 100%,rgba(250,184,62,.16),transparent 68%),
    var(--bg);
}
.finale .hoeren{justify-content:center}
.finale .hinweis{margin-inline:auto;text-align:center}
.finale h2{max-width:20ch;margin-inline:auto}

.mehr{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--serif);font-weight:700;font-size:.95rem;
  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
   Alles betritt die Seite auf demselben Weg und wuerde sie so verlassen.
   Kein Ueberschwingen: davor gab es keine Bewegung, die Schwung mitbringt.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Schmale Bildschirme
   -------------------------------------------------------------------------- */

@media (max-width:860px){
  .buehne-satz{grid-template-columns:1fr;gap:2.2rem}
  .platte{max-width:20rem;margin:0 auto}
  .buehne .lead{max-width:44ch}
}
@media (max-width:560px){
  .schweber{top:.7rem}
  .schweber.links{left:.7rem}
  .schweber.rechts{right:.7rem}
  .heim .nm{display:none}
  /* Gestapelt wären drei hohe Kacheln zu viel Scrollweg. Auf schmalen
     Bildschirmen stehen Zahl und Text deshalb nebeneinander. */
  .zahlen-reihe{grid-template-columns:1fr;gap:.6rem}
  .zahlen-reihe li{
    display:flex;align-items:baseline;gap:.9rem;
    padding:.85rem 1rem;
  }
  .zahlen-reihe b{margin:0;flex:none;min-width:6.6rem;font-size:1.5rem}
  .zahlen-reihe span{font-size:.84rem}
  .fakten th{width:8.5rem}
  .hoeren .taste{flex:1 1 100%;justify-content:center}
}

/* --------------------------------------------------------------------------
   Ruecksicht auf Einstellungen des Besuchers
   -------------------------------------------------------------------------- */

/* Weniger Bewegung heisst nicht keine Rueckmeldung, sondern eine sanftere.
   Der Clip haelt an, das Standbild bleibt, Federn springen sofort ans Ziel. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rein,.platte{opacity:1;transform:none;filter:none;transition:opacity .2s ease}
  .mehr .pfeil{transition:none}
  .kante{transition:none}
}

/* Weniger Transparenz: Materialien werden fest statt milchig. */
@media (prefers-reduced-transparency:reduce){
  .heim,.sprache{
    background:var(--bg-2);
    backdrop-filter:none;-webkit-backdrop-filter:none;
    border-color:var(--linie);
  }
  .kante{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Mehr Kontrast: nahezu deckende Flaechen mit klarer Umrandung. */
@media (prefers-contrast:more){
  :root{--muted:#F0D8C8;--linie:rgba(253,192,104,.5)}
  .heim,.sprache{background:var(--tiefe);border-color:var(--gold)}
  .taste{background:var(--tiefe);border-color:var(--gold)}
  .titel{background:none;-webkit-text-fill-color:var(--text);color:var(--text)}
  .buehne .grund{opacity:.12}
}

/* Druck: Bewegtbild und schwebende Bedienung ergeben auf Papier keinen Sinn. */
@media print{
  .schweber,.kante,.buehne .grund,.buehne .schleier{display:none}
  body{background:#fff;color:#000}
}

/* --------------------------------------------------------------------------
   Zweisprachigkeit
   Beide Fassungen stehen im Dokument, sichtbar ist immer nur eine.
   Umgeschaltet wird ueber data-sprache am html-Element.
   -------------------------------------------------------------------------- */
[data-sprache="de"] :is([lang="en"],[lang="es"]){display:none}
[data-sprache="en"] :is([lang="de"],[lang="es"]){display:none}
[data-sprache="es"] :is([lang="de"],[lang="en"]){display:none}