/* Dark & compact styling nur für Modals mit .modal-dark */
.modal.modal-dark .modal-dialog { margin: 1.1rem auto; }
@media (min-width: 576px){ .modal.modal-dark .modal-dialog { max-width: 640px; } }
@media (min-width: 768px){ .modal.modal-dark .modal-dialog { max-width: 720px; } }

.modal.modal-dark .modal-content{
  background: #0f1115;            /* dunkler Hintergrund */
  color: #e5e7eb;                 /* helle Schrift */
  border: 2px solid var(--bs-primary, #0d6efd) !important; /* blauer Rahmen – override gegen .border-0 */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

/* Header bleibt zentriert; Close-Button sauber positionieren */
.modal.modal-dark .modal-header{
  position: relative;
  border-bottom: 1px solid #2a3143;
  padding: 10px 14px;
  justify-content: center;    /* Titel mittig */
}
.modal.modal-dark .modal-title{
  font-size: 18px;
  font-weight: 600;
  margin: 0 auto;
  text-align: center;
}
.modal.modal-dark .modal-header .btn-close{
  position: absolute;
  right: 12px;
  top: 12px;
  filter: invert(1) grayscale(100%); /* hell auf dunkel/blau */
  opacity: .85;
}
.modal.modal-dark .modal-header .btn-close:hover{ opacity: 1; }

/* Gutschein-Header in Blau aktivieren, wenn Klasse .gutschein gesetzt ist */
.modal.modal-dark .modal-header.gutschein{
  background: #3F5AF3;
  color: #fff;
  border-bottom-color: rgba(255,255,255,.2);
}
.modal.modal-dark .modal-header.gutschein .modal-title{ color: #fff; }
.modal.modal-dark .modal-header.gutschein .btn-close{
  filter: invert(1) grayscale(100%);
  opacity: .9;
}

/* Badges im Gutschein-Header besser lesbar und harmonisch */
.modal.modal-dark .modal-header.gutschein .badge{
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 500;
}

/* Body/Footer */
.modal.modal-dark .modal-body{ padding: 12px 14px; }
.modal.modal-dark .modal-footer{
  background: #0f1115;
  border-top: 1px solid #2a3143;
}

/* Kompakte Controls */
.modal.modal-dark .form-control,
.modal.modal-dark .form-select{
  background: #0d111a;
  color: #e5e7eb;
  border: 1px solid #2a3143;
  border-radius: 10px;
  padding: 8px 10px;
  height: 38px;
}
.modal.modal-dark textarea.form-control{
  min-height: 80px;
  height: auto;
}
.modal.modal-dark .form-control::placeholder{ color: #b9bfcc; }
.modal.modal-dark .form-label{
  margin-bottom: 4px;
  color: #cfd3dc;
  font-size: 13px;
}

/* Hilfetexte/Muted gut lesbar */
.modal.modal-dark .form-text,
.modal.modal-dark #voucherHelp,
.modal.modal-dark #voucherFeedback{
  color: #cfd3dc !important;
}
.modal.modal-dark .text-muted{ color:#b9bfcc !important; }

/* Abstände kompakt */
.modal.modal-dark .row,
.modal.modal-dark .g-3,
.modal.modal-dark .gy-3 { --bs-gutter-y: .5rem; --bs-gutter-x: .5rem; }
.modal.modal-dark .mb-3{ margin-bottom: .55rem !important; }
.modal.modal-dark .mt-3{ margin-top: .55rem !important; }

/* Optionale Sektionen (falls du gruppierst) */
.modal.modal-dark .modal-section{
  background: #151923;
  border: 1px solid #2a3143;
  border-radius: 12px;
  padding: 10px;
  margin: 8px 0;
}
.modal.modal-dark .modal-sechead{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #cfd3dc; margin-bottom: 8px;
}
.modal.modal-dark .modal-sechead .dot{
  width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; display: inline-block;
}
.modal.modal-dark .form-grid{ display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 576px){
  .modal.modal-dark .form-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .modal.modal-dark .form-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}

/* Buttons */
.modal.modal-dark .btn{ border-radius: 10px; border: 1px solid #2a3143; }
.modal.modal-dark .btn-primary{
  background: #284a9b; border-color: #2d4f9f;
}
.modal.modal-dark .btn-primary:hover{ background: #2f57b4; }
.modal.modal-dark .btn-outline-secondary{
  color: #e5e7eb; border-color:#2a3143;
}
.modal.modal-dark .btn-outline-secondary:hover{ background: #1b2130; }

/* Checkbox/Radio dunkler */
.modal.modal-dark .form-check-input{ background: #0d111a; border-color:#2a3143; }
.modal.modal-dark .form-check-input:checked{ background-color:#3b82f6; border-color:#3b82f6; }

/* Scroll-Setup (iOS freundlich) */
html.modal-open, body.modal-open { overflow: hidden !important; }
.modal.modal-dark .modal-dialog-scrollable .modal-body{
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  outline: none;
}