/* pleyer ai - Briefing-Demos auf der Coming-soon-Startseite
 *
 * Die zwei Demo-Knoepfe stehen unten in der Briefing-Karte (Wunsch Daniel,
 * 25.09.2026), im freien Platz unter dem Beschreibungstext. premium.css
 * positioniert .bento__play absolut oben links (Aufbau der vollen
 * Startseite); hier stehen die Knoepfe im normalen Fluss am Kartenboden.
 * Eigene Klasse statt .bento__play-row, weil premium.css fuer
 * .bento__inner:has(> .bento__play-row) oben 96 px Platz reserviert.
 *
 * Eigene Datei statt coming-soon.css, weil coming-soon.css von acht Seiten
 * eingebunden wird und jede Aenderung dort die ?v=-Kennung aller acht
 * Seiten anheben wuerde. Diese Datei bindet nur index.html ein.
 *
 * Regelt ausserdem die z-index-Ebene des Audio-Modals, siehe Regel unten.
 */
.bento__demos {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bento__demos .bento__play {
  position: static;
}

/* Der Cookie-Hinweis (.consent-banner, consent.css) liegt auf z-index 150.
 * Der Dialog muss beim ersten Besuch (noch keine Einwilligungswahl) darueber
 * liegen, sonst deckt der Banner den unteren Teil des geoeffneten Players ab,
 * auf dem Handy noch mehr. Der Modal-Hintergrund (.audio-modal__backdrop)
 * deckt dabei den Banner ab, solange der Dialog offen ist; nach dem
 * Schliessen ist der Banner wieder da.
 */
.audio-modal {
  z-index: 200;
}