/* =====================================================================
   Branchenseiten fuer den Ladenfunk — gemeinsame Bausteine
   Genutzt von radio-hotel.html, radio-restaurant.html und allen
   weiteren Branchenseiten. Baut auf radio-anwendung.css auf (ra-*);
   hier steht nur, was dort fehlt.

   Alle Beschriftungen sind HTML/CSS und keine Bilddateien — so bleiben
   sie auf dem Handy lesbar und werden von Suchmaschinen erfasst.
   ===================================================================== */

/* WICHTIG: Die Farbvariablen in radio-anwendung.css haengen an der
   Kennung #radioLanding. Branchenseiten nutzen eine eigene Kennung und
   brauchen sie deshalb noch einmal — sonst greifen zwar alle
   ra-*-Regeln, aber jedes var(--ra-...) darin faellt auf die
   Standardfarbe zurueck.
   Fuer eine neue Branchenseite hier einfach die Kennung ergaenzen. */
#hotelLanding,
#gastroLanding {
  --ra-bg0:#0E0F12; --ra-bg1:#17191E; --ra-bg2:#23262D; --ra-bg3:#2C2F37;
  --ra-teal:#2FD4C4; --ra-amber:#E9A94A;
  --ra-text:#ECEAE4; --ra-text2:#9A9CA3; --ra-text3:#61646d;
  color: var(--ra-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
}
#hotelLanding h1, #hotelLanding h2, #hotelLanding h3,
#gastroLanding h1, #gastroLanding h2, #gastroLanding h3 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: .03em;
}

/* ---------- Zonen-Plan ----------
   Die Zahl der Zeitfenster ist frei: am Aussenrahmen --zeiten setzen
   (z. B. style="--zeiten:4"). Ohne Angabe sind es drei. */
.br-zonen{max-width:1180px;margin:0 auto;border:1px solid var(--ra-bg3);
  border-radius:16px;overflow:hidden;background:var(--ra-bg1)}
.br-z-kopf,.br-z-reihe{display:grid;
  grid-template-columns:1.3fr repeat(var(--zeiten,3),1fr);gap:1px;background:var(--ra-bg3)}
.br-z-kopf > div{background:var(--ra-bg2);padding:.75rem 1rem;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ra-text2)}
.br-z-reihe > div{background:var(--ra-bg1);padding:.9rem 1rem}
.br-z-name b{display:block;color:var(--ra-text);font-size:1rem}
.br-z-name span{display:block;color:var(--ra-text3);font-size:.8rem;margin-top:.15rem}
.br-z-slot b{display:block;font-size:.94rem;margin-bottom:.15rem}
.br-z-slot span{display:block;color:var(--ra-text3);font-size:.8rem;line-height:1.4}
/* Tageszeit-Stufen: hell -> tag -> abend -> spaet, dazu "aus" */
.br-z-hell{background:rgba(47,212,196,.07) !important}
.br-z-hell b{color:var(--ra-teal)}
.br-z-tag{background:rgba(47,212,196,.12) !important}
.br-z-tag b{color:var(--ra-teal)}
.br-z-abend{background:rgba(233,169,74,.10) !important}
.br-z-abend b{color:var(--ra-amber)}
.br-z-spaet{background:rgba(233,169,74,.16) !important}
.br-z-spaet b{color:var(--ra-amber)}
.br-z-aus{background:rgba(255,255,255,.02) !important}
.br-z-aus span{color:var(--ra-text3);font-style:italic}
.br-hinweis{max-width:1180px;margin:.9rem auto 0;padding:0 .2rem;
  color:var(--ra-text3);font-size:.86rem;line-height:1.6}

/* ---------- Betriebsgroessen ---------- */
.br-groessen{max-width:1180px;margin:0 auto;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.br-g{background:var(--ra-bg2);border:1px solid var(--ra-bg3);border-radius:16px;padding:1.5rem}
.br-g-hervor{border-color:rgba(47,212,196,.45);background:rgba(47,212,196,.05)}
.br-g-typ{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ra-text3)}
.br-g-zahl{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;line-height:1.1;
  color:var(--ra-teal);margin:.2rem 0 .6rem}
.br-g-zahl span{font-size:1.1rem;color:var(--ra-text2);letter-spacing:.04em}
.br-g-txt{color:var(--ra-text2);font-size:.96rem;line-height:1.65;margin:0 0 1rem}
.br-g-bsp{font-size:.84rem;color:var(--ra-text3);border-top:1px solid var(--ra-bg3);padding-top:.8rem}

/* ---------- Kostenvergleich ---------- */
.br-kosten{max-width:1180px;margin:0 auto;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.br-k-spalte{border:1px solid var(--ra-bg3);border-radius:16px;overflow:hidden;
  background:var(--ra-bg2);display:flex;flex-direction:column}
.br-k-sid{border-color:rgba(47,212,196,.45)}
.br-k-kopf{padding:1.2rem 1.4rem;border-bottom:1px solid var(--ra-bg3)}
.br-k-normal .br-k-kopf{background:rgba(255,255,255,.03)}
.br-k-sid .br-k-kopf{background:rgba(47,212,196,.08)}
.br-k-t{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.03em;color:#fff}
.br-k-sid .br-k-t{color:var(--ra-teal)}
.br-k-u{font-size:.86rem;color:var(--ra-text3);margin-top:.2rem}
.br-k-liste{list-style:none;margin:0;padding:.4rem 1.4rem;flex:1 1 auto}
.br-k-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.7rem 0;border-top:1px solid var(--ra-bg3)}
.br-k-liste li:first-child{border-top:0}
.br-k-liste span{color:var(--ra-text2);font-size:.94rem}
.br-k-liste b{font-size:.88rem;white-space:nowrap;color:var(--ra-text)}
.br-k-plus{color:var(--ra-amber) !important}
.br-k-null{color:var(--ra-teal) !important}
.br-k-fuss{padding:1rem 1.4rem;border-top:1px solid var(--ra-bg3);
  color:var(--ra-text3);font-size:.85rem;line-height:1.55}

/* ---------- Hinweiskasten (z. B. Aussenbereich, Live-Musik) ---------- */
.br-merk{max-width:1180px;margin:1.6rem auto 0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.br-m{display:flex;gap:.9rem;background:var(--ra-bg2);border:1px solid var(--ra-bg3);
  border-left:3px solid var(--ra-amber);border-radius:12px;padding:1.1rem 1.2rem}
.br-m-ic{flex:0 0 auto;font-size:1.3rem;line-height:1.2}
.br-m b{display:block;color:var(--ra-text);font-size:1rem;margin-bottom:.25rem}
.br-m p{margin:0;color:var(--ra-text2);font-size:.93rem;line-height:1.6}
.br-m a{color:var(--ra-teal)}

@media(max-width:820px){
  /* Zonenplan: je Zone ein Block, Zeitangabe vor jeder Zeile — nebeneinander
     wird es auf schmalen Displays unlesbar. Die Zeit steht als data-zeit
     am Element, damit sie ohne feste Reihenfolge stimmt. */
  .br-z-kopf{display:none}
  .br-z-reihe{grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--ra-bg3)}
  .br-z-reihe > div{padding:.75rem 1rem}
  .br-z-name{background:var(--ra-bg2) !important}
  .br-z-slot{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
  .br-z-slot b{margin:0}
  .br-z-slot::before{content:attr(data-zeit);color:var(--ra-text3);
    font-size:.76rem;flex:0 0 62px}
}

/* =====================================================================
   Production-Music-Anwendungsseiten (Musik für YouTube, Film, Podcast …)
   Ergaenzt die Branchen-Bausteine oben. Kennung: #pmLanding
   ===================================================================== */
#pmLanding {
  --ra-bg0:#0E0F12; --ra-bg1:#17191E; --ra-bg2:#23262D; --ra-bg3:#2C2F37;
  --ra-teal:#2FD4C4; --ra-amber:#E9A94A;
  --ra-text:#ECEAE4; --ra-text2:#9A9CA3; --ra-text3:#61646d;
  color: var(--ra-text);
  font-family: 'DM Sans', system-ui, sans-serif;
  overflow-x: hidden;
}
#pmLanding h1, #pmLanding h2, #pmLanding h3 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: .03em;
}

/* Ablauf in Schritten (z. B. Content ID) */
.pm-flow{max-width:1180px;margin:0 auto;display:flex;align-items:stretch;gap:.7rem;flex-wrap:wrap}
.pm-f{flex:1 1 200px;min-width:0;background:var(--ra-bg2);border:1px solid var(--ra-bg3);
  border-radius:14px;padding:1.3rem 1.2rem}
.pm-f-ziel{border-color:rgba(47,212,196,.45);background:rgba(47,212,196,.05)}
.pm-f-nr{width:30px;height:30px;border-radius:9px;background:var(--ra-bg3);color:var(--ra-text2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;margin-bottom:.7rem}
.pm-f-ziel .pm-f-nr{background:var(--ra-teal);color:#0E0F12}
.pm-f b{display:block;color:var(--ra-text);font-size:1.02rem;margin-bottom:.35rem}
.pm-f p{margin:0;color:var(--ra-text2);font-size:.92rem;line-height:1.6}
.pm-f-pfeil{flex:0 0 auto;display:flex;align-items:center;color:var(--ra-text3);font-size:1.2rem}

/* Merkkaesten */
.pm-merk{max-width:1180px;margin:1.6rem auto 0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.pm-m{display:flex;gap:.9rem;background:var(--ra-bg2);border:1px solid var(--ra-bg3);
  border-radius:12px;padding:1.1rem 1.2rem}
.pm-m-gut{border-left:3px solid var(--ra-teal)}
.pm-m-warn{border-left:3px solid var(--ra-amber)}
.pm-m-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.9rem}
.pm-m-gut .pm-m-ic{background:rgba(47,212,196,.15);color:var(--ra-teal)}
.pm-m-warn .pm-m-ic{background:rgba(233,169,74,.15);color:var(--ra-amber)}
.pm-m b{display:block;color:var(--ra-text);font-size:1rem;margin-bottom:.25rem}
.pm-m p{margin:0;color:var(--ra-text2);font-size:.93rem;line-height:1.6}

/* Lizenzvergleich */
.pm-lizenzen{max-width:1180px;margin:0 auto;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pm-l{background:var(--ra-bg2);border:1px solid var(--ra-bg3);border-radius:16px;
  padding:1.5rem;display:flex;flex-direction:column}
.pm-l-hervor{border-color:rgba(47,212,196,.45);background:rgba(47,212,196,.05)}
.pm-l-name{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.03em;color:#fff}
.pm-l-hervor .pm-l-name{color:var(--ra-teal)}
.pm-l-preis{font-size:1.5rem;font-weight:600;color:var(--ra-amber);margin:.3rem 0 1rem}
.pm-l-preis span{display:block;font-size:.8rem;font-weight:400;color:var(--ra-text3);margin-top:.1rem}
.pm-l-liste{list-style:none;margin:0 0 1rem;padding:0;flex:1 1 auto}
.pm-l-liste li{padding:.4rem 0 .4rem 1.5rem;position:relative;font-size:.94rem;line-height:1.5}
.pm-j{color:var(--ra-text2)}
.pm-j::before{content:'✓';position:absolute;left:0;color:var(--ra-teal);font-weight:700}
.pm-n{color:var(--ra-text3)}
.pm-n::before{content:'—';position:absolute;left:0;color:var(--ra-text3)}
.pm-l-fuer{margin:0;padding-top:.9rem;border-top:1px solid var(--ra-bg3);
  color:var(--ra-text3);font-size:.88rem;line-height:1.55}
.pm-hinweis{max-width:1180px;margin:1rem auto 0;padding:0 .2rem;
  color:var(--ra-text3);font-size:.86rem;line-height:1.6}
.pm-hinweis a{color:var(--ra-teal)}

/* Musik je Videotyp */
.pm-typen{max-width:1180px;margin:0 auto;display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pm-t{background:var(--ra-bg2);border:1px solid var(--ra-bg3);border-radius:14px;padding:1.4rem}
.pm-t-ic{font-size:1.6rem;margin-bottom:.5rem}
.pm-t b{display:block;color:var(--ra-text);font-size:1.05rem;margin-bottom:.35rem}
.pm-t p{margin:0 0 .8rem;color:var(--ra-text2);font-size:.93rem;line-height:1.6}
.pm-t-tag{display:inline-block;font-size:.78rem;color:var(--ra-teal);
  background:rgba(47,212,196,.1);border:1px solid rgba(47,212,196,.28);
  border-radius:99px;padding:.2rem .7rem}

/* Trackliste */
.pm-tracks{max-width:1180px;margin:0 auto;border:1px solid var(--ra-bg3);
  border-radius:16px;overflow:hidden;background:var(--ra-bg1)}
.pm-tracks-laedt{padding:1.6rem;color:var(--ra-text3);font-size:.92rem;text-align:center}
.pm-tracks-laedt a{color:var(--ra-teal)}
/* Die Zeile traegt zusaetzlich die Kennung adp-track-row, damit der Player
   sie als laufend markiert (davon haengt die Fortschrittsanzeige in der
   Wellenform ab). Deren Raster und untere Linie werden hier ueberschrieben —
   diese Datei wird nach style.css geladen. */
.pm-tr{display:grid;grid-template-columns:34px 44px minmax(0,1.1fr) minmax(120px,1.4fr) auto auto auto;align-items:center;
  gap:.9rem;padding:.7rem 1.1rem;border-top:1px solid var(--ra-bg3);border-bottom:0;cursor:pointer;
  transition:background .15s}
.pm-tr:first-child{border-top:0}
.pm-tr:hover{background:rgba(255,255,255,.03)}
.pm-tr-aktiv,
.pm-tr.playing{background:rgba(47,212,196,.08)}
.pm-tr-play{color:var(--ra-teal);font-size:.9rem;text-align:center}
.pm-tr-cover{width:44px;height:44px;border-radius:6px;background-size:cover;background-position:center}
.pm-tr-txt{min-width:0}
.pm-tr-txt b{display:block;color:var(--ra-text);font-size:.98rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-tr-txt span{display:block;color:var(--ra-text3);font-size:.84rem}

/* Wellenform in der Trackliste — Darstellung kommt aus style.css
   (.adp-td-wave / .adp-wave-canvas), hier nur die Einbettung. */
.pm-tr-wave{min-width:0}
.pm-tr-wave .adp-wave-canvas{height:32px}
.pm-tr-bpm,.pm-tr-zeit{color:var(--ra-text3);font-size:.85rem;white-space:nowrap}
.pm-tr-mehr{color:var(--ra-text3);font-size:.85rem;text-decoration:none;white-space:nowrap}
.pm-tr-mehr:hover{color:var(--ra-teal)}

@media(max-width:820px){
  .pm-flow{flex-direction:column}
  .pm-f-pfeil{transform:rotate(90deg);justify-content:center;padding:.1rem 0}
  /* Trackliste schlanker: BPM und Details entfallen, der Rest bleibt lesbar */
  .pm-tr{grid-template-columns:28px 40px 1fr auto;gap:.7rem;padding:.65rem .9rem}
  /* Wellenform, BPM und Details entfallen — auf 390px bliebe fuer den
     Titel sonst kaum Platz. */
  .pm-tr-bpm,.pm-tr-mehr,.pm-tr-wave{display:none}
}