*{box-sizing:border-box}body{margin:0;background:#0b0c0f;color:#f7f3ed;font-family:Arial,sans-serif;overflow:hidden}.shell{height:100vh;padding:3vh 3vw;display:grid;grid-template-rows:auto auto 1fr auto;gap:2vh}header{display:flex;justify-content:space-between;align-items:center}.brand{font-size:3.5vw;font-weight:900}.gold{color:#f2b84b;font-size:.8vw;font-weight:bold;letter-spacing:.15em}.clock{text-align:right}.clock b{font-size:3vw;display:block}.clock span{color:#999}main{display:grid;grid-template-columns:1.65fr 1fr;gap:1.4vw}.card{background:#15171c;border:1px solid #2b2e35;border-radius:1.2vw;padding:2vw}aside{display:grid;grid-template-rows:.7fr 1.4fr;gap:1.4vw}h1{font-size:2.2vw}.dep{display:grid;grid-template-columns:4vw 1fr auto;border-top:1px solid #2b2e35;padding:.65vw 0;align-items:center}.badge{background:#f2b84b;color:#111;font-weight:bold;padding:.4vw;border-radius:.4vw;text-align:center;width:3.3vw}.dest,.event b{font-size:1.1vw}.small{color:#999;font-size:.7vw}.mins{font-size:1.4vw;font-weight:bold}.temp{font-size:4vw;font-weight:bold;margin:.5vw 0}.event{border-top:1px solid #2b2e35;padding:.7vw 0}.notice{background:#f2b84b;color:#111;text-align:center;padding:.7vw;border-radius:.6vw;font-weight:bold}footer{display:flex;justify-content:space-between;color:#999;font-size:.75vw}.admin{position:fixed;right:.5vw;bottom:.3vw;color:#444;text-decoration:none}

/* V2.2.2 – proportions optimized for 16:9 signage */
main{
  grid-template-columns:minmax(0,1.45fr) minmax(390px,1fr);
  align-items:stretch;
}
main>section.card{
  min-width:0;
}
main>aside{
  min-width:0;
  display:grid;
  grid-template-rows:0.72fr 1.28fr;
  gap:1.2vw;
}
main>aside>.card{
  min-height:0;
  overflow:hidden;
}
main>aside>.card:last-child{
  padding:1.35vw 1.45vw;
}
main>aside>.card:last-child .gold{
  margin-bottom:.45vh;
}
#deps{
  overflow:hidden;
}
#deps .dep{
  padding:.52vh 0;
  grid-template-columns:3vw minmax(0,1fr) auto;
  gap:.55vw;
}
#deps .dest{
  font-size:.92vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#deps .stop{
  font-size:.60vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#deps .mins{
  font-size:1vw;
}
main>section.card #events{
  max-width:100%;
}
@media (min-aspect-ratio:16/10){
  main{height:73vh}
}


/* V2.2.3 – viewport-safe layout: bottom edges always remain visible */
.shell{
  height:100dvh;
  min-height:0;
  padding:clamp(14px,2.2vh,28px) clamp(18px,3vw,46px);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:clamp(8px,1.25vh,16px);
  overflow:hidden;
}
main{
  height:auto !important;
  min-height:0;
  overflow:hidden;
  grid-template-columns:minmax(0,1.45fr) minmax(340px,1fr);
  gap:clamp(10px,1.2vw,20px);
}
main>section.card,
main>aside,
main>aside>.card{
  min-height:0;
}
main>aside{
  height:100%;
  grid-template-rows:minmax(118px,.48fr) minmax(0,1.52fr);
  gap:clamp(10px,1.2vw,20px);
}
.card{
  padding:clamp(14px,1.55vw,26px);
  border-radius:clamp(10px,1.2vw,20px);
}
main>aside>.card:first-child{
  padding:clamp(13px,1.35vw,22px);
}
main>aside>.card:last-child{
  padding:clamp(11px,1.25vw,20px);
  overflow:hidden;
}
.temp{
  font-size:clamp(34px,3.5vw,58px);
  margin:clamp(3px,.3vw,7px) 0;
}
#deps .dep{
  padding:clamp(4px,.42vh,7px) 0;
}
#deps .dest{
  font-size:clamp(12px,.88vw,17px);
}
#deps .stop{
  font-size:clamp(8px,.57vw,11px);
}
#deps .mins{
  font-size:clamp(13px,.95vw,19px);
}
footer{
  min-height:0;
  line-height:1;
}
@media (max-height:800px){
  .shell{padding-top:12px;padding-bottom:10px;gap:8px}
  main>aside{grid-template-rows:minmax(100px,.40fr) minmax(0,1.60fr);gap:9px}
  .card{padding:12px}
  #deps .dep{padding:3px 0}
}
@media (max-height:650px){
  main>aside{grid-template-rows:minmax(86px,.34fr) minmax(0,1.66fr)}
  .temp{font-size:32px}
  #deps .stop{font-size:8px}
}


/* V2.2.4 – content placement: departures left, events right */
main>section.card #deps .dep{
  padding:clamp(6px,.7vh,11px) 0;
}
main>section.card #deps .dest{
  font-size:clamp(14px,1.15vw,22px);
}
main>section.card #deps .stop{
  font-size:clamp(9px,.68vw,13px);
}
main>section.card #deps .mins{
  font-size:clamp(15px,1.15vw,22px);
}
main>aside #events{
  overflow:hidden;
}


/* =========================================================
   V2.2.5 – fully responsive signage layer
   Goal: the complete dashboard always fits into the viewport.
   ========================================================= */

html,body{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

body{
  font-size:clamp(9px, calc(.45vw + .45vh), 18px);
}

.shell{
  width:100vw;
  height:100vh;
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  padding:clamp(8px,2vmin,30px) clamp(10px,2.5vmin,42px);
  display:grid;
  grid-template-rows:minmax(58px,auto) minmax(0,1fr);
  gap:clamp(7px,1.3vmin,18px);
  overflow:hidden;
}

header{
  height:auto !important;
  min-height:0;
  align-items:start;
}

.brand{
  font-size:clamp(26px,3.8vmin,66px);
  line-height:.92;
}
.tag,.gold{
  font-size:clamp(8px,1.05vmin,15px);
}
.clock{
  font-size:clamp(24px,3.4vmin,54px);
  line-height:.95;
}
.clock small{
  font-size:clamp(8px,1.05vmin,14px);
  margin-top:.45em;
}

main{
  width:100%;
  height:100% !important;
  min-height:0;
  max-height:100%;
  display:grid;
  grid-template-columns:minmax(0,1.48fr) minmax(0,1fr);
  gap:clamp(8px,1.4vmin,20px);
  overflow:hidden;
}

main>section.card,
main>aside,
main>aside>.card{
  min-width:0;
  min-height:0;
  max-height:100%;
}

main>aside{
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(8px,1.4vmin,20px);
  overflow:hidden;
}

.card{
  padding:clamp(10px,1.7vmin,25px);
  border-radius:clamp(9px,1.3vmin,20px);
  overflow:hidden;
}

h1{
  font-size:clamp(19px,2.7vmin,40px);
  line-height:1.05;
  margin:clamp(5px,.8vmin,12px) 0 clamp(7px,1.2vmin,18px);
}

.temp{
  font-size:clamp(30px,5.2vmin,70px);
  line-height:.95;
  margin:clamp(3px,.5vmin,8px) 0;
}

#weather{
  font-size:clamp(9px,1.15vmin,16px);
}

/* Departures: scale vertically as well as horizontally */
#deps{
  min-height:0;
  max-height:100%;
  overflow:hidden;
}
#deps .dep{
  min-height:0;
  padding:clamp(3px,.58vmin,9px) 0 !important;
  grid-template-columns:clamp(28px,4.3vmin,58px) minmax(0,1fr) auto !important;
  gap:clamp(5px,.9vmin,12px) !important;
}
#deps .line{
  font-size:clamp(8px,1.05vmin,14px);
  padding:clamp(3px,.5vmin,7px);
}
#deps .dest{
  font-size:clamp(10px,1.55vmin,20px) !important;
  line-height:1.05;
}
#deps .stop{
  font-size:clamp(7px,.92vmin,12px) !important;
  line-height:1.05;
}
#deps .mins{
  font-size:clamp(10px,1.55vmin,20px) !important;
}

/* Events in the smaller right-hand panel */
#events{
  min-height:0;
  max-height:100%;
  overflow:hidden;
}
#events>div{
  padding-top:clamp(3px,.55vmin,8px);
  padding-bottom:clamp(3px,.55vmin,8px);
}
#events{
  font-size:clamp(8px,1.08vmin,14px);
}

/* Very low-height screens: sacrifice type size before clipping content. */
@media (max-height:800px){
  .shell{padding-top:8px;padding-bottom:8px;gap:7px}
  .brand{font-size:clamp(24px,3.5vmin,44px)}
  h1{font-size:clamp(17px,2.45vmin,30px);margin:4px 0 6px}
  main>aside{grid-template-rows:minmax(0,.36fr) minmax(0,.64fr);gap:8px}
  .card{padding:clamp(8px,1.35vmin,15px)}
  .temp{font-size:clamp(28px,4.7vmin,45px)}
  #deps .dep{padding:2px 0 !important}
  #deps .dest{font-size:clamp(9px,1.35vmin,15px) !important}
  #deps .stop{font-size:clamp(6.5px,.82vmin,10px) !important}
  #deps .mins{font-size:clamp(9px,1.35vmin,15px) !important}
}

@media (max-height:650px){
  .shell{grid-template-rows:minmax(48px,auto) minmax(0,1fr)}
  .tag{display:none}
  main>aside{grid-template-rows:minmax(0,.31fr) minmax(0,.69fr)}
  .gold{font-size:7px}
  .temp{font-size:27px}
  #weather{font-size:8px}
  #deps .dep{padding:1px 0 !important}
}

/* Narrow/portrait fallback: keep everything visible rather than overflow. */
@media (max-width:850px){
  main{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr)}
  .shell{padding-left:8px;padding-right:8px}
}

/* Browser zoom / unusually small kiosk viewport */
@media (max-width:650px){
  body{font-size:8px}
  main{grid-template-columns:minmax(0,1.2fr) minmax(210px,1fr);gap:6px}
  .card{padding:7px}
  #deps .stop{display:none}
}


/* =========================================================
   V2.2.9 – clean MAXIXE brand layer
   IMPORTANT: colors only. Responsive layout remains V2.2.5.
   Exact CTA values supplied from MAXIXE website DevTools.
   ========================================================= */
:root{
  --maxixe-bg:#241d25;
  --maxixe-panel:#302831;
  --maxixe-panel-2:#2b242c;
  --maxixe-text:#fff8f5;
  --maxixe-muted:#cdbfba;
  --maxixe-orange:#ff8a4c;
  --maxixe-pink:#d90467;
  --maxixe-border:rgba(255,248,245,.18);
}

html,body{
  background:var(--maxixe-bg)!important;
  color:var(--maxixe-text)!important;
}

body{
  background:
    radial-gradient(circle at 72% 14%,rgba(217,4,103,.11),transparent 32%),
    linear-gradient(125deg,#211a22 0%,#30252f 58%,#221b24 100%)!important;
}

.card{
  background:linear-gradient(145deg,
    rgba(48,40,49,.90),
    rgba(43,36,44,.90))!important;
  border-color:var(--maxixe-border)!important;
  box-shadow:none!important;
}

.brand,
.clock,
.clock b,
h1,
.temp,
.dest,
.mins,
.event b{
  color:var(--maxixe-text)!important;
}

.gold{
  color:var(--maxixe-orange)!important;
}

.clock span,
.small,
#weather,
footer{
  color:var(--maxixe-muted)!important;
}

/* app.js actually renders route labels with class="badge".
   This is intentionally the only badge override. */
#deps .badge{
  background:#d90467!important;
  border:1px solid #d90467!important;
  color:#fff8f5!important;
  border-radius:999px!important;
  box-shadow:none!important;
}

/* Keep the existing responsive dimensions exactly as they were. */
.dep,
.event{
  border-color:rgba(255,248,245,.14)!important;
}

.notice{
  background:#d90467!important;
  color:#fff8f5!important;
}


/* =========================================================
   V2.2.10 – ÖPNV spacing like the early V2.2 versions
   Everything else stays exactly as in V2.2.9.
   ========================================================= */

/* The JS uses .small for the second line, not .stop.
   This was the reason earlier responsive rules missed that text. */
#deps .dep{
  padding:clamp(8px,.65vw,13px) 0 !important;
  gap:clamp(14px,1.25vw,22px) !important;
  align-items:center !important;
}

#deps .dep > div:nth-child(2){
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(3px,.25vw,5px);
}

#deps .dest{
  font-size:clamp(13px,1.10vw,20px) !important;
  line-height:1.12 !important;
  margin:0 !important;
}

#deps .small{
  font-size:clamp(9px,.70vw,13px) !important;
  line-height:1.18 !important;
  margin:0 !important;
}

#deps .mins{
  font-size:clamp(13px,1.20vw,21px) !important;
  line-height:1 !important;
}

/* Keep the early-V2.2 feeling on shorter screens, but remain responsive. */
@media (max-height:800px){
  #deps .dep{padding:clamp(6px,.55vw,9px) 0 !important}
  #deps .dep > div:nth-child(2){gap:2px}
  #deps .dest{font-size:clamp(11px,1vw,17px) !important}
  #deps .small{font-size:clamp(8px,.64vw,11px) !important}
}
@media (max-height:650px){
  #deps .dep{padding:4px 0 !important}
  #deps .dep > div:nth-child(2){gap:1px}
}

/* V2.2.18 – administrierbarer Header / Logo */
.brandwrap{display:flex;align-items:center;min-width:0;min-height:0}
.brandlogo{display:block;max-width:min(32vw,430px);max-height:clamp(42px,8.5vmin,105px);width:auto;height:auto;object-fit:contain;object-position:left center}
#brandText[hidden],.brandlogo[hidden]{display:none!important}


/* V2.2.20 – fester Abstand zwischen Linien-Bubble und Abfahrtstext
   Die erste Grid-Spalte bleibt responsiv; der Zwischenraum ist bewusst fix. */
#deps .dep{
  column-gap:20px !important;
}
@media (max-width:650px){
  #deps .dep{
    column-gap:16px !important;
  }
}