/*
Für level-0/main-content brauchen wir nur noch diese Ebenen:

1. Hauptcontainer
.level-0-menu
2. Row-Typen
.level-0-row
.level-0-wide-row
3. Positionscontainer innerhalb einer Row
.level-0-column
.level-entry-inner
.level-entry-block
4. Content-Module
.level-entry-text
.level-entry-title
.level-entry-line
.level-entry-body
5. Tile-Module
.level-0-tile
.level-0-title
.level-0-tile-disabled
6. Song-Module
.grid-raum-songs
.song-tile
.song-tile-media
.song-cover-text
*/
/* =========================================================
   LEVEL 0 – MAIN CONTENT
   nur für den neuen Renderer / keine Altlasten
========================================================= */

/* ---------------------------------------------------------
   Grundcontainer
--------------------------------------------------------- */
.level-0-menu {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Standard Row: klassisches 2-Spalten-Layout
--------------------------------------------------------- */
.level-0-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.level-0-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   Wide Row: multi-column-block
--------------------------------------------------------- */
.level-0-wide-row {
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.level-entry-inner {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

.level-entry-block {
  min-width: 0;
  box-sizing: border-box;
}

/* Content innerhalb eines Blocks immer vertikal */
.level-entry-block > * {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  box-sizing: border-box;
}

.level-entry-block > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------
   Text-Content
--------------------------------------------------------- */
.level-entry-text {
  width: 100%;
  box-sizing: border-box;
}

.level-entry-title {
  margin: 0 0 14px 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.level-entry-line {
  width: 100%;
  height: 1px;
  margin: 0 0 18px 0;
  background: rgba(0, 0, 0, 0.18);
}

.level-entry-body {
  width: 100%;
  box-sizing: border-box;
}

.level-entry-body p {
  margin: 4px 0;
  line-height: 1.25;
}

.level-entry-inner {
  display: grid;
  gap: 24px;
}

/* 1 Block */
.level-entry-inner-count-1 {
  grid-template-columns: 1fr ;
}

/* 2 Blöcke */
.level-entry-inner-count-2 {
  grid-template-columns: 1fr 1fr;
}

/* optional später */
.level-entry-inner-count-3 {
  grid-template-columns: 1fr 1fr 1fr;
}


.level-entry-body p {
  margin: 0 0 14px 0;
  line-height: 1.45;
}

.level-entry-body p:last-child {
  margin-bottom: 0;
}

.level-entry-text .level-entry-body p {
  margin: 4px 0;
  line-height: 1.25;
}

/* Song des Tages / Woche */
.level-entry-text.song-of-day-text .level-entry-body p {
  color: red; !important;
}
/* ---------------------------------------------------------
   Bild-/Kachelbereich
--------------------------------------------------------- */
.level-0-tile {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  box-sizing: border-box;
}

.level-0-tile img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.level-0-title {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 3;
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.level-0-tile-disabled {
  position: relative;
  cursor: default;
}

.level-0-tile-disabled img {
  filter: brightness(0.82);
}

.level-0-tile-disabled::after {
  content: "coming soon";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ---------------------------------------------------------
   Songs / Buttons im Block
--------------------------------------------------------- */
.grid-raum-songs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.song-tile {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.song-tile-media {
  width: 100%;
}

.song-tile-media img {
  display: block;
  width: 100%;
  height: 40px;
  object-fit: cover;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.song-tile:hover .song-tile-media img {
  transform: scale(1.06);
}

.song-cover-text {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  z-index: 2;
  color: #00008b;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Optional: einfache Listenmodule
--------------------------------------------------------- */
.level-0-songlist,
.level-0-buttonlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.level-0-song,
.level-0-button {
  display: block;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.level-0-song {
  background: rgba(255, 255, 255, 0.03);
}

.level-0-button {
  background: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */
@media (max-width: 760px) {
  .level-0-row {
    grid-template-columns: 1fr;
  }

  .level-entry-inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}
.level-0-two-column-row {
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.level-0-two-column-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
}

/* Begrüßungsblock */
.level-entry-text.welcome-block {
  text-align: center;
}

.level-entry-text.welcome-block .level-entry-title {
  font-size: 20px;
  margin-bottom: 10px;
}

.level-entry-text.welcome-block .level-entry-body p {
  margin: 4px 0;
  line-height: 1.3;
}

.level-entry-video {
  width: 100%;
  height: 100%;              /* WICHTIG */
  display: flex;
  align-items: center;       /* vertikal */
  justify-content: center;   /* horizontal */
  padding: 16px 0;   /* optische Zentrierung */  
}

.level-entry-video video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.flow-text.two-columns {
    column-count: 2;
    column-gap: 32px;
}

.flow-text.three-columns {
    column-count: 3;
    column-gap: 28px;
}