*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --red: #e63946;
      --orange: #f4a261;
      --purple: #a855f7;
      --blue: #3b82f6;
      --green: #22c55e;
      --bg: #080808;
      --bg2: #0f0f0f;
      --bg3: #141414;
      --border: #1a1a1a;
      --border2: #252525;
      --text: #e8e8e8;
      --muted: #555;
      --dim: #333;
    }
    html { background: var(--bg); }
    body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Barlow", sans-serif; font-size: 14px; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #111; }
    ::-webkit-scrollbar-thumb { background: var(--red); border-radius: 3px; }

    /* HEADER */
    header {
      background: linear-gradient(180deg,#111 0%,#0a0a0a 100%);
      border-bottom: 1px solid #1e1e1e;
      padding: 0 32px;
      display: flex; align-items: center; gap: 20px;
      height: 72px; position: sticky; top: 0; z-index: 100;
    }
    header img { height: 52px; object-fit: contain; mix-blend-mode: lighten; }
    .hdr-divider { width: 1px; height: 36px; background: #2a2a2a; }
    .hdr-title { font-family: "Bebas Neue", sans-serif; font-size: 22px; letter-spacing: 3px; color: #fff; line-height: 1; }
    .hdr-sub { font-size: 11px; color: #555; letter-spacing: 1px; margin-top: 3px; }
    .hdr-actions { margin-left: auto; display: flex; gap: 10px; }
    .export-btn {
      border: none; border-radius: 8px; padding: 8px 18px; cursor: pointer;
      font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
      display: flex; align-items: center; gap: 7px; transition: filter 0.15s;
    }
    .export-btn:hover { filter: brightness(1.2); }
    .btn-xlsx { background: #22c55e18; border: 1px solid #22c55e44; color: var(--green); }
    .btn-pdf  { background: #a855f718; border: 1px solid #a855f744; color: var(--purple); }
    .btn-logout { background: #e6394618; border: 1px solid #e6394644; color: var(--red); }

    /* NAV */
    nav {
      background: #0a0a0a; border-bottom: 1px solid #161616;
      padding: 0 32px; display: flex; gap: 4px;
    }
    .tab-btn {
      background: none; border: none; cursor: pointer;
      padding: 14px 20px; font-family: "Barlow Condensed", sans-serif;
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      color: #444; border-bottom: 2px solid transparent;
      transition: color 0.2s, border-color 0.2s;
      display: flex; align-items: center; gap: 7px;
    }
    .tab-btn.active { color: #fff; border-bottom-color: var(--red); }
    .tab-btn:hover:not(.active) { color: #888; }
    .tab-icon { font-size: 14px; opacity: 0.7; }

    /* TOAST */
    #toast {
      position: fixed; top: 20px; right: 24px;
      background: #111; border: 1px solid #22c55e44; border-left: 3px solid var(--green);
      border-radius: 8px; padding: 12px 20px; color: var(--green);
      font-size: 13px; font-weight: 600; letter-spacing: 0.5px;
      z-index: 999; box-shadow: 0 8px 32px #000;
      opacity: 0; transform: translateX(20px);
      transition: opacity 0.25s, transform 0.25s;
      pointer-events: none;
    }
    #toast.show { opacity: 1; transform: translateX(0); }

    /* MAIN */
    main { max-width: 1040px; margin: 0 auto; padding: 32px 24px; }
    .section { display: none; }
    .section.active { display: block; }

    /* SECTION TITLE */
    .section-title {
      font-family: "Bebas Neue", sans-serif; font-size: 26px;
      letter-spacing: 4px; color: #fff; margin-bottom: 24px;
      display: flex; align-items: center; gap: 12px;
    }
    .section-title::before {
      content: ""; width: 3px; height: 28px;
      background: var(--red); border-radius: 2px; display: inline-block;
    }

    /* KPI GRID */
    .kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 32px; }
    .kpi-card {
      background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
      padding: 20px 16px; text-align: center;
    }
    .kpi-value { font-family: "Bebas Neue", sans-serif; font-size: 44px; line-height: 1; }
    .kpi-label { font-family: "Barlow Condensed", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #444; margin-top: 6px; text-transform: uppercase; }

    /* OVERVIEW ITEMS */
    .overview-item {
      background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
      padding: 16px 20px; margin-bottom: 8px;
    }
    .ov-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .ov-name { font-family: "Bebas Neue", sans-serif; font-size: 16px; letter-spacing: 2px; }
    .ov-count { margin-left: auto; font-family: "Bebas Neue", sans-serif; font-size: 18px; color: #fff; }
    .ov-total { color: #444; font-size: 12px; }
    .progress-bar { height: 3px; background: #1a1a1a; border-radius: 2px; overflow: hidden; }
    .progress-fill { height: 100%; border-radius: 2px; transition: width 0.4s; }
    .badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
    .badge { border-radius: 4px; padding: 2px 9px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }

    /* FORM CARD */
    .form-card {
      background: var(--bg2); border: 1px solid #1e1e1e; border-radius: 12px;
      padding: 24px; margin-bottom: 24px;
    }
    .form-label {
      font-family: "Barlow Condensed", sans-serif; font-size: 11px;
      font-weight: 700; letter-spacing: 2px; color: #555; margin-bottom: 12px;
    }
    .form-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .inp {
      background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px;
      color: #ddd; padding: 10px 14px; font-size: 14px; outline: none;
      font-family: "Barlow", sans-serif; transition: border-color 0.2s; flex: 1; min-width: 160px;
    }
    .inp:focus { border-color: #444; }
    .inp::placeholder { color: #333; }
    .color-wrap { display: flex; align-items: center; gap: 8px; }
    .color-label { font-size: 12px; color: #555; letter-spacing: 1px; }
    input[type=color] { width: 44px; height: 40px; background: none; border: 1px solid #2a2a2a; border-radius: 6px; cursor: pointer; padding: 3px; }
    .add-btn {
      background: var(--red); color: #fff; border: none; border-radius: 8px;
      padding: 10px 20px; cursor: pointer; font-family: "Barlow Condensed", sans-serif;
      font-size: 13px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap;
      transition: filter 0.15s;
    }
    .add-btn:hover { filter: brightness(1.15); }

    /* LIST ITEMS */
    .list-item {
      background: var(--bg2); border: 1px solid var(--border); border-radius: 10px;
      padding: 14px 20px; display: flex; align-items: center; gap: 14px;
      margin-bottom: 8px; flex-wrap: wrap;
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .item-name { font-family: "Bebas Neue", sans-serif; font-size: 17px; letter-spacing: 2px; color: #fff; }
    .item-sub { color: #444; font-size: 12px; }
    .del-btn {
      margin-left: auto; background: var(--bg3); border: 1px solid var(--border2);
      color: var(--red); border-radius: 6px; padding: 6px 14px; cursor: pointer;
      font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 700;
      letter-spacing: 1px; transition: background 0.15s;
    }
    .del-btn:hover { background: #1e1414; }

    /* HELFER AVATAR */
    .avatar {
      width: 38px; height: 38px; border-radius: 8px; background: var(--bg3);
      border: 1px solid #2a2a2a; display: flex; align-items: center; justify-content: center;
      font-family: "Bebas Neue", sans-serif; font-size: 18px; color: var(--red); flex-shrink: 0;
    }
    .helfer-info .name { font-size: 15px; font-weight: 600; color: #fff; }
    .helfer-info .email { font-size: 12px; color: #444; margin-top: 2px; }
    .badge-sm { border-radius: 4px; padding: 2px 9px; font-size: 10px; font-weight: 700; letter-spacing: 1px; }

    /* ZUTEILUNG */
    .zuteil-card {
      background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
      padding: 20px 24px; margin-bottom: 14px;
    }
    .zuteil-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .zuteil-title { font-family: "Bebas Neue", sans-serif; font-size: 18px; letter-spacing: 3px; }
    .count-badge { border-radius: 4px; padding: 1px 10px; font-family: "Bebas Neue", sans-serif; font-size: 12px; letter-spacing: 1px; color: #fff; }
    .helfer-btns { display: flex; gap: 8px; flex-wrap: wrap; }
    .helfer-toggle {
      background: var(--bg3); border: 1px solid var(--border2); color: #666;
      border-radius: 8px; padding: 9px 16px; cursor: pointer; font-size: 13px;
      font-family: "Barlow", sans-serif; transition: all 0.15s; display: flex; align-items: center; gap: 7px;
    }
    .helfer-toggle.on { font-weight: 700; color: #fff; }
    .check-icon { font-size: 11px; }

    /* EMPTY */
    .empty { color: #333; text-align: center; padding: 48px 0; font-style: italic; }

    /* HINT */
    .hint { color: #444; font-size: 13px; margin-bottom: 24px; letter-spacing: 0.3px; }



    /* APP LOCK */
    .app-shell { min-height: 100vh; }
    .login-screen {
      position: fixed; inset: 0; z-index: 1000;
      display: flex; align-items: center; justify-content: center;
      padding: 24px; background:
        radial-gradient(circle at top, rgba(230,57,70,0.16), transparent 30%),
        linear-gradient(180deg, rgba(8,8,8,0.96), rgba(8,8,8,0.985));
      backdrop-filter: blur(8px);
    }
    .login-screen.hidden { display: none; }
    .login-card {
      width: min(100%, 420px); background: rgba(15,15,15,0.96);
      border: 1px solid #242424; border-radius: 18px; padding: 28px;
      box-shadow: 0 24px 80px rgba(0,0,0,0.45);
    }
    .login-logo { height: 60px; width: auto; display:block; margin:0 auto 18px; mix-blend-mode: lighten; }
    .login-title { font-family: "Bebas Neue", sans-serif; font-size: 34px; letter-spacing: 3px; text-align:center; }
    .login-sub { color: #9a9a9a; text-align:center; margin: 8px 0 20px; line-height: 1.5; }
    .login-actions { display:flex; gap:10px; align-items:center; }
    .login-btn {
      background: var(--red); color:#fff; border:none; border-radius:10px;
      padding: 12px 18px; font-family: "Barlow Condensed", sans-serif;
      font-size: 14px; font-weight:700; letter-spacing: 1.5px; cursor:pointer;
      white-space: nowrap;
    }
    .login-error { min-height: 20px; margin-top: 12px; color: #ff7b86; font-size: 13px; }
    .app-shell.locked header,
    .app-shell.locked nav,
    .app-shell.locked main { visibility: hidden; pointer-events: none; user-select: none; }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      header { padding: 14px 18px; height: auto; flex-wrap: wrap; gap: 12px; }
      header img { height: 44px; }
      .hdr-divider { display: none; }
      .hdr-title { font-size: 20px; letter-spacing: 2px; }
      .hdr-sub { font-size: 10px; }
      .hdr-actions { margin-left: 0; width: 100%; justify-content: stretch; }
      .export-btn { flex: 1; justify-content: center; }
      nav { padding: 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
      .tab-btn { padding: 14px 14px; white-space: nowrap; }
      main { padding: 22px 16px 32px; }
      .kpi-grid { grid-template-columns: repeat(2, 1fr); }
      .zuteil-card, .form-card, .overview-item, .list-item { padding: 16px; }
    }

    @media (max-width: 640px) {
      body { font-size: 13px; }
      .section-title { font-size: 22px; letter-spacing: 3px; margin-bottom: 18px; }
      .section-title::before { height: 24px; }
      .kpi-grid { grid-template-columns: 1fr; gap: 10px; }
      .kpi-value { font-size: 38px; }
      .form-row { flex-direction: column; align-items: stretch; }
      .inp, .add-btn { width: 100%; min-width: 0; }
      .color-wrap { width: 100%; justify-content: space-between; padding: 0 2px; }
      .list-item { align-items: flex-start; }
      .del-btn { margin-left: 0; width: 100%; }
      .zuteil-head { flex-wrap: wrap; }
      .helfer-btns { display: grid; grid-template-columns: 1fr; }
      .helfer-toggle { width: 100%; justify-content: flex-start; }
      #toast { right: 12px; left: 12px; top: 12px; transform: translateY(-12px); }
      #toast.show { transform: translateY(0); }
      .login-card { padding: 22px 18px; }
      .login-actions { flex-direction: column; }
      .login-btn { width: 100%; }
    }

    /* PRINT */
    @media print {
      header, nav, .hdr-actions, #toast { display: none !important; }
      body { background: #fff !important; color: #111 !important; }
    }