* {
  box-sizing: border-box;
}

:root {
  --bg: #080c10;
  --bg-soft: #0d1318;
  --card: rgba(17, 24, 31, 0.92);
  --card-2: rgba(24, 33, 42, 0.92);
  --border: rgba(255, 255, 255, 0.1);
  --text: #f2f6f7;
  --muted: #9aa6ad;
  --green: #63e65f;
  --green-dark: #1f7d25;
  --blue: #3db5ff;
  --purple: #b36cff;
  --yellow: #ffd166;
  --danger: #ff6b6b;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, rgba(99, 230, 95, 0.14), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(61, 181, 255, 0.10), transparent 24%),
    var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

.app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 270px 1fr 360px;
}

.sidebar,
.rightbar {
  background: rgba(5, 9, 13, 0.74);
  backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
  padding: 24px 14px;
}

.rightbar {
  border-right: 0;
  border-left: 1px solid var(--border);
  padding: 24px 18px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 8px 28px;
}

.brand-icon {
  font-size: 38px;
  color: var(--green);
  line-height: 1;
}

.brand strong {
  display: block;
  font-size: 26px;
  letter-spacing: -1px;
  text-transform: uppercase;
}

.brand span {
  color: var(--green);
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
}

.menu {
  display: grid;
  gap: 8px;
}

.menu-item,
.top-actions button,
.import-btn,
.actions-row button,
.quick-grid button,
.link-btn,
.form-actions button,
.small-btn,
.material-actions button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 13px 14px;
  transition: 0.18s ease;
}

.menu-item {
  text-align: left;
}

.menu-item:hover,
.top-actions button:hover,
.import-btn:hover,
.actions-row button:hover,
.quick-grid button:hover,
.form-actions button:hover,
.material-actions button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.menu-item.active {
  background: linear-gradient(90deg, rgba(99, 230, 95, 0.16), rgba(99, 230, 95, 0.03));
  border-color: rgba(99, 230, 95, 0.45);
  color: var(--green);
}

.machine-card,
.user-card,
.card,
.side-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.machine-card {
  margin-top: 26px;
  padding: 18px;
}

.machine-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.machine-top span {
  font-size: 18px;
  font-weight: 700;
}

.machine-top small,
.version-badge,
.badge,
.source-badge {
  color: var(--green);
  background: rgba(99, 230, 95, 0.12);
  border: 1px solid rgba(99, 230, 95, 0.26);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.source-badge.default {
  color: var(--blue);
  background: rgba(61, 181, 255, 0.1);
  border-color: rgba(61, 181, 255, 0.28);
}

.machine-box {
  display: flex;
  gap: 14px;
  align-items: center;
  margin: 18px 0;
}

.laser-cube {
  width: 78px;
  height: 86px;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(99, 230, 95, 0.35), rgba(255, 255, 255, 0.08)),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255, 255, 255, 0.04) 9px 10px);
  border: 1px solid rgba(99, 230, 95, 0.35);
  box-shadow: inset 0 0 40px rgba(99, 230, 95, 0.18);
}

.machine-box b,
.machine-box span {
  display: block;
}

.machine-box span,
.machine-card p,
.user-card span,
.muted {
  color: var(--muted);
}

.machine-card p {
  margin: 8px 0;
  font-size: 14px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-top: 24px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card-2);
  border: 1px solid var(--border);
  font-weight: 700;
}

.main {
  padding: 24px 28px 32px;
  overflow: auto;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: 30px;
}

.topbar p,
.card-head span {
  color: var(--muted);
}

.top-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.import-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.import-btn input {
  display: none;
}

.grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.card,
.side-card {
  padding: 18px;
}

.card h2,
.side-card h3 {
  margin-bottom: 18px;
}

.card-large {
  min-height: 230px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.form-grid.single {
  grid-template-columns: 1fr;
}

label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}

.full-label {
  margin-top: 16px;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  color: var(--text);
  background: #080d12;
  border-radius: 10px;
  padding: 13px 12px;
  outline: none;
}

select:focus,
input:focus,
textarea:focus {
  border-color: rgba(99, 230, 95, 0.7);
  box-shadow: 0 0 0 3px rgba(99, 230, 95, 0.08);
}

.size-layout {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 18px;
}

.preview-box {
  border: 1px solid var(--border);
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 18px;
  min-height: 150px;
  display: grid;
  place-items: center;
}

#previewArea {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1.25;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 20px;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.result-card {
  margin-bottom: 18px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 13px;
  padding: 14px;
}

.metric span,
.summary-main span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.metric strong {
  font-size: 18px;
}

.summary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.summary-main {
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.025);
}

.summary-main + .summary-main {
  border-left: 1px solid var(--border);
}

.summary-main strong {
  display: block;
  font-size: 34px;
  margin-bottom: 4px;
}

.summary-main small {
  color: var(--muted);
}

.summary-main.price strong,
.summary-main.price small,
.table-like .highlight {
  color: var(--green);
}

.table-like {
  display: grid;
}

.table-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.table-row span:first-child {
  color: var(--muted);
}

.actions-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
  gap: 14px;
}

.primary {
  background: linear-gradient(180deg, rgba(99, 230, 95, 0.52), rgba(31, 125, 37, 0.82)) !important;
  border-color: rgba(99, 230, 95, 0.65) !important;
}

.danger {
  color: var(--danger) !important;
  border-color: rgba(255, 107, 107, 0.35) !important;
}

.small-btn {
  padding: 10px 12px;
}

.panel {
  display: none;
}

.active-panel {
  display: block;
}

.hidden {
  display: none !important;
}

.side-card {
  margin-bottom: 16px;
}

.material-toolbar {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 12px;
  margin: 18px 0;
}

.material-form {
  border: 1px solid rgba(99, 230, 95, 0.22);
  background: rgba(99, 230, 95, 0.045);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.material-mini,
.test-mini,
.material-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.material-row {
  grid-template-columns: 64px 1fr auto;
}

.material-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #333, #777);
}

.material-row .material-thumb {
  width: 64px;
  height: 64px;
}

.material-thumb.slate { background: linear-gradient(135deg, #1b1f23, #545b61); }
.material-thumb.steel { background: linear-gradient(135deg, #e1e1e1, #777); }
.material-thumb.wood { background: linear-gradient(135deg, #d4a15f, #f7deb1); }
.material-thumb.acrylic { background: linear-gradient(135deg, #101010, #494949); }
.material-thumb.leather { background: linear-gradient(135deg, #6b2f1d, #b26d42); }
.material-thumb.glass { background: linear-gradient(135deg, #d9fbff, #78a8b4); }
.material-thumb.cork { background: linear-gradient(135deg, #9a6d3d, #d9b77d); }
.material-thumb.aluminum { background: linear-gradient(135deg, #c6d0d5, #56656e); }
.material-thumb.ceramic { background: linear-gradient(135deg, #f7f7f7, #c9c9c9); }
.material-thumb.paper { background: linear-gradient(135deg, #f0e2bb, #b79b65); }

.material-mini strong,
.test-mini strong,
.material-row strong {
  display: block;
  margin-bottom: 3px;
}

.material-mini span,
.test-mini span,
.material-row span {
  color: var(--muted);
  font-size: 13px;
}

.material-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.material-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.material-actions button {
  padding: 9px 10px;
  font-size: 13px;
}

.link-btn {
  padding: 7px 9px;
  color: var(--green);
  background: transparent;
  border: 0;
}

.quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.test-list,
.material-list {
  display: grid;
  gap: 8px;
}

.test-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 14px;
}

.test-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.test-card small {
  color: var(--muted);
  display: block;
  margin-top: 4px;
}

@media (max-width: 1250px) {
  .app {
    grid-template-columns: 240px 1fr;
  }

  .rightbar {
    display: none;
  }
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    border-right: 0;
  }

  .menu {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid,
  .summary-row,
  .result-grid,
  .actions-row,
  .form-grid,
  .size-layout,
  .material-toolbar,
  .material-row {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    flex-direction: column;
  }

  .card-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .material-actions {
    justify-content: flex-start;
  }
}


/* Schritt 3 – Testmatrix */

.matrix-builder {
  display: grid;
  gap: 18px;
}

.matrix-ranges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.range-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 16px;
}

.range-card h3 {
  margin-bottom: 14px;
}

.matrix-actions {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
  gap: 12px;
}

.matrix-actions button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 13px 14px;
  transition: 0.18s ease;
}

.matrix-actions button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.matrix-preview-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.025), transparent),
    #070b0f;
  padding: 18px;
}

.matrix-preview-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed rgba(255,255,255,0.18);
  border-radius: 14px;
}

.matrix-svg {
  display: block;
  max-width: none;
  background: #ffffff;
  border-radius: 8px;
}

.matrix-value-table {
  overflow: auto;
}

.matrix-value-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.matrix-value-table th,
.matrix-value-table td {
  border-bottom: 1px solid var(--border);
  padding: 11px 10px;
  text-align: left;
}

.matrix-value-table th {
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
}

.matrix-value-table td {
  color: var(--text);
}

.matrix-value-table small {
  color: var(--muted);
}

@media (max-width: 900px) {
  .matrix-ranges,
  .matrix-actions {
    grid-template-columns: 1fr;
  }
}


/* Schritt 4 – Aufträge */

.order-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.stat-box {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 14px;
}

.stat-box span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.stat-box strong {
  font-size: 24px;
}

.order-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  margin: 18px 0;
}

.order-form {
  border: 1px solid rgba(99, 230, 95, 0.22);
  background: rgba(99, 230, 95, 0.045);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.order-list {
  display: grid;
  gap: 12px;
}

.order-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 16px;
}

.order-card header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.order-card h3 {
  margin-bottom: 4px;
}

.order-card small {
  color: var(--muted);
}

.order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.order-actions button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 9px 10px;
  transition: 0.18s ease;
  font-size: 13px;
}

.order-actions button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.order-price {
  color: var(--green);
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.status-badge {
  border: 1px solid var(--border);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 12px;
}

.status-open {
  color: var(--yellow);
  background: rgba(255, 209, 102, 0.1);
  border-color: rgba(255, 209, 102, 0.28);
}

.status-in_progress {
  color: var(--blue);
  background: rgba(61, 181, 255, 0.1);
  border-color: rgba(61, 181, 255, 0.28);
}

.status-done {
  color: var(--green);
  background: rgba(99, 230, 95, 0.1);
  border-color: rgba(99, 230, 95, 0.28);
}

.status-picked_up {
  color: var(--purple);
  background: rgba(179, 108, 255, 0.1);
  border-color: rgba(179, 108, 255, 0.28);
}

.status-cancelled {
  color: var(--danger);
  background: rgba(255, 107, 107, 0.1);
  border-color: rgba(255, 107, 107, 0.28);
}

.order-mini {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.order-mini strong {
  display: block;
}

.order-mini span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .order-stats,
  .order-toolbar {
    grid-template-columns: 1fr;
  }

  .order-card header {
    flex-direction: column;
  }

  .order-actions {
    justify-content: flex-start;
  }
}


/* Schritt 5 – Druck / Angebot */

.soft-line {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 24px 0;
}

.print-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.print-buttons button {
  border: 1px solid rgba(99, 230, 95, 0.32);
  color: var(--green);
  background: rgba(99, 230, 95, 0.055);
  border-radius: 12px;
  padding: 9px 10px;
  transition: 0.18s ease;
  font-size: 13px;
}

.print-buttons button:hover {
  border-color: rgba(99, 230, 95, 0.65);
  background: rgba(99, 230, 95, 0.11);
}

.order-print-hint {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

@media print {
  body {
    background: #fff !important;
    color: #111 !important;
  }

  .sidebar,
  .rightbar,
  .topbar,
  .menu,
  .actions-row,
  .order-actions,
  .print-buttons {
    display: none !important;
  }

  .app {
    display: block !important;
  }

  .main {
    padding: 0 !important;
  }

  .card,
  .order-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #111 !important;
  }
}


/* Schritt 6 – Kunden */

.customer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.customer-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  margin: 18px 0;
}

.customer-form {
  border: 1px solid rgba(99, 230, 95, 0.22);
  background: rgba(99, 230, 95, 0.045);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.customer-list {
  display: grid;
  gap: 12px;
}

.customer-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 16px;
}

.customer-card header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.customer-card h3 {
  margin-bottom: 4px;
}

.customer-card small {
  color: var(--muted);
}

.customer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.customer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.customer-actions button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 9px 10px;
  transition: 0.18s ease;
  font-size: 13px;
}

.customer-actions button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.customer-price {
  color: var(--green);
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.customer-mini {
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.customer-mini strong {
  display: block;
}

.customer-mini span {
  color: var(--muted);
  font-size: 13px;
}

.customer-history {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.customer-history h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.customer-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.customer-history-row:last-child {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .customer-stats,
  .customer-toolbar {
    grid-template-columns: 1fr;
  }

  .customer-card header {
    flex-direction: column;
  }

  .customer-actions {
    justify-content: flex-start;
  }
}


/* Schritt 7 – Laserprofile */

.laser-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.laser-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  margin: 18px 0;
}

.laser-form {
  border: 1px solid rgba(99, 230, 95, 0.22);
  background: rgba(99, 230, 95, 0.045);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.laser-list {
  display: grid;
  gap: 12px;
}

.laser-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 14px;
}

.laser-icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 20%, rgba(99, 230, 95, 0.35), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  color: var(--green);
  font-size: 28px;
  font-weight: 800;
}

.laser-row strong {
  display: block;
  margin-bottom: 4px;
}

.laser-row span {
  color: var(--muted);
  font-size: 13px;
}

.laser-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.laser-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.laser-actions button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 9px 10px;
  transition: 0.18s ease;
  font-size: 13px;
}

.laser-actions button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.laser-mini {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.laser-mini .laser-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.laser-mini strong {
  display: block;
}

.laser-mini span {
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 900px) {
  .laser-stats,
  .laser-toolbar,
  .laser-row {
    grid-template-columns: 1fr;
  }

  .laser-actions {
    justify-content: flex-start;
  }
}


/* Schritt 8 – Dashboard */

.dashboard-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 18px;
  background:
    radial-gradient(circle at 85% 20%, rgba(99, 230, 95, 0.14), transparent 30%),
    var(--card);
}

.dashboard-hero h2 {
  font-size: 30px;
  margin: 10px 0 8px;
}

.dashboard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 360px;
}

.dashboard-actions button,
.quick-start-grid button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 13px 14px;
  transition: 0.18s ease;
}

.dashboard-actions button:hover,
.quick-start-grid button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.dashboard-list {
  display: grid;
  gap: 10px;
}

.dashboard-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dashboard-item:last-child {
  border-bottom: 0;
}

.dashboard-item strong {
  display: block;
  margin-bottom: 4px;
}

.dashboard-item span {
  color: var(--muted);
  font-size: 13px;
}

.dashboard-item .value {
  color: var(--green);
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dashboard-mini-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 14px;
}

.dashboard-mini-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.dashboard-mini-card strong {
  font-size: 24px;
}

.quick-start-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.empty-dashboard {
  color: var(--muted);
  padding: 14px 0;
}

@media (max-width: 1100px) {
  .dashboard-hero,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-actions {
    min-width: 0;
  }

  .quick-start-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .dashboard-stats,
  .dashboard-cards,
  .quick-start-grid,
  .dashboard-actions {
    grid-template-columns: 1fr;
  }
}


/* Schritt 9 – Server/Supabase */

.server-status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.server-box {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 18px;
  margin-top: 18px;
}

.server-box h3 {
  margin-bottom: 10px;
}

.server-checklist {
  display: grid;
  gap: 9px;
  color: var(--muted);
}

.server-checklist div {
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.server-checklist div:last-child {
  border-bottom: 0;
}

.code-block {
  white-space: pre-wrap;
  background: #05080b;
  color: var(--green);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  overflow: auto;
}

@media (max-width: 900px) {
  .server-status-grid {
    grid-template-columns: 1fr;
  }
}


/* Schritt 10 – Login */
.auth-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.auth-form { border: 1px solid var(--border); background: rgba(255,255,255,0.025); border-radius: 16px; padding: 18px; display: grid; gap: 14px; }
.auth-form button { border: 1px solid var(--border); color: var(--text); background: rgba(255,255,255,0.035); border-radius: 12px; padding: 13px 14px; transition: 0.18s ease; }
.auth-form button:hover { border-color: rgba(99,230,95,0.5); background: rgba(99,230,95,0.08); }
.auth-ok { color: var(--green) !important; }
.auth-warn { color: var(--yellow) !important; }
@media (max-width: 900px) { .auth-status-grid, .auth-grid { grid-template-columns: 1fr; } }


/* Schritt 11 – Deployment */
.deployment-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.deploy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) {
  .deployment-stats,
  .deploy-grid {
    grid-template-columns: 1fr;
  }
}


/* Schritt 12 – Live Setup */
.live-check-result {
  margin-top: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 14px;
  padding: 14px;
  white-space: pre-wrap;
}

.live-check-ok {
  color: var(--green);
}

.live-check-warn {
  color: var(--yellow);
}

.live-check-error {
  color: var(--danger);
}


/* Schritt 13 Fix – 3D-Druck-Rechner */
.print3d-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.print3d-box {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 18px;
}
.print3d-box h3 {
  margin-bottom: 16px;
}
.print3d-result-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.print3d-actions {
  grid-template-columns: 1.2fr 1fr 1fr;
}
@media (max-width: 1100px) {
  .print3d-grid,
  .print3d-result-grid,
  .print3d-actions {
    grid-template-columns: 1fr;
  }
}


/* Schritt 14 – Filament-Datenbank */
.filament-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.filament-toolbar {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px;
  margin: 18px 0;
}

.filament-form {
  border: 1px solid rgba(99, 230, 95, 0.22);
  background: rgba(99, 230, 95, 0.045);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.filament-list {
  display: grid;
  gap: 12px;
}

.filament-card {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 16px;
}

.filament-card header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.filament-card h3 {
  margin-bottom: 4px;
}

.filament-card small {
  color: var(--muted);
}

.filament-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0;
}

.filament-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.filament-actions button {
  border: 1px solid var(--border);
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 12px;
  padding: 9px 10px;
  transition: 0.18s ease;
  font-size: 13px;
}

.filament-actions button:hover {
  border-color: rgba(99, 230, 95, 0.5);
  background: rgba(99, 230, 95, 0.08);
}

.filament-price {
  color: var(--green);
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.filament-low {
  color: var(--danger);
}

.filament-ok {
  color: var(--green);
}

@media (max-width: 900px) {
  .filament-stats,
  .filament-toolbar {
    grid-template-columns: 1fr;
  }

  .filament-card header {
    flex-direction: column;
  }

  .filament-actions {
    justify-content: flex-start;
  }
}


/* Schritt 15 – Auftragstypen */
.order-type-badge {
  border: 1px solid rgba(99, 230, 95, 0.35);
  background: rgba(99, 230, 95, 0.09);
  color: var(--green);
}

.order-type-print3d {
  border-color: rgba(90, 170, 255, 0.35);
  background: rgba(90, 170, 255, 0.08);
  color: #8fc5ff;
}

.order-type-combo {
  border-color: rgba(255, 193, 7, 0.42);
  background: rgba(255, 193, 7, 0.09);
  color: var(--yellow);
}

.order-type-other {
  border-color: var(--border);
  background: rgba(255,255,255,0.035);
  color: var(--muted);
}


/* Schritt 16 – Kombi-Rechner */
.combo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.combo-box {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 16px;
  padding: 18px;
}

.combo-box h3 {
  margin-bottom: 16px;
}

.combo-result-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.combo-actions {
  grid-template-columns: 1.2fr 1fr 1fr;
}

@media (max-width: 1100px) {
  .combo-grid,
  .combo-result-grid,
  .combo-actions {
    grid-template-columns: 1fr;
  }
}


/* Schritt 17 – Angebote & Rechnungen */
.offer-status-badge {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
}

.offer-status-draft {
  border-color: rgba(255,255,255,0.22);
}

.offer-status-sent {
  border-color: rgba(90, 170, 255, 0.42);
  background: rgba(90, 170, 255, 0.08);
  color: #8fc5ff;
}

.offer-status-accepted {
  border-color: rgba(99, 230, 95, 0.42);
  background: rgba(99, 230, 95, 0.09);
  color: var(--green);
}

.offer-status-declined,
.offer-status-expired {
  border-color: rgba(255, 107, 107, 0.42);
  background: rgba(255, 107, 107, 0.08);
  color: var(--danger);
}

.document-note {
  color: #555;
  font-size: 12px;
  margin-top: 8px;
}


/* Schritt 18 FIX – 3D-Material im Auftrag */
.order-print3d-field {
  transition: opacity 0.2s ease;
}


/* =========================================================
   Schritt 18 Mint – Schwarz / Mint Design
   Moderne dunkle Oberfläche für AuftragsPilot
========================================================= */

:root {
  --bg: #050707;
  --bg-soft: #0a0f0f;
  --card: #101616;
  --card-2: #121b1a;
  --card-3: #162321;
  --text: #f2fffb;
  --muted: #9eb8b2;

  --border: rgba(79, 255, 210, 0.18);
  --border-strong: rgba(79, 255, 210, 0.42);

  --green: #4fffd2;
  --green-2: #22d6b2;
  --yellow: #b7ffef;
  --danger: #ff6b6b;
  --blue: #7cf7ff;

  --shadow: 0 22px 70px rgba(0, 0, 0, 0.62);
  --glow: 0 0 0 1px rgba(79, 255, 210, 0.18), 0 18px 50px rgba(79, 255, 210, 0.10);
}

html,
body {
  background:
    radial-gradient(circle at 20% 0%, rgba(79, 255, 210, 0.17), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(124, 247, 255, 0.09), transparent 26%),
    linear-gradient(180deg, #050707 0%, #071010 48%, #050707 100%);
  color: var(--text);
}

.app-shell {
  background:
    linear-gradient(90deg, rgba(79, 255, 210, 0.06), transparent 24%, transparent 76%, rgba(34, 214, 178, 0.05)),
    transparent;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(79, 255, 210, 0.10), rgba(0, 0, 0, 0.03)),
    rgba(6, 9, 9, 0.96);
  border-right: 1px solid var(--border);
  box-shadow: 18px 0 55px rgba(0, 0, 0, 0.38);
}

.logo-mark,
.doc-logo {
  background: linear-gradient(135deg, #8affea, #22d6b2);
  color: #031312;
  box-shadow: 0 0 26px rgba(79, 255, 210, 0.36);
}

.logo small,
.muted,
.card p,
label,
.hint,
.subtitle {
  color: var(--muted);
}

.version-badge,
.badge,
.status-badge {
  border-color: var(--border);
  background: rgba(79, 255, 210, 0.075);
  color: #c9fff4;
}

.menu-item {
  color: #c3d8d3;
  border: 1px solid transparent;
}

.menu-item:hover {
  background: rgba(79, 255, 210, 0.085);
  border-color: rgba(79, 255, 210, 0.22);
  color: #f2fffb;
}

.menu-item.active {
  background:
    linear-gradient(135deg, rgba(79, 255, 210, 0.18), rgba(34, 214, 178, 0.07));
  border-color: rgba(79, 255, 210, 0.38);
  color: #ffffff;
  box-shadow: inset 3px 0 0 #4fffd2, 0 0 22px rgba(79, 255, 210, 0.08);
}

.card,
.result-card,
.combo-box,
.modal,
.table-row,
.stat-box,
.metric,
.summary-main,
.login-box {
  background:
    linear-gradient(180deg, rgba(79, 255, 210, 0.035), rgba(255, 255, 255, 0.012)),
    var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.card:hover,
.metric:hover,
.table-row:hover,
.stat-box:hover {
  border-color: rgba(79, 255, 210, 0.34);
}

input,
select,
textarea {
  background: #060a0a;
  border-color: rgba(79, 255, 210, 0.20);
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  border-color: #4fffd2;
  box-shadow: 0 0 0 3px rgba(79, 255, 210, 0.13);
}

button,
.primary,
.small-btn {
  border-color: rgba(79, 255, 210, 0.25);
  background:
    linear-gradient(135deg, rgba(79, 255, 210, 0.15), rgba(34, 214, 178, 0.07));
  color: #f2fffb;
}

button:hover {
  border-color: rgba(79, 255, 210, 0.52);
  box-shadow: 0 0 22px rgba(79, 255, 210, 0.13);
  transform: translateY(-1px);
}

button.primary,
.primary {
  background: linear-gradient(135deg, #4fffd2, #22d6b2);
  color: #031312;
  border-color: transparent;
  font-weight: 800;
  box-shadow: 0 14px 36px rgba(79, 255, 210, 0.22);
}

button.primary:hover,
.primary:hover {
  box-shadow: 0 18px 48px rgba(79, 255, 210, 0.32);
}

button.danger,
.danger {
  background: rgba(255, 107, 107, 0.12);
  color: #ffd1d1;
  border-color: rgba(255, 107, 107, 0.35);
}

.highlight,
.price strong,
.summary-main.price strong,
.metric strong,
.stat-box strong {
  color: #4fffd2;
}

.status-open,
.status-progress,
.status-ready,
.status-done,
.status-picked_up,
.status-confirmed,
.status-accepted,
.offer-status-accepted {
  border-color: rgba(79, 255, 210, 0.42);
  background: rgba(79, 255, 210, 0.09);
  color: #c9fff4;
}

.order-type-badge,
.order-type-print3d,
.order-type-combo {
  border-color: rgba(79, 255, 210, 0.35);
  background: rgba(79, 255, 210, 0.08);
  color: #c9fff4;
}

.toast {
  background: #06100f;
  color: #f2fffb;
  border: 1px solid rgba(79, 255, 210, 0.30);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55), 0 0 28px rgba(79, 255, 210, 0.11);
}

.soft-line,
hr {
  border-color: rgba(79, 255, 210, 0.18);
}

::-webkit-scrollbar-thumb {
  background: rgba(79, 255, 210, 0.35);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(79, 255, 210, 0.58);
}


/* Schritt 19 – Laser-Material Lagerbestand */
.stock-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}

.stock-card {
  border: 1px solid var(--border);
  background: rgba(79, 255, 210, 0.055);
  border-radius: 16px;
  padding: 14px;
}

.stock-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.stock-card strong {
  display: block;
  font-size: 22px;
  color: var(--text);
}

.stock-card.warn strong,
.stock-badge-low,
.stock-badge-empty {
  color: #ffd2a8;
}

.stock-row-low,
.stock-row-empty {
  border-color: rgba(255, 179, 71, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 179, 71, 0.055), rgba(255, 255, 255, 0.012)),
    var(--card) !important;
}

.stock-row-empty {
  border-color: rgba(255, 107, 107, 0.48) !important;
}

.stock-badge-ok {
  border-color: rgba(79, 255, 210, 0.35);
  color: #c9fff4;
}

.stock-badge-low {
  border-color: rgba(255, 179, 71, 0.46);
  background: rgba(255, 179, 71, 0.08);
}

.stock-badge-empty {
  border-color: rgba(255, 107, 107, 0.46);
  background: rgba(255, 107, 107, 0.08);
  color: #ffd1d1;
}

.stock-badge-unknown {
  opacity: 0.75;
}

@media (max-width: 1000px) {
  .stock-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .stock-summary {
    grid-template-columns: 1fr;
  }
}


/* Schritt 20 – App-Name / Branding */
.brand-icon {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.5px;
  text-align: center;
}

#appBrandMain,
#appHeadline {
  letter-spacing: -0.03em;
}

#appSubtitle {
  max-width: 780px;
}

.full-label input#appSubtitleInput {
  width: 100%;
}


/* Schritt 21 – Ersteinrichtungs-Assistent */
.setup-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.setup-status {
  min-width: 220px;
  border: 1px solid var(--border);
  background: rgba(79, 255, 210, 0.06);
  border-radius: 18px;
  padding: 16px;
}

.setup-status span {
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
}

.setup-status strong {
  color: var(--green);
  font-size: 20px;
}

.setup-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.setup-chip {
  padding: 12px 10px;
  border-radius: 14px;
  font-weight: 800;
}

.setup-chip.active {
  background: linear-gradient(135deg, #4fffd2, #22d6b2);
  color: #031312;
  border-color: transparent;
}

.setup-step {
  display: none;
}

.setup-step.active {
  display: block;
}

.setup-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.setup-box {
  border: 1px solid var(--border);
  background: rgba(79, 255, 210, 0.035);
  border-radius: 18px;
  padding: 18px;
}

.setup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.setup-complete-card {
  border-color: rgba(79, 255, 210, 0.42) !important;
}

@media (max-width: 1100px) {
  .setup-progress,
  .setup-two-col {
    grid-template-columns: 1fr 1fr;
  }

  .setup-hero {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  .setup-progress,
  .setup-two-col {
    grid-template-columns: 1fr;
  }

  .setup-footer {
    flex-direction: column;
  }
}


/* Schritt 22 – Produktvorlagen */
.template-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.template-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(79, 255, 210, 0.045), rgba(255,255,255,0.012)),
    var(--card);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.template-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.template-card h3 {
  margin: 0 0 5px;
}

.template-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.template-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.template-empty {
  border: 1px dashed var(--border);
  border-radius: 18px;
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 800px) {
  .template-card-head {
    flex-direction: column;
  }
}


/* Schritt 23 – Produktkatalog / Preisliste */
.catalog-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.catalog-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 18px;
}

.catalog-stat {
  border: 1px solid var(--border);
  background: rgba(79, 255, 210, 0.055);
  border-radius: 16px;
  padding: 14px;
}

.catalog-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.catalog-stat strong {
  display: block;
  font-size: 22px;
  color: var(--text);
}

.catalog-list {
  display: grid;
  gap: 14px;
}

.catalog-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(79, 255, 210, 0.045), rgba(255,255,255,0.012)),
    var(--card);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.catalog-card-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.catalog-card h3 {
  margin: 0 0 6px;
}

.catalog-price {
  font-size: 24px;
  color: var(--green);
  white-space: nowrap;
}

.catalog-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.catalog-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.catalog-empty {
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 24px;
  text-align: center;
  border-radius: 18px;
}

@media (max-width: 900px) {
  .catalog-hero,
  .catalog-card-head {
    flex-direction: column;
  }

  .catalog-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .catalog-summary {
    grid-template-columns: 1fr;
  }
}


/* Schritt 24 – Backups / Sicherungen */
.backup-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.backup-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.backup-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.backup-stat,
.backup-card {
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(79, 255, 210, 0.045), rgba(255,255,255,0.012)),
    var(--card);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.backup-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 5px;
}

.backup-stat strong {
  display: block;
  color: var(--text);
  font-size: 22px;
}

.backup-warning {
  border: 1px solid rgba(255, 179, 71, 0.35);
  background: rgba(255, 179, 71, 0.08);
  color: #ffe8c2;
  border-radius: 16px;
  padding: 14px;
  margin: 14px 0 18px;
}

.backup-list {
  display: grid;
  gap: 14px;
}

.backup-card-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.backup-card h3 {
  margin: 0 0 6px;
}

.backup-badges,
.backup-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.backup-card-actions {
  margin-top: 14px;
}

.backup-empty {
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 24px;
  text-align: center;
  border-radius: 18px;
}

@media (max-width: 900px) {
  .backup-hero,
  .backup-card-head {
    flex-direction: column;
  }

  .backup-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .backup-summary {
    grid-template-columns: 1fr;
  }
}


/* Schritt 30 – Datenschutz, Aufgaben, Zahlung, Marktmodus */
.privacy-hidden{display:none!important}.privacy-card,.privacy-doc-box{border-color:rgba(79,255,210,.38)!important}.privacy-badge{border-color:rgba(79,255,210,.35);background:rgba(79,255,210,.08);color:#c9fff4}.form-section{border:1px solid var(--border);background:rgba(79,255,210,.035);border-radius:18px;padding:18px;margin-top:6px}.section-headline{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.section-headline h3{margin:0}.task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.task-grid label{border:1px solid var(--border);background:rgba(255,255,255,.02);border-radius:14px;padding:11px;color:var(--text)}.task-grid input{width:auto;margin-right:8px}.payment-badge-open{border-color:rgba(255,179,71,.46);background:rgba(255,179,71,.08);color:#ffe8c2}.payment-badge-paid{border-color:rgba(79,255,210,.42);background:rgba(79,255,210,.08);color:#c9fff4}.payment-badge-reminder{border-color:rgba(255,107,107,.46);background:rgba(255,107,107,.08);color:#ffd1d1}.market-hero{display:flex;justify-content:space-between;align-items:center;gap:18px}.market-actions{display:flex;gap:10px;flex-wrap:wrap}.market-total{border:1px solid var(--border);background:rgba(79,255,210,.06);border-radius:18px;padding:16px;margin:16px 0;display:flex;justify-content:space-between;align-items:center}.market-total strong{font-size:28px;color:var(--green)}.market-stats{display:grid;gap:12px}.market-stat{border:1px solid var(--border);background:rgba(79,255,210,.055);border-radius:16px;padding:14px}.market-stat span{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}.market-stat strong{display:block;color:var(--text);font-size:24px}.market-sales-list{display:grid;gap:12px}.market-sale-row{border:1px solid var(--border);background:linear-gradient(180deg,rgba(79,255,210,.045),rgba(255,255,255,.012)),var(--card);border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.market-sale-row h3{margin:0 0 4px}.market-sale-row strong{color:var(--green);font-size:20px}.market-empty{border:1px dashed var(--border);color:var(--muted);padding:24px;text-align:center;border-radius:18px}@media(max-width:900px){.task-grid{grid-template-columns:1fr}.market-hero,.market-sale-row{grid-template-columns:1fr;flex-direction:column;align-items:stretch}}


/* Schritt 31–36 Komplettpaket */
.pro-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.pro-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pro-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.pro-stat,
.check-item,
.day-product,
.day-close-card,
.board-card,
.online-item {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(79, 255, 210, 0.045), rgba(255,255,255,0.012)), var(--card);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.pro-stat span,
.check-item span,
.online-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.pro-stat strong {
  display: block;
  font-size: 24px;
  color: var(--text);
}

.check-list,
.day-products,
.day-archive {
  display: grid;
  gap: 12px;
}

.check-item,
.online-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.check-ok { color: #baffef; }
.check-warn { color: #ffe8c2; }
.check-bad { color: #ffd1d1; }

.tablet-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tablet-shortcuts button {
  min-height: 82px;
  font-size: 18px;
  font-weight: 900;
}

body.tablet-mode .app-shell {
  font-size: 18px;
}

body.tablet-mode button,
body.tablet-mode input,
body.tablet-mode select,
body.tablet-mode textarea {
  min-height: 48px;
  font-size: 17px;
}

body.tablet-mode .sidebar {
  width: 280px;
}

.order-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px;
}

.board-column {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.018);
  border-radius: 20px;
  padding: 12px;
  min-height: 260px;
}

.board-column h3 {
  margin: 0 0 12px;
}

.board-card {
  margin-bottom: 10px;
}

.board-card strong,
.day-product strong,
.day-close-card strong {
  color: var(--green);
}

.legal-text {
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px;
  color: var(--text);
  font-family: inherit;
}

@media (max-width: 1100px) {
  .order-board {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .pro-hero,
  .check-item,
  .online-item {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .pro-summary,
  .tablet-shortcuts,
  .order-board {
    grid-template-columns: 1fr;
  }
}


/* Schritt 37 – sortiertes Menü mit Gruppen */
.menu-group-label {
  margin: 18px 10px 8px;
  padding: 0 4px;
  color: rgba(201, 255, 244, 0.62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.menu-group-label:first-child {
  margin-top: 6px;
}

.menu .menu-item {
  margin-bottom: 7px;
}

.sidebar {
  scrollbar-width: thin;
}

@media (max-width: 920px) {
  .menu-group-label {
    margin-top: 14px;
  }
}


/* Online-Version */
.final-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-color: rgba(79, 255, 210, 0.36) !important;
}

.final-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.final-pill {
  border: 1px solid var(--border);
  background: rgba(79, 255, 210, 0.06);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--text);
  font-weight: 800;
}

.reorder-critical {
  border-color: rgba(255, 107, 107, 0.46) !important;
  background: rgba(255, 107, 107, 0.08) !important;
}

.reorder-warning {
  border-color: rgba(255, 179, 71, 0.46) !important;
  background: rgba(255, 179, 71, 0.08) !important;
}

@media (max-width: 900px) {
  .final-hero {
    flex-direction: column;
    align-items: stretch;
  }
}


/* AuftragsPilot Dashboard Fix */
#dashboardPanel .hero,
#dashboardPanel .dashboard-hero,
#dashboardPanel .welcome-card {
  min-height: auto !important;
}

#dashboardPanel .card:first-child {
  min-height: 220px !important;
}

#dashboardPanel h1,
#dashboardPanel h2 {
  max-width: 900px;
}

/* AuftragsPilot Tablet-Fix */
@media (max-width: 1400px) {
  .app {
    grid-template-columns: 250px 1fr !important;
  }

  .rightbar {
    display: none !important;
  }

  .main {
    padding: 22px 26px 34px !important;
  }

  .topbar {
    align-items: flex-start !important;
  }

  .topbar h1 {
    font-size: 32px !important;
    line-height: 1.05 !important;
  }

  .topbar p {
    max-width: 620px !important;
    line-height: 1.35 !important;
  }

  .top-actions {
    max-width: 390px !important;
    justify-content: flex-end !important;
  }

  .grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #marketPanel .grid,
  #quickLaserPanel .grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 1050px) {
  .app {
    grid-template-columns: 220px 1fr !important;
  }

  .sidebar {
    padding: 18px 10px !important;
  }

  .brand {
    gap: 8px !important;
    padding-bottom: 18px !important;
  }

  .brand strong {
    font-size: 20px !important;
  }

  .brand span {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }

  .menu-group-label {
    margin-top: 16px !important;
    font-size: 10px !important;
  }

  .menu-item {
    padding: 12px 11px !important;
    font-size: 15px !important;
  }

  .main {
    padding: 18px !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .top-actions {
    max-width: none !important;
    justify-content: flex-start !important;
  }

  .top-actions button,
  .top-actions .import-btn {
    padding: 12px 14px !important;
  }

  .grid,
  #marketPanel .grid,
  #quickLaserPanel .grid,
  .dashboard-grid,
  .dashboard-cards {
    grid-template-columns: 1fr !important;
  }

  .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  #marketPanel .form-grid,
  #quickLaserPanel .form-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .card-large {
    min-height: 160px !important;
  }
}

@media (max-width: 760px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: static !important;
    border-right: 0 !important;
  }

  .menu {
    grid-template-columns: 1fr 1fr !important;
  }

  .form-grid,
  #marketPanel .form-grid,
  #quickLaserPanel .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* AuftragsPilot Tablet-Fix 2 – rechter Block weg, Inhalt breit */
.rightbar {
  display: none !important;
}

.app {
  grid-template-columns: 260px minmax(0, 1fr) !important;
}

.main {
  max-width: none !important;
  width: 100% !important;
}

.topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 20px !important;
}

.topbar h1 {
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1.05 !important;
}

.topbar p {
  max-width: 760px !important;
  line-height: 1.35 !important;
}

#marketPanel .grid,
#quickLaserPanel .grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr) !important;
  gap: 20px !important;
}

#marketPanel .form-grid,
#quickLaserPanel .form-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

#marketPanel .card,
#quickLaserPanel .card {
  min-width: 0 !important;
}

#marketPanel input,
#marketPanel select,
#marketPanel textarea,
#quickLaserPanel input,
#quickLaserPanel select,
#quickLaserPanel textarea {
  font-size: 16px !important;
  min-height: 48px !important;
}

@media (max-width: 1100px) {
  .app {
    grid-template-columns: 230px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding: 16px 10px !important;
  }

  .menu-item {
    padding: 13px 12px !important;
    font-size: 15px !important;
  }

  .topbar {
    grid-template-columns: 1fr !important;
  }

  #marketPanel .grid,
  #quickLaserPanel .grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 780px) {
  .app {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    position: static !important;
    border-right: none !important;
  }

  .menu {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .menu-group-label {
    grid-column: 1 / -1 !important;
  }

  #marketPanel .form-grid,
  #quickLaserPanel .form-grid {
    grid-template-columns: 1fr !important;
  }
}

/* AuftragsPilot Kassenmodus / Tablet-Kasse */
body.kassenmodus {
  overflow-x: hidden !important;
}

body.kassenmodus .sidebar,
body.kassenmodus .rightbar,
body.kassenmodus aside,
body.kassenmodus .top-actions {
  display: none !important;
}

body.kassenmodus .app {
  display: block !important;
  grid-template-columns: 1fr !important;
}

body.kassenmodus .main {
  width: 100vw !important;
  max-width: none !important;
  padding: 22px !important;
  margin: 0 !important;
}

body.kassenmodus .topbar {
  display: block !important;
  margin-bottom: 18px !important;
}

body.kassenmodus .topbar h1 {
  font-size: 42px !important;
  line-height: 1.05 !important;
}

body.kassenmodus .topbar p {
  font-size: 20px !important;
  max-width: none !important;
}

body.kassenmodus .panel {
  display: none !important;
}

body.kassenmodus #marketPanel {
  display: block !important;
}

body.kassenmodus #marketPanel .market-hero {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 18px !important;
  padding: 22px !important;
}

body.kassenmodus #marketPanel .market-hero h2 {
  font-size: 34px !important;
}

body.kassenmodus #marketPanel .market-hero p {
  font-size: 20px !important;
}

body.kassenmodus #marketPanel .grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr) !important;
  gap: 22px !important;
}

body.kassenmodus #marketPanel .card {
  padding: 24px !important;
}

body.kassenmodus #marketPanel h2 {
  font-size: 32px !important;
}

body.kassenmodus #marketPanel label {
  font-size: 17px !important;
}

body.kassenmodus #marketPanel input,
body.kassenmodus #marketPanel select {
  min-height: 58px !important;
  font-size: 21px !important;
  border-radius: 14px !important;
}

body.kassenmodus #marketPanel .form-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

body.kassenmodus #marketPanel .market-total {
  padding: 22px !important;
}

body.kassenmodus #marketPanel .market-total span {
  font-size: 22px !important;
}

body.kassenmodus #marketPanel .market-total strong {
  font-size: 40px !important;
}

body.kassenmodus #marketPanel button {
  min-height: 64px !important;
  font-size: 21px !important;
  border-radius: 16px !important;
}

body.kassenmodus #marketPanel .market-stat {
  padding: 22px !important;
}

body.kassenmodus #marketPanel .market-stat span {
  font-size: 17px !important;
}

body.kassenmodus #marketPanel .market-stat strong {
  font-size: 34px !important;
}

@media (max-width: 900px) {
  body.kassenmodus #marketPanel .grid {
    grid-template-columns: 1fr !important;
  }

  body.kassenmodus #marketPanel .form-grid {
    grid-template-columns: 1fr !important;
  }

  body.kassenmodus #marketPanel .market-hero {
    grid-template-columns: 1fr !important;
  }
}

/* AuftragsPilot – Kassenmodus Design FINAL */
body.kassenmodus {
  background: #071713 !important;
}

body.kassenmodus .topbar {
  display: none !important;
}

body.kassenmodus .main {
  padding: 18px 22px !important;
  min-height: 100vh !important;
}

body.kassenmodus #marketPanel {
  max-width: 1280px !important;
  margin: 0 auto !important;
}

body.kassenmodus #marketPanel .market-hero {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  padding: 20px 24px !important;
  margin-bottom: 18px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, rgba(79,255,210,.14), rgba(33,120,72,.12)),
    #0c1f1a !important;
}

body.kassenmodus #marketPanel .market-hero .version-badge {
  display: none !important;
}

body.kassenmodus #marketPanel .market-hero h2 {
  font-size: 42px !important;
  margin: 0 !important;
}

body.kassenmodus #marketPanel .market-hero h2::before {
  content: "Kasse · ";
  color: #4fffd2;
}

body.kassenmodus #marketPanel .market-hero p {
  font-size: 19px !important;
  margin-top: 8px !important;
  max-width: 760px !important;
}

body.kassenmodus #marketPanel .market-actions {
  display: flex !important;
  gap: 12px !important;
}

body.kassenmodus #marketPanel .market-actions button {
  min-height: 60px !important;
  font-size: 20px !important;
  padding: 0 22px !important;
}

body.kassenmodus #marketPanel .grid {
  display: grid !important;
  grid-template-columns: 1.25fr .75fr !important;
  gap: 20px !important;
}

body.kassenmodus #marketPanel .grid > .card {
  border-radius: 26px !important;
  padding: 28px !important;
}

body.kassenmodus #marketPanel .grid > .card h2 {
  font-size: 40px !important;
  margin-bottom: 24px !important;
}

body.kassenmodus #marketPanel .form-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}

body.kassenmodus #marketPanel label {
  font-size: 18px !important;
  font-weight: 800 !important;
}

body.kassenmodus #marketPanel input,
body.kassenmodus #marketPanel select {
  min-height: 72px !important;
  font-size: 27px !important;
  padding: 0 20px !important;
  border-radius: 18px !important;
}

body.kassenmodus #marketPanel .market-total {
  margin-top: 26px !important;
  padding: 28px !important;
  border-radius: 24px !important;
  background: rgba(79,255,210,.10) !important;
}

body.kassenmodus #marketPanel .market-total span {
  font-size: 28px !important;
  font-weight: 900 !important;
}

body.kassenmodus #marketPanel .market-total strong {
  font-size: 58px !important;
  line-height: 1 !important;
}

body.kassenmodus #marketPanel .actions-row {
  margin-top: 24px !important;
  display: grid !important;
  grid-template-columns: 1fr .8fr !important;
  gap: 16px !important;
}

body.kassenmodus #marketPanel .actions-row button {
  min-height: 84px !important;
  font-size: 28px !important;
  border-radius: 22px !important;
}

body.kassenmodus #marketPanel .actions-row .primary,
body.kassenmodus #marketPanel button[type="submit"] {
  background: linear-gradient(135deg, #39d353, #1f9f3d) !important;
  color: #06130d !important;
  font-weight: 1000 !important;
}

body.kassenmodus #marketPanel .market-stats {
  display: grid !important;
  gap: 18px !important;
}

body.kassenmodus #marketPanel .market-stat {
  padding: 26px !important;
  border-radius: 24px !important;
}

body.kassenmodus #marketPanel .market-stat span {
  font-size: 19px !important;
  font-weight: 800 !important;
}

body.kassenmodus #marketPanel .market-stat strong {
  font-size: 46px !important;
  margin-top: 8px !important;
}

/* Verkäufe heute unten kompakter */
body.kassenmodus #marketPanel .market-sales-list,
body.kassenmodus #marketSalesList {
  max-height: 260px !important;
  overflow: auto !important;
}

body.kassenmodus #marketPanel > .card:last-child {
  margin-top: 20px !important;
  padding: 24px !important;
}

body.kassenmodus #marketPanel > .card:last-child h2 {
  font-size: 32px !important;
}

@media (max-width: 1050px) {
  body.kassenmodus #marketPanel .grid {
    grid-template-columns: 1fr !important;
  }

  body.kassenmodus #marketPanel .market-hero {
    grid-template-columns: 1fr !important;
  }

  body.kassenmodus #marketPanel .market-actions {
    margin-top: 16px !important;
  }
}

@media (max-width: 760px) {
  body.kassenmodus #marketPanel .form-grid {
    grid-template-columns: 1fr !important;
  }

  body.kassenmodus #marketPanel .actions-row {
    grid-template-columns: 1fr !important;
  }
}

/* Registrierung öffentlich ausblenden */
#registerForm {
  display: none !important;
}

.auth-grid {
  grid-template-columns: minmax(0, 720px) !important;
}

#authPanel .server-box h3::after {
  content: " · Registrierung geschlossen";
  color: #4fffd2;
}

/* AuftragsPilot sichtbarer Login-Status oben */
#apTopLoginStatus {
  position: fixed;
  top: 72px;
  right: 18px;
  z-index: 99999;
  border: 1px solid rgba(79,255,210,.45);
  background: rgba(4, 19, 14, .96);
  color: #effffb;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 1000;
  font-size: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

#apTopLoginStatus.ok {
  color: #4fffd2;
}

#apTopLoginStatus.warn {
  color: #ffc26b;
}

body.kassenmodus #apTopLoginStatus {
  display: none !important;
}

/* AuftragsPilot Menü kompakter */
.sidebar {
  overflow-y: auto !important;
}

.menu-item {
  min-height: 44px !important;
  padding: 10px 13px !important;
  font-size: 15px !important;
  border-radius: 13px !important;
}

.menu-group-label {
  margin: 16px 0 8px !important;
  font-size: 10px !important;
  letter-spacing: 1.8px !important;
}

.brand {
  margin-bottom: 12px !important;
}

.ap-menu-more-btn {
  width: 100%;
  min-height: 46px;
  margin: 14px 0 8px;
  border: 1px solid rgba(79,255,210,.35);
  border-radius: 14px;
  background: rgba(79,255,210,.08);
  color: #4fffd2;
  font-weight: 900;
  cursor: pointer;
}

.ap-menu-hidden {
  display: none !important;
}

.ap-menu-more-open .ap-menu-hidden {
  display: flex !important;
}

.ap-menu-more-open .menu-group-label.ap-menu-hidden {
  display: block !important;
}

/* AuftragsPilot Menü kompakter */
.sidebar {
  overflow-y: auto !important;
}

.menu-item {
  min-height: 44px !important;
  padding: 10px 13px !important;
  font-size: 15px !important;
  border-radius: 13px !important;
}

.menu-group-label {
  margin: 16px 0 8px !important;
  font-size: 10px !important;
  letter-spacing: 1.8px !important;
}

.brand {
  margin-bottom: 12px !important;
}

.ap-menu-more-btn {
  width: 100%;
  min-height: 46px;
  margin: 14px 0 8px;
  border: 1px solid rgba(79,255,210,.35);
  border-radius: 14px;
  background: rgba(79,255,210,.08);
  color: #4fffd2;
  font-weight: 900;
  cursor: pointer;
}

.ap-menu-hidden {
  display: none !important;
}

.ap-menu-more-open .ap-menu-hidden {
  display: flex !important;
}

.ap-menu-more-open .menu-group-label.ap-menu-hidden {
  display: block !important;
}

/* AuftragsPilot Menü Hard-Fix */
.ap-menu-hide-hard {
  display: none !important;
}

#apMoreMenuBtn {
  width: calc(100% - 16px);
  min-height: 48px;
  margin: 12px 8px;
  border: 1px solid rgba(79,255,210,.45);
  border-radius: 14px;
  background: rgba(79,255,210,.10);
  color: #4fffd2;
  font-weight: 1000;
  cursor: pointer;
}

.ap-menu-more-visible .ap-menu-hide-hard {
  display: flex !important;
}

.ap-menu-more-visible .menu-group-label.ap-menu-hide-hard,
.ap-menu-more-visible [class*="group"].ap-menu-hide-hard {
  display: block !important;
}

/* AuftragsPilot stabiles Menü */
.ap-menu-extra {
  display: none !important;
}

.sidebar.ap-menu-open .ap-menu-extra {
  display: flex !important;
}

.sidebar.ap-menu-open .menu-group-label.ap-menu-extra {
  display: block !important;
}

#apMoreMenuBtn {
  width: calc(100% - 16px);
  min-height: 48px;
  margin: 14px 8px;
  border: 1px solid rgba(79,255,210,.45);
  border-radius: 14px;
  background: rgba(79,255,210,.10);
  color: #4fffd2;
  font-weight: 1000;
  cursor: pointer;
}