/* css/playlist.css */

/* Gesamt-Section */
.playlist-section {
  background-color: #fff;
  padding: 0;
}

/* Headergrafik: 360 px Freiraum oben bleibt erhalten, Bild bleibt unverändert */
.playlist-section .playlist-header img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Suheadergrafik: 360 px Freiraum oben bleibt erhalten, Bild bleibt unverändert */
.playlist-section .playlist-subheader img {
  display: block;
  width: 100vw;                     /* immer volle Viewport-Breite */
  max-width: none;                  /* Override evtl. Maximalbreiten */
  margin: 1rem 0;                   /* oben/unten Abstand */
  margin-left: calc(50% - 50vw);    /* horizontal zentrieren */
  margin-right: calc(50% - 50vw);
  height: auto;
  object-fit: cover;
}


/* Braingrafik als Trennzeichen zwischen Blöcken */
.playlist-section .playlist-brain img {
  width: 69px;
  height: auto;
  margin-top: 0.2rem;
  margin-bottom: 1.5rem;
}

/* Braingrafik Variante als Trennzeichen zwischen Blöcken */
.playlist-section .playlist-brain-2 img {
  width: 69px;
  height: auto;
  margin-top: 2.0rem;
/*  margin-bottom: 1rem; */
}

/* Braingrafik Variante in einem Textblock */
.playlist-section .playlist-brain-3 img {
  display: inline;
  width: 69px;
  height: auto;
/*  margin-top: 2.0rem;
   margin-bottom: 1rem; */
}

/* Inhalt unterhalb der Grafik */
.playlist-section .playlist-content {
  padding: 1.5rem;
}

/* Hauptüberschrift */
.playlist-section .playlist-content > h1 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
/*  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 2rem;
  font-weight: normal; */
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;          /* Regular */
  font-size: 24.24pt;
  color: #7c7c7c;
}

/* Einleitungstext */
.playlist-section .intro-text {
  font-size: 0.95rem;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 2rem;
  color: #707070;
}

/* Einzelne Tracks */
.playlist-section .track {
  margin-bottom: 2rem;
}

.playlist-section .track h2 {
  font-size: 1.10rem;
  color: cadetblue;
  margin-bottom: 0.5rem;
}

.playlist-section .track .track-info {
  font-size: 0.80rem;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 1rem;
}

.playlist-section .track .track-intro-header {
  font-size: 0.90rem;
  font-weight: normal;
  line-height: 1.4;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.playlist-section .track .track-intro {
  /* Hintergrund und Kontrast */
  background-color: #dae1e8;          /* Farbe Hintergrund */
  color: #222222;                      /* dunkler Text */

  /* Innen-/Außenabstände */
  padding: 1rem;                       /* 16px */
  margin: 1rem 0;

  /* Typografie */
  font-size: 0.95rem;                     /* 16px */
  line-height: 1.5;                    /* besseres Lesen */
  text-align: left;

  /* Rahmen & Schatten */
  border: 1px solid #ccc;              /* feiner, heller Rand */
  border-radius: 8px;                  /* abgerundete Ecken */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  /* dezenter Schatten */
}

.playlist-section .track .track-intro-2 {
  /* Hintergrund und Kontrast */
  background-color: #dadbe8;          /* Farbe Hintergrund */
  color: #222222;                      /* dunkler Text */

  /* Innen-/Außenabstände */
  padding: 1rem;                       /* 16px */
  margin: 1rem 0;

  /* Typografie */
  font-size: 0.95rem;                     /* 16px */
  line-height: 1.5;                    /* besseres Lesen */
  text-align: left;

  /* Rahmen & Schatten */
  border: 1px solid #ccc;              /* feiner, heller Rand */
  border-radius: 8px;                  /* abgerundete Ecken */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  /* dezenter Schatten */
}

.playlist-section .track .track-intro-3 {
  /* Hintergrund und Kontrast */
  background-color: #dae1e8;          /* Farbe Hintergrund */
  color: #222222;                      /* dunkler Text */

  /* Innen-/Außenabstände */
  padding: 1rem;                       /* 16px */
  margin: 1rem 0;

  /* Typografie */
  font-size: 0.95rem;                     /* 16px */
  line-height: 1.5;                    /* besseres Lesen */
  text-align: left;

  /* Rahmen & Schatten */
  border: 1px solid #ccc;              /* feiner, heller Rand */
  border-radius: 8px;                  /* abgerundete Ecken */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  /* dezenter Schatten */
}

.playlist-section .track .track-content {
  /* Hintergrund und Kontrast */
  background-color: #ffffff;           /* weißer Hintergrund */
  color: #222222;                      /* dunkler Text */

  /* Innen-/Außenabstände */
  padding: 1rem;                       /* 16px */
  margin: 1rem 0;

  /* Typografie */
  font-size: 0.95rem;                     /* 16px */
  line-height: 1.5;                    /* besseres Lesen */
  text-align: left;

  /* Rahmen & Schatten */
  border: 1px solid #ccc;              /* feiner, heller Rand */
  border-radius: 8px;                  /* abgerundete Ecken */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);  /* dezenter Schatten */
}

/* Audioplayer auf volle Breite */
.playlist-section .track audio {
  width: 100%;
  outline: none;
  margin-top: 1rem;
}

/* Download-Button unter dem Audioplayer */
.playlist-section .track .download-btn {
  margin-top: 0.5rem;
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #2196F3;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

.playlist-section .track .download-btn:active {
  transform: scale(0.98);
}

/* Download-Fortschrittsanzeige */
.track .progress-container {
  margin-top: 0.5rem;
  width: 100%;
  background: #eee;
  border-radius: 0.25rem;
  overflow: hidden;
  display: none; /* initial versteckt */
  height: 1rem;
  position: relative;
}

.track .progress-bar {
  height: 100%;
  width: 0%;
  background: #2196F3;
  transition: width 0.2s ease;
}

.track .progress-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  line-height: 1rem;
  color: #fff;
}

/* PDF-Download-Link */
.track-intro .pdf-download {
  display: inline-flex;
  align-items: center;
  margin-top: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: #ffffff;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
}

/* Icon im Link */
.track-intro .pdf-icon {
  width: 1em;           /* Icon so groß wie eine Textzeile */
  height: auto;
  margin-right: 0.4em;  /* Abstand zum Text */
}

/* Hover-Effekt */
.track-intro .pdf-download:hover {
  background: #e0e0e0;
  border-color: #999;
}

/* Vollbild-Overlay für PDF */
#pdf-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}

/* Toolbar am oberen Rand */
#pdf-toolbar {
  background: #001742;
  color: #fff;
  padding: 0.5rem;
  text-align: right;
}

/* Close-Button */
#pdf-close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Iframe füllt den Rest */
#pdf-frame {
  flex: 1;
  width: 100%;
  height: 100%;
}

/* Wrapper */
.custom-audio-player {
  max-width: 480px;
  margin: 2rem auto;

 /* ————— CSS-Variablen für individuelle Farben ————— */
  --play-bg:         #5d4287;   /* Hintergrund beim Pausiert-Zustand */
  --play-pause-bg:   #a374c2;   /* Hintergrund beim Abspiel-Zustand */
  --loop-active-bg:  #f3b95f;   /* Hintergrund Loop-Button aktiv */
  --thumb-color:     #a374c2;   /* Farbe des Thumbs */
}

/* ——— Play/Pause-Button auf Variablen umstellen ——— */
.custom-audio-player .controls .play-pause.paused {
  background-color: var(--play-bg);
}
.custom-audio-player .controls .play-pause.playing {
  background-color: var(--play-pause-bg);
}

/* ——— Loop-Button aktiv auf Variable umstellen ——— */
.custom-audio-player .controls .loop.active {
  background-color: var(--loop-active-bg);
}

/* ——— Thumb-Farbe auf Variable umstellen ——— */
/* WebKit */
.custom-audio-player .progress::-webkit-slider-thumb {
  background: var(--thumb-color);
}

/* Firefox */
.custom-audio-player .progress::-moz-range-thumb {
  background: var(--thumb-color);
}

/* IE/Edge */
.custom-audio-player .progress::-ms-thumb {
  background: var(--thumb-color);
}

/* Grundzustand (Pause) zieht Farbe aus der --play-bg-Variable */
.custom-audio-player .controls .play-pause {
  background-color: var(--play-bg);
}

/* Progress-Bar oben */
.custom-audio-player .progress-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.custom-audio-player .progress {
  flex: 1;
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: #ccc;
  border-radius: 1px;
  cursor: pointer;
}
/* Slider-Thumb */
.custom-audio-player .progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  background: #001742;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -4px; /* Thumb auf die Mitte der 2px-Leiste setzen */
}
.custom-audio-player .progress::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: #001742;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Zeittexte */
.custom-audio-player .time {
  font-size: 0.85rem;
  color: #333;
  min-width: 3.5rem;
  text-align: center;
}

/* Steuer-Buttons unten */
.custom-audio-player .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
  box-shadow: none;
}
.custom-audio-player .controls button {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #001742;
  box-shadow: none;
}
/* Play/Pause groß und kreisrund */
.custom-audio-player .controls .play-pause {
  width: 3.5rem;
  height: 3.5rem;
 /* background: #001742; */
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Steuer-Buttons unten */
.custom-audio-player .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

.custom-audio-player .controls button {
  background: transparent;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: #001742;
}

/* Play/Pause groß und kreisrund */
.custom-audio-player .controls .play-pause {
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--play-bg);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* Rewind und Loop als einfache Icons */
.custom-audio-player .controls .rewind,
.custom-audio-player .controls .loop {
  font-size: 1.5rem;
}

/* Loop-Button “aktiv” hervorheben */
.custom-audio-player .controls .loop.active {
  color: #2196F3;
}

/* Play/Pause Button: grün beim Abspielen, blau beim Pausieren */
.custom-audio-player .controls .play-pause.playing {
  background-color: var(--play-pause-bg);
}

.custom-audio-player .controls .play-pause.paused {
   background-color: var(--play-bg) !important;
}

/* Buttons als Flexbox, damit das <img> mittig sitzt */
.custom-audio-player .controls button {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;               /* ggf. überschreiben */
}

/* Größe der SVG-Icons */
.custom-audio-player .controls .control-icon {
  width: 1.5rem;            /* passt du je nach gewünschter Icon-Größe an */
  height: auto;
}

/* Abstand links/rechts zwischen den Buttons */
.custom-audio-player .controls .rewind,
.custom-audio-player .controls .play-pause,
.custom-audio-player .controls .loop {
  margin: 0 0.75rem;
}

/* Loop-Button standard */
.custom-audio-player .controls .loop {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.2s ease;
}

/* Loop-Button aktiv (Endlosschleife an) */
.custom-audio-player .controls .loop.active {
  background-color: #f3b95f;  
  padding: 0.5rem;
  border-radius: 50%;      
} 

/* Basis für alle Steuer-Buttons */
.custom-audio-player .controls button {
  box-sizing: border-box; /* Padding zählt zur Gesamtgröße dazu */
}

/* Loop-Button: feste Gesamtgröße */
.custom-audio-player .controls .loop {
  width: 2.5rem;          /* Gesamtbreite */
  height: 2.5rem;         /* Gesamthöhe */
  padding: 0.25rem;       /* Innenabstand im Inaktiv-Zustand */
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s, padding 0.2s;
}

/* Loop-Button aktiv: nur das Padding ändert sich, nicht die Box */
.custom-audio-player .controls .loop.active {
  padding: 0.75rem;       /* größerer Innenabstand */
  background-color: #f3b95f;
}

/* Entfernt die graue Background-Leiste bei allen Browsern */
.custom-audio-player .progress {
  background: transparent;  /* Haupt-Background aus */
}

/* WebKit (Chrome, Safari) Track */
.custom-audio-player .progress::-webkit-slider-runnable-track {
  background: transparent;
}

/* Firefox Track */
.custom-audio-player .progress::-moz-range-track {
  background: transparent;
}

/* IE/Edge Track */
.custom-audio-player .progress::-ms-track {
  background: transparent;
  border-color: transparent;
}

/* Optional: Falls noch eine Hintergrund-Schicht unter dem Track liegt */
.custom-audio-player .progress-container {
  background: transparent;
}

/* Basis: kein Container-Hintergrund */
.custom-audio-player .progress-container {
  background: transparent;
}

/* -------------------------------------------- */
/* 1px‐dünne Track‐Linie und farbiger Thumb     */
/* -------------------------------------------- */

/* WebKit (Chrome, Safari) */
.custom-audio-player .progress::-webkit-slider-runnable-track {
  background: #000;    /* schwarze Linie */
  height: 1px;         /* Linienstärke 1px */
  border-radius: 0.5px;
}

.custom-audio-player .progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;         /* Daumen-Größe */
  height: 12px;
  background: #a374c2; /* neuer Farbton */
  border: none;
  border-radius: 50%;
  margin-top: -5.5px;  /* Thumb zentrieren: -(Height/2 - TrackHeight/2) */
  cursor: pointer;
}

/* Firefox */
.custom-audio-player .progress::-moz-range-track {
  background: #000;
  height: 1px;
  border-radius: 0.5px;
}

.custom-audio-player .progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #a374c2;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Edge/IE */
.custom-audio-player .progress::-ms-track {
  background: transparent;
  color: transparent;
  height: 1px;
}

.custom-audio-player .progress::-ms-fill-lower,
.custom-audio-player .progress::-ms-fill-upper {
  background: #000;
  border-radius: 0.5px;
}

.custom-audio-player .progress::-ms-thumb {
  width: 12px;
  height: 12px;
  background: #a374c2;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Einheitliche Button-Größe */
.custom-audio-player .controls .rewind,
.custom-audio-player .controls .play-pause,
.custom-audio-player .controls .loop {
  width: 3.5rem;    /* gleiche Abmessungen wie dein Play-Button */
  height: 3.5rem;
  display: flex;    /* um das Icon mittig zu zentrieren */
  align-items: center;
  justify-content: center;
}

.custom-audio-player .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

/* ——— Variablen in der .custom-audio-player definiert ——— */
.custom-audio-player {
  --play-bg:         #65bf3f;   /* Pause-Zustand grün */
  --play-pause-bg:   #0065c9;   /* Play-Zustand blau */
  --loop-active-bg:  #9364ff;   /* Loop aktiv lila */
  --thumb-color:     #a374c2;   /* Thumb violett */
}

/* Grundzustand immer aus --play-bg (Pause) */
.custom-audio-player .controls .play-pause {
  background-color: var(--play-bg);
}

/* Wenn abgespielt: aus --play-pause-bg (Play) */
.custom-audio-player .controls .play-pause.playing {
  background-color: var(--play-pause-bg);
}

/* Loop-Button aktiv: aus --loop-active-bg */
.custom-audio-player .controls .loop.active {
  background-color: var(--loop-active-bg);
}

/*  ————— Default-Hintergrund für Play-Button (Pause-Zustand!) ————— */
.custom-audio-player .controls .play-pause {
  background-color: var(--play-bg);
}

/*  ————— Play-Zustand (Icon ❚❚) ————— */
.custom-audio-player .controls .play-pause.playing {
  background-color: var(--play-pause-bg) !important;
}

/*  ————— Loop-Button aktiv ————— */
.custom-audio-player .controls .loop.active {
  background-color: var(--loop-active-bg) !important;
}

/*  ————— Thumb aus Variable ————— */
/* WebKit */
.custom-audio-player .progress::-webkit-slider-thumb {
  background: var(--thumb-color) !important;
}
/* Firefox */
.custom-audio-player .progress::-moz-range-thumb {
  background: var(--thumb-color) !important;
}
/* Edge/IE */
.custom-audio-player .progress::-ms-thumb {
  background: var(--thumb-color) !important;
}

/* 1) Container relativ machen */
.track-intro {
  position: relative;
  padding-bottom: 2.5rem; /* Platz unten für das Bild */
}

/* 2) Bild absolut in die rechte untere Ecke */
.track-intro .floating-brain {
  position: absolute;
  bottom: 0.8rem;  /* Abstand vom unteren Rand */
  right: 0.8rem;   /* Abstand vom rechten Rand */
  width: 4rem;     /* gewünschte Breite */
  height: auto;
  pointer-events: none;  /* fällt nicht über den Text-Flow */
  opacity: 0.8;    /* leicht transparent, optional */
}

/* „Schon gewusst?“–Header mit Icon */
.goodto-know {
  display: flex;
  align-items: center;
  margin-bottom: 1rem; /* Abstand zum Textblock */
}

.goodto-know .goodto-icon {
  width: 37px;
  height: 37px;
  margin-right: 0.5rem; /* Platz zwischen Icon und Text */
}

.goodto-know .goodto-heading {
  margin: 0;
  padding-top: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;          /* Regular */
  font-size: 24.24pt;
  color: #dae1e8;
  line-height: 1;            /* Icon und Text exakt zentrieren */
}

    /* Playlist Styling Icons die auf Unterseiten fuehren */
    .playlist-icons-2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5vw; padding: 0vw; }
    .play-item-2 { text-decoration: none; color: #fff; display: flex; flex-direction: column; align-items: center; }
    .play-item-2 img { width: 37vw; max-width: 192px; aspect-ratio: 1; }

/* Container für alle HPL-Items als Spalten-Liste */
.playlist-icons-2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;           /* Abstand zwischen den Zeilen */
  padding: 0;
}

/* Jeder Eintrag: Bild links, Text rechts */
.playlist-icons-2 .hpl-item {
  display: flex;
  align-items: flex-start;   /* Text oben ausrichten */
  gap: 1rem;                 /* Abstand Bild ↔ Text */
  background: #e0f5ff;
  border-radius: 8px;
  overflow: hidden;
  padding: 0.5rem;
  text-decoration: none;
  color: #333;
}

/* Bild im Item */
.playlist-icons-2 .hpl-item img {
  width: 30vw;
  max-width: 192px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Text-Block als Flex-Container in Spaltenrichtung */
.playlist-icons-2 .hpl-item .hpl-text {
  position: relative;        /* für das absolute Positionieren des Arrow */
  display: flex;
  flex-direction: column;    /* Überschrift oben, Text darunter, Arrow am Ende */
  justify-content: flex-start;
  flex: 1;                   /* nimmt den restlichen Platz neben dem Bild ein */
  padding: 0;                /* Padding schon auf .hpl-item gesetzt */
}

/* Überschrift im Text-Block */
.playlist-icons-2 .hpl-item .hpl-text h4 {
  margin: 0 0 0.5rem;        /* unten Abstand zur Beschreibung */
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: cadetblue;
  text-align: left;
}

/* Fließtext im Text-Block */
.playlist-icons-2 .hpl-item .hpl-text h5 {
  margin: 0 0 2rem;          /* Abstand nach unten für den Arrow */
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  color: #555;
  line-height: 1.3;
  text-align: left;
}

/* Pfeil-Arrow unten rechts */
.playlist-icons-2 .hpl-item .hpl-text .arrow {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  font-size: 1.5rem;
  color: #999;
  cursor: pointer;
}

/* Vollbild-Header für alle playlist-sections */
.playlist-section .playlist-header {
  position: relative;
  width: 100vw;               /* echte Viewport-Breite */
  left: 50%;
  margin-left: -50vw;         /* zentriert den 100vw-Container */
  overflow: hidden;
}

.playlist-section .playlist-header img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Illustration-Karte: volle Inhaltsbreite, runde Ecken, Schatten */
.playlist-section .playlist-illustration {
  margin: 0.75rem 0 1.25rem;     /* Abstand zu Text & Karten */
  border-radius: 12px;
  overflow: hidden;               /* Bild in den Ecken „clippen“ */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
  background: #f6fbff;           /* dezente Kartenfläche (optional) */
}

/* Bild skaliert responsiv */
.playlist-section .playlist-illustration img {
  display: block;
  width: 100%;
  height: auto;                   /* Original-Proportionen behalten */
}

/* Video-Karte: runde Ecken + Schatten wie bei den Illustrationen */
.playlist-section .playlist-video {
  margin: 0.75rem 0 1.25rem;
  border-radius: 12px;
  overflow: hidden;                    /* schneidet die Ecken am Video mit ab */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background: #f6fbff;                 /* dezente Kartenfläche (optional) */
}

/* Video responsiv, 1:1 Layout passt zum 1080x1080-File */
.playlist-section .playlist-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;                 /* Platzhalter-Layout vor dem Laden */
  border-radius: inherit;
}

/* Fallback für sehr alte Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .playlist-section .playlist-video {
    position: relative;
    padding-top: 100%;                 /* 1:1-Ratio */
  }
  .playlist-section .playlist-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* sauber eingepasst */
  }
}

.playlist-section .playlist-video { position: relative; border-radius: 12px; overflow: hidden; }
.playlist-section .playlist-video video { display:block; width:100%; height:auto; aspect-ratio:1/1; border-radius:inherit; }

/* Overlay: standardmäßig unsichtbar, wird nach Ende eingeblendet */
.playlist-section .playlist-video .poster-overlay{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:inherit;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none; /* klicks gehen an das Video durch */
}
.playlist-section .playlist-video.show-poster .poster-overlay{ opacity:1; }