*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{
  font-family:Arial,Helvetica,sans-serif;
  color:#f8fafc;
  background:
    radial-gradient(circle at 20% 0%,rgba(56,189,248,.18),transparent 35%),
    radial-gradient(circle at 85% 20%,rgba(250,204,21,.12),transparent 28%),
    linear-gradient(160deg,#020617 0%,#0f172a 55%,#111827 100%);
}

/* v2.8: optimeret til 1080x1920 portræt i Chrome fullscreen */
.screen{
  width:100vw;
  height:100vh;
  max-width:1080px;
  max-height:1920px;
  margin:0 auto;
  padding:28px;
  display:grid;
  grid-template-rows:130px 1090px 560px 78px;
  gap:18px;
  overflow:hidden;
}

.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 8px;
  min-height:0;
}
.brand{font-size:42px;font-weight:950;letter-spacing:.02em;line-height:1}
.subtitle{font-size:17px;color:#94a3b8;margin-top:10px;text-transform:uppercase;letter-spacing:.16em}
.topRight{display:flex;align-items:center;gap:16px}
.clockbox{text-align:right;min-width:190px}
#clock{font-size:54px;font-weight:950;line-height:.95}
#date{font-size:18px;color:#cbd5e1;margin-top:8px;text-transform:capitalize}

.weatherBox{
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-radius:22px;
  background:rgba(15,23,42,.68);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  min-width:210px;
}
.weatherIcon{font-size:38px;line-height:1}
.weatherCity{font-size:15px;color:#cbd5e1;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.weatherTemp{font-size:34px;font-weight:950;line-height:1.05}
.weatherMeta{font-size:14px;color:#94a3b8;margin-top:3px;white-space:nowrap}

.card{
  background:rgba(15,23,42,.74);
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  box-shadow:0 26px 60px rgba(0,0,0,.36);
  backdrop-filter:blur(10px);
}

.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:42px;
  min-height:0;
}
.slideContent{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  transition:opacity .45s ease,transform .45s ease;
  min-height:0;
}
.slideContent.fade{opacity:0;transform:translateY(16px)}
.slideContent.image-left{flex-direction:row-reverse}
.slideContent.image-right{flex-direction:row}
.slideContent.image-top{flex-direction:column-reverse}
.slideContent.image-bottom{flex-direction:column}
.slideContent.no-image .slideImageWrap{display:none}
.slideText{flex:1;text-align:center;min-width:0;max-height:100%;overflow:hidden}
.slideContent.image-left .slideText,.slideContent.image-right .slideText{text-align:left}
#slideTitle{
  margin:0 0 28px;
  font-size:30px;
  line-height:1.03;
  font-weight:950;
  letter-spacing:-.04em;
  text-shadow:0 8px 24px rgba(0,0,0,.35);
  max-width:100%;
  overflow-wrap:break-word;
}
#slideBody{
  margin:0 auto;
  font-size:32px;
  line-height:1.25;
  max-width:95%;
  color:#e2e8f0;
  white-space:normal;
  overflow-wrap:break-word;
}
#slideBody ul,#slideBody ol{display:inline-block;text-align:left;margin:.4em auto}
.slideContent.image-left #slideBody,.slideContent.image-right #slideBody{margin-left:0}
.slideImageWrap{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;height:100%}
.slideImageWrap img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:26px;
  box-shadow:0 20px 48px rgba(0,0,0,.35);
  background:rgba(255,255,255,.04);
}

.lower{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  min-height:0;
  overflow:hidden;
}
.panel{padding:28px;min-height:0;overflow:hidden}
.panelTitle{display:flex;align-items:center;gap:12px;font-size:30px;font-weight:950;margin-bottom:22px;line-height:1.05}
.smallLabel{color:#38bdf8;font-size:16px;text-transform:uppercase;letter-spacing:.13em;font-weight:900}
.todayBlock{
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.18);
  border-radius:20px;
  padding:18px;
  margin-bottom:18px;
}
.todayEvents{font-size:24px;margin-top:10px;font-weight:900;line-height:1.2}
.nextLabel{margin-bottom:10px}
.eventItem,.officeItem{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.officeItem{display:block}
.eventDate{
  min-width:72px;
  height:58px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-weight:950;
}
.eventDate .day{font-size:27px;line-height:1}
.eventDate .mon{font-size:13px;color:#cbd5e1;text-transform:uppercase}
.eventTitle,.officeTitle{font-size:24px;font-weight:950;line-height:1.15}
.eventText,.officeText{
  font-size:18px;
  color:#cbd5e1;
  margin-top:5px;
  line-height:1.25;
  overflow-wrap:break-word;
}
.birthday{color:#fde68a}
.officeList,.eventList{overflow:hidden}

.tickerBar{
  min-height:0;
  display:flex;
  align-items:center;
  background:linear-gradient(90deg,#facc15,#f59e0b);
  color:#111827;
  border-radius:22px;
  box-shadow:0 16px 34px rgba(0,0,0,.28);
  overflow:hidden;
  font-weight:950;
}
.tickerIcon{
  font-size:32px;
  padding:0 24px;
  z-index:2;
  background:rgba(255,255,255,.22);
  height:100%;
  display:flex;
  align-items:center;
}
.tickerMask{white-space:nowrap;overflow:hidden;flex:1}
.tickerText{
  display:inline-block;
  padding-left:100%;
  font-size:28px;
  animation:ticker 30s linear infinite;
}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

.connectionStatus{
  position:fixed;
  right:24px;
  bottom:110px;
  background:rgba(239,68,68,.92);
  color:white;
  padding:12px 18px;
  border-radius:14px;
  font-size:16px;
  font-weight:bold;
  display:none;
}
.connectionStatus.show{display:block}

/* Hvis Chrome/Windows rapporterer lidt mindre viewport */
@media (max-height:1850px){
  .screen{padding:22px;grid-template-rows:110px 1fr 510px 70px;gap:14px}
  #slideTitle{font-size:64px}
  #slideBody{font-size:34px}
  .brand{font-size:36px}
  #clock{font-size:46px}
  .panelTitle{font-size:27px}
}
@media (max-width:1000px){
  .screen{padding:20px;gap:14px}
  .weatherBox{min-width:190px;padding:12px 14px}
  #slideTitle{font-size:60px}
  #slideBody{font-size:32px}
}

/* v2.11: finjustering efter test på portrætskærm */
.slideContent.align-top{justify-content:flex-start}
.slideContent.align-center{justify-content:center}
.slideContent.align-bottom{justify-content:flex-end}
.slideContent.image-left.align-top,
.slideContent.image-right.align-top{align-items:flex-start}
.slideContent.image-left.align-center,
.slideContent.image-right.align-center{align-items:center}
.slideContent.image-left.align-bottom,
.slideContent.image-right.align-bottom{align-items:flex-end}
.slideContent.image-top.align-top,
.slideContent.image-bottom.align-top{justify-content:flex-start}
.slideContent.image-top.align-center,
.slideContent.image-bottom.align-center{justify-content:center}
.slideContent.image-top.align-bottom,
.slideContent.image-bottom.align-bottom{justify-content:flex-end}
.weatherBox{min-height:86px}
.clockbox{min-height:86px;display:flex;flex-direction:column;justify-content:center}


/* v2.12: dansk flag ikon til fødselsdage */
.birthday-flag{
    width:24px;
    height:auto;
    vertical-align:middle;
    margin-right:6px;
    transform:translateY(-1px);
}