/* Statusmonitor – Vollbild, dunkles Theme, große Typo */
/* Monitor-spezifisch: Scrollbars ausblenden und dunkler Hintergrund */
html { height:100%; overflow:hidden !important; scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; display:none; }
body.statusboard-page { background:var(--sm-bg, #222) !important; color:var(--sm-fg, #fff); margin:0; overflow:hidden !important; overscroll-behavior:none; }
/* Stabile, serifenlose Schrift für den Monitor */
body.statusboard-page, .statusboard, .statusboard *{
  font-family: var(--sm-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif) !important;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums tabular-nums;
}
/* Stabilize layout sizing inside the statusboard */
.statusboard, .statusboard *, .statusboard *::before, .statusboard *::after{
  box-sizing: border-box; min-width: 0; max-width: 100%;
}
/* Verhindere generische Cookie-Banner auf der Monitor-Seite */
html [class*="cookie" i], html [id*="cookie" i]{ display:none !important; visibility:hidden !important; }
body.statusboard-page #wpadminbar{ display:none !important; }

.statusboard{ position:fixed; inset:0; display:grid; place-items:center; --sm-liquid-speed:4s; }
.statusboard__fit{ will-change:transform; position:relative; z-index:1; max-width:100vw; max-height:100vh; overflow:hidden; }
.statusboard__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-position:center center; background-repeat:no-repeat; background-size:cover;
  filter: grayscale(var(--bg-gray, 100%)) blur(var(--bg-blur, 12px));
  opacity: var(--bg-opacity, .18);
  transform: scale(1.05); /* Kanten nach Blur auffüllen */
}
.statusboard__bg::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 35%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
}
.statusboard__wrap{
  display:grid;
  grid-template-rows: minmax(0,1fr) auto;
  align-items: stretch;
  justify-items: center;
  align-content: stretch;
  row-gap:clamp(8px, 2.6vmin, 36px);
  padding:clamp(6px, 2.6vmin, 32px) clamp(10px, 4vmin, 56px) 0;
  max-width:100vw; max-height:100vh;
  min-height: clamp(220px, 80vmin, 100vh);
  width:100vw; /* Karte unten soll volle Breite nutzen */
}
.statusboard__title{
  display:none !important; /* Titel ausgeblendet zugunsten der Zahl */
}
.statusboard__count{
  font-weight:800; line-height:1; text-align:center;
  /* Größere Anzeige der Zahl */
  font-size:clamp(64px, 28vmin, 420px);
  text-shadow:0 6px 32px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
}
.statusboard__last{
  position:relative;
  isolation:isolate; /* keep glass layers clipped inside the card */
  width:100%; max-width:95vw;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 48%, rgba(255,255,255,.18) 100%);
  border:1px solid rgba(255,255,255,.26);
  border-radius:18px;
  box-shadow:0 20px 48px rgba(0,0,0,.32), 0 0 32px rgba(var(--sm-accent-rgb, 170,210,255), .18), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 10px 20px rgba(255,255,255,.06);
  padding:clamp(10px, 1.6vh, 22px) clamp(14px, 3vw, 36px);
  display:grid; gap:clamp(4px, 0.8vh, 12px);
  align-self: end;
  max-height: clamp(84px, 42vh, 340px);
  overflow: hidden;
  justify-self: stretch; /* immer volle Breite der Spalte */
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.statusboard__last::before{
  content:"";
  position:absolute;
  inset:-34% 28% 6% -26%;
  border-radius:inherit;
  background: radial-gradient(160% 120% at 18% 20%, rgba(255,255,255,.26), transparent 55%);
  opacity:.55;
  transform: rotate(-8deg);
  z-index:0;
  pointer-events:none;
}
.statusboard__last::after{
  content:"";
  position:absolute;
  inset:-18% -24% -32% -12%;
  border-radius:inherit;
  background:none;
  opacity:0;
  mix-blend-mode:normal;
  animation: none; /* keep static */
  z-index:0;
  pointer-events:none;
}
.statusboard__last > *{
  position:relative;
  z-index:1;
}
@keyframes smLiquidGlass{
  0%{ transform: translate(-4%, -2%) rotate(-2deg); }
  45%{ transform: translate(6%, 3%) rotate(2deg); }
  100%{ transform: translate(-3%, 4%) rotate(-1deg); }
}
.statusboard__label{ font-size:clamp(12px, 2.2vmin, 18px); color:var(--sm-muted, #ddd); line-height:1.2; }
.statusboard__headline{ font-size:clamp(16px, 7vmin, 40px); font-weight:800; line-height:1.12; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.statusboard__meta{ font-size:clamp(12px, 4.5vmin, 26px); opacity:.95; line-height:1.2; }
.statusboard__sub{ font-size:clamp(11px, 4vmin, 22px); color:var(--sm-sub, #e7e7e7); line-height:1.2; }
.statusboard__stamp{ display:none !important; /* Stand-Zeile ausgeblendet */ }

/* Fokus & Auswahl sichtbar auf dunklem Hintergrund */
.statusboard :focus{ outline:2px solid rgba(255,255,255,.6); outline-offset:2px }
::selection{ background:rgba(var(--sm-accent-rgb, 200,16,46), .8); color:var(--sm-fg, #fff) }

/* Kompakt bei sehr kleinen Fenstern (z. B. 400x300) */
@media (max-width: 420px), (max-height: 360px){
  .statusboard{ place-items:start center; }
  .statusboard__wrap{ grid-template-rows:minmax(0,1fr) auto; row-gap:4px; padding:4px 6px 0; }
  .statusboard__last{ padding:6px 8px; border-radius:12px; max-height: 44vh; }
  .statusboard__stamp{ margin-top:0 }
  .statusboard__title{ font-size:clamp(12px, 5vmin, 22px); }
  .statusboard__count{ font-size:clamp(40px, 24vmin, 180px); }
  .statusboard__headline{ font-size:clamp(14px, 6.5vmin, 24px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Extra tiny viewports: reduzieren Metainfos, damit Karte klein bleibt */
@media (max-height: 280px), (max-width: 340px){
  .statusboard__label{ display:none; }
  .statusboard__last{ padding:6px 8px; max-height: 46vh; }
}

/* Ultra-small fallback for extremely tiny screens */
@media (max-width: 240px), (max-height: 180px){
  .statusboard{ place-items:start center; }
  .statusboard__wrap{ gap:2px; padding:2px 4px; }
  .statusboard__title, .statusboard__label{ display:none; }
  .statusboard__count{ font-size:clamp(28px, 24vmin, 100px); }
  .statusboard__headline{ font-size:clamp(12px, 5.8vw, 18px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .statusboard__stamp{ font-size:clamp(10px, 2.8vw, 12px); }
}

/* Micro screens under 200px width or 150px height */
@media (max-width: 200px), (max-height: 150px){
  .statusboard__meta{ display:none; }
  .statusboard__wrap{ gap:1px; padding:2px 3px; }
  .statusboard__last{ padding:2px 3px; border-radius:6px; }
  .statusboard__count{ font-size:clamp(16px, 20vmin, 72px); }
  .statusboard__headline{ font-size:clamp(10px, 5vmin, 14px); }
  .statusboard__stamp{ font-size:clamp(8px, 2.5vmin, 10px); }
}