:root{
      --bg:#f0f6fc; --card:#ffffff; --ink:#2b2b2b; --muted:#6f6f6f; --line:#dde6ee;
      --accent:rgb(47,62,139); --accent-ink:#ffffff; --link:rgb(47,62,139);
      --radius:12px; --gap:14px;
    }
    [data-theme="dark"]{ --bg:#0f1720; --card:#111827; --ink:#e5e7eb; --muted:#9ca3af; --line:#243244; --accent:#60a5fa; --accent-ink:#0b1220; --link:#93c5fd; }
    [data-theme="gelb"]{ --bg:#fff7d1; --card:#ffffff; --ink:#2b2b1a; --muted:#6f6542; --line:#f6dfa2; --accent:#ca8a04; --accent-ink:#1a1606; --link:#b45309; }
    [data-theme="gruen"]{ --bg:#eafaf2; --card:#ffffff; --ink:#0f2419; --muted:#4b6b58; --line:#c6ead7; --accent:#0f9d58; --accent-ink:#ffffff; --link:#0b7a43; }
    [data-theme="rot"]{ --bg:#fff1f1; --card:#ffffff; --ink:#1f1b1b; --muted:#6b5a5a; --line:#f2c2c2; --accent:#c81e1e; --accent-ink:#ffffff; --link:#991b1b; --thead:#d64b4b; --thead-ink:#ffffff; --zebra:#fff8f8; --badge-bg:#fde2e2; --badge-ink:#991b1b; }
    [data-theme="rosa"]{ --bg:#fff1f7; --card:#ffffff; --ink:#2b2430; --muted:#7a6b7a; --line:#ffd6e7; --accent:#ec4899; --accent-ink:#ffffff; --link:#be185d; }

    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.35}
    a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}

    .container{width:100%;padding:24px clamp(16px,2vw,32px);display:grid;gap:var(--gap)}

    /* ========= HEADER (NEU) ========= */
    .header{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      padding:14px 16px;
      border-radius:12px;
      background:#2f3e8b;
      border:1px solid #2f3e8b;
      color:#fff;
      gap:20px;
    }
    .title{
      display:flex;
      align-items:center;
      gap:10px;
      font-size:18px;
      font-weight:700;
      color:#fff
    }
    .title img{height:28px;width:auto;display:block}

    .actions{
      display:flex;
      align-items:center;
      margin-left:auto;
      gap:10px;
    }
    .search-group{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .header a{color:#fff}
    .searchbox{
      max-width:240px;
      width:100%;
      padding:8px 10px;
      border:1px solid rgba(255,255,255,.35);
      border-radius:8px;
      background:#fff;
      font-size:14px;
      color:#1f2937;
    }
    .theme-btn{
      height:32px;width:32px;border:1px solid rgba(255,255,255,.35);
      background:transparent;color:#fff;border-radius:8px;
      display:inline-flex;align-items:center;justify-content:center;
      cursor:pointer;
    }
    .theme-btn:hover{background:rgba(255,255,255,.12)}

    .theme-select{
      height:32px;border:1px solid rgba(255,255,255,.35);
      background:#fff;color:#111;border-radius:8px;padding:0 8px;font-size:13px;
    }
    .hidden{display:none!important}

    .icon-btn img{
      position:relative;
      top:2px;
    }

    /* Drive-Icon Größe fix (wie Beispiel) */
    #driveBtn img{
      height:32px;
      width:32px;
      position:relative;
      top:2px;
    }

    /* =================================== */

    .card{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,.02);padding:16px 18px}
    .card h4{margin:0 0 8px;font-size:14px;color:var(--muted);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
    .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px}

    .kv{display:grid;grid-template-columns:180px 1fr;gap:6px 14px;font-size:14px}
    .kv .label{color:var(--muted)}

    .form{display:grid;gap:8px}
    .frow{display:grid;grid-template-columns:140px 1fr 140px 1fr;gap:8px}
    .frow.single{grid-template-columns:140px 1fr}
    .frow .lbl{color:var(--muted);font-size:13px;align-self:center}
    .field{border:1px solid var(--line);background:#f8fbff;border-radius:8px;padding:8px 10px;min-height:32px;display:flex;align-items:center}
    [data-theme="dark"] .field{background:#0b1220}

    .md-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .span-2{grid-column:span 2}

    .kpi{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
    .k{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
    .k h5{margin:0 0 6px;font-size:12px;color:var(--muted)}
    .k strong{font-size:18px}

    .table{width:100%;border-collapse:collapse;font-size:14px}
    .table th,.table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
    .table thead th{text-align:left;color:var(--muted);font-weight:700;background:#f0f6fc;position:sticky;top:0;z-index:1}

    .grid{display:grid;gap:var(--gap)}
    .cols-3{grid-template-columns:1.2fr 1fr 1fr}
    .cols-2{grid-template-columns:1fr 1fr}
    .cols-4{grid-template-columns:repeat(4,1fr)}

    .subhead{margin:14px 0 6px;color:var(--muted);font-size:12px;letter-spacing:.3px;text-transform:uppercase}
    .table-wrap{max-height:360px;overflow:auto}

    @media (max-width:1100px){
      .cols-3,.cols-4{grid-template-columns:1fr}
      .frow{grid-template-columns:140px 1fr}
      .md-grid{grid-template-columns:1fr}
      .span-2{grid-column:span 1}
    }

    /* ===== Mobile Ansicht ===== */
    @media (max-width:720px){
      .container{padding:16px 12px}
      .header{flex-wrap:wrap; gap:12px}
      .actions{margin-left:0; width:100%; flex-wrap:wrap; justify-content:flex-end}
      .search-group{flex-wrap:wrap; gap:8px}
      .searchbox{max-width:100%}
      .cols-2{grid-template-columns:1fr}
      .table-wrap{max-height:none; overflow:visible}

      /* ===== Mobile: Tabellen in Karten umwandeln (nur auf Handy) ===== */
      .table{border-collapse:separate; border-spacing:0 10px}
      .table thead{display:none}

      .table tbody tr{
        display:block;
        background:var(--card);
        border:1px solid var(--line);
        border-radius:12px;
        box-shadow:0 1px 0 rgba(0,0,0,.02);
        overflow:hidden;
      }

      .table tbody td{
        display:flex;
        justify-content:space-between;
        gap:12px;
        padding:10px 12px;
        border-bottom:1px solid var(--line);
      }
      .table tbody td:last-child{border-bottom:0}

      .table tbody td::before{
        content: attr(data-label);
        font-weight:700;
        color:var(--muted);
        flex:0 0 42%;
        min-width:42%;
      }

      .table tbody td{word-break:break-word}
    }

    /* Tooltip für Artikelnummer-Input */
    .artnr-tooltip-wrap{
      position:relative;
      display:inline-block;
    }

    .artnr-tooltip{
      position:absolute;
      left:0;
      top:calc(100% + 6px);
      background:#222;
      color:#fff;
      font-size:12px;
      padding:6px 8px;
      border-radius:6px;
      white-space:nowrap;
      opacity:0;
      transform:translateY(-4px);
      pointer-events:none;
      transition: opacity .12s ease, transform .12s ease;
      transition-delay:0ms;
      z-index:9999;
    }

    .artnr-tooltip-wrap:hover .artnr-tooltip,
    .artnr-tooltip-wrap:focus-within .artnr-tooltip{
      opacity:1;
      transform:translateY(0);
    }

    /* ===== Pfeil-Button wie Vorgangsdashboard ===== */
    .vgnr-wrap{
      position:relative;
      display:inline-block;
    }
    .vgnr-wrap .searchbox{
      padding-right:34px;
    }
    .searchbox-btn{
      position:absolute;
      right:6px;
      top:50%;
      transform:translateY(-50%);
      height:22px;
      width:22px;
      border:0;
      border-radius:6px;
      cursor:pointer;
      background:var(--accent);
      color:var(--accent-ink);
      font-size:14px;
      line-height:1;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .searchbox-btn:active{
      transform:translateY(-50%) scale(.96);
    }

    /* Styling für Stücklistenstruktur */
    tr.parent-row { cursor: pointer; }

    tr.level-1 td:first-child { padding-left: 20px; }
    tr.level-2 td:first-child { padding-left: 40px; }
    tr.level-3 td:first-child { padding-left: 60px; }
    tr.level-4 td:first-child { padding-left: 80px; }
    tr.level-5 td:first-child { padding-left: 100px; }
    tr.level-6 td:first-child { padding-left: 120px; }
    tr.level-7 td:first-child { padding-left: 140px; }
    tr.level-8 td:first-child { padding-left: 160px; }
    tr.level-9 td:first-child { padding-left: 180px; }
    tr.level-10 td:first-child { padding-left: 200px; }

    .toggle-icon { display: inline-block; transition: transform 0.2s; }
    tr.expanded .toggle-icon { transform: rotate(90deg); }

    /* ===== Login Screen ===== */
    #login-screen {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background: var(--bg);
    }
    .login-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 16px;
      padding: 48px 40px;
      text-align: center;
      box-shadow: 0 4px 24px rgba(0,0,0,.06);
      max-width: 380px;
      width: 100%;
    }
    .login-card img { height: 48px; margin-bottom: 24px; }
    .login-card h2 { font-size: 18px; margin: 0 0 8px; color: var(--ink); }
    .login-card p { font-size: 13px; color: var(--muted); margin: 0 0 24px; }
    #btn-login {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 24px; border: 1px solid var(--line); border-radius: 8px;
      background: var(--card); color: var(--ink); font-size: 14px; font-weight: 500;
      cursor: pointer; transition: box-shadow .15s;
    }
    #btn-login:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
    #btn-login img { height: 20px; }
    #login-error { color: #c81e1e; font-size: 13px; margin-top: 12px; display: none; }

    /* ===== Loading Overlay ===== */
    #loading-overlay {
      position: fixed; inset: 0; z-index: 9999;
      background: var(--bg);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      transition: opacity .4s;
    }
    #loading-overlay.fade-out { opacity: 0; pointer-events: none; }
    .loading-spinner {
      width: 40px; height: 40px;
      border: 3px solid var(--line);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-text { margin-top: 16px; color: var(--muted); font-size: 14px; }

    /* ===== Gesperrt-Overlay ===== */
    #gesperrt-overlay {
      position: fixed; inset: 0; z-index: 8000;
      background: rgba(0,0,0,.55);
      display: flex; align-items: center; justify-content: center;
    }
    .gesperrt-card {
      background: #fff; border-radius: 16px; padding: 32px 40px;
      text-align: center; max-width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.2);
    }
    .gesperrt-card h3 { color: #c81e1e; margin: 0 0 8px; }
    .gesperrt-card p { color: #6f6f6f; font-size: 14px; margin: 4px 0; }

    /* ===== Etikettendruck-Modal ===== */
    #print-modal {
      position: fixed; inset: 0; z-index: 9000;
      display: flex; align-items: center; justify-content: center;
    }
    .print-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.45);
    }
    .print-modal-card {
      position: relative;
      background: var(--card); border: 1px solid var(--line);
      border-radius: 16px; padding: 28px 32px;
      width: 100%; max-width: 380px;
      box-shadow: 0 8px 32px rgba(0,0,0,.18);
    }
    .print-modal-card h3 {
      margin: 0 0 20px; font-size: 17px; color: var(--ink);
    }
    .print-form {
      display: grid; grid-template-columns: 80px 1fr; gap: 10px 14px; align-items: center;
    }
    .print-label {
      font-size: 13px; color: var(--muted); font-weight: 600;
    }
    .print-input {
      width: 100%; padding: 8px 10px;
      border: 1px solid var(--line); border-radius: 8px;
      background: var(--card); color: var(--ink);
      font-size: 14px;
    }
    .print-actions {
      display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
    }
    .print-btn {
      padding: 8px 20px; border: none; border-radius: 8px;
      font-size: 14px; font-weight: 600; cursor: pointer;
    }
    .print-btn-cancel {
      background: var(--line); color: var(--ink);
    }
    .print-btn-cancel:hover { opacity: .8; }
    .print-btn-ok {
      background: var(--accent); color: var(--accent-ink);
    }
    .print-btn-ok:hover { opacity: .85; }
    .print-btn:disabled { opacity: .5; cursor: not-allowed; }
    .print-status {
      margin-top: 12px; font-size: 13px; text-align: center; min-height: 18px;
    }
    .print-status.success { color: #0f9d58; }
    .print-status.error { color: #c81e1e; }

    /* ===== Listen-Navigation (im Header) ===== */
    .liste-nav {
      display:flex; align-items:center; gap:6px;
      margin-left:6px; padding-left:10px;
      border-left:1px solid rgba(255,255,255,.25);
    }
    .liste-btn-header {
      height:28px; width:28px; border:1px solid rgba(255,255,255,.35);
      background:transparent; color:#fff; border-radius:6px;
      font-size:12px; cursor:pointer; display:inline-flex;
      align-items:center; justify-content:center; flex-shrink:0;
    }
    .liste-btn-header:hover { background:rgba(255,255,255,.15); }
    .liste-btn-header:disabled { opacity:.3; cursor:not-allowed; pointer-events:none; }
    .liste-select-header {
      max-width:280px; height:28px; border:1px solid rgba(255,255,255,.35);
      border-radius:6px; padding:0 8px; font-size:13px;
      background:#fff; color:#111;
    }
    .liste-counter-header {
      font-size:12px; color:rgba(255,255,255,.7); white-space:nowrap; flex-shrink:0;
    }