@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/fonts/SourceSansPro.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url("assets/fonts/SourceSansPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg1:#f4f1fb;
  --bg2:#efeaf7;
  --card:#ffffffcc;
  --card2:#ffffffb3;
  --stroke:#d7cfee;
  --text:#2a2436;
  --muted:#5b5468;
  --purple:#7c4dff;
  --shadow: 0 12px 30px rgba(26, 18, 46, .10);
  --radius: 22px;
  --head-h: 60px;
  --screen-scale: 1;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  font-family:"Source Sans Pro",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 12% 10%, #e7ddff 0%, transparent 55%),
    radial-gradient(1000px 700px at 88% 20%, #d9e7ff 0%, transparent 55%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
}

.screen{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 26px;
}

/* ---------- Topbar ---------- */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border:1px solid var(--stroke);
  border-radius: 24px;
  background: linear-gradient(180deg,#ffffffb8,#ffffff8f);
  box-shadow: var(--shadow);
}

.qr-hint{
  font-weight:700;
  color:black;
  font-size:24px;
  line-height:1.2;
  max-width:240px;
  text-align:right;
}

.top-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.qr-code{
  width:140px;
  height:140px;
  object-fit:contain;
  border-radius:14px;
  box-shadow:0 10px 22px rgba(26,18,46,.15);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.logo{
  width:200px;
  height:140px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--stroke);
  box-shadow:0 10px 18px rgba(26,18,46,.10);
  object-fit:contain;
  padding:9px;
}

.brand-title,
.brand-subtitle{
  font-weight:700;
  font-size:36px;
  letter-spacing:.2px;
  line-height:1.1;
}

.clock{ text-align:right; }
.clock-date{ font-size:24px; color:var(--muted); font-weight:400; }
.clock-time{ font-size:36px; font-weight:700; letter-spacing:.6px; }

/* ---------- Empty ---------- */

.empty-state{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.empty-card{
  border:1px solid var(--stroke);
  border-radius:24px;
  background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:var(--shadow);
  padding:42px 48px;
}
.empty-title{
  font-size:44px;
  font-weight:700;
}

/* ---------- Grid / Panels ---------- */

.grid{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  min-height:0;
}

.panel{
  border:1px solid var(--stroke);
  border-radius:24px;
  background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.panel-head{
  min-height:var(--head-h);
  height:auto;
  padding:12px 18px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border-bottom:1px solid var(--stroke);
}

.panel-title{
  font-size:28px;
  font-weight:700;
  white-space:nowrap;
  display:none;
}

.panel-body{
  padding:18px 20px 20px;
  overflow:hidden;
  min-height:0;
}

.title{
  font-size: calc(34px * var(--screen-scale));
  /* font-size:34px; */
  font-weight:700;
  margin:12px 0 10px;
  line-height:1.15;
}

.text{
  font-size: calc(18px * var(--screen-scale));
  /* font-size:18px; */
  line-height:1.5;
  margin:0;
}

.text a{
  display:inline-block;
  margin-top:6px;
  color:#5b3df5;
  font-weight:600;
  text-decoration:none;
  border-radius:10px;
  padding:4px 8px;
  background:rgba(91,61,245,.08);
  border:1px solid rgba(91,61,245,.25);
  transition:.15s;
  word-break: break-word;
}
.text a:hover{
  background:rgba(91,61,245,.16);
  border-color:#5b3df5;
}

.meta{
  display:inline-flex;
  width:fit-content;
  max-width:100%;
  align-items:center;
  font-size:16px;
  font-weight:600;
  padding:6px 14px;
  border-radius:999px;
  white-space:nowrap;
  background: var(--chip-bg, rgba(124,77,255,.08));
  box-shadow: inset 0 0 0 1px var(--chip-border, rgba(124,77,255,.25));
}

/* ---------- Right tools / pager / timer ---------- */

.right-tools{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

.pager{
  display:flex;
  gap:8px;
  flex:0 0 auto;
  min-width:0;
  justify-content:flex-end;
  align-items:center;
}

.pager .dot{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  border:1px solid var(--stroke);
  background:#fff9;
  font-weight:700;
  border-radius:999px;
  flex:0 0 auto;
  cursor:pointer;
  user-select:none;
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  outline:none;
}

.pager .dot:hover{ border-color: rgba(124,77,255,.35); }
.pager .dot:active{ transform: scale(0.98); }

.pager .dot.active{
  border-color: rgba(124,77,255,.45);
  background:linear-gradient(180deg,rgba(124,77,255,.22),rgba(167,139,250,.18));
  color:#2d1a63;
}

.pager .dot.ellipsis{
  border:none;
  background:transparent;
  box-shadow:none;
  opacity:.7;
  cursor:default;
}

.more-ellipsis{
  display:inline;
  margin-left:4px;
  padding:0 6px;

  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.35);

  color:var(--muted);
  font: inherit;
  font-weight:600;
  line-height:1;

  cursor:pointer;
  user-select:none;

  transition: opacity .15s, background .15s, border-color .15s;
  opacity:.8;
}

.more-ellipsis:hover{
  opacity:1;
  background:rgba(124,77,255,.10);
  border-color: rgba(124,77,255,.22);
  color:#2d1a63;
}

.more-ellipsis:active{
  transform: scale(0.98);
}

/* Timer */
.timer{
  flex:1 1 auto;
  min-width:0;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}

.timer-label{ font-size:12px; color:var(--muted); font-weight:400; }
.timer-row{ display:flex; align-items:baseline; gap:6px; margin-top:4px; }
.timer-num{ font-size:22px; font-weight:700; letter-spacing:.4px; }
.timer-unit{ font-size:14px; color:var(--muted); font-weight:400; }

/* Countdown default aus */
.timer-label,
.timer-row{ display:none; }

.timer-bottom{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.progress{
  margin-top:8px;
  height:11px;
  background:#ebe6f7;
  border-radius:999px;
  overflow:hidden;
}
.timer-bottom .progress{
  flex:1 1 auto;
  margin-top:0;
}

.progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,rgba(124,77,255,.60),rgba(167,139,250,.55));
  transition: width 140ms linear;
  will-change: width;
}

@keyframes progressGlow {
  0%   { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
  40%  { box-shadow: inset 0 0 20px rgba(255,255,255,.55); }
  100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
}
.progress-bar.glow{ animation: progressGlow 1000ms ease-out; }

.pause-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(124,77,255,.25);
  background: rgba(124,77,255,.10);
  color:#2d1a63;
  font-size:16px;
  font-weight:700;
  font-family: inherit;
  line-height:1;
  cursor:pointer;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color: transparent;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform: translateY(2px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.pause-toggle .icon{
  width:20px;
  height:20px;
  fill: currentColor;
  display:block;
}

.pause-toggle:focus,
.pause-toggle:focus-visible{ outline:none; box-shadow:none; }

.pause-toggle.is-paused{ background: rgba(124,77,255,.18); }

.pause-toggle .icon-play{ display:none; }
.pause-toggle .icon-pause{ display:block; }
.pause-toggle.is-paused .icon-play{ display:block; }
.pause-toggle.is-paused .icon-pause{ display:none; }
.pause-toggle:active{ transform: scale(0.98); }

.panel-head-right{
  flex-wrap:wrap;
  align-items:flex-start;
}
.panel-head-right .panel-title{
  flex:0 1 auto;
  white-space:normal;
}
.panel-head-right .right-tools{
  flex:1 1 420px;
  justify-content:flex-end;
}
.panel-head-right .pager{ flex-wrap:wrap; }

/* ---------- Floating bubbles ---------- */

.fab-bubble{
  width:20px;
  height:20px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  line-height:1;
  box-sizing:border-box;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(0,0,0,.08);
  opacity:.55;
  z-index:999;
  text-decoration:none;
}
.fab-bubble:hover{ opacity:.9; }

.imprint-link{
  position:fixed;
  right:10px;
  left:auto;
  bottom:10px;

  width:auto;
  min-width:auto;
  height:auto;
  padding:6px 12px;

  border-radius:999px;

  font-size:12px;
  font-weight:700;
  font-family: system-ui, sans-serif;
  color:var(--muted);
  text-decoration:none;

  background:white;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);

  opacity:1;
  z-index:999;
}

.imprint-link:hover{
  opacity:1;
  background:rgba(255,255,255);
}

.imprint-link.fab-bubble{
  width:auto;
  height:auto;
}

.usermode-link{
  position:fixed;
  left:10px;
  right:auto;
  bottom:10px;
}

.usermode-icon{
  width:14px;
  height:14px;
  display:block;
  fill:var(--muted);
}

body.user-mode .usermode-link{
  opacity:.95;
  background:rgba(124,77,255,.14);
  border-color: rgba(124,77,255,.30);
}


body.single-item .panel-left .title{
  font-size: 47.6px;  
}

body.single-item .panel-left .text{
  font-size: 29px;
  line-height: 1.55;
}

/* ---------- Mobile ---------- */

@media (max-width:900px){
  html, body{
    height:auto;
    overflow:auto;
    background: linear-gradient(135deg, var(--bg1), var(--bg2)) !important;
  }

  .screen{
    padding:14px;
    gap:12px;
    height:auto;
    min-height:100vh;
  }

  .topbar{
    padding:10px 12px;
    border-radius:18px;
    flex-wrap:wrap;
    gap:10px;
  }

  .top-right{
    flex:0 0 auto;
    margin-left:auto;
  }

  .brand{
    gap:8px;
    min-width:0;
    flex:1 1 auto;
  }

  .logo{
    width:130px;
    height:70px;
    padding:9px;
    border-radius:16px;
  }

  .brand-title,
  .brand-subtitle{
    font-size: calc(16px * var(--screen-scale));
    /* font-size:16px; */
    line-height:1.15;
  }

  .clock-date{ font-size: calc(12px * var(--screen-scale)); }
  .clock-time{ font-size: calc(20px * var(--screen-scale)); }

  .grid{
    grid-template-columns:1fr !important;
    gap:12px;
    flex:0 0 auto;
  }

  .panel-head{
    height:auto;
    padding:12px 14px;
    display:none;
  }

  .panel-body{
    padding:14px;
    overflow:visible;
  }

  .title{
    font-size:22px;
    margin:10px 0 8px;
  }

  .text{
    font-size:14px;
    line-height:1.5;
  }

  body.single-item .panel-left .title{
    font-size:22px;
    margin:8px 0 6px;
  }

  body.single-item .panel-left .text{
    font-size:14px;
    line-height:1.45;
  }

  .meta{
    font-size:13px;
    padding:6px 12px;
    margin-bottom:10px;
  }

  .right-tools{
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }

  .pager{
    gap:6px;
    width:246px;
    justify-content:center !important;
  }

  .pager .dot{
    width:30px;
    height:30px;
    font-size:13px;
  }
  .pager .dot.ellipsis{ width:30px; }

  .timer{
    flex:1 1 100%;
    min-width:0;
    padding:8px 10px;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .pause-toggle{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }

  .timer-bottom{
    width:100%;
    flex:1 1 100%;
    margin-top:0;
  }

  .timer-bottom .progress{
    min-width:60px;
  }

  .qr-code{ display:none; }
  .qr-hint{ display:none; }

  .panel-head-right{
    flex-wrap:wrap;
    align-items:flex-start;
    display:flex;
  }

  .panel-head-right .panel-title{
    flex:1 1 100%;
    white-space:normal;
    line-height:1.15;
  }

  .panel-head-right .right-tools{
    flex:1 1 100%;
    justify-content:center;
  }

  /* Mobile Performance */
  .topbar,
  .panel,
  .logo,
  .qr-code,
  .empty-card{
    box-shadow:none !important;
  }

  .panel, .topbar { contain: paint; }
  .imprint-link { transform: translateZ(0); }

  .panel-head-right:not(:has(#right-tools:not([style*="display: none"]))) {
    display:none !important;
  }

  .usermode-link{ display:none !important; }
    .pager.is-left{
    width: 100% !important;
    justify-content:flex-start !important;
  }
}

@media (max-width:480px){
  .topbar{ align-items:flex-start; }
  .clock{ text-align:right; }
  .logo{
    width: min(52vw, 160px);
    height:auto;
  }
}

/* ---------- TV / Desktop ---------- */

@media (min-width:901px){
  :root{
    --shadow: 0 16.8px 42px rgba(26, 18, 46, .10);
    --radius: 24px;
    --head-h: 60px;
  }

  html,body{
    background:
      radial-gradient(1680px 1120px at 12% 10%, #e7ddff 0%, transparent 55%),
      radial-gradient(1400px 980px at 88% 20%, #CCF2FF 0%, transparent 55%),
      linear-gradient(135deg, var(--bg1), var(--bg2));
  }

  .screen{
    gap:8px;
    padding:10px 10px;
  }

  .topbar{
    padding:18px 18px;
    border-width:1.4px;
    border-radius: 24px;
  }

  .top-right{ gap:19.6px; }
  .brand{ gap:14px; }

  .qr-code{
    width:196px;
    height:196px;
    border-radius:24px;
    box-shadow:0 14px 30.8px rgba(26,18,46,.15);
  }

  .logo{
    width:280px;
    height:196px;
    border-radius:24px;
    border-width:1.4px;
    box-shadow:0 14px 25.2px rgba(26,18,46,.10);
    padding:9px;
  }

  .brand-title,
  .brand-subtitle{ font-size: calc(50.4px * var(--screen-scale)); }

  .clock-date{ font-size: calc(33.6px * var(--screen-scale)); }
  .clock-time{ font-size: calc(50.4px * var(--screen-scale)); }

  .empty-card{
    border-width:1.4px;
    padding:58.8px 67.2px;
  }
  .empty-title{ font-size:61.6px; }

  .grid{ gap:12px; }

  .panel{ border-width:1.4px; }

  .panel-head{
    padding:22.4px 25.2px;
    gap:19.6px;
    border-bottom-width:1.4px;
  }

  .panel-title{ font-size:39.2px; }

  .panel-body{ padding:25.2px 28px 28px; }

  .title{
    /* font-size:54px; */
    font-size: calc(47.6px * var(--screen-scale));
    margin:16.8px 0 14px;
  }

  .text{ font-size: calc(29px * var(--screen-scale)); }

  /* .text{ font-size:25.2px; } */

  .text a{
    margin-top:8.4px;
    border-radius:14px;
    padding:5.6px 11.2px;
    border-width:1.4px;
  }

  .meta{
    font-size: calc(22.4px * var(--screen-scale));
    padding:8.4px 19.6px;
    box-shadow: inset 0 0 0 1.4px var(--chip-border, rgba(124,77,255,.25));
  }

  .right-tools{ gap:19.6px; }

  .pager{
    gap:11.2px;
    width:400.4px;
    justify-content:center;
  }

  .pager .dot{
    width:47.6px;
    height:47.6px;
    border-width:1.4px;
  }
  .pager .dot.ellipsis{ width:47.6px; }

  .progress{
    margin-top:11.2px;
    height:15.4px;
  }

  @keyframes progressGlow {
    0%   { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
    40%  { box-shadow: inset 0 0 28px rgba(255,255,255,.55); }
    100% { box-shadow: inset 0 0 0 rgba(255,255,255,0); }
  }

  .pause-toggle{
    width:47.6px;
    height:47.6px;
    border-width:1.4px;
    font-size:22.4px;
  }
  .pause-toggle .icon{
    width:28px;
    height:28px;
  }

  .panel-head-right .right-tools{
    flex: 1 1 588px;
  }

  .fab-bubble{
    width:28px;
    height:28px;
    border-width:1.4px;
  }
  .imprint-link{
    right:14px;
    bottom:14px;
    font-size:16px;
    padding:8px 16px;
    border-width:1.4px;
  }
  .usermode-link{
    left:14px;
    bottom:14px;
  }
  .usermode-icon{ width:18px; height:18px; }

  .grid:has(#right-tools[style*="display: none"]) .panel-left .panel-head,
  .grid:has(#right-tools[style*="display: none"]) .panel-right .panel-head{
    display:none !important;
  }

  body.user-mode .pause-toggle{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
  }

  body.user-mode .timer-label,
  body.user-mode .timer-row{ display:none !important; }

  body.user-mode .panel-body{
    overflow:auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.user-mode) .panel-body{
    overflow:hidden !important;
  }

  /* body.single-item .panel-left .title{ font-size: 54px; }
  body.single-item .panel-left .text{ font-size: 29px; } */

}
/* 
@media (min-width:2200px){
  .screen{
    transform: scale(1.12);
    transform-origin: top left;
    width: calc(100% / 1.12);
    height: calc(100% / 1.12);
  }
}
@media (min-width:3200px){
  .screen{
    transform: scale(1.22);
    width: calc(100% / 1.22);
    height: calc(100% / 1.22);
  }

} */
.pager.is-left{
  justify-content:flex-start !important;}