body{
  margin:0;
  font-family:Source Sans Pro,sans-serif;
  background:#e9eef3;
  display:flex;
  flex-direction:column;
  align-items:center;
  height:100vh;
  overflow-x:hidden;
}

/* ✅ FIX: display:1 1 auto; war ungültig */
#main-container{
  flex: 1 1 auto;
  width:100%;
  max-width:3840px;
  height: auto;
  overflow: inherit;
  box-sizing:border-box;
  min-height: 0;
  will-change: transform;
}

/* Kalender */
#calendar-container{
  flex:1;
  height: 100%;
  min-height: 0;
  padding: 20px 10px 20px 10px;
  box-sizing:border-box;
}

#calendar{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  height:100%;
  box-sizing:border-box;
  min-height: 0;
}

.week-row{
  display:flex;
  justify-content: center;
  width:100%;
  margin-bottom:0px;
  flex: 1 1 0;
  align-items: stretch;
}

.week-row + .week-row{
  margin-top:0px;          /* nur zwischen Reihe 1 und 2 Abstand */
}

.day{
  border-radius:8px;
  margin:5px;
  padding:10px;
  box-sizing:border-box;
  display:flex;
  overflow:hidden;
  background:rgba(255,255,255,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  flex-direction:column;
  height: 100%;
}

.day.sunday{
  background:rgba(160,160,160,0.55) !important;
}

.day:hover{
  transform: scale(1.02);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.today{
  border:5px solid #0078D7;
  animation:pulse-bg-scale 3s infinite;
}

@keyframes pulse-bg-scale{
  0%{transform:scale(1);}
  50%{transform:scale(1.02);}
  100%{transform:scale(1);}
}

.day-content{
  width:100%;
  display:flex;
  flex-direction:column;
  height:100%;
  font-size: 1.1em;
}

.day-header{
  font-weight:bold;
  font-size:1.5em;
  margin-bottom:5px;
  text-align:center;
}

.events{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  flex-grow:1;
  overflow:hidden;
  min-height:0;
}

.event{
  border-radius:2px;
  padding:6px 8px;
  margin:2px 0;
  background:rgba(255,255,255,0.85);
  display:flex;
  flex-direction:column;
  font-size:1.2em;
  flex-shrink:1;
  min-height:0;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:normal;
}

.event.no-event{
  background:rgba(255,255,255,0.85);
  color:#000;
}

/* ==== Titelzeilen (Zeit + Produktion) ==== */
.event-title{
  font-size:1em;
  font-weight:bold;
  line-height:0.9em;
  padding-bottom: 3px;

  /* ✅ stabil 1 Zeile */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* ✅ alte Clamp-Settings neutralisieren */
  display:block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}

.event-title.time{
  font-weight:bold;
  padding-bottom: 2px;
}

.event-title.production{
  font-weight:bold;
  padding-bottom: 5px;
}

.notes{
  font-size:1.05em;
  color:#333;
  margin-top:2px;
  white-space:pre-line;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-height:1.15;
}

.active-event{
  background-color:rgba(0,120,215,0.85);
  color:#fff;
  font-weight:bold;
  transform:scale(1.03);
  transition:transform 0.2s, background-color 0.2s;
  animation: glow 1.5s infinite alternate;
}

@keyframes glow{
  0%{box-shadow:0 0 5px rgba(0,120,215,0.5);}
  100%{box-shadow:0 0 20px rgba(0,120,215,1);}
}

/* Schrift verkleinern, wenn viele Events */
.day[data-event-count="3"] .event{ font-size:0.98em; }
.day[data-event-count="4"] .event{ font-size:0.92em; }
.day[data-event-count="5"] .event{ font-size:0.86em; }
.day[data-event-count="6"] .event{ font-size:0.82em; }

/* ===== Namenlayout (nur wenn >=3 Events am Tag; JS steuert das) ===== */
.names-row{
  display:flex;
  gap: 14px;
  margin-top: 6px;
}

.names-col{
  flex: 1 1 0;
  text-align: left;
}

.name{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15em;
}

.name::before{
  content: "- ";
}

.name.more{
  font-weight: 800;
  opacity: 0.9;
}

/* Footer */
#info-footer{
  width:100%;
  max-width:3840px;
  min-height:48px;      /* harte Untergrenze */
  margin-top:auto;
  padding:4px 14px;
  background:#1e293b;
  color:white;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  border-top:4px solid #0078D7;
  gap:22px;
}

#footer-logo{
  height: 55px;
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

#footer-middle{
  flex:1;
  display:flex;
  align-items:center;
  overflow:hidden;
  gap:28px;
  min-width:0;
}

#ticker-wrap{
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  min-width:0;
}

#ticker{
  display:inline-block;
  white-space:nowrap;
  padding-left:100%;
  animation:ticker 45s linear infinite;
  font-size:1.5em;
  font-weight:normal;
}

@keyframes ticker{
  0% { transform:translateX(0); }
  100% { transform:translateX(-100%); }
}

#footer-weather{
  margin-left:auto;
  margin-right:5%;
  white-space:nowrap;
  font-size:1.5em;
  font-weight:bold;
}

#footer-clock{
  font-weight:bold;
  font-size:1.6em;
  text-align:right;
  min-width:140px;
}

/* Nachtmodus: gedimmt */
body.night-mode{
  background:#0b1220;
  color:#e5e7eb;
}

body.night-mode #quote-banner{
  background:rgba(15,23,42,0.65);
  color:#e5e7eb;
}

body.night-mode .day{
  background:rgba(30,41,59,0.55) !important;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  filter:saturate(0.85) brightness(0.95);
}

body.night-mode .event{
  background:rgba(255,255,255,0.06) !important;
  color:#f8fafc;
}

body.night-mode .active-event{
  background-color:rgba(59,130,246,0.55) !important;
}

body.night-mode #info-footer{
  background:#0f1b2e;
  border-top-color:#3b82f6;
}

/* ===== LED / Tramli Schrift ===== */
.ov-box,
.ov-row,
.ov-min,
.ov-line,
.ov-dest,
.ov-sub {
  font-family: 'VT323', monospace;
}

/* === TV-sicher: Main-Content passt sich Footer an === */
#main-container{
  height: calc(100vh - 48px); /* exakt Footer-Höhe */
  overflow: hidden;
}
