/* ===========================================
   Grundlagen / Container / Layout
   =========================================== */

.mab-tq {
  max-width: 960px;
  margin: 0 auto 60px;
  padding: 20px 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.mab-tq-shell {
  background: rgba(255,255,255,0.96);
  border-radius: 24px;
  padding: 22px 18px 26px;
  box-shadow: 0 30px 80px rgba(15,23,42,0.16);
  border: 1px solid rgba(148,163,184,0.35);
  backdrop-filter: blur(8px);
}

@media (min-width: 800px) {
  .mab-tq-shell {
    padding: 26px 30px 30px;
  }
}

/* ===========================================
   Avatar + Sprechblase
   =========================================== */

.mab-tq-avatar-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.mab-tq-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.mab-tq-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.mab-tq-avatar-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(234,179,8,0.6), rgba(234,179,8,0.1));
  animation: mab-tq-pulse 2.8s infinite;
  z-index: 1;
}

@keyframes mab-tq-pulse {
  0%   { transform: scale(1); opacity: .9; }
  70%  { transform: scale(1.06); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.mab-tq-avatar-bubble {
  flex: 1;
  background: #f9fafb;
  border-radius: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(209,213,219,0.9);
  box-shadow: 0 10px 30px rgba(15,23,42,0.12);
  position: relative;
}

.mab-tq-avatar-bubble:before {
  content: '';
  position: absolute;
  left: 10px;
  top: 100%;
  margin-top: -2px;
  border-width: 8px 10px 0 0;
  border-style: solid;
  border-color: rgba(209,213,219,0.9) transparent transparent transparent;
}

.mab-tq-avatar-bubble:after {
  content: '';
  position: absolute;
  left: 11px;
  top: 100%;
  margin-top: -3px;
  border-width: 7px 9px 0 0;
  border-style: solid;
  border-color: #f9fafb transparent transparent transparent;
}

.mab-tq-avatar-bubble-text {
  font-size: 13px;
  color: #111827;
}

/* ===========================================
   Progress Bar
   =========================================== */

.mab-tq-progress {
  margin: 10px 0 6px;
}

.mab-tq-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,0.35);
  overflow: hidden;
}

.mab-tq-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f172a, #020617);
  transition: width .3s ease-out;
}

.mab-tq-progress-label {
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* ===========================================
   Step Layout
   =========================================== */

.mab-tq-availability {
  margin: 4px 0 16px;
  font-size: 12px;
  color: #4b5563;
}

.mab-tq-step {
  display: none;
}

.mab-tq-step.active {
  display: block;
}

.mab-tq-step h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #020617;
}

.mab-tq-step-sub {
  margin: 0 0 10px;
  font-size: 13px;
  color: #6b7280;
}
/* ===========================================
   PILL BUTTONS (Weinart, Geschmack, Alkohol, Preis)
   =========================================== */

.mab-tq-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.mab-tq-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.7);
  padding: 6px 12px;
  font-size: 13px;
  color: #111827;
  background: rgba(249,250,251,0.9);
  cursor: pointer;
  transition: all .15s ease-out;
}

.mab-tq-pill input {
  display: none;
}

.mab-tq-pill--all {
  background: rgba(15,23,42,0.9);
  border-color: rgba(15,23,42,1);
  color: #f9fafb;
}

.mab-tq-pill.active {
  background: linear-gradient(135deg, #111827, #020617);
  color: #f9fafb;
  border-color: rgba(15,23,42,1);
  box-shadow: 0 10px 22px rgba(15,23,42,0.32);
}

.mab-tq-count {
  opacity: .7;
  margin-left: 4px;
  font-size: 12px;
}

.mab-tq-pill.active .mab-tq-pill-label-meta {
  color: rgba(255,255,255,.84);
}

.mab-tq-pill-row--pack .mab-tq-pill {
  padding: 8px 16px;
  font-weight: 600;
}

/* ===========================================
   Zusätzliche Labels (Geschmack & Alkohol)
   =========================================== */

.mab-tq-pill-label-main {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}

.mab-tq-pill-label-meta {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  color: #6b7280;
  margin-top: 1px;
}

/* ===========================================
   Optionen-Karten (Abo-Art, Modus, etc.)
   =========================================== */

.mab-tq-options {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .mab-tq-options {
    grid-template-columns: 1fr 1fr;
  }
}

.mab-tq-option-card {
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(249,250,251,0.96);
  cursor: pointer;
  overflow: hidden;
  transition: all .18s ease-out;
}

.mab-tq-option-card input {
  display: none;
}

.mab-tq-option-inner {
  padding: 12px 14px 11px;
}

.mab-tq-option-title {
  font-size: 14px;
  font-weight: 600;
  color: #020617;
  margin-bottom: 3px;
}

.mab-tq-option-desc {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.mab-tq-option-card.active {
  border-color: #020617;
  background: radial-gradient(circle at top left, #f5f5f4, #e5e7eb);
  box-shadow: 0 16px 32px rgba(15,23,42,0.32);
}

/* ===========================================
   Navigation Buttons
   =========================================== */

.mab-tq-nav {
  display: flex;
  align-items: center;
  margin-top: 16px;
  gap: 8px;
}

.mab-tq-nav-spacer {
  flex: 1;
}

.mab-tq-btn {
  border-radius: 999px;
  border: 1px solid #020617;
  padding: 8px 18px;
  background: #020617;
  color: #f9fafb;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s ease-out;
}

.mab-tq-btn:hover {
  background: #111827;
  box-shadow: 0 10px 22px rgba(15,23,42,0.28);
}

.mab-tq-btn--ghost {
  background: transparent;
  color: #020617;
  border-color: #475569;
}

.mab-tq-btn--ghost:hover {
  background: #f1f5f9;
}

.mab-tq-btn--primary {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

.mab-tq-btn--primary:hover {
  background: #1e293b;
}
/* ====================================================
   Ergebnisse-Bereich (Weinauswahl)
   ==================================================== */

.mab-tq-results {
  margin-top: 26px;
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.mab-tq-results-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.mab-tq-results-head h2 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: #020617;
}

#mab-tq-result-summary {
  margin: 0;
  font-size: 13px;
  color: #4b5563;
}

.mab-tq-results-meta {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.mab-tq-warning {
  font-size: 12px;
  color: #b45309;
  margin-top: 4px;
}

/* ==========================================
   Hinweisbox (wenn keine Weine gefunden)
   ========================================== */

.mab-tq-empty-box {
  margin: 10px 0 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  font-size: 13px;
  color: #7f1d1d;
}

.mab-tq-empty-box p {
  margin: 0 0 8px;
}

/* ==========================================
   Info Box (wenn keine weiteren Weine existieren)
   ========================================== */

.mab-tq-info-box {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #facc15;
  font-size: 12px;
  color: #92400e;
}

/* ==========================================
   Weingitter
   ========================================== */

.mab-tq-wine-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .mab-tq-wine-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================
   Weinkarte
   ========================================== */

.mab-tq-wine-card {
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(249,250,251,0.96);
  padding: 10px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
}

.mab-tq-wine-thumb {
  text-align: center;
  margin-bottom: 4px;
}

.mab-tq-wine-thumb img {
  max-height: 150px;
  width: auto;
  margin: 0 auto;
  display: block;
}

.mab-tq-wine-title {
  font-size: 13px;
  font-weight: 600;
  color: #020617;
  min-height: 36px;
}

.mab-tq-wine-price {
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  margin-top: 2px;
}

/* ==========================================
   Weinkarten-Buttons
   ========================================== */

.mab-tq-wine-actions {
  margin-top: 6px;
  display: flex;
  gap: 6px;
}

.mab-tq-wine-actions button,
.mab-tq-wine-actions a {
  flex: 1;
  font-size: 11px;
  padding: 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,0.8);
  background: transparent;
  color: #111827;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .15s ease-out;
  white-space: nowrap;
}

.mab-tq-wine-actions button:hover,
.mab-tq-wine-actions a:hover {
  background: #111827;
  color: #f9fafb;
}

/* ==========================================
   Warenkorb-Button
   ========================================== */

.mab-tq-results-actions {
  margin-top: 16px;
  text-align: right;
}

/* ==========================================
   Hinweise unter Paketgrößen
   ========================================== */

.mab-tq-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #6b7280;
}
/* ======================================================
   SWAP MODAL (Wein tauschen)
   ====================================================== */

.mab-tq-swap-modal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(15,23,42,0.45);
  z-index: 9999;
}

.mab-tq-swap-modal-inner {
  background: #f9fafb;
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  padding: 14px 16px 16px;
  box-shadow: 0 25px 60px rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.7);
}

.mab-tq-swap-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.mab-tq-swap-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #020617;
}

.mab-tq-swap-close {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}

.mab-tq-swap-modal-sub {
  margin: 0 0 8px;
  font-size: 12px;
  color: #6b7280;
}

/* ========================================
   Swap-Liste (Alternative Weine)
   ======================================== */

.mab-tq-swap-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.mab-tq-swap-card {
  display: flex;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.7);
  background: #ffffff;
  align-items: center;
}

.mab-tq-swap-thumb {
  flex: 0 0 50px;
  text-align: center;
}

.mab-tq-swap-thumb img {
  max-height: 60px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.mab-tq-swap-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mab-tq-swap-title {
  font-size: 13px;
  font-weight: 600;
  color: #020617;
}

.mab-tq-swap-price {
  font-size: 12px;
  color: #111827;
}

/* ========================================
   Swap-Buttons
   ======================================== */

.mab-tq-swap-select,
.mab-tq-swap-select:visited {
  margin-top: 4px;
  width: 100%;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid #0f172a !important;
  background: #0f172a !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center;
  opacity: 1 !important;
  transition: all .18s ease-out;
}

.mab-tq-swap-select:hover,
.mab-tq-swap-select:focus,
.mab-tq-swap-select:active {
  background: #1e293b !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.22);
}

/* ========================================
   Swap Footer
   ======================================== */

.mab-tq-swap-footer {
  text-align: right;
}

#mab-tq-swap-more {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: #eef2f6;
  cursor: pointer;
}

#mab-tq-swap-more:hover {
  background: #e2e8f0;
}

/* ========================================
   Mobile Modal Anpassung
   ======================================== */

@media (max-width: 600px) {
  .mab-tq-swap-modal-inner {
    margin: 0 12px;
  }
}
/* ======================================================
   RESPONSIVE OPTIMIERUNGEN
   ====================================================== */

@media (max-width: 600px) {
  .mab-tq-avatar-row {
    align-items: flex-start;
  }

  .mab-tq-shell {
    padding: 20px 16px 24px;
  }

  .mab-tq-wine-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .mab-tq-swap-modal-inner {
    margin: 0 12px;
  }

  .mab-tq-wine-thumb img {
    max-height: 130px;
  }
}

/* ======================================================
   FEIN-TUNING & SONDERKLASSEN
   ====================================================== */

.mab-tq-btn--small {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
}

.mab-tq-btn--reset {
  font-size: 11px;
  padding: 5px 12px;
}

.mab-tq-step-sub strong {
  font-weight: 600;
  color: #111827;
}

/* Extra-Spacings für schöne Abstände */
.mab-tq .mt-4 { margin-top: 16px; }
.mab-tq .mt-6 { margin-top: 24px; }
.mab-tq .mb-4 { margin-bottom: 16px; }
.mab-tq .mb-6 { margin-bottom: 24px; }

/* ------------------------------------------------------
   END OF FILE — COMPLETE CSS  
   ------------------------------------------------------ */

/* Paketgrößen ab Theme 2.0.0 */
.mab-tq-custom-pack{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;margin-top:12px;padding:14px 16px;border:1px solid rgba(198,165,114,.45);border-radius:8px;background:rgba(246,244,239,.75);color:#232f37;font-weight:700}
.mab-tq-custom-pack input{width:120px;min-height:44px;margin:0;padding:8px 10px;border:1px solid rgba(35,47,55,.28);border-radius:6px;background:#fff;color:#232f37;font-size:1rem}
@media(max-width:560px){.mab-tq-custom-pack{align-items:flex-start;flex-direction:column}.mab-tq-custom-pack input{width:100%}}


/* ======================================================
   MOBILE STABILITÄT UND LESBARKEIT – Theme 2.4.5
   ====================================================== */
.mab-tq,
.mab-tq * { box-sizing: border-box; }
.mab-tq button,
.mab-tq a,
.mab-tq label { touch-action: manipulation; }

@media (max-width: 600px) {
  .mab-tq { width:100%; max-width:100%; margin:0 auto 36px; padding:8px 10px; overflow-x:clip; }
  .mab-tq-shell { width:100%; max-width:100%; padding:16px 12px 18px; border-radius:16px; box-shadow:0 18px 42px rgba(15,23,42,.14); }
  .mab-tq-avatar-row { display:grid; grid-template-columns:52px minmax(0,1fr); gap:10px; align-items:start; margin-bottom:14px; }
  .mab-tq-avatar-wrap { width:52px; height:52px; }
  .mab-tq-avatar-bubble { width:100%; min-width:0; padding:9px 10px; border-radius:12px; }
  .mab-tq-avatar-bubble-text { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
  .mab-tq-progress-label, .mab-tq-availability { font-size:13px; line-height:1.35; }
  .mab-tq-step h2 { font-size:20px; line-height:1.25; }
  .mab-tq-step-sub, .mab-tq-step-sub--small { font-size:14px; line-height:1.45; }
  .mab-tq-pill-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; width:100%; }
  .mab-tq-step[data-step="3"] > .mab-tq-pill-row,
  .mab-tq-step[data-step="4"] > .mab-tq-pill-row,
  #mab-tq-whitegrapes-block .mab-tq-pill-row { grid-template-columns:minmax(0,1fr); }
  .mab-tq-step[data-step="2"] > .mab-tq-pill-row > .mab-tq-pill:last-child:nth-child(odd),
  .mab-tq-step[data-step="5"] > .mab-tq-pill-row > .mab-tq-pill:last-child:nth-child(odd),
  .mab-tq-step[data-step="6"] > .mab-tq-pill-row > .mab-tq-pill:last-child:nth-child(odd) { grid-column:1 / -1; }
  .mab-tq-pill { width:100%; min-width:0; min-height:46px; justify-content:center; padding:10px; border-radius:12px; font-size:14px; line-height:1.25; text-align:center; white-space:normal; overflow-wrap:anywhere; }
  .mab-tq-pill > span { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .mab-tq-options { grid-template-columns:minmax(0,1fr); }
  .mab-tq-nav { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; width:100%; margin-top:18px; }
  .mab-tq-nav-spacer { display:none; }
  #mab-tq-prev { grid-column:1; grid-row:1; }
  #mab-tq-next { grid-column:2; grid-row:1; }
  #mab-tq-restart-global { grid-column:1 / -1; grid-row:2; }
  .mab-tq-btn, .mab-tq-btn:visited { width:100%; min-width:0; min-height:46px; display:flex; align-items:center; justify-content:center; padding:11px 12px !important; border-radius:12px; font-size:15px !important; font-weight:700; line-height:1.25; text-align:center; white-space:normal; overflow-wrap:anywhere; }
  .mab-tq-btn:not(.mab-tq-btn--ghost), .mab-tq-btn:not(.mab-tq-btn--ghost):visited { background:#020617 !important; border-color:#020617 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; }
  .mab-tq-btn--ghost, .mab-tq-btn--ghost:visited { background:#fff !important; border-color:#475569 !important; color:#020617 !important; -webkit-text-fill-color:#020617 !important; }
  .mab-tq-results-head { display:block; }
  .mab-tq-results-meta { margin-top:6px; white-space:normal; line-height:1.4; }
  .mab-tq-wine-grid { grid-template-columns:minmax(0,1fr); }
  .mab-tq-wine-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; }
  .mab-tq-wine-actions button, .mab-tq-wine-actions a { width:100%; min-height:44px; padding:10px 12px !important; border-radius:12px; font-size:14px !important; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
  .mab-tq-selection-toolbar { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; padding:12px; }
  .mab-tq-swap-modal { padding:12px; }
  .mab-tq-swap-modal-inner { width:100%; max-width:100%; max-height:calc(100dvh - 24px); margin:0; overflow:auto; }
}

@media (max-width: 360px) {
  .mab-tq-pill-row,
  .mab-tq-step[data-step="2"] > .mab-tq-pill-row,
  .mab-tq-step[data-step="5"] > .mab-tq-pill-row,
  .mab-tq-step[data-step="6"] > .mab-tq-pill-row { grid-template-columns:minmax(0,1fr); }
  .mab-tq-nav { grid-template-columns:minmax(0,1fr); }
  #mab-tq-prev, #mab-tq-next, #mab-tq-restart-global { grid-column:1; grid-row:auto; }
}