@charset "utf-8";

/*
  Sternpower – Sendeplan Theme Override (Clean)
  Ziel: Optisch näher an sternpower.eu & dem neuen Chat-Look
*/

/* -------------------------------------------------------
   Design Tokens
------------------------------------------------------- */
:root{
  --sp-primary:#158e9f;   /* Türkis */
  --sp-accent:#d3745d;    /* Koralle */
  --sp-cyan:#30c7d3;      /* heller Cyan-Akzent */

  --sp-bg:#0b1418;        /* Hintergrund */
  --sp-surface:#0f1b20;   /* Panels */
  --sp-surface2:#142a33;  /* Cards */

  --sp-border:rgba(21,142,159,0.22);
  --sp-border-soft:rgba(21,142,159,0.12);

  --sp-text:#e9f4f5;
  --sp-muted:rgba(233,244,245,0.72);
  --sp-muted2:rgba(233,244,245,0.55);

  --sp-shadow:0 10px 30px rgba(0,0,0,0.35);
  --sp-shadow-soft:0 8px 18px rgba(0,0,0,0.25);

  --sp-radius:18px;
  --sp-radius-pill:999px;
}
.form-control:disabled, .form-control[readonly] {
    background-color: #2e2e2f;
    opacity: 1;
}
/* -------------------------------------------------------
   Base / Reset
------------------------------------------------------- */
html, body{ height:100%; }
*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0;
  color:var(--sp-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Links */
a{ color: var(--sp-primary); }
a:hover{ color: var(--sp-cyan); }

/* -------------------------------------------------------
   Wrapper -> "Card"
------------------------------------------------------- */
#wrapper.container{
  max-width: 1100px;
  margin: 22px auto;
  padding: 0;
  background: rgba(15,27,32,0.78);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-shadow);
  overflow: hidden;
}

#content.col-12{
  background: transparent;
  color:var(--sp-text);
  padding: 16px 16px 10px;
}

/* -------------------------------------------------------
   Top Navigation / Footer (Bootstrap .bg-dark)
------------------------------------------------------- */
nav.bg-dark,
.footer.bg-dark{
  background: rgba(15,27,32,0.92) !important;
  border-bottom: 1px solid var(--sp-border);
}

/* Footer */
.footer{
  height:auto;
  padding: 10px 14px;
  border-top: 1px solid var(--sp-border);
  color: var(--sp-muted);
}
.footer a{ color: var(--sp-text); text-decoration: none; }
.footer a:hover{ color: var(--sp-primary); }

/* -------------------------------------------------------
   Tabs Headnav
------------------------------------------------------- */
#headnav.nav-tabs{
  border: 0;
  justify-content: center;
  flex-wrap: wrap;
}

#headnav.nav-tabs .nav-item{ margin: 6px 4px; }

#headnav.nav-tabs .nav-link{
  border: 0;
  border-radius: var(--sp-radius-pill);
  padding: 9px 14px;
  color: var(--sp-muted);
  background: rgba(20,42,51,0.35);
  transition: transform .12s ease, background .12s ease, color .12s ease;
}

#headnav.nav-tabs .nav-link:hover{
  color: var(--sp-text);
  background: rgba(21,142,159,0.20);
  transform: translateY(-1px);
}

#headnav.nav-tabs .nav-link.active,
#headnav.nav-tabs .nav-item.show .nav-link{
  color: var(--sp-text);
  background: rgba(21,142,159,0.28);
  box-shadow: 0 0 0 1px rgba(21,142,159,0.25) inset;
}

/* -------------------------------------------------------
   Forms
------------------------------------------------------- */
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=search],
input[type=number],
select, textarea,
.form-control{
  background: rgba(20,42,51,0.55);
  border: 1px solid rgba(21,142,159,0.25);
  color: var(--sp-text);
  border-radius: 12px;
}

input:focus, select:focus, textarea:focus, .form-control:focus{
  outline: none;
  border-color: rgba(48,199,211,0.55);
  box-shadow: 0 0 0 3px rgba(21,142,159,0.20);
}

.custom-select{
  background-color: rgba(20,42,51,0.55);
  color: var(--sp-text);
}

label, abbr[title]{ color: var(--sp-muted); }

.input-group-text{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.375rem .75rem;
  margin-bottom:0;
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  color: var(--sp-text);
  text-align:center;
  white-space:nowrap;
  background-color: rgba(15,27,32,0.95);
  border: 1px solid rgba(21,142,159,0.25);
  border-radius: 12px;
}

/* -------------------------------------------------------
   Buttons
------------------------------------------------------- */
.btn{ border-radius: 12px; }

.btn-primary{
  background: rgba(21,142,159,1);
  border-color: rgba(21,142,159,1);
}
.btn-primary:hover{
  background: rgba(48,199,211,1);
  border-color: rgba(48,199,211,1);
}

.btn-danger{
  background: rgba(211,116,93,1);
  border-color: rgba(211,116,93,1);
}
.btn-danger:hover{
  background: rgba(225,132,110,1);
  border-color: rgba(225,132,110,1);
}

.btn-secondary,
.btn-light{
  background: rgba(20,42,51,0.55);
  border-color: rgba(21,142,159,0.18);
  color: var(--sp-text);
}
.btn-secondary:hover,
.btn-light:hover{
  background: rgba(20,42,51,0.75);
  border-color: rgba(48,199,211,0.35);
  color: var(--sp-text);
}

/* -------------------------------------------------------
   Tables
------------------------------------------------------- */
.table{
  color: var(--sp-text);
  background: rgba(15,27,32,0.30);
}

.table thead th{
  border-bottom: 1px solid rgba(21, 142, 159, 0.25);
  background: rgba(20,42,51,0.65);
  color: var(--sp-text);
}

.table td, .table th{
  border-top: 1px solid rgba(21,142,159,0.12);
  /* border-color: rgba(21,142,159,0.12); */
  vertical-align: middle;
  border: 1px solid rgba(21, 142, 159, 0.25);
}

.table-striped tbody tr:nth-of-type(odd){
  background-color: rgba(20,42,51,0.28);
}

.table-hover tbody tr:hover{
  background-color: rgba(21,142,159,0.12);
}

.table-success, .table-success>td, .table-success>th{
  background-color: rgba(21,142,159,0.10);
}

.table-info, .table-info>td, .table-info>th{
  background-color: rgba(20,42,51,0.45);
}

/* -------------------------------------------------------
   Labels / Alerts
------------------------------------------------------- */
span.label{
  background: rgba(20,42,51,0.65);
  border: 1px solid rgba(21,142,159,0.18);
  color: var(--sp-text);
  padding: 2px 8px;
  border-radius: 999px;
}

span.label-red{ background: rgba(211,116,93,0.85); }
span.label-orange{ background: rgba(239,156,82,0.85); }
span.label-green{ background: rgba(93,193,93,0.65); }

.alert-info{
  color: var(--sp-text);
  background: rgba(21,142,159,0.14);
  border-color: rgba(48,199,211,0.30);
}

/* -------------------------------------------------------
   OnAir page
------------------------------------------------------- */
body#onair_body{
  font-size: 20px;
  color: var(--sp-text);
  text-align: center;
  margin-left: 1rem;
}

/* -------------------------------------------------------
   Embed: Breadcrumb / Top-Leiste ausblenden (für iframe)
------------------------------------------------------- */
.breadcrumb-area,
.breadcrumb-section,
#breadcrumb-section,
.breadcrumb,
.page-title-area,
.page-title,
.page-header{
  display: none !important;
}

#content,
.main-content,
.container-full{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* -------------------------------------------------------
   Bilder in Sendungstexten: zentriert + inline styles killen
------------------------------------------------------- */
.table td:nth-child(2){ text-align: center; line-height: 1.5; }

.table td:nth-child(2) p,
.table td:nth-child(2) div,
.table td:nth-child(2) span,
.table td:nth-child(2) h1,
.table td:nth-child(2) h2,
.table td:nth-child(2) h3{
  text-align: center !important;
}

.table td:nth-child(2) img{
  display: block !important;
  margin: 12px auto !important;

  width: auto !important;        /* killt inline width:1200px */
  max-width: 450px !important;
  height: auto !important;       /* killt inline height:1200px */
  max-height: 520px !important;

  border: 0 !important;
}

/* Falls irgendwo anders Bilder auftauchen */
#content img,
#wrapper img,
.table img{
  height: auto !important;
}

/* -------------------------------------------------------
   Responsive (Desktop/Tablet)
------------------------------------------------------- */
@media (max-width: 1200px){
  #wrapper.container{ margin: 14px; }
}

@media (max-width: 768px){
  #headnav.nav-tabs .nav-link{ padding: 8px 12px; }
  #content.col-12{ padding: 14px 12px 10px; }
}

/* =======================================================
   MOBILE: Sendeplan als LISTE/Karten + Labels + Filter
======================================================= */
@media (max-width: 767px){

  /* Filter: alles sauber umbrechen */
  .input-group{ flex-wrap: wrap !important; gap: 8px !important; }
  .input-group .input-group-text,
  .input-group .custom-select,
  .input-group .form-control,
  .input-group .btn{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  /* Tabellen-Header weg (wir machen Labels pro Feld) */
  .table.table-md-responsive thead{ display: none !important; }

  /* Tabelle -> Cards */
  .table.table-md-responsive,
  .table.table-md-responsive tbody,
  .table.table-md-responsive tr,
  .table.table-md-responsive td{
    display: block !important;
    width: 100% !important;
  }

  .table.table-md-responsive tr{
    margin: 0 0 14px 0 !important;
    padding: 12px 12px !important;
    border: 1px solid var(--sp-border) !important;
    border-radius: var(--sp-radius) !important;
    background: rgba(15,27,32,0.65) !important;
    box-shadow: var(--sp-shadow-soft) !important;
  }

  .table.table-md-responsive td{
    border: 0 !important;
    padding: 8px 0 !important;
    text-align: left !important;
  }

  /* Labels */
  .table.table-md-responsive td:nth-child(1)::before{ content:"Zeit"; }
  .table.table-md-responsive td:nth-child(2)::before{ content:"Sendung"; }
  .table.table-md-responsive td:nth-child(3)::before{ content:"Moderator"; }
  .table.table-md-responsive td:nth-child(4)::before{ content:"Status"; }
  .table.table-md-responsive td:nth-child(5)::before{ content:"Aktion"; }

  .table.table-md-responsive td::before{
    display: block;
    font-weight: 800;
    color: var(--sp-muted);
    margin-bottom: 2px;
  }

  /* Datum-Trenner-Zeilen */
  .table.table-md-responsive tr.table-success{
    padding: 8px 12px !important;
    background: rgba(20,42,51,0.55) !important;
  }
  .table.table-md-responsive tr.table-success td{
    text-align: center !important;
    font-weight: 900;
  }
  .table.table-md-responsive tr.table-success td::before{
    display: none !important;
  }

  /* Bilder in Sendung auf Mobile: volle Breite */
  .table.table-md-responsive td:nth-child(2) img{
    max-width: 100% !important;
    max-height: none !important;
    margin: 10px auto 0 auto !important;
  }
}



/* --- MOBILE: verhindert "rechts abgeschnitten" / horizontales Overflow --- */

/* =======================================================
   MOBILE (<= 767px): Sendeplan als schöne LISTE / Cards
   - keine gequetschte Tabelle mehr
   - Labels: Zeit / Sendung / Moderator / Status / Aktion
   - kein "Mod erat or" mehr
======================================================= */
@media (max-width: 767px){

  html, body{ overflow-x: hidden !important; }

  /* Wrapper darf nicht überlaufen */
  #wrapper.container{
    max-width: 100% !important;
    width: auto !important;
    margin: 10px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* Filter: alles untereinander, volle Breite */
  .input-group{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .input-group-prepend,
  .input-group-append{ display: contents !important; }

  .input-group-text,
  select, input, button{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
  }

  /* TABELLE -> CARDS */
  .table.table-md-responsive thead{ display: none !important; }

  .table.table-md-responsive,
  .table.table-md-responsive tbody,
  .table.table-md-responsive tr,
  .table.table-md-responsive td{
    display: block !important;
    width: 100% !important;
  }

  /* Jede normale Sendungs-Zeile als Card */
  .table.table-md-responsive tbody tr:not(.table-success){
    margin: 12px 0 !important;
    padding: 14px !important;
    background: rgba(20,42,51,0.35) !important;
    border: 1px solid rgba(21,142,159,0.18) !important;
    border-radius: 14px !important;
  }

  .table.table-md-responsive td{
    border: 0 !important;
    padding: 10px 0 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Labels pro Feld */
  .table.table-md-responsive td:nth-child(1)::before{ content:"Zeit"; }
  .table.table-md-responsive td:nth-child(2)::before{ content:"Sendung"; }
  .table.table-md-responsive td:nth-child(3)::before{ content:"Moderator"; }
  .table.table-md-responsive td:nth-child(4)::before{ content:"Status"; }
  .table.table-md-responsive td:nth-child(5)::before{ content:"Aktion"; }

  .table.table-md-responsive td::before{
    display: block;
    font-weight: 800;
    color: var(--sp-muted);
    margin-bottom: 4px;
  }

  /* Sendungstext etwas größer/lesbarer */
  .table.table-md-responsive td:nth-child(2){
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  /* Moderator-Bild/Avatar: klein + zentriert */
  .table.table-md-responsive td:nth-child(3) img{
    display: block !important;
    margin: 8px auto 0 auto !important;
    max-width: 90px !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
  }

  /* Bilder im Sendungstext: responsiv */
  .table.table-md-responsive td:nth-child(2) img{
    display: block !important;
    margin: 10px auto !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
  }

  /* Datum-Trenner (die grauen Zwischenzeilen) */
  .table.table-md-responsive tr.table-success{
    margin: 12px 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
  }
  .table.table-md-responsive tr.table-success td{
    text-align: center !important;
    font-weight: 900 !important;
  }
  .table.table-md-responsive tr.table-success td::before{
    display: none !important;
  }
}