:root {
  --color-bg: #4b5c6a;          /* dunkler Grundton */
  --color-bg-light: #8498a5;    /* hellerer Grundton */
  --color-accent: #beec81;      /* Akzent (Buttons, Hervorhebung) */
  --color-text: #ffffff;
  --color-text-muted: #e0e6ea;
}

/* Basis */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: var(--color-text);
  background: radial-gradient(circle at top left, #8498a5 0, #4b5c6a 45%, #4b5c6a 100%);
}

/* Buttons */

button {
  font: inherit;
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: var(--color-accent);
  color: #2b3a43;
  transition: background 0.15s, transform 0.1s, box-shadow 0.1s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

button:hover {
  background: #d7f7a7;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

button.secondary {
  background: var(--color-bg-light);
  color: var(--color-text);
}

button.secondary:hover {
  background: #9aacb8;
}

button.danger {
  background: #e57373;
  color: #fff;
}

button.danger:hover {
  background: #ef5350;
}

/* Inputs */

input[type="number"],
input[type="text"],
input[type="file"] {
  font: inherit;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #d0d7de;
  outline: none;
}

input[type="number"]:focus,
input[type="text"]:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(190, 236, 129, 0.4);
}

input[type="checkbox"] {
  transform: scale(1.1);
}

/* Admin-Layout */

.admin-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
  min-height: 100vh;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin-title {
  font-size: 1.4rem;
  font-weight: 600;
}

.admin-header-actions {
  display: flex;
  gap: 8px;
}

.admin-section {
  background: linear-gradient(
    135deg,
    rgba(132, 152, 165, 0.95),
    rgba(75, 92, 106, 0.98)
  );
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.admin-section h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.admin-section p {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.option-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

/* Drop-Zone in Admin */

.drop-zone {
  border: 2px dashed var(--color-accent);
  border-radius: 6px;
  padding: 18px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  background: rgba(75, 92, 106, 0.6);
  transition: background 0.15s, border-color 0.15s;
}

.drop-zone.dragover {
  background: rgba(132, 152, 165, 0.9);
  border-color: #e4ffd0;
}

/* Listen in Admin */

.item-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.item-list li {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: rgba(75, 92, 106, 0.9);
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.item-info-main {
  font-size: 0.9rem;
  word-break: break-all;
}

.item-interval-label {
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.item-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Display-Layout */

.display-container {
  width: 100%;
  height: 100vh;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.display-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(
    135deg,
    rgba(75, 92, 106, 0.95),
    rgba(132, 152, 165, 0.98)
  );
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  margin-bottom: 10px;
}

.display-header-title {
  font-size: 1.3rem;
  font-weight: 600;
}

.display-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}

#displayStatus {
  color: var(--color-text-muted);
}

#dateTime {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Hauptanzeige */

.display-content {
  flex: 1;
  min-height: 0;
  display: flex;
}

.display-frame {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: radial-gradient(circle at top left, #8498a5 0, #4b5c6a 45%, #4b5c6a 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.display-frame-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;     /* Bild/iframe zentrieren */
  justify-content: center;
  background: rgba(0, 0, 0, 0.15); /* leichter Kontrast */
}

/* Bildanzeige: Höhe füllt den Rahmen, Breite flexibel */
.display-frame-inner img {
  height: 100%;
  width: auto;
  max-width: 100%;
  border: none;
  background: transparent;
  object-fit: contain;
}

/* PDF-Anzeige im iframe */
.display-frame-inner iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* Fallback-Text */

#fallbackMessage {
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* Config-Overlay im Display (Drag&Drop für config.json) */

.config-overlay {
  position: fixed;
  inset: 0;
  background: rgba(75, 92, 106, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.config-overlay-inner {
  background: rgba(18, 24, 30, 0.98);
  padding: 16px 20px;
  border-radius: 8px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  font-family: system-ui, sans-serif;
  color: var(--color-text);
}

.config-overlay-inner h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 1.1rem;
}

.config-overlay-inner p {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.config-drop-zone {
  border: 2px dashed var(--color-accent);
  border-radius: 6px;
  padding: 14px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  background: rgba(75, 92, 106, 0.8);
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 8px;
}

.config-drop-zone.dragover {
  background: rgba(132, 152, 165, 0.95);
  border-color: #e4ffd0;
}

.config-error {
  min-height: 1.2em;
  font-size: 0.8rem;
  color: #ffb4b4;
}

/* Kleine Helfer */

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  background: rgba(0,0,0,0.25);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ===== Neue, vereinfachte Admin-Oberfläche ===== */
.admin-page { background:#eef2f5; color:#22313a; min-height:100%; height:auto; }
.admin-page button, .admin-page input { font:inherit; }
.admin-shell { max-width:1180px; margin:0 auto; padding:34px 24px 46px; }
.admin-topbar { display:flex; justify-content:space-between; gap:28px; align-items:flex-start; margin-bottom:24px; }
.eyebrow { font-size:.74rem; font-weight:800; letter-spacing:.15em; color:#657985; margin-bottom:6px; }
.admin-topbar h1 { margin:0; font-size:clamp(1.8rem,4vw,2.55rem); line-height:1.05; color:#1f3039; }
.lead { margin:10px 0 0; color:#667984; max-width:660px; font-size:1rem; }
.top-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:0; border-radius:10px; padding:0 17px; font-weight:750; text-decoration:none; cursor:pointer; box-shadow:none; }
.btn:hover { transform:none; box-shadow:none; }
.btn.primary { background:#567b2e; color:white; }
.btn.primary:hover { background:#476a25; }
.btn.secondary { background:#dfe6ea; color:#2d414c; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.save-state { border-radius:999px; padding:8px 12px; font-size:.82rem; font-weight:750; white-space:nowrap; }
.save-state.saved { background:#e1efda; color:#365b21; }
.save-state.unsaved { background:#fff0c9; color:#755400; }
.save-state.saving { background:#e4ebef; color:#52636c; }
.admin-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; }
.card { position:relative; background:#fff; border:1px solid #dce4e8; border-radius:16px; padding:24px; box-shadow:0 8px 24px rgba(32,49,58,.06); }
.content-card { grid-column:1/-1; }
.step-badge { width:30px; height:30px; border-radius:50%; background:#e6efd8; color:#4d7029; display:grid; place-items:center; font-weight:850; flex:0 0 auto; }
.card-heading h2 { margin:0 0 5px; font-size:1.18rem; color:#263943; }
.card-heading p { margin:0; color:#70828c; font-size:.9rem; }
.upload-card>.step-badge,.settings-card>.step-badge { position:absolute; top:22px; left:22px; }
.upload-card>.card-heading,.settings-card>.card-heading { padding-left:43px; margin-bottom:18px; }
.upload-zone { min-height:220px; border:2px dashed #b7c6cd; background:#f7f9fa; border-radius:14px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; text-align:center; color:#516570; cursor:pointer; padding:24px; transition:.15s ease; }
.upload-zone:hover,.upload-zone.dragover { border-color:#719c42; background:#f1f6e9; }
.upload-zone strong { color:#2f424b; font-size:1.05rem; }
.upload-zone>span { color:#81919a; font-size:.82rem; margin-bottom:7px; }
.upload-icon { width:44px;height:44px;border-radius:12px;background:#e5eed9;color:#5b7d35;display:grid;place-items:center;font-size:1.65rem;font-weight:500; }
.upload-progress { margin-top:12px; display:flex; align-items:center; justify-content:center; gap:9px; color:#60737d; font-size:.9rem; }
.spinner { width:18px;height:18px;border:2px solid #cad5da;border-top-color:#567b2e;border-radius:50%;animation:spin .7s linear infinite; } @keyframes spin{to{transform:rotate(360deg)}}
.setting-row,.switch-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 0; border-top:1px solid #edf1f3; }
.setting-row:first-of-type { border-top:0; }
.setting-row div,.switch-row div { display:flex; flex-direction:column; gap:3px; }
.setting-row strong,.switch-row strong { font-size:.93rem; color:#2f414a; }
.setting-row div span,.switch-row div span { color:#7d8d95; font-size:.8rem; }
.number-field { display:flex;align-items:center;border:1px solid #ccd7dc;border-radius:9px;overflow:hidden;background:#fff; }
.number-field input { width:72px; border:0!important; padding:9px; text-align:right; box-shadow:none!important; color:#263943; }
.number-field span { padding:9px 10px 9px 0; color:#75868f; font-size:.85rem; }
.switch-row { cursor:pointer; }
.switch-row input,.mini-switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-row>.switch { width:46px;height:26px;background:#cbd5da;border-radius:999px;position:relative;flex:0 0 auto;transition:.15s; }
.switch-row>.switch:after { content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:white;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.15s; }
.switch-row input:checked+.switch { background:#6c9343; }.switch-row input:checked+.switch:after { transform:translateX(20px); }
.content-header,.content-title-wrap,.content-actions { display:flex;align-items:center;gap:13px; }.content-header { justify-content:space-between; margin-bottom:17px; }.content-actions { flex-wrap:wrap;justify-content:flex-end; }
.count-pill { background:#edf2f4;color:#61747e;border-radius:999px;padding:7px 10px;font-size:.8rem;font-weight:750; }
.media-list { display:flex;flex-direction:column;gap:9px; }
.media-item { display:grid;grid-template-columns:28px 76px minmax(160px,1fr) 135px 48px auto;gap:13px;align-items:center;border:1px solid #e0e7ea;border-radius:12px;padding:10px 12px;background:#fff;transition:.15s; }
.media-item:hover { border-color:#c3d0d5; }.media-item.disabled { opacity:.55;background:#f7f8f8; }.media-item.dragging { opacity:.35; }
.drag-handle { cursor:grab;color:#9aabb3;font-weight:800;letter-spacing:-4px;font-size:1rem;user-select:none; }
.media-preview { width:76px;height:56px;border-radius:8px;background:#edf1f3;overflow:hidden;display:grid;place-items:center; }.media-preview img { width:100%;height:100%;object-fit:cover; }.pdf-preview { font-size:.72rem;font-weight:900;color:#a24a43; }
.media-info { min-width:0;display:flex;flex-direction:column;gap:4px; }.media-info strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2d4049;font-size:.92rem; }.media-info span { color:#82929a;font-size:.78rem; }
.inline-time { display:flex;align-items:center;gap:5px;color:#72838c;font-size:.78rem;white-space:nowrap; }.inline-time input { width:58px!important;padding:7px!important;color:#2e414b;background:white; }
.mini-switch { display:flex;justify-content:center;cursor:pointer; }.mini-switch span { width:38px;height:22px;background:#ccd6da;border-radius:999px;position:relative; }.mini-switch span:after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:white;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:.15s}.mini-switch input:checked+span{background:#6e9447}.mini-switch input:checked+span:after{transform:translateX(16px)}
.row-buttons { display:flex;gap:5px; }.icon-btn { width:35px;height:35px;padding:0;border-radius:8px;background:#edf2f4;color:#4d626d;box-shadow:none; }.icon-btn:hover { transform:none;box-shadow:none;background:#e0e8eb; }.icon-btn.delete { background:#f8e7e5;color:#9a433c; }.icon-btn.delete:hover { background:#f2d6d2; }
.empty-state { padding:45px;text-align:center;background:#f7f9fa;border:1px dashed #cbd6db;border-radius:12px;display:flex;flex-direction:column;gap:5px;color:#7a8b94; }.empty-state strong{color:#425760;}
.admin-footer { text-align:center;color:#82929a;font-size:.8rem;padding:18px 0 0; }
.notice { padding:13px 15px;border-radius:10px;margin-bottom:16px;font-size:.88rem; }.danger-notice{background:#fae4e1;border:1px solid #efc5bf;color:#7a312b;}
.toast { position:fixed;z-index:1000;right:22px;bottom:22px;background:#283c45;color:white;padding:13px 16px;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,.22);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;max-width:min(430px,calc(100vw - 44px)); }.toast.show{opacity:1;transform:none}.toast.error{background:#8a3d36}
@media(max-width:820px){.admin-shell{padding:20px 14px 36px}.admin-topbar{flex-direction:column}.top-actions{justify-content:flex-start}.admin-grid{grid-template-columns:1fr}.content-card{grid-column:auto}.content-header{align-items:flex-start;flex-direction:column}.content-actions{width:100%;justify-content:space-between}.media-item{grid-template-columns:22px 62px 1fr auto}.media-preview{width:62px;height:50px}.inline-time{grid-column:3}.mini-switch{grid-column:4;grid-row:1}.row-buttons{grid-column:3/5;justify-content:flex-end}.drag-handle{grid-row:1/3}.media-info{grid-column:3}.media-preview{grid-row:1/3}}

/* HTML hidden muss auch gegen component display-Regeln gewinnen. */
[hidden] { display: none !important; }

/* ===== Dateibibliothek im Upload-Bereich ===== */
.server-library { margin-top:22px; padding-top:20px; border-top:1px solid #e8eef1; }
.server-library-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:12px; }
.server-library-head h3 { margin:0 0 4px; color:#2c404a; font-size:1rem; }
.server-library-head p { margin:0; color:#7a8c95; font-size:.82rem; line-height:1.4; }
.server-file-list { display:flex; flex-direction:column; gap:8px; max-height:390px; overflow:auto; padding-right:3px; }
.server-file-row { display:grid; grid-template-columns:54px minmax(130px,1fr) auto; gap:10px 12px; align-items:center; padding:9px; border:1px solid #e1e8eb; border-radius:11px; background:#fafcfc; }
.server-file-preview { width:54px; height:42px; border-radius:7px; background:#edf1f3; overflow:hidden; display:grid; place-items:center; grid-row:1/3; }
.server-file-preview img { width:100%; height:100%; object-fit:cover; }
.server-file-info { min-width:0; display:flex; flex-direction:column; gap:2px; }
.server-file-info strong { color:#32464f; font-size:.84rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.server-file-info span { color:#87979f; font-size:.73rem; }
.file-status { justify-self:end; border-radius:999px; padding:5px 8px; font-size:.7rem; font-weight:800; white-space:nowrap; }
.file-status.active { background:#e3f0dc; color:#426529; }
.file-status.stored { background:#e9eef1; color:#657983; }
.server-file-actions { grid-column:2/4; display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.btn.small { min-height:32px; padding:0 10px; border-radius:8px; font-size:.76rem; }
.btn.danger { background:#f6dfdc; color:#8b3933; }
.btn.danger:hover { background:#efcfcb; }
.library-empty { padding:18px; border:1px dashed #ccd7dc; border-radius:10px; background:#f8fafb; color:#7b8d96; text-align:center; font-size:.82rem; }
.icon-btn.remove { background:#eef2f4; color:#596d77; font-size:1.15rem; }
.icon-btn.remove:hover { background:#e0e8eb; }
@media(max-width:560px){
  .server-library-head { flex-direction:column; }
  .server-file-row { grid-template-columns:48px minmax(0,1fr); }
  .server-file-preview { width:48px; height:40px; }
  .file-status { grid-column:2; justify-self:start; }
  .server-file-actions { grid-column:1/3; }
}