:root { --yellow:#ffed00; --dark:#1a1a1a; --grey:#666; --border:#e0e0e0; --bg:#f4f5f6; --hh:56px; --bar:60px; --top:48px; }
.of-body { background:var(--bg); color:var(--dark); margin:0; }
.of-header { height:var(--hh); background:#fff; border-bottom:4px solid var(--yellow); display:flex; align-items:center; justify-content:space-between; padding:0 18px; position:sticky; top:0; z-index:30; box-sizing:border-box; }
.of-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--dark); font-weight:700; }
.of-brand img { height:34px; }
.of-nav { display:flex; align-items:center; gap:18px; font-size:.9rem; }
.of-nav a, .of-link { color:var(--dark); text-decoration:none; background:none; border:0; cursor:pointer; padding:0; font:inherit; }
.of-nav a:hover, .of-link:hover { text-decoration:underline; }
.of-inline { display:inline; margin:0; }
.of-center { min-height:calc(100vh - var(--hh)); display:flex; align-items:center; justify-content:center; padding:16px; }
.of-login { background:#fff; border:1px solid var(--border); border-radius:10px; padding:26px; width:100%; max-width:380px; box-sizing:border-box; }
.uk-button-primary { background:var(--yellow); color:var(--dark); font-weight:600; border-radius:6px; }
.uk-button-primary:hover { background:#e6d500; color:var(--dark); }
.uk-button-primary[disabled] { opacity:.5; }
.uk-button-default, .uk-input, .uk-select, .uk-textarea { border-radius:6px; }
.uk-button { text-transform:none; }

/* Übersicht */
.of-wrap { max-width:1300px; margin:0 auto; padding:20px 18px 60px; }
.of-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.of-tab { padding:7px 14px; border-radius:20px; background:#fff; border:1px solid var(--border); color:var(--dark); text-decoration:none; font-size:.9rem; }
.of-tab span { color:var(--grey); margin-left:4px; }
.of-tab.on { background:var(--dark); color:#fff; border-color:var(--dark); } .of-tab.on span { color:#ddd; }
.of-filter { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .of-filter .uk-input { flex:1; min-width:220px; max-width:420px; } .of-filter .uk-select { width:auto; }
.of-table { background:#fff; border:1px solid var(--border); border-radius:8px; } .of-row { cursor:pointer; }
.of-table th { font-size:.75rem; text-transform:uppercase; color:var(--grey); }
.of-badge { display:inline-block; padding:2px 10px; border-radius:12px; background:#e8e8e8; font-size:.75rem; }
.of-badge.ok { background:var(--yellow); font-weight:600; }

/* Detail */
.of-top { height:var(--top); display:flex; align-items:center; gap:14px; padding:0 18px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:var(--hh); z-index:20; box-sizing:border-box; }
.of-back { color:var(--grey); text-decoration:none; white-space:nowrap; } .of-title { display:flex; gap:12px; align-items:baseline; flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.of-split { --left:50%; display:grid; grid-template-columns:var(--left) 10px minmax(0,1fr); height:calc(100vh - var(--hh) - var(--top) - var(--bar)); }
.of-pane { overflow-y:auto; padding:16px 18px; box-sizing:border-box; min-width:0; }
.of-handle { background:#e3e3e3; cursor:col-resize; position:relative; touch-action:none; }
.of-handle::after { content:''; position:absolute; top:50%; left:3px; width:4px; height:46px; margin-top:-23px; border-radius:2px; background:#aaa; }
.of-handle:hover, .of-handle.drag, .of-handle:focus { background:var(--yellow); outline:none; } .of-handle:hover::after, .of-handle.drag::after { background:var(--dark); }
body.of-dragging { user-select:none; cursor:col-resize; } body.of-dragging iframe { pointer-events:none; }
.of-h { font-size:1.05rem; margin:6px 0 12px; } .of-h .uk-text-meta { font-weight:400; margin-left:8px; font-size:.8rem; }
.of-card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:12px; }
.of-card h3 { font-size:.95rem; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.of-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px 14px; }
.of-field label { display:block; font-size:.78rem; color:var(--grey); margin-bottom:3px; }
.of-field .uk-input, .of-field .uk-select, .of-field .uk-textarea { font-size:.92rem; }
.of-radios { display:flex; gap:18px; margin-bottom:10px; flex-wrap:wrap; } .of-check { display:block; margin-bottom:10px; font-size:.9rem; }
.of-state { margin-left:auto; font-size:.72rem; font-weight:400; color:var(--grey); } .of-state.ok { color:#2a7a2a; } .of-state.err { color:#c00; }
.uk-form-danger { border-color:#c00 !important; }
.of-acc-head { cursor:pointer; margin:0 !important; } .of-acc-body { display:none; margin-top:12px; } .of-acc.open .of-acc-body { display:block; }
.of-chev { transition:transform .2s; } .of-acc.open .of-chev { transform:rotate(180deg); }
.of-dot { width:8px; height:8px; border-radius:50%; background:var(--yellow); border:1px solid #bba900; display:inline-block; }
.of-acc .uk-margin-small { margin-top:8px !important; } .of-acc .uk-form-label { font-size:.78rem; color:var(--grey); }
.of-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.of-tile { position:relative; aspect-ratio:1; border-radius:6px; background:#e9e9e9 center/cover no-repeat; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:var(--dark); overflow:hidden; }
.of-video small { font-size:.68rem; color:var(--grey); max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.of-audit { font-size:.85rem; margin-top:8px; } .of-audit summary { cursor:pointer; color:var(--grey); }
.of-spacer { height:30px; }
.of-bar { position:fixed; left:0; right:0; bottom:0; height:var(--bar); background:#fff; border-top:1px solid var(--border); box-shadow:0 -2px 8px rgba(0,0,0,.06); z-index:25; }
.of-bar-in { height:100%; display:flex; align-items:center; gap:10px; padding:0 18px; box-sizing:border-box; } .of-grow { flex:1; }

@media (max-width: 900px) {
  .of-split { display:block; height:auto; } .of-handle { display:none; }
  .of-pane { overflow:visible; padding-bottom:0; } .of-spacer { height:70px; }
  .of-top { position:static; } .of-title .uk-text-meta { display:none; }
  .of-bar-in { overflow-x:auto; } .of-bar-in .uk-button { padding:0 12px; white-space:nowrap; }
}
.of-src { display:inline-flex; align-items:center; gap:5px; padding:2px 10px; border-radius:12px; font-size:.72rem; font-weight:600; white-space:nowrap; border:1px solid transparent; }
.of-src-digibes { background:#fff7a8; border-color:#e6d500; color:#4a4400; }
.of-src-video { background:#dcecff; border-color:#9ec5f5; color:#12396b; }
.of-src-overseas { background:#dff3e4; border-color:#9fd3ac; color:#17502a; }
.of-src-manual { background:#ececec; border-color:#cfcfcf; color:#333; }
.of-src .uk-icon, .of-src .uk-icon svg { width:14px; height:14px; flex:none; }

.of-wide { grid-column:1 / -1; } .of-lbl { display:block; font-size:.78rem; color:var(--grey); margin-bottom:3px; }
.of-multi { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:4px 14px; } .of-multi label, .of-radios label { font-size:.9rem; }
.of-field[hidden] { display:none; } .of-check { display:block; font-size:.9rem; margin-top:4px; }
.of-sync { display:flex; align-items:center; gap:10px; }

/* Rechte Seite mit Reitern (Medien | Volumenscan) */
.of-right { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.of-tabs2 { display:flex; gap:4px; padding:10px 18px 0; border-bottom:1px solid var(--border); background:var(--bg); flex:none; }
.of-tabs2 button { border:0; background:none; padding:9px 14px; cursor:pointer; font:inherit; font-size:.92rem; border-bottom:3px solid transparent; color:var(--grey); display:flex; align-items:center; gap:8px; }
.of-tabs2 button.on { color:var(--dark); border-bottom-color:var(--yellow); font-weight:600; } .of-tabs2 button[disabled] { opacity:.4; cursor:not-allowed; }
.of-tab { flex:1; min-height:0; overflow-y:auto; padding:16px 18px; box-sizing:border-box; } .of-tab[hidden] { display:none; }
#tabScan { display:flex; flex-direction:column; padding:0; } #tabScan[hidden] { display:none; } #tabScan > #scanIntro { margin:16px 18px; }
#scanFrameWrap { flex:1; min-height:0; display:flex; flex-direction:column; } #scanFrameWrap[hidden] { display:none; }
.of-scanbar { display:flex; align-items:center; gap:10px; padding:6px 18px; background:#fff; border-bottom:1px solid var(--border); flex:none; }
#scanFrame { flex:1; width:100%; border:0; background:#fff; min-height:0; }
@media (max-width: 900px) { .of-right { display:block; overflow:visible; } .of-tab { overflow:visible; } #scanFrame { height:75vh; } }

/* Löschen */
.of-del { background: none; border: 0; padding: 6px; color: #999; cursor: pointer; border-radius: 4px; line-height: 0; }
.of-del:hover, .of-del:focus-visible { color: #d0021b; background: #fdecee; }
.of-del-cell { width: 1%; text-align: right; }
.of-top .of-del { margin-left: 4px; }
.of-del-dialog { max-width: 420px; }
.of-del-dialog p { font-size: 1.05rem; margin-bottom: 20px; }
.of-del-dialog .uk-button + .uk-button { margin-left: 8px; }