:root{
  --brand-red: #c20d0d;     /* Primärrot */
  --brand-red-dark:#a50c0c; /* Hover */
  --ink-900:#111;           /* fast schwarz */
  --ink-700:#333;
  --ink-500:#555;
  --bg:#f5f5f5;
  --card:#ffffff;
  --border:#e9ecef;
  --accent:#ffc107;         /* gelb für Hinweise/Admin */
  --radius:12px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Systemschrift: Montserrat als Headline, Inter/Arial als Fallback */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Inter:wght@400;500;600&display=swap');

html,body{background:var(--bg);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink-700);}

/* NAVBAR */
/* Markenfarben + hübschere Navbar */
.bg-brand{ background:#c20d0d; }             /* Primärrot */
.navbar .navbar-brand{ letter-spacing:.2px; }
.navbar .btn{ border-color:#fff;color:#fff; }
.navbar .btn:hover{ background:#fff;color:#c20d0d; }
.navbar .btn-warning{ background:#ffc107;border-color:#ffc107;color:#111; }
.navbar .btn-warning:hover{ filter:brightness(.95); }
.badge.bg-light.text-dark{ font-weight:600; }


/* TITEL & TEXT */
h1,h2,h3,h4{color:var(--ink-900);font-family:Montserrat,Inter,Arial,sans-serif;}
.lead{color:var(--ink-500)}

/* KARTEN & TISCHE */
.card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--card);}
.table thead th{background:#9b2929;color:var(--ink-700);border-bottom-color:var(--border);}

/* BUTTONS */
.btn-primary{background:var(--brand-red);border-color:var(--brand-red);}
.btn-primary:hover{background:var(--brand-red-dark);border-color:var(--brand-red-dark);}
.btn-outline-light{color:#fff;border-color:#fff}
.btn-warning{background:var(--accent);border-color:var(--accent);color:#111}
.btn-warning:hover{filter:brightness(.95)}

/* FORM */
.form-control, .form-select{border-radius:10px;border-color:#dcdfe4}
.form-control:focus{border-color:var(--brand-red);box-shadow:0 0 0 .2rem rgba(194,13,13,.15)}

/* BADGES / PRICES */
.badge.bg-danger{background:var(--brand-red)!important}
.price{font-weight:700;color:var(--ink-900)}
.subtle{color:var(--ink-500)}

/* TOASTS */
.toast{border-radius:12px;box-shadow:var(--shadow)}

/* HERO (optional auf index) */
.hero{
  background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),
             url('https://www.borrmann-transporte.de/user/images/gallery/img_1560917684_1.jpg') center/cover no-repeat;
  border-radius:16px; padding:56px 24px; color:#ffffff; box-shadow:var(--shadow);
}
.hero h1{color:#fff;margin:0 0 6px}
.hero p{opacity:.9}
#registerError {
  font-weight: 500;
}

.card{display:flex;flex-direction:column}
.card .card-body{flex:1 1 auto}
.card-pricebar{
  background:#fff;
  border-top:1px solid #eee;
  padding:12px 16px;
}
.card-pricebar .price{font-size:1.6rem;font-weight:700;line-height:1}
.card-pricebar .note{font-size:.85rem;color:#6c757d;margin-right:12px}

/* ===== Mengensteuerung (einheitlich) ===== */
.qty-control{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  flex-wrap:nowrap;            /* wichtig gegen Umbrechen */
  margin-top:.25rem;
}

.btn-qty{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid #dee2e6;
  background:#fff;
  font-weight:700;
  font-size:1.25rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  cursor:pointer;
  transition:background .15s, transform .12s;
}
.btn-qty:hover{ background:#f1f3f5; }
.btn-qty:active{ transform: translateY(1px) scale(.98); }

.qty-display{
  min-width:110px;
  height:42px;
  padding:0 .75rem;
  border-radius:999px;
  border:1px solid #dee2e6;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.03);
  font-variant-numeric: tabular-nums;
}
/* Unterstützt ids wie #qty-val-123 */
.qty-display span[contenteditable="true"],
.qty-display [id^="qty-val-"]{
  outline:none;
  min-width:2ch;
  text-align:center;
  font-size:1.1rem;
  font-weight:700;
  user-select:text;
  cursor:text;
}
.qty-display:focus-within{
  box-shadow:0 0 0 .2rem rgba(13,110,253,.15);
  border-color:#86b7fe; background:#fff;
}

.qty-unit{
  font-size:.95rem;
  color:#6c757d;
  font-weight:600;
  letter-spacing:.3px;
}

/* echtes Eingabefeld für JS/Screenreader, unsichtbar */
.qty-hidden{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* Optional: etwas kompakter auf sehr kleinen Displays */
@media (max-width: 420px){
  .btn-qty{ width:38px; height:38px; }
  .qty-display{ min-width:96px; height:38px; }
}