:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --text:#0b1220;
  --muted:#516072;
  --brand:#d97706;
  --danger:#dc2626;
  --ok:#059669;
  --border:rgba(2,6,23,.12);
  --shadow: 0 10px 30px rgba(2,6,23,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.container{max-width:1100px;margin:0 auto;padding:20px}
.topbar{
  position:sticky;top:0;z-index:10;
  backdrop-filter: blur(12px);
  background: rgba(246,247,251,.80);
  border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-actions{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.nav-actions-cluster{
  display:flex;
  align-items:center;
  gap:10px 14px;
  min-width:0;
  flex:0 1 auto;
}
.topbar-nav{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:4px 2px;
  min-width:0;
  max-width:100%;
}
@media (max-width: 1100px){
  .werkstatt .topbar-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
    padding-bottom:2px;
  }
}
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.nav-link:hover{
  color:var(--text);
  background:rgba(2,6,23,.05);
}
.nav-link:focus-visible{
  outline:2px solid rgba(217,119,6,.65);
  outline-offset:2px;
}
.nav-link.is-active{
  color:var(--text);
  background:rgba(245,158,11,.18);
  border-color:rgba(245,158,11,.38);
}
.nav-link--cta{
  color:var(--text);
  background:rgba(245,158,11,.14);
  border-color:rgba(245,158,11,.35);
}
.nav-link--cta:hover{
  background:rgba(245,158,11,.22);
}
.nav-logout-form{
  margin:0;
  flex:0 0 auto;
  display:flex;
  align-items:center;
}
.nav-logout{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:8px 14px;
  margin:0;
  border-radius:999px;
  border:1px solid rgba(220,38,38,.45);
  background:transparent;
  color:var(--danger);
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.nav-logout:hover{
  background:rgba(220,38,38,.08);
  border-color:rgba(220,38,38,.6);
}
.nav-logout:focus-visible{
  outline:2px solid rgba(220,38,38,.55);
  outline-offset:2px;
}
.nav-burger{display:none}
.nav-overlay{display:none}
.nav-drawer{display:none}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:999px;background:rgba(2,6,23,.03)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:rgba(2,6,23,.03);color:var(--text);
  cursor:pointer;
}
.btn:hover{border-color:rgba(245,158,11,.35)}
.btn.primary{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.35)}
.btn.danger{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35)}
.btn:hover{border-color:rgba(217,119,6,.35)}
.grid{display:grid;gap:14px}
@media(min-width:900px){.grid.cols2{grid-template-columns: 1fr 1fr}}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:16px;
}
.card{
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01));
}
.card h2{margin:0 0 8px;font-size:16px}
.muted{color:var(--muted)}
.field{display:grid;gap:6px;margin:10px 0}
label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
input,textarea,select{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.02);
  color:var(--text);
  outline:none;
}
textarea{min-height:110px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:rgba(245,158,11,.45)}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > *{flex:1 1 220px}
.notice{
  border-radius:14px;padding:12px 12px;border:1px solid var(--border);
  background:rgba(255,255,255,.02)
}
.notice.ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10)}
.notice.danger{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.10)}
.table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px;border:1px solid var(--border)}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.table th{text-align:left;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.02)}
.table tr:last-child td{border-bottom:0}
.badge{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;border:1px solid var(--border);font-weight:700;font-size:12px;background:rgba(255,255,255,.02)}
.badge.ok{border-color:rgba(16,185,129,.35);background:rgba(16,185,129,.10)}
.badge.warn{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.10)}
.badge.neutral{border-color:rgba(148,163,184,.25);background:rgba(148,163,184,.08)}
.footer{padding:24px 0;color:var(--muted);font-size:12px}

.scannerBox{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.scannerBox video,
.scannerBox img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Customer Bereich: Mobile-First Tweaks (Werkstatt bleibt unverändert) */
.customer .container{padding:14px}
.customer .topbar-inner{flex-wrap:nowrap}
.customer .brand{flex:1 1 auto; min-width:0}
.customer .pill{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.customer .nav-actions{display:none}
.customer .nav-actions-cluster.nav-desktop-only{display:none}
.customer .nav-burger{
  display:inline-flex;
  flex:0 0 auto;
  padding:10px 12px;
  font-size:18px;
  line-height:1;
}

.customer .nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.45);
  backdrop-filter: blur(2px);
  z-index:50;
}
.customer .nav-overlay.is-open{display:block}

.customer .nav-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(86vw, 320px);
  background: var(--panel);
  border-left:1px solid var(--border);
  box-shadow: 0 20px 60px rgba(2,6,23,.25);
  z-index:60;
  transform: translateX(100%);
  transition: transform .22s ease;
  padding:14px;
  display:block;
}
.customer .nav-drawer.is-open{transform: translateX(0)}
.customer .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.customer .nav-drawer-title{font-weight:800;letter-spacing:.2px}
.customer .nav-drawer-links{display:flex;flex-direction:column;gap:6px}
.customer .nav-drawer-links .nav-link{width:100%;justify-content:flex-start;border-radius:12px}
.customer .nav-drawer-links .nav-logout-form{width:100%}
.customer .nav-drawer-links .nav-logout{width:100%}

@media(min-width:900px){
  /* Desktop: Buttons direkt sichtbar, kein Hamburger */
  .customer .nav-burger{display:none}
  .customer .nav-actions{display:flex}
  .customer .nav-actions-cluster.nav-desktop-only{display:flex}
}

.customer-nav-lock{overflow:hidden}
.customer .btn{padding:10px 10px; border-radius:12px}

/* Werkstatt Bereich: Mobile-First Tweaks (Hamburger wie Kunde) */
.werkstatt .container{padding:14px}
.werkstatt .topbar-inner{flex-wrap:nowrap}
.werkstatt .brand{flex:1 1 auto; min-width:0}
.werkstatt .pill{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.werkstatt .nav-actions{display:none}
.werkstatt .nav-actions-cluster.nav-desktop-only{display:none}
.werkstatt .nav-burger{
  display:inline-flex;
  flex:0 0 auto;
  padding:10px 12px;
  font-size:18px;
  line-height:1;
}

.werkstatt .nav-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.45);
  backdrop-filter: blur(2px);
  z-index:50;
}
.werkstatt .nav-overlay.is-open{display:block}

.werkstatt .nav-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:min(86vw, 320px);
  background: var(--panel);
  border-left:1px solid var(--border);
  box-shadow: 0 20px 60px rgba(2,6,23,.25);
  z-index:60;
  transform: translateX(100%);
  transition: transform .22s ease;
  padding:14px;
  display:block;
}
.werkstatt .nav-drawer.is-open{transform: translateX(0)}
.werkstatt .nav-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.werkstatt .nav-drawer-title{font-weight:800;letter-spacing:.2px}
.werkstatt .nav-drawer-links{display:flex;flex-direction:column;gap:6px}
.werkstatt .nav-drawer-links .nav-link{width:100%;justify-content:flex-start;border-radius:12px}
.werkstatt .nav-drawer-links .nav-logout-form{width:100%}
.werkstatt .nav-drawer-links .nav-logout{width:100%}

@media(min-width:900px){
  /* Desktop: Buttons direkt sichtbar, kein Hamburger */
  .werkstatt .nav-burger{display:none}
  .werkstatt .nav-actions{display:flex}
  .werkstatt .nav-actions-cluster.nav-desktop-only{display:flex}
}

.werkstatt-nav-lock{overflow:hidden}
.werkstatt .btn{padding:10px 10px; border-radius:12px}

/* Tabellen auf Mobile horizontal scrollen statt Layout sprengen */
.customer .table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
.customer .table th,
.customer .table td{white-space:nowrap}

@media(min-width:900px){
  .customer .container{padding:20px}
  .customer .table{display:table; overflow:visible}
  .customer .table th,
  .customer .table td{white-space:normal}
}

/* --- Werkstatt: Desktop-Layouts, Tabellen, Aktionen --- */
.werkstatt-id-code{
  font-size:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: rgba(2,6,23,.06);
  padding: 3px 8px;
  border-radius: 8px;
}
.werkstatt-nowrap{white-space:nowrap}
.btn.btn-sm{
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 10px;
}
.table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.table-wrap .table{
  margin: 0;
  border: 0;
  border-radius: 0;
}
.th-num, .td-num{ text-align: right }
.th-action{
  width: 1%;
  white-space: nowrap;
  text-align: right !important;
}
.td-action{
  vertical-align: middle;
  text-align: right;
}
.table-actions th,
.table-actions td{ vertical-align: middle }
.werkstatt-action-btns{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.werkstatt-sum-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}
.werkstatt-toolbar{
  align-items: center;
}
.row.werkstatt-toolbar > *{
  flex: 0 0 auto !important;
}
.werkstatt-toolbar .btn,
.werkstatt-toolbar form{
  flex: 0 0 auto;
}
.werkstatt-page-head-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-top: 6px;
}
.werkstatt-page-head-sep{ color: var(--muted); font-weight: 400 }
@media (max-width: 640px){
  .werkstatt-page-head-sep{ display: none }
}
.werkstatt-filter-bar{ margin-top: 12px }
.werkstatt-filter-row{ align-items: flex-end }
.werkstatt-filter-submit{
  flex: 0 0 auto !important;
  min-width: 120px;
}
.werkstatt-form-row-tight > *{
  flex: 1 1 140px !important;
  min-width: 0;
}
.werkstatt-leistungen-layout{
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.werkstatt-leistungen-new-form textarea{ min-height: 88px }
.werkstatt-edit-panel{
  margin: 10px 0 4px;
  box-shadow: none;
  border-style: dashed;
}
.werkstatt-edit-row td{
  padding: 0 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(245, 158, 11, .08);
}
tr.is-active-edit td{
  background: rgba(245, 158, 11, .05);
  border-bottom-color: rgba(245, 158, 11, .25);
}
.werkstatt-edit-panel-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 699px){
  .werkstatt-edit-panel-grid{ grid-template-columns: 1fr }
}
.werkstatt-edit-actions{
  justify-content: flex-end;
  margin-top: 4px;
}
.werkstatt-edit-actions > *{ flex: 0 0 auto !important }
.werkstatt-angebot-grid{
  align-items: start;
}
.werkstatt-angebot-form textarea{ min-height: 72px }
@media (min-width: 1024px){
  .werkstatt .container{ max-width: 1280px }
  .werkstatt-leistungen-layout{
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    align-items: start;
  }
  .werkstatt-leistungen-sidebar{
    position: sticky;
    top: 72px;
    align-self: start;
  }
  .werkstatt-angebot-grid{
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  }
  .werkstatt-angebot-sidebar{
    position: sticky;
    top: 72px;
    align-self: start;
  }
}

/* Zeilen-Navigation & Kontextmenü */
.table tr[data-row-href],
.table td[data-row-href]{
  cursor: pointer;
}
.card[data-card-href]{
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card[data-card-href]:hover{
  border-color: rgba(245, 158, 11, .35);
  box-shadow: 0 12px 36px rgba(2, 6, 23, .12);
}
.card[data-card-href]:focus{
  outline: 2px solid rgba(245, 158, 11, .55);
  outline-offset: 2px;
}
.row-context-menu{
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: var(--card, #141c2e);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.row-context-menu-item{
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--text, #e7eefc);
  font: inherit;
  cursor: pointer;
}
.row-context-menu-item:hover,
.row-context-menu-item:focus{
  background: rgba(255,255,255,.08);
  outline: none;
}
.row-context-menu-item.is-danger{
  color: #fca5a5;
}
.td-leistung-row-nav{
  cursor: pointer;
}

.app-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.55);
}
.app-modal-box{
  width: 100%;
  max-width: 420px;
  padding: 20px 22px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card, #141c2e);
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
}
.app-modal-text{
  margin: 0 0 16px;
  line-height: 1.45;
}
.app-modal-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}