/*
Theme Name: Le Grand Festival
Theme URI: https://legrandfestival.com
Author: Bianca M. Cantelli – cantelli-webdesign.com
Description: Schlankes Theme fuer Le Grand Festival Hamburg. Drei Seiten (Coming Soon, Lyrics, Impressum) nach Canva-Vorlage, mobil optimiert, mit durchgehendem Audio-Player.
Version: 5.9
License: GNU General Public License v2 or later
Text Domain: legrandfestival
*/

/* ============================================================
   1. Design-Tokens
   ============================================================ */
:root {
  --bg:          #faf8f3;   /* cremeweiss */
  --ink:         #4c6474;   /* schiefergrau, Ueberschriften */
  --body:        #383d48;   /* Fliesstext */
  --gold:        #a87b3b;   /* Logo */
  --terra:       #b4713f;   /* Labels im Impressum */
  --muted:       #6b6b64;   /* Fusszeile */
  --rule:        #d9d4c9;   /* Trennlinien */

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --pad: clamp(1.25rem, 4vw, 4rem);
  --maxw: 1180px;
}

/* ============================================================
   2. Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-weight: 400; }

/* ============================================================
   3. Skyline-Hintergrund
   ============================================================ */
.lgf-skyline {
  position: fixed;
  left: 0;
  right: 0;
  /* Wie in der Vorlage: Die Fusszeile steht unter dem Bild,
     nicht darauf. */
  bottom: 5.25rem;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.lgf-skyline__half { display: none; }

.lgf-skyline__full {
  width: 100%;
  /* Die PNG bringt ihre Transparenz aus Canva bereits mit (max. 45 % Deckkraft),
     deshalb hier keine zusaetzliche Abschwaechung. */
  opacity: 1;
}
/* Fallback, solange keine Skyline-Grafik hochgeladen ist */
.lgf-skyline--placeholder {
  height: 38vh;
  background:
    linear-gradient(to top, rgba(210,204,192,.45), rgba(210,204,192,0));
}

/* ============================================================
   4. Grundgeruest
   ============================================================ */
/* One-Pager: jeder Bereich fuellt mindestens einen Bildschirm,
   die Fusszeile sitzt jeweils unten im Bereich. */
.lgf-section {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  scroll-margin-top: 0;
}

.lgf-page {
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 5.5rem) var(--pad) 5.5rem;
}

/* In den beiden Textbereichen sitzt der Inhalt in der Vorlage sehr
   weit oben (Titel bei 2,75 % der Seitenhoehe). */
#lyrics .lgf-page,
#impressum .lgf-page { padding-top: clamp(2rem, 5vh, 3.25rem); }

.lgf-foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  pointer-events: none;   /* nur die Links sollen klickbar sein */
}
/* Kein deckender Balken – der wuerde eine harte Kante quer durch die
   Skyline ziehen, die es in der Vorlage nicht gibt. Stattdessen ein
   Verlauf, der unten in der Hintergrundfarbe deckt und nach oben
   weich ausblendet. */
.lgf-foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  /* Deckend, wo die Fusszeile steht, nach oben weich auslaufend –
     so scrollt kein Text sichtbar dahinter durch. */
  background: linear-gradient(
    to top,
    var(--bg) 0%,
    var(--bg) 70%,
    rgba(250, 248, 243, 0) 100%
  );
  pointer-events: none;
}
.lgf-foot__inner {
  position: relative;   /* ueber dem Verlauf, sonst verdeckt er den Text */
  z-index: 1;
  pointer-events: auto;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem var(--pad) 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  font-size: .7rem;
  letter-spacing: .04em;
  color: var(--muted);
}
/* Wechselnde Bereichslinks und der feste Link zur Song-Seite
   stehen in einer Zeile mit gleichem Abstand. */
.lgf-foot__links {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
}
.lgf-foot__nav {
  display: flex;
  gap: 1.5rem;
  transition: opacity .16s ease;
}
.lgf-foot__nav a,
.lgf-foot__extra { transition: color .2s ease; }
.lgf-foot__nav a:hover,
.lgf-foot__extra:hover { color: var(--gold); }
.lgf-foot__copy { line-height: 1.5; }

/* ============================================================
   5. Seite 1 – Coming Soon
   ------------------------------------------------------------
   Alle Groessen und Abstaende sind aus dem Canva-PDF gemessen
   (Seite 2835 x 1417,5 pt) und auf die Grundeinheit --u
   ("Coming Soon" = 98,7 pt) umgerechnet:

     Coming Soon      98,7 pt   = 1.000 u
     Hamburg singt.   64,3 pt   = 0.651 u
     LE GRAND         38,1 pt   = 0.386 u
     FESTIVAL         60,9 pt   = 0.617 u
     HAMBURG          24,3 pt   = 0.246 u

   Abstaende zwischen den Schriftbildern (nicht Zeilenkaesten):
     Coming Soon -> Hamburg singt.   0.212 u
     Hamburg singt. -> LE GRAND      0.943 u
     LE GRAND -> FESTIVAL            0.076 u
     FESTIVAL -> HAMBURG             0.316 u
   ============================================================ */
.lgf-hero {
  --u: clamp(2.4rem, min(10.5vw, 9.2vh), 5.6rem);

  flex: 1 0 auto;
  min-height: calc(100svh - 13rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Der Textblock sitzt in der Vorlage 5,6 % der Seitenhoehe
     oberhalb der Mitte – deshalb unten mehr Luft. */
  padding-bottom: 11.2vh;
}
.lgf-hero__title {
  font-family: var(--serif);
  color: var(--ink);
  /* --title-scale kommt aus front-page.php und richtet sich nach der
     Laenge des Textes, damit lange Zeilen nicht die Seite sprengen. */
  font-size: calc(var(--u) * var(--title-scale, 1));
  line-height: 1.12;
  letter-spacing: .005em;
  max-width: 18ch;
  text-wrap: balance;
}
.lgf-hero__sub {
  font-family: var(--serif);
  color: var(--ink);
  font-size: calc(var(--u) * .651);
  line-height: 1;
  /* Werte im Browser nachgemessen (Playfair Display / Montserrat),
     nicht aus Schriftmetriken geschaetzt. */
  margin: calc(var(--u) * .234) 0 0;
}
/* Die drei Logo-Zeilen sind eigene Absaetze im Editor. Deshalb
   traegt jede Zeile ihre Gestaltung selbst und setzt ihren Abstand
   als Kurzschreibweise – so bleiben die Standardabstaende des
   Browsers aussen vor. */
.lgf-logo {
  color: var(--gold);
  font-family: var(--serif);
  text-transform: uppercase;
}
/* Beide Playfair-Zeilen haben in der Vorlage denselben
   Buchstabenabstand (0,152 em zwischen den Schriftbildern). */
.lgf-logo__top {
  color: var(--gold);
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: calc(var(--u) * .386);
  line-height: 1;
  letter-spacing: .11em;
  text-indent: .11em;
  word-spacing: .2em;
  margin: calc(var(--u) * .939) 0 0;
}
.lgf-logo__main {
  color: var(--gold);
  font-family: var(--serif);
  text-transform: uppercase;
  font-size: calc(var(--u) * .617);
  line-height: 1;
  letter-spacing: .11em;
  text-indent: .11em;
  margin: calc(var(--u) * .06) 0 0;
}
.lgf-logo__city {
  color: var(--gold);
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: calc(var(--u) * .246);
  line-height: 1;
  letter-spacing: .44em;
  text-indent: .44em;
  margin: calc(var(--u) * .233) 0 0;
}

/* ============================================================
   6. Seite 2 – Lyrics
   ------------------------------------------------------------
   Aus dem PDF: Titel 55,6 pt, Untertitel 15 pt, Liedtext 18 pt
   mit 28,65 pt Zeilenabstand (= 1,59). Die drei Spalten
   beginnen bei 5,29 %, 35,43 % und 65,56 % der Seitenbreite,
   rechts bleibt bewusst Platz. Titel und Untertitel bilden eine
   zentrierte Gruppe ueber der ersten Spalte – nicht mittig.
   ============================================================ */
.lgf-lyrics__head {
  /* Buendig mit dem Impressum-Titel – bewusst anders als im PDF,
     dort steht der Titel mittig ueber der ersten Spalte. */
  text-align: left;
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}
.lgf-lyrics__title {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.1;
}
.lgf-lyrics__kicker {
  font-size: clamp(.66rem, 1.25vw, .78rem);
  letter-spacing: .02em;
  color: var(--muted);
  /* Kurzschreibweise, weil der Absatz aus dem Editor kommt */
  margin: .75em 0 0;
}

.lgf-cols {
  columns: 3;
  /* Spaltenbreite rund 19,4 em – so breit wie in der Vorlage,
     damit keine Liedzeile umbricht. */
  column-gap: 8%;
  font-size: clamp(.82rem, 1.5vw, .95rem);
  line-height: 1.59;
}
.lgf-cols p {
  margin: 0 0 1.59em;   /* genau eine Leerzeile wie in der Vorlage */
  break-inside: avoid;
}
.lgf-cols .tag { color: var(--muted); }

.lgf-dedication {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 32ch;
}

/* ============================================================
   6b. Inhalte aus dem WordPress-Editor
   ------------------------------------------------------------
   Die drei Bereiche holen ihren Text aus normalen Seiten. Hier
   bekommen die Standard-Elemente des Editors ihr Aussehen:

     Absatz        -> Fliesstext
     fett          -> Bezeichnung in Terrakotta (z. B. KONTAKT:)
     kursiv        -> graue Marke im Liedtext (z. B. [Chorus])
     Ueberschrift 3 -> Abschnittstitel
     Ueberschrift 4 -> Zwischentitel in Serifenschrift
   ============================================================ */
.lgf-rte > *:first-child { margin-top: 0; }
.lgf-rte a { text-decoration: underline; text-underline-offset: .18em; }

.lgf-cols em {
  font-style: normal;
  color: var(--muted);
}

.lgf-imp__body {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4.5rem);
}
.lgf-imp__body p {
  margin: 0 0 1.6rem;
  font-size: .95rem;
  line-height: 1.6;
  break-inside: avoid;
}
.lgf-imp__body strong {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .35rem;
}
/* Die Bezeichnung steht bereits auf eigener Zeile – der Zeilenumbruch
   aus dem Editor wuerde eine Leerzeile erzeugen. */
.lgf-imp__body strong + br { display: none; }
.lgf-imp__body h3 {
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--terra);
  margin: 0 0 1.25rem;
  /* Die Medienhinweise beginnen immer in der zweiten Spalte –
     links die Angaben zur Verantwortlichkeit, rechts die Hinweise. */
  break-before: column;
  break-after: avoid;
}
.lgf-imp__body h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 400;
  margin: 1.75rem 0 .5rem;
  break-after: avoid;
}
.lgf-imp__body h3 + h4 { margin-top: 0; }

/* Zusatzzeile unter einem Zwischentitel, z. B. "Musikalischer Prototyp" */
.lgf-imp__body .lgf-kicker {
  margin: 0 0 1.1rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Schlusszeile der Medienhinweise */
.lgf-imp__body .lgf-rights {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--ink);
}

/* Bearbeiten-Link, nur fuer angemeldete Redakteure */
.lgf-edit {
  align-self: flex-start;
  margin-top: 1.5rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .15rem;
}
.lgf-edit:hover { color: var(--gold); }

/* ============================================================
   7. Seite 3 – Impressum
   ============================================================ */
.lgf-imp__title {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(1.9rem, 5.5vw, 3rem);
}
.lgf-imp__rule {
  width: 3.5rem;
  height: 1px;
  background: var(--rule);
  margin: 1rem 0 clamp(2rem, 5vw, 3rem);
}
/* Linke Spalte beginnt in der Vorlage bei 12,17 %, die rechte bei
   52,92 % der Seitenbreite – daraus ergibt sich das Verhaeltnis. */
.lgf-imp__grid {
  display: grid;
  grid-template-columns: 1.29fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.lgf-intro { font-size: .85rem; margin-bottom: 2.25rem; line-height: 1.7; }

.lgf-block { margin-bottom: 1.75rem; }
.lgf-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: .35rem;
}
.lgf-block p { margin: 0; font-size: .95rem; line-height: 1.6; }

.lgf-notes h3 {
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--terra);
  margin-bottom: 1.5rem;
}
.lgf-notes h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 1.05rem;
  margin: 1.75rem 0 .4rem;
}
.lgf-notes p { margin: 0 0 .6rem; font-size: .8rem; line-height: 1.7; }

.lgf-fineprint {
  margin-top: 2.5rem;
  font-size: .68rem;
  line-height: 1.7;
  color: var(--muted);
}

/* ============================================================
   8. Audio-Schalter
   ============================================================ */
.lgf-audio {
  position: fixed;
  top: clamp(1rem, 3vw, 1.75rem);
  left: clamp(1rem, 3vw, 1.75rem);
  z-index: 50;
}
.lgf-audio__btn {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background .25s ease, transform .2s ease;
}
.lgf-audio__btn:hover { background: rgba(176,141,82,.1); transform: scale(1.06); }
.lgf-audio__btn svg { width: 1.15rem; height: 1.15rem; }
.lgf-audio__btn .icon-off { display: none; }
.lgf-audio[data-playing="false"] .icon-on  { display: none; }
.lgf-audio[data-playing="false"] .icon-off { display: block; }

/* Sanfter Hinweis beim ersten Besuch */
.lgf-audio__hint {
  position: absolute;
  max-width: 60vw;
  left: 3rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.lgf-audio[data-hint="true"] .lgf-audio__hint { opacity: 1; }

/* ============================================================
   8b. Einrasten beim Scrollen
   ------------------------------------------------------------
   Nur dort aktiv, wo ein Bereich auch wirklich auf einen
   Bildschirm passt – sonst wuerde man im Liedtext feststecken.
   ============================================================ */
@media (min-width: 901px) and (min-height: 700px) {
  html {
    scroll-snap-type: y mandatory;
  }
  .lgf-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}


/* ============================================================
   8c. Skyline auf Tablet und Handy
   ------------------------------------------------------------
   Die volle Skyline wird auf schmalen Displays winzig. Deshalb
   ab hier nur eine Haelfte aus der Canva-Vorlage – auf Hoehe
   skaliert und seitlich beschnitten, damit Michel und
   Elbphilharmonie gross bleiben. Welche Haelfte gerade zu sehen
   ist, steuert data-view (siehe footer.php).
   ============================================================ */
@media (max-width: 1200px) {
  .lgf-skyline__full { display: none; }

  .lgf-skyline__half {
    display: block;
    width: 100%;
    height: clamp(18rem, 46svh, 30rem);
    background-repeat: no-repeat;
    /* Die Ausschnitte sind bereits eng um Michel bzw. Elbphilharmonie
       geschnitten. Deshalb die Breite fuellen – so ist alles zu sehen
       und nichts ragt seitlich heraus. */
    background-position: bottom center;
    background-size: 100% auto;
    background-image: var(--sky-left);
    transition: opacity .35s ease;
  }
  .lgf-skyline[data-view="lyrics"] .lgf-skyline__half {
    background-image: var(--sky-right);
  }
  .lgf-skyline[data-fade="true"] .lgf-skyline__half { opacity: 0; }
}

/* Auf sehr schmalen Displays: volle Turmhoehe zeigen, dafuer
   seitlich beschneiden – sonst wird dem Michel die Spitze gekappt. */
@media (max-width: 620px) {
  .lgf-skyline__half {
    height: clamp(17rem, 44svh, 26rem);
  }
}

/* ============================================================
   9. Mobil
   ============================================================ */
/* Sehr grosse Bildschirme: Inhalt darf etwas mitwachsen */
@media (min-width: 1600px) {
  :root { --maxw: 1320px; }
}

/* Tablet quer */
@media (max-width: 1100px) {
  .lgf-cols { column-gap: 6%; }
}

@media (max-width: 900px) {
  .lgf-cols { columns: 2; }
  .lgf-imp__grid { grid-template-columns: 1fr; }
  .lgf-imp__body { columns: 1; }
  /* Einspaltig gibt es keine zweite Spalte – hier trennt Abstand */
  .lgf-imp__body h3 { break-before: auto; margin-top: 2.5rem; }
}

@media (max-width: 620px) {
  /* Auf dem Handy insgesamt eine Stufe groesser – die aus dem
     Print uebernommenen Groessen sind auf kleinen Displays
     schlicht zu klein zum Lesen. */
  .lgf-cols        { font-size: 1.02rem; line-height: 1.62; }
  .lgf-dedication  { font-size: .9rem; }
  .lgf-intro       { font-size: 1rem; }
  .lgf-block p     { font-size: 1.05rem; }
  .lgf-label       { font-size: .78rem; }
  .lgf-notes h3    { font-size: .95rem; }
  .lgf-notes h4    { font-size: 1.15rem; }
  .lgf-notes p     { font-size: .92rem; }
  .lgf-fineprint   { font-size: .8rem; }
  .lgf-lyrics__kicker { font-size: .84rem; }

  .lgf-cols { columns: 1; }
  .lgf-imp__body { columns: 1; }
  .lgf-imp__body p { font-size: 1.05rem; }
  .lgf-imp__body strong { font-size: .78rem; }
  .lgf-dedication { max-width: none; }

  .lgf-hero {
    min-height: calc(100svh - 13rem);
    padding-bottom: 18vh;
  }

  /* Copyright bleibt linksbuendig, Links rechts – wie in der Vorlage */
  .lgf-foot__inner {
    align-items: flex-end;
    text-align: left;
    gap: 1rem;
    font-size: .72rem;
    padding-bottom: 1.2rem;
  }
  /* Drei Links plus Adresse werden auf schmalen Displays eng.
     Etwas kleinere Abstaende, und falls es trotzdem nicht reicht,
     rutscht der letzte Link in eine zweite Zeile, statt rechts
     abgeschnitten zu werden. */
  .lgf-foot__inner { flex-wrap: wrap; }
  .lgf-foot__nav { gap: .9rem; }
  .lgf-foot__links {
    gap: .35rem .9rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
  }
  .lgf-skyline { bottom: 4.75rem; }



  /* Ton-Schalter bleibt oben links wie in der Vorlage –
     unten wuerde er der Fusszeile in die Quere kommen */
  .lgf-audio { top: .75rem; left: .75rem; bottom: auto; }
  .lgf-audio__btn { width: 3.1rem; height: 3.1rem; }
  .lgf-audio__btn svg { width: 1.5rem; height: 1.5rem; }
  .lgf-audio__hint { left: 3.5rem; font-size: .7rem; }
}

/* ============================================================
   10. Unterseite "One Voice Rising"
   ------------------------------------------------------------
   Gleiche Schriften, Farben und Fusszeile wie die Startseite.
   Hier scrollt die Seite jedoch, deshalb steht die Fusszeile am
   Ende des Textes und das Key Visual im Seitenfluss darueber –
   wie in der Vorlage, nur eben nicht fest am Bildschirmrand.
   ============================================================ */
.lgf-ovr { flex: 1 0 auto; }

.lgf-ovr-page .lgf-foot {
  position: relative;
  bottom: auto;
}
.lgf-ovr-page .lgf-foot::before { display: none; }

/* Kopf wie im Bereich Lyrics, nur mit etwas weniger Abstand darunter */
.lgf-ovr__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }

/* Der Text nutzt drei Viertel der Seitenbreite – also denselben
   Satzspiegel wie die Startseite, nur einspaltig. Linksbuendig. */
.lgf-ovr__body {
  max-width: 75%;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.8;
}
.lgf-ovr__body p { margin: 0 0 1.5rem; }
.lgf-ovr__body h2 {
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terra);
  margin: clamp(2.75rem, 7vw, 3.75rem) 0 1.25rem;
}

/* Claim direkt unter dem Titel */
.lgf-ovr__claim {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  line-height: 1.5;
  margin: 0 0 clamp(1.75rem, 4.5vw, 2.5rem);
}
/* Die vier kurzen Zeilen in THE IDEA */
.lgf-ovr__lines {
  font-family: var(--serif);
  color: var(--ink);
  font-size: clamp(1.05rem, 2.4vw, 1.2rem);
  line-height: 1.65;
  padding-left: 1.1rem;
  border-left: 1px solid var(--rule);
}
/* Schlusszeile */
.lgf-ovr__close {
  font-family: var(--serif);
  color: var(--gold);
  font-size: clamp(1.15rem, 3vw, 1.45rem);
  margin-top: 2rem;
}

/* Abspieler – sitzt bewusst weit oben, damit er auf dem Handy
   ohne Scrollen sichtbar und mit dem Daumen erreichbar ist. */
.lgf-player {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .55rem 1.1rem;
  max-width: 30rem;
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  padding: 1rem 1.25rem 1.1rem;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, .35);
}
.lgf-player__btn {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background .25s ease;
}
.lgf-player__btn:hover { background: rgba(168, 123, 59, .1); }
.lgf-player__btn svg { width: 1.3rem; height: 1.3rem; }
.lgf-player__btn .icon-play  { margin-left: .1rem; }  /* optisch mittig */
.lgf-player__btn .icon-pause { display: none; }
.lgf-player[data-playing="true"] .icon-play  { display: none; }
.lgf-player[data-playing="true"] .icon-pause { display: block; }

.lgf-player__label {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--body);
}
.lgf-player__time { color: var(--muted); white-space: nowrap; }

.lgf-player__bar {
  grid-column: 1 / -1;
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}
.lgf-player__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
}

/* Key Visual im Seitenfluss */
.lgf-visual {
  position: relative;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .lgf-ovr__body { max-width: none; }
}

@media (max-width: 620px) {
  .lgf-ovr__body { font-size: 1.05rem; }
  .lgf-player { padding: .9rem 1rem 1rem; }
  .lgf-player__btn { width: 3.5rem; height: 3.5rem; }
  .lgf-player__btn svg { width: 1.45rem; height: 1.45rem; }
  .lgf-player__label { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}