/* SPORTEUROPE.TV – US Open Sendetool – Design System */

@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-Italic.ttf') format('truetype'); font-weight:400; font-style:italic; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-Black.ttf') format('truetype'); font-weight:900; font-style:normal; }
@font-face { font-family:'Barlow'; src:url('../fonts/Barlow-BlackItalic.ttf') format('truetype'); font-weight:900; font-style:italic; }

:root{
  /* Base */
  --bg:#07090D;
  --panel:#15181E;
  --panel-2:#1C2027;
  --panel-3:#262420;
  --line:#2B303A;
  --text:#FFFFFF;
  --muted:#9AA3B2;
  /* Highlights */
  --accent:#FFC000;
  --red:#FF2330;
  --lime:#B7FF00;
  --sky:#00B7FF;
  --blue:#0037FF;
  --radius:12px;
  --radius-s:8px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Barlow', -apple-system, sans-serif;
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:14px 22px;
  background:#000;
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar .logo{ height:30px; display:block; }
.topbar .logo-lp{ height:32px; padding-left:16px; border-left:1px solid var(--line); }
.topbar .app-title{
  font-weight:800; font-size:17px; text-transform:uppercase; letter-spacing:.04em;
}
.topbar .app-title span{ color:var(--accent); }
.topbar .spacer{ flex:1; }
.topbar .badge{
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding:5px 12px; border-radius:999px;
  background:var(--accent); color:#000;
}
.badge.badge-red{ background:var(--red); color:#fff; }
.badge.badge-blue{ background:var(--sky); color:#000; }

.wrap{ max-width:1500px; margin:0 auto; padding:24px 22px 80px; }

/* ---------- Typo ---------- */
h1{ font-size:26px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
h2{ font-size:18px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; }
h2 .accent, h1 .accent{ color:var(--accent); }
h3{ font-size:15px; font-weight:700; }
.muted{ color:var(--muted); }
.small{ font-size:13px; }

/* ---------- Cards / Panels ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
}
.card + .card{ margin-top:16px; }
.card-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.card-head .spacer{ flex:1; }

.grid{ display:grid; gap:16px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  padding:10px 18px; border-radius:var(--radius-s);
  border:1px solid var(--line);
  background:var(--panel-2); color:var(--text);
  cursor:pointer; transition:all .15s ease;
  text-decoration:none; user-select:none;
}
.btn:hover{ border-color:var(--muted); }
.btn:active{ transform:scale(.97); }
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#000; }
.btn-accent:hover{ background:#ffd23f; border-color:#ffd23f; }
.btn-red{ background:var(--red); border-color:var(--red); color:#fff; }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:6px 12px; font-size:12px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---------- Forms ---------- */
label.field{ display:block; margin-bottom:12px; }
label.field > span{
  display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin-bottom:6px;
}
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=url], input[type=password], select, textarea{
  width:100%;
  font-family:inherit; font-size:15px;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius-s);
  padding:10px 12px;
  outline:none;
}
input:focus, select:focus, textarea:focus{ border-color:var(--accent); }
textarea{ resize:vertical; min-height:70px; }

/* ---------- Tables / Lists ---------- */
.list{ display:flex; flex-direction:column; gap:8px; }
.list-item{
  display:flex; align-items:center; gap:12px;
  background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:12px 14px;
}
.list-item:hover{ border-color:var(--muted); }
.list-item .spacer{ flex:1; }
.list-item.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }

/* ---------- Tabs ---------- */
.tabs{ display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); }
.tab{
  padding:10px 18px; cursor:pointer;
  font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom:3px solid transparent;
  user-select:none;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* ---------- Monitor-Wand ---------- */
.monitor-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.monitor{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  border:2px dashed var(--line);
  border-radius:var(--radius-s);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.monitor.has-media{ border-style:solid; }
.monitor.dragover{ border-color:var(--accent); background:#1a1607; }
.monitor.portrait{ aspect-ratio:9/16; }
.monitor img, .monitor video{ width:100%; height:100%; object-fit:cover; display:block; }
.monitor .mon-label{
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,.75); color:var(--accent);
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:5px; z-index:2;
}
.monitor .mon-clear{
  position:absolute; top:8px; right:8px; z-index:2;
  background:rgba(0,0,0,.75); color:#fff; border:none; border-radius:5px;
  width:24px; height:24px; cursor:pointer; font-size:13px; display:none;
}
.monitor:hover .mon-clear{ display:block; }
.monitor .mon-empty{ color:var(--muted); font-size:13px; text-align:center; padding:10px; }

/* ---------- Media Library ---------- */
.media-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.media-item{
  position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  border:1px solid var(--line); cursor:grab; background:#000;
}
.media-item img, .media-item video{ width:100%; height:100%; object-fit:cover; }
.media-item:hover{ border-color:var(--accent); }
.media-item .media-name{
  position:absolute; bottom:0; left:0; right:0;
  background:rgba(0,0,0,.8); font-size:10px; padding:2px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.media-item .media-del{
  position:absolute; top:4px; right:4px;
  background:rgba(0,0,0,.75); color:#fff; border:none; border-radius:4px;
  width:20px; height:20px; cursor:pointer; font-size:11px; display:none;
}
.media-item:hover .media-del{ display:block; }

/* ---------- Szenen (Technik) ---------- */
.scene-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.scene-btn{
  padding:22px 16px;
  background:var(--panel-2); border:2px solid var(--line); border-radius:var(--radius);
  font-family:inherit; font-size:16px; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:var(--text); cursor:pointer;
  transition:all .12s ease; text-align:center;
}
.scene-btn:hover{ border-color:var(--accent); }
.scene-btn.live{ background:var(--red); border-color:var(--red); color:#fff; }
.scene-btn.live::after{ content:' ● LIVE'; font-size:11px; }

/* ---------- Toast ---------- */
#toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--accent); color:#000; font-weight:700;
  padding:12px 24px; border-radius:999px; z-index:999;
  transition:transform .25s ease; pointer-events:none;
  box-shadow:0 8px 30px rgba(0,0,0,.5);
}
#toast.show{ transform:translateX(-50%) translateY(0); }
#toast.error{ background:var(--red); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:5px; }
::-webkit-scrollbar-track{ background:transparent; }