:root{
  --rb-red:#C3002A; --rb-red-d:#9e0022; --rb-red-soft:#fbe9ec;
  --rb-dark:#1f2430; --rb-darker:#171b24;
  --rb-ink:#222630; --rb-muted:#6b7280; --rb-line:#e6e8ec;
  --rb-bg:#f6f7f9; --rb-card:#ffffff;
  --rb-shadow:0 1px 2px rgba(16,24,40,.04),0 4px 14px rgba(16,24,40,.06);
  --rb-radius:12px;
}
*{ -webkit-font-smoothing:antialiased; box-sizing:border-box; }
html,body{ height:100%; }
body{
  background:var(--rb-bg); color:var(--rb-ink);
  font-family:'Inter','Segoe UI',Calibri,system-ui,Arial,sans-serif;
  font-size:14px; line-height:1.5;
}
a{ color:var(--rb-red); text-decoration:none; }
a:hover{ color:var(--rb-red-d); }
h1,h2,h3,h4,h5{ letter-spacing:-.01em; }

/* ---- Login ---- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1f2430,#11141b); padding:20px; }
.login-card{ background:#fff; width:400px; max-width:94vw; border-radius:16px; padding:40px 36px;
  box-shadow:0 24px 60px rgba(0,0,0,.4); }
.login-card .logo{ height:42px; margin-bottom:22px; }
.brand-accent{ height:4px; width:54px; background:var(--rb-red); border-radius:2px; margin-bottom:18px; }

/* ---- Shell ---- */
.app{ display:flex; min-height:100vh; }
.sidebar{
  width:250px; flex:0 0 250px; background:var(--rb-dark); color:#c7ccd6;
  position:sticky; top:0; height:100vh; display:flex; flex-direction:column; overflow-y:auto;
}
.sidebar .brand{ padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
.sidebar .brand img{ height:30px; background:#fff; padding:6px 9px; border-radius:7px; display:block; }
.sidebar .brand-name{ font-size:11px; color:#8b909c; margin-top:10px; letter-spacing:.06em; text-transform:uppercase; }
.sidebar .nav{ padding:8px 0; }
.sidebar .nav-link{ color:#c0c5cf; padding:9px 18px; border-left:3px solid transparent; font-weight:500; font-size:13.5px; transition:background .12s,color .12s; }
.sidebar .nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.sidebar .nav-link.active{ color:#fff; background:rgba(195,0,42,.18); border-left-color:var(--rb-red); }
.sidebar .nav-sec{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#6b717d; padding:16px 18px 5px; }
.sidebar .foot{ margin-top:auto; padding:14px 18px; font-size:11px; color:#7d828d; border-top:1px solid rgba(255,255,255,.07); }
.sidebar .foot a{ color:#c0c5cf; display:inline-block; margin-top:4px; }
.sidebar .foot a:hover{ color:#fff; }

.content{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.topbar{ background:#fff; border-bottom:1px solid var(--rb-line); padding:12px 22px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20; }
.topbar h1{ font-size:18px; font-weight:650; margin:0; }
.topbar .sub{ color:var(--rb-muted); font-size:12px; }
.topbar-logo{ height:26px; }
.btn-burger{ border:1px solid var(--rb-line); background:#fff; width:38px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.burger,.burger::before,.burger::after{ display:block; width:18px; height:2px; background:var(--rb-ink); position:relative; border-radius:2px; }
.burger::before,.burger::after{ content:""; position:absolute; left:0; }
.burger::before{ top:-5px; } .burger::after{ top:5px; }
.main{ padding:22px; max-width:1400px; width:100%; }

/* ---- Cards / KPI ---- */
.card{ border:1px solid var(--rb-line); border-radius:var(--rb-radius); box-shadow:var(--rb-shadow); }
.kpi{ background:var(--rb-card); border:1px solid var(--rb-line); border-radius:var(--rb-radius);
  padding:16px 18px; height:100%; box-shadow:var(--rb-shadow); transition:transform .12s, box-shadow .12s; display:block; }
a.text-decoration-none:hover .kpi{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(16,24,40,.1); }
.kpi .n{ font-size:30px; font-weight:750; line-height:1; color:var(--rb-ink); letter-spacing:-.02em; }
.kpi .l{ color:var(--rb-muted); font-size:12px; margin-top:6px; }
.kpi.accent{ border-top:3px solid var(--rb-red); }
.kpi .n.red{ color:var(--rb-red); }
.section-title{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--rb-muted); margin:4px 0 12px; }

/* ---- Tabellen ---- */
.table{ font-size:13px; background:#fff; margin:0; }
.table thead th{ background:#f3f4f6; color:#3a4150; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--rb-line); white-space:nowrap; padding:10px 12px; }
.table td{ vertical-align:middle; padding:10px 12px; }
.table tbody tr{ border-bottom:1px solid var(--rb-line); }
.row-link{ cursor:pointer; transition:background .1s; }
.row-link:hover{ background:var(--rb-red-soft) !important; }
.table-wrap{ overflow:hidden; border-radius:var(--rb-radius); border:1px solid var(--rb-line); box-shadow:var(--rb-shadow); background:#fff; }

.btn-rb{ background:var(--rb-red); border-color:var(--rb-red); color:#fff; }
.btn-rb:hover{ background:var(--rb-red-d); border-color:var(--rb-red-d); color:#fff; }
.btn-outline-rb{ border-color:var(--rb-red); color:var(--rb-red); }
.btn-outline-rb:hover{ background:var(--rb-red); color:#fff; }
.badge-thumb{ width:52px; height:40px; object-fit:cover; border-radius:5px; border:1px solid var(--rb-line); }
.form-control,.form-select{ font-size:13.5px; }
.form-control:focus,.form-select:focus{ border-color:var(--rb-red); box-shadow:0 0 0 .2rem rgba(195,0,42,.12); }

/* ---- Detail ---- */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; font-size:13px; }
.detail-grid .k{ color:var(--rb-muted); }
.gallery img{ width:100%; height:120px; object-fit:cover; border-radius:8px; border:1px solid var(--rb-line); cursor:zoom-in; transition:transform .12s; }
.gallery img:hover{ transform:scale(1.02); }
.sia-box{ background:var(--rb-red-soft); border:1px solid #f3c6cf; border-radius:10px; padding:13px 15px; font-size:12.5px; }
.sia-box .t{ color:var(--rb-red); font-weight:700; }
.uebersetzt-badge{ background:#eef1ff; color:#3a4bb3; border:1px solid #d6dbff; font-size:10.5px; padding:2px 7px; border-radius:20px; display:inline-block; }

/* ---- Lightbox ---- */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.93); display:none; z-index:1080; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:94vw; max-height:90vh; transition:transform .15s; cursor:zoom-in; }
.lightbox .lb-close{ position:absolute; top:14px; right:22px; color:#fff; font-size:34px; cursor:pointer; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:46px; cursor:pointer; padding:0 20px; user-select:none; }
.lightbox .lb-prev{ left:0; } .lightbox .lb-next{ right:0; }

/* ---- Toasts ---- */
.toast-container{ position:fixed; right:18px; bottom:18px; z-index:1090; display:flex; flex-direction:column; gap:10px; }
.rb-toast{ background:#fff; border:1px solid var(--rb-line); border-left:4px solid var(--rb-red);
  border-radius:10px; box-shadow:0 8px 30px rgba(16,24,40,.18); padding:12px 16px; min-width:240px; max-width:360px;
  font-size:13.5px; opacity:0; transform:translateY(10px); transition:opacity .25s, transform .25s; }
.rb-toast.show{ opacity:1; transform:translateY(0); }
.rb-toast.ok{ border-left-color:#1a9d54; }
.rb-toast.err{ border-left-color:var(--rb-red); }

/* ---- Settings ---- */
.settings-tabs .nav-link{ color:var(--rb-muted); font-weight:600; font-size:13px; }
.settings-tabs .nav-link.active{ color:var(--rb-red); border-bottom:2px solid var(--rb-red); background:none; }
.pw-meter{ height:6px; border-radius:4px; background:#eef0f2; overflow:hidden; }
.pw-meter > div{ height:100%; width:0; transition:width .2s, background .2s; }

/* ====================================================================== */
/* MOBILE-FIRST: Tabellen werden zu Karten                                */
/* ====================================================================== */
@media(max-width:991px){
  .sidebar.offcanvas-lg{ width:270px; height:100%; }
  .main{ padding:16px 14px 40px; }
  .topbar{ padding:10px 14px; }
  .topbar h1{ font-size:16px; }
  .detail-grid{ grid-template-columns:1fr; }
  table.responsive thead{ display:none; }
  table.responsive, table.responsive tbody, table.responsive tr, table.responsive td{ display:block; width:100%; }
  table.responsive tr{ background:#fff; border:1px solid var(--rb-line); border-radius:12px;
    box-shadow:var(--rb-shadow); margin-bottom:12px; padding:6px 4px; }
  table.responsive td{ border:0 !important; padding:7px 14px; display:flex; justify-content:space-between; gap:14px; text-align:right; }
  table.responsive td::before{ content:attr(data-label); color:var(--rb-muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.03em; font-weight:600; text-align:left; flex:0 0 42%; }
  table.responsive td[data-label=""]::before{ content:""; }
  .table-wrap{ border:0; box-shadow:none; background:transparent; overflow:visible; }
  .gallery img{ height:96px; }
}
@media(max-width:575px){ .kpi .n{ font-size:24px; } }