:root{
  --bg:#07111e;--bg2:#0c1a2d;--surface:#0f2136;--surface2:#132944;--surface3:#0d1d31;
  --line:#1b3656;--line2:#27507f;--text:#eef4fb;--muted:#9ab0c8;--blue:#2f8cff;--blue2:#1f6fd9;
  --ok:#22c55e;--warn:#f59e0b;--bad:#ef4444;--shadow:0 18px 40px rgba(1,8,18,.35);--radius:18px;
  font-family:Inter,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;min-height:100vh;background:radial-gradient(circle at top right,rgba(59,130,246,.18),transparent 28%),radial-gradient(circle at bottom left,rgba(29,78,216,.14),transparent 24%),linear-gradient(180deg,var(--bg),#081420 50%,#091725 100%);color:var(--text)}
button,input,select,textarea{font:inherit}a{color:#9cc6ff;text-decoration:none}a:hover{text-decoration:underline}p{line-height:1.5;color:var(--muted)}small{color:#86a2bf}
input,select,textarea{width:100%;background:rgba(7,17,30,.55);color:var(--text);border:1px solid var(--line2);border-radius:12px;padding:11px 13px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
input::placeholder,textarea::placeholder{color:#7f96af}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(47,140,255,.18)}textarea{min-height:112px;resize:vertical}
.app-shell{display:grid;grid-template-columns:292px minmax(0,1fr);min-height:100vh}
.sidebar{background:linear-gradient(180deg,rgba(10,24,41,.95),rgba(8,20,34,.97));border-right:1px solid rgba(98,144,198,.14);padding:22px 16px;display:flex;flex-direction:column;gap:16px;min-height:100vh;backdrop-filter:blur(14px)}
.logo{display:flex;gap:14px;align-items:center;padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(20,43,70,.95),rgba(13,29,49,.98));border:1px solid rgba(90,140,196,.24);box-shadow:var(--shadow)}
.nexlogg-symbol{width:58px;height:54px;position:relative;flex:0 0 auto}
.nexlogg-symbol:before{content:"N";position:absolute;left:0;bottom:1px;font-size:52px;line-height:.86;font-weight:950;letter-spacing:-.08em;color:#061326;text-shadow:20px 0 0 #1f6fff}
.nexlogg-symbol:after{content:"";position:absolute;right:1px;top:1px;width:39px;height:39px;border:6px solid #061326;border-left-color:transparent;border-bottom-color:#1f6fff;border-radius:50%;transform:rotate(-8deg)}
.nex-clock{position:absolute;right:18px;top:22px;width:8px;height:8px;border-radius:50%;background:#1f6fff;z-index:3}
.nex-hand:before{content:"";position:absolute;right:20px;top:9px;width:4px;height:23px;background:#1f6fff;border-radius:999px;transform:rotate(46deg);transform-origin:bottom center;z-index:2}
.nex-hand:after{content:"";position:absolute;right:8px;top:27px;width:13px;height:4px;background:#1f6fff;border-radius:999px;z-index:2}
.nexlogg-word strong{display:block;font-size:22px;line-height:1;color:#fff;letter-spacing:-.045em}.nexlogg-word strong span{color:#1f6fff}.nexlogg-word small{display:block;margin-top:5px;color:#a9c2dd;font-size:12px}
.nav{display:grid;gap:8px}.nav button{display:flex;justify-content:flex-start;align-items:center;text-align:left;background:transparent;border:1px solid transparent;color:#dbe7f3;border-radius:12px;padding:12px 14px;font-weight:700;transition:.18s ease}.nav button:hover{background:rgba(255,255,255,.06);border-color:rgba(98,144,198,.18)}button.active{background:linear-gradient(135deg,#1c56a1,#2577de);border-color:#328cf6;color:#fff;box-shadow:0 12px 22px rgba(19,84,170,.28)}
.sidebar-spacer{margin-top:auto}
.brand-badge{padding:18px;border-radius:18px;background:linear-gradient(180deg,rgba(20,43,70,.96),rgba(12,26,44,.98));border:1px solid rgba(90,140,196,.24);box-shadow:var(--shadow)}
.brand-kicker{font-size:11px;font-weight:900;letter-spacing:.22em;color:#9db8d3;margin-bottom:12px}.brand-row{display:flex;align-items:center;gap:12px}.rb-name{font-size:26px;font-weight:950;line-height:1;color:#fff;letter-spacing:-.045em}.rb-name .accent{color:#1f6fff}.brand-badge-login{margin-top:16px;background:linear-gradient(180deg,rgba(20,43,70,.92),rgba(12,26,44,.98))}
.userbox{padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,rgba(20,43,70,.88),rgba(12,26,44,.95));border:1px solid rgba(90,140,196,.22);color:#e5eef7}.userbox strong{display:block;margin:6px 0 10px}
.content{padding:28px;display:grid;gap:18px;align-content:start;width:100%;max-width:none}
.card{background:linear-gradient(180deg,rgba(15,33,54,.98),rgba(12,27,44,.98));border:1px solid rgba(90,140,196,.18);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}.card h1,.card h2,.card h3{margin:0;color:#fff}.card h1{font-size:28px;letter-spacing:-.03em}.card h2{font-size:21px}.card p{margin:.45rem 0 0}
.header{display:flex;justify-content:space-between;gap:16px;align-items:center}.eyebrow{display:inline-block;color:#6fb2ff;text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:900;margin-bottom:8px}
.btn,button{border:1px solid rgba(98,144,198,.22);border-radius:12px;padding:10px 14px;color:#eef4fb;background:linear-gradient(180deg,rgba(17,36,58,.95),rgba(13,29,47,.98));cursor:pointer;font-weight:800;white-space:nowrap;transition:.18s ease}.btn:hover,button:hover{border-color:#3a8cf5;transform:translateY(-1px)}.btn.primary,button.primary{background:linear-gradient(135deg,var(--blue),var(--blue2));border-color:#3d97ff;color:#fff;box-shadow:0 14px 26px rgba(25,88,190,.26)}.btn.primary:hover,button.primary:hover{background:linear-gradient(135deg,#3f9cff,#1d6fde)}.btn.ghost,button.ghost{background:rgba(255,255,255,.04)}.btn.danger,button.danger{background:rgba(239,68,68,.08);color:#ffc9d1;border-color:rgba(239,68,68,.35)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.form{display:grid;gap:14px}.field{display:grid;gap:6px}.field label{color:#d4e2f0;font-size:13px;font-weight:700}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.toolbar input,.toolbar select{width:auto;min-width:180px}
.table-wrap{overflow:auto;border:1px solid rgba(90,140,196,.18);border-radius:14px;background:rgba(7,17,30,.26)}table{width:100%;border-collapse:collapse}th,td{padding:13px 14px;border-bottom:1px solid rgba(90,140,196,.14);vertical-align:top}th{color:#8fb3d6;background:rgba(255,255,255,.02);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}td{color:#e4eef8}tr:hover td{background:rgba(47,140,255,.05)}
.badge{display:inline-flex;padding:4px 9px;border-radius:999px;border:1px solid rgba(98,144,198,.24);color:#c7d7e8;font-weight:700;font-size:12px;background:rgba(255,255,255,.03)}.badge.ok{color:#93f0b1;background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35)}
.notice{padding:13px 15px;border:1px solid rgba(59,130,246,.26);border-radius:14px;background:rgba(37,99,235,.12);color:#d9ebff}.notice.error{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.32);color:#ffd3d8}
.login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at top,rgba(59,130,246,.16),transparent 30%),linear-gradient(180deg,#081321,#0a1828)}.login-card{width:min(480px,100%);padding:26px}.stat{padding:18px;border-radius:16px;background:linear-gradient(180deg,rgba(18,39,63,.94),rgba(12,27,44,.98));border:1px solid rgba(90,140,196,.2);box-shadow:var(--shadow)}.stat strong{display:block;font-size:30px;margin-top:7px;color:#fff}.stat span{color:#8fb3d6;font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}.photo{max-width:120px;border-radius:10px;border:1px solid rgba(90,140,196,.24)}
dialog{border:1px solid rgba(90,140,196,.2);border-radius:20px;background:transparent;color:var(--text);padding:0;max-width:95vw}dialog::backdrop{background:rgba(3,10,19,.68);backdrop-filter:blur(4px)}
.customer-grid,.entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}.mini-card{padding:16px;border:1px solid rgba(90,140,196,.18);border-radius:16px;background:linear-gradient(180deg,rgba(17,36,58,.92),rgba(13,29,47,.97))}.mini-card h3{font-size:18px}.meta-list{display:grid;gap:7px;margin-top:10px;color:#d6e2ee}.meta-list span{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(90,140,196,.14);padding-bottom:7px}.meta-list b{color:#7fa4c7;font-size:12px;text-transform:uppercase;letter-spacing:.05em}.empty{padding:22px;text-align:center;border:1px dashed rgba(98,144,198,.28);border-radius:14px;color:var(--muted);background:rgba(255,255,255,.02)}
.billing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:18px}.billing-card{background:linear-gradient(180deg,rgba(15,33,54,.98),rgba(12,27,44,.98));border:1px solid rgba(90,140,196,.18);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}.billing-head{display:flex;justify-content:space-between;gap:16px}.billing-head strong{font-size:30px;color:#fff}.billing-actions{margin-top:14px}.billing-mini{margin-top:14px;max-height:280px}
@media(max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{min-height:auto}.grid2,.grid3{grid-template-columns:1fr}.header{display:grid}.content{padding:16px}.toolbar input,.toolbar select{width:100%}.sidebar-spacer{display:none}}@media(max-width:560px){.card{padding:16px}.customer-grid,.entry-grid,.billing-grid{grid-template-columns:1fr}.nav{grid-template-columns:1fr 1fr}.sidebar{padding:12px}.table-wrap{border-radius:10px}.rb-name{font-size:21px}.nexlogg-word strong{font-size:20px}}

.toolbar-stacked{align-items:flex-end}
.billing-toolbar{display:grid;grid-template-columns:minmax(300px,1.2fr) repeat(3,minmax(120px,180px));gap:12px}
.compact-field{min-width:0}.compact-field input,.compact-field button{width:100%}.action-field button{margin-top:0}
.customer-picker{position:relative;min-width:0}.customer-picker-hint{font-size:12px;color:#7f98b4}
.customer-search-input{padding-right:42px;background-image:linear-gradient(45deg,transparent 50%, #6ea3ff 50%),linear-gradient(135deg,#6ea3ff 50%, transparent 50%);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.customer-search-dropdown{position:absolute;left:0;right:0;top:100%;margin-top:8px;z-index:30;padding:8px;border-radius:14px;border:1px solid rgba(90,140,196,.28);background:linear-gradient(180deg,rgba(12,28,46,.98),rgba(10,24,41,.99));box-shadow:0 18px 34px rgba(1,8,18,.48);display:grid;gap:6px;max-height:320px;overflow:auto}
.customer-option{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(90,140,196,.12)}
.customer-option strong{font-size:14px;color:#eff5fc}.customer-option small{color:#8fa8c3;line-height:1.35}.customer-option:hover{background:rgba(47,140,255,.12);border-color:rgba(61,151,255,.36)}
.customer-no-result{padding:12px 10px;color:#97b0c9;font-size:14px}
@media(max-width:980px){.billing-toolbar{grid-template-columns:1fr}.toolbar-stacked{display:grid}.toolbar-stacked input,.toolbar-stacked select,.toolbar-stacked button{width:100%;max-width:none!important}}


/* Verbesserte Kundensuche: native Vorschläge statt schwer bedienbarer Dropdown-Box */
.customer-picker{position:relative;min-width:260px}
.customer-picker .customer-search-input{width:100%;min-width:260px}
.customer-picker-hint{font-size:12px;color:#7f98b4;margin-top:2px}
.customer-search-input.invalid-customer{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.18)!important}
.billing-toolbar{grid-template-columns:minmax(220px,1fr) minmax(280px,1.2fr) 150px 150px 120px}
.billing-toolbar .field{margin:0}
.billing-toolbar input,.billing-toolbar button{width:100%;max-width:none!important}
@media(max-width:1100px){.billing-toolbar{grid-template-columns:1fr 1fr}.billing-toolbar .action-field{grid-column:1/-1}}
@media(max-width:700px){.billing-toolbar{grid-template-columns:1fr}.customer-picker .customer-search-input{min-width:0}}


/* Mobile-Optimierung NexLogg */
.mobile-only{display:none}

@media(max-width:820px){
  body{
    background:
      radial-gradient(circle at top right,rgba(59,130,246,.20),transparent 26%),
      linear-gradient(180deg,#07111e,#091725 100%);
  }

  .app-shell{
    display:block;
    min-height:100vh;
  }

  .sidebar{
    min-height:auto;
    position:sticky;
    top:0;
    z-index:50;
    padding:12px;
    gap:10px;
    border-right:0;
    border-bottom:1px solid rgba(98,144,198,.18);
    box-shadow:0 12px 28px rgba(1,8,18,.35);
  }

  .logo{
    padding:12px;
    border-radius:16px;
  }

  .nexlogg-symbol{
    width:48px;
    height:44px;
    transform:scale(.88);
    transform-origin:left center;
  }

  .nexlogg-word strong{
    font-size:20px;
  }

  .nexlogg-word small{
    font-size:11px;
  }

  .nav{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:3px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .nav::-webkit-scrollbar{
    display:none;
  }

  .nav button{
    flex:0 0 auto;
    padding:10px 12px;
    border-radius:999px;
    font-size:14px;
    min-width:max-content;
  }

  .sidebar-spacer,
  .brand-badge{
    display:none;
  }

  .userbox{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-radius:14px;
    font-size:13px;
  }

  .userbox br:nth-of-type(1),
  .userbox br:nth-of-type(2),
  .userbox .badge{
    display:none;
  }

  .userbox strong{
    display:inline;
    margin:0;
  }

  .userbox button{
    padding:8px 10px;
    font-size:13px;
  }

  .content{
    padding:14px;
    gap:14px;
  }

  .card{
    padding:16px;
    border-radius:18px;
  }

  .card h1{
    font-size:24px;
    line-height:1.15;
  }

  .card h2{
    font-size:20px;
  }

  .card p{
    font-size:14px;
  }

  .grid2,
  .grid3,
  .billing-toolbar{
    grid-template-columns:1fr!important;
    gap:12px;
  }

  .toolbar,
  .toolbar-stacked{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button,
  .toolbar .field,
  .customer-picker,
  .customer-picker .customer-search-input{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
  }

  input,select,textarea{
    font-size:16px;
    min-height:46px;
  }

  textarea{
    min-height:130px;
  }

  button,
  .btn{
    min-height:44px;
  }

  .customer-picker-hint{
    font-size:11px;
  }

  .billing-grid,
  .customer-grid,
  .entry-grid{
    grid-template-columns:1fr!important;
  }

  .billing-card{
    padding:16px;
    border-radius:18px;
  }

  .billing-head{
    display:grid;
    gap:10px;
  }

  .billing-head strong{
    font-size:28px;
  }

  .billing-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .meta-list span{
    display:grid;
    grid-template-columns:1fr;
    gap:3px;
  }

  .table-wrap{
    border-radius:16px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  table{
    min-width:720px;
  }

  .billing-mini table{
    min-width:640px;
  }

  dialog{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    margin:10px auto;
  }

  dialog .card{
    min-width:0!important;
    width:100%;
  }

  .login{
    padding:14px;
    align-items:start;
    padding-top:38px;
  }

  .login-card{
    width:100%;
    padding:18px;
    border-radius:20px;
  }

  .brand-badge-login{
    display:block;
  }

  .brand-badge-login .rb-name{
    font-size:22px;
  }
}

@media(max-width:560px){
  .content{
    padding:10px;
  }

  .sidebar{
    padding:10px;
  }

  .logo{
    gap:10px;
  }

  .nav button{
    font-size:13px;
    padding:9px 11px;
  }

  .card{
    padding:14px;
  }

  .eyebrow{
    font-size:10px;
  }

  .card h1{
    font-size:22px;
  }

  .notice{
    font-size:14px;
  }

  .photo{
    max-width:90px;
  }
}

/* Kartenartige Tabellen auf sehr kleinen Displays */
@media(max-width:520px){
  .content .table-wrap.mobile-card-table{
    border:0;
    background:transparent;
    overflow:visible;
  }

  .content .table-wrap.mobile-card-table table,
  .content .table-wrap.mobile-card-table thead,
  .content .table-wrap.mobile-card-table tbody,
  .content .table-wrap.mobile-card-table tr,
  .content .table-wrap.mobile-card-table th,
  .content .table-wrap.mobile-card-table td{
    display:block;
    min-width:0;
    width:100%;
  }

  .content .table-wrap.mobile-card-table thead{
    display:none;
  }

  .content .table-wrap.mobile-card-table tr{
    margin-bottom:12px;
    border:1px solid rgba(90,140,196,.18);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(15,33,54,.98),rgba(12,27,44,.98));
    box-shadow:0 12px 24px rgba(1,8,18,.25);
    overflow:hidden;
  }

  .content .table-wrap.mobile-card-table td{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:10px;
    border-bottom:1px solid rgba(90,140,196,.12);
    padding:10px 12px;
  }

  .content .table-wrap.mobile-card-table td:last-child{
    border-bottom:0;
  }

  .content .table-wrap.mobile-card-table td::before{
    content:attr(data-label);
    color:#7fa4c7;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:800;
  }
}