/* === Light Theme – Global Tokens === */
:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --card-soft:#fafbff;
  --text: #0f172a;
  --muted:#556070;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --shadow: 0 8px 24px rgba(2,6,23,.08);

  /* Buttons */
  --btn-primary:#2563eb;
  --btn-primary-hover:#1d4ed8;
  --btn-yellow:#facc15;
  --btn-yellow-hover:#fbbf24;
  --btn-blue:#93c5fd;
  --btn-blue-hover:#60a5fa;

  /* Inputs */
  --input-bg:#ffffff;
  --input-border:#d8dee8;
  --input-text:#0f172a;
  --input-placeholder:#8c97a8;
  --focus:#3b82f6;
  --focus-ring:rgba(59,130,246,.22);

  /* PRIO Farben */
  --prio-bg:#ffe6e6;
  --prio-text:#b00020;
  --prio-border:#ff3b3b;
  --prio-glow:rgba(255,47,47,.45);
  --prio-badge-fg:#ffffff;
}

/* === Base === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, #eaf1ff 0%, transparent 60%),
    var(--bg);
  padding:0 0 2rem;
}

/* === Navigation (optional .main-nav) === */
.main-nav{position:sticky; top:0; z-index:10; background:rgba(255,255,255,.85);
  backdrop-filter: blur(8px); border-bottom:1px solid var(--border);}
.main-nav ul{list-style:none; display:flex; gap:.8rem; padding:.9rem 1.25rem; margin:0; align-items:center}
.main-nav a{text-decoration:none; color:var(--muted); font-weight:700; padding:.5rem 1rem; border-radius:12px;
  transition:background .15s, color .15s, box-shadow .15s;}
.main-nav a:hover{background:#eef2ff; color:#1e40af; box-shadow:0 2px 8px rgba(30,64,175,.15)}

/* === Cards / Helpers === */
.card, form{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:1.25rem;
}

/* === Forms === */
form{display:flex; flex-direction:column; gap:1rem; max-width:920px}
label{color:var(--muted); font-weight:600}
input, select, textarea{
  width:100%; padding:.8rem 1rem; font-size:1rem;
  color:var(--input-text); background:var(--input-bg);
  border:1px solid var(--input-border); border-radius:12px; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder, textarea::placeholder{color:var(--input-placeholder)}
input:focus, select:focus, textarea:focus{
  border-color:var(--focus); box-shadow:0 0 0 4px var(--focus-ring); background:#ffffff;
}
select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #8aa0c8 50%),
    linear-gradient(135deg, #8aa0c8 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
button{
  padding:.8rem 1.1rem; border:none; border-radius:12px; cursor:pointer;
  font-weight:800; color:#fff; background:var(--btn-primary);
  box-shadow:0 6px 16px rgba(37,99,235,.25);
  transition:transform .05s, background .15s, box-shadow .15s;
}
button:hover{background:var(--btn-primary-hover)}
button:active{transform:translateY(1px)}
label>input[type="checkbox"]{margin-right:.5rem}

/* === Dashboard Table === */
table.dashboard{
  width:100%; border-collapse:collapse; margin-top:1rem;
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  color:var(--text); table-layout:fixed;
}
table.dashboard thead th{
  background:linear-gradient(180deg, #f8fafc, #eef2f7);
  color:#0f172a; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  padding:.85rem; border-bottom:1px solid var(--border-strong);
}
table.dashboard td, table.dashboard th{padding:.85rem; border:1px solid var(--border); text-align:center}
table.dashboard tbody tr:nth-child(even) td{background:var(--card-soft)}
table.dashboard tbody tr:hover td{background:#f3f6ff}

/* Table Buttons */
.rampe-btn, .entladen-btn{
  display:inline-block; font-weight:800; text-decoration:none;
  padding:.45rem .9rem; border-radius:999px; border:1px solid transparent;
  transition:transform .05s, background .15s, box-shadow .15s;
}
.rampe-btn{background:var(--btn-yellow); color:#111827; border-color:#f59e0b}
.rampe-btn:hover{background:var(--btn-yellow-hover)}
.entladen-btn{background:var(--btn-blue); color:#0b2545; border-color:#60a5fa}
.entladen-btn:hover{background:var(--btn-blue-hover)}
.rampe-btn:active,.entladen-btn:active{transform:translateY(1px)}
.entladen-btn.disabled{pointer-events:none; opacity:.55; filter:grayscale(35%); background:#eef2f7; border-style:dashed}

/* === PRIO (kompatibel zu prio-row / prio-cell) === */
table.dashboard tbody tr td.prio-cell{
  background:#ff0033 !important;
  border-color:rgba(255,60,90,.9) !important;
  box-shadow:0 0 10px rgba(255,0,51,.75), 0 0 24px rgba(255,30,80,.65), inset 0 0 6px rgba(255,255,255,.15);
  color:#fff;
}
table.dashboard tbody tr:nth-child(even) td:not(.prio-cell){
  background:var(--card-soft);
}
table.dashboard tbody tr.prio-row td{
  background: color-mix(in oklab, #ff0033 8%, var(--card) 92%);
  box-shadow: 0 0 12px -6px rgba(255, 0, 51, .45);
}

/* Gelbe Neon-Badge in PRIO-Zelle */
td.prio-cell .prio-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; padding:.15rem .5rem; border-radius:999px;
  font-weight:800; letter-spacing:.5px;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25);
}
td.prio-cell .prio-icon{
  color:#fffb00; font-weight:900; font-size:1.05rem; transform: translateY(-1px);
  text-shadow: 0 0 6px rgba(255,251,0,.9), 0 0 14px rgba(255,255,115,.9), 0 0 26px rgba(255,255,160,.85);
}

/* === Welcome / Startseite === */
.welcome{min-height:100dvh; display:grid; place-items:center; text-align:center; padding:2rem;}
.welcome h1{margin:0 0 .75rem 0; font-size:clamp(2rem, 4vw, 3rem); line-height:1.1}
.welcome p{margin:0 0 1.5rem 0; font-size:clamp(1.1rem, 2vw, 1.35rem); opacity:.9}
.menu-grid{display:grid; gap:1rem; width:min(90vw, 520px); margin-top:.5rem}
.menu-btn{
  display:block; text-decoration:none; text-align:center;
  padding:.9rem 1.25rem; border-radius:14px; font-weight:800; letter-spacing:.2px;
  border:1px solid var(--border); color:var(--text);
  background: color-mix(in oklab, var(--card) 85%, #e8f0ff 15%);
  box-shadow:0 6px 16px rgba(2,6,23,.08);
  transition:transform .05s, background .15s, box-shadow .15s;
}
.menu-btn:hover{background: color-mix(in oklab, var(--card) 70%, #dbeafe 30%); box-shadow:0 10px 24px rgba(2,6,23,.12);}
.menu-btn:active{transform:translateY(1px)}

/* === Utility === */
#status{color:#16a34a; font-weight:700; text-align:center}
@media (max-width:520px){ body{padding:1rem} }