/* ===== Kartenzeile ================================================== */
.bo-reply-row{
  display:flex; gap:24px; margin:24px 0 8px;
  justify-content:center; /* mittig */
}
.bo-reply-row .bo-card{display:block; cursor:pointer}
.bo-reply-row .bo-card img{
  display:block; max-width:100%; height:auto; border-radius:12px;
  transition: transform .15s ease;
}
.bo-reply-row .bo-card:hover img{ transform: translateY(-2px) }
.bo-reply-row .bo-card:focus{ outline:2px solid #6aa7ff; border-radius:14px }

/* ===== Overlay & Modal ============================================= */
.bo-modal-overlay{
  position:fixed; inset:0; background:rgba(17,24,39,.55);
  opacity:0; pointer-events:none; transition:.2s ease; z-index:1000;
}
.bo-modal-overlay.is-open{ opacity:1; pointer-events:auto }
.bo-modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:.2s ease; z-index:1001;
}
.bo-modal.is-open{ opacity:1; pointer-events:auto }
.bo-modal__dialog{
  width:min(980px,92vw); background:#fff; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.35); overflow:hidden;
}

/* Kopf (Top-Border farbig) */
.bo-modal__header{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 20px 14px; position:relative; background:#fff;
}
.bo-modal__header::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:#6aa7ff;
}
.bo-modal--reply .bo-modal__header::before{ background:#6aa7ff }
.bo-modal--accept .bo-modal__header::before{ background:#38a169 }
.bo-modal--reject .bo-modal__header::before{ background:#ef4444 }

.bo-modal__title{
  margin:0; font-size:18px; font-weight:700; display:flex; gap:10px; align-items:center; color:#111827;
}
.bo-modal__title .ico{ font-size:20px; color:#4b5563 }

.bo-modal__close{
  width:34px; height:34px; border-radius:6px; border:0; background:#ef4444; color:#fff;
  font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}

.bo-modal__body{ padding:18px 20px 8px; background:#fff }
.bo-modal__footer{ padding:16px 20px 20px; display:flex; justify-content:flex-end; background:#fff }

/* ===== 2‑Spalten: Termine | Ort ==================================== */
.bo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width:820px){ .bo-grid{ grid-template-columns:1fr } }

.bo-section{
  background:#f7f9ff; border:1px solid #e6ecff; border-radius:12px;
  padding:14px 14px 12px;
}
.bo-section h4{
  margin:0 0 10px; font-size:15px; font-weight:700; color:#374151;
  /* Überschrift optisch „im Kasten“ */
  padding-left:2px;
}

/* Radiozeilen */
.bo-radio{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px }
.bo-radio input[type="radio"]{ accent-color:#2563eb; cursor:pointer }
.bo-radio .cal{ color:#2563eb }
.bo-radio .pin{ color:#2563eb }
.bo-radio .hint{
  margin-left:6px; font-size:12px; color:#2563eb;
  background:#e8f0ff; padding:2px 6px; border-radius:10px;
}
.bo-radio.is-active{ background:#eaf2ff }     /* ausgewählt */
.bo-radio.is-suggested{ background:#edf6ff }  /* vom Sender vorgeschlagen */

.bo-empty{ font-size:13px; color:#6b7280; padding:6px 2px }

/* Inline-Datepicker */
.bo-date-inline{ margin:8px 0 0 }
.bo-date-inline input{
  display:block; width:100%; max-width:340px; border:1px solid #e5e7eb; background:#fff;
  border-radius:8px; padding:10px 12px; font-size:14px; color:#111827;
}

/* Nachricht */
.bo-field{ margin-top:16px }
.bo-field label{ display:block; margin-bottom:8px; font-weight:700 }
.bo-field .req{ color:#ef4444; margin-left:4px } /* Stern rot */
.bo-textarea{
  width:100%; min-height:140px; border:1px solid #e5e7eb; border-radius:10px;
  padding:12px 14px; font-size:14px; background:#fff; resize:vertical;
}

/* Buttons */
.bo-btn{ border:0; border-radius:10px; padding:10px 18px; font-weight:700; cursor:pointer }
.bo-btn--primary{ background:#6aa7ff; color:#fff }
.bo-btn--success{ background:#38a169; color:#fff }
.bo-btn--danger{ background:#ef4444; color:#fff }
.bo-btn:disabled{ opacity:.6; cursor:not-allowed }

/* Sonstiges */
.bo-card{ cursor:pointer }

label.is-active {
    background: #a4d5f3 !important;
}

.accept-ort{
  display: none;
}
.is-suggested-accept {
    display: block;
}

/* ===========================
   Angenommen-Badge / Banner
   =========================== */
.bo-accepted-box{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 10px 0 20px;
  border-radius: 14px;
  background: linear-gradient(135deg,#16a34a 0%,#22c55e 60%,#34d399 100%) !important;
  color: #fff;
  box-shadow: 0 8px 24px rgba(22,163,74,.22);
  font-size: 15px;
  line-height: 1.35;
}

/* Icon links (🎺 Trompete – gern zu 🏆 oder ✅ ändern) */
.bo-accepted-box::before{
  content: "🎺";
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
  font-size: 18px;
  flex: 0 0 34px;
}

/* "Angenommen:" Label etwas hervorheben */
.bo-accepted-box strong{
  display: inline-block;
  padding: 2px 10px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-weight: 700;
}

/* Datum/Ort leicht absetzen (greift automatisch auf deinen Text) */
.bo-accepted-box span,
.bo-accepted-box em{
  font-weight: 600;
}

/* Kompakter Modus, falls du ihn irgendwo brauchst: <div class="bo-accepted-box is-compact">… */
.bo-accepted-box.is-compact{
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
}
.bo-accepted-box.is-compact::before{
  width: 28px; height: 28px; font-size: 16px;
}

/* Dark Mode / sehr helle Hintergründe – optional */
@media (prefers-color-scheme: dark){
  .bo-accepted-box{
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
}

/* ===== Angenommen-Banner (kompakt & hübsch) ===== */
#bolist-panel .bo-accepted-box{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  margin: 10px 0 18px;
  border-radius: 12px;
  background: linear-gradient(135deg,#16a34a 0%,#22c55e 60%,#34d399 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(22,163,74,.22);
  font-size: 15px;
  line-height: 1.35;
}

/* Trompete links (wie zuvor) */
#bolist-panel .bo-accepted-box::before{
  content: "🎺";
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-size: 18px;
  margin-right: 6px;
}

/* "Angenommen" Label */
#bolist-panel .bo-accepted-box > strong{
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-weight: 700;
}

/* Chunks: Termin | Ort */
#bolist-panel .bo-acc-chunk{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* Icon vor Termin/Ort – Emoji by default */
#bolist-panel .bo-acc-ico::before{ content:"📅"; }
#bolist-panel .bo-acc-ico.loc::before{ content:"📍"; }

/* Falls du FontAwesome bevorzugst, diese 2 Zeilen aktivieren und obige 2 auskommentieren: */
/*
#bolist-panel .bo-acc-ico.cal::before{ font-family:"Font Awesome 6 Free"; font-weight:400; content:"\f133"; } 
#bolist-panel .bo-acc-ico.loc::before{ font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f3c5"; }
*/

#bolist-panel .bo-acc-sep{
  opacity:.9;
  font-weight:600;
}

#bolist-panel .bo-acc-label{
  opacity:.95;
  font-weight: 700;
}

#bolist-panel .bo-acc-val{
  font-weight: 700;
  letter-spacing:.2px;
}

/* Kompakt-Variante optional */
#bolist-panel .bo-accepted-box.is-compact{
  padding: 8px 12px; border-radius: 10px; font-size: 14px;
}
#bolist-panel .bo-accepted-box.is-compact::before{
  width: 28px; height: 28px; font-size: 16px;
}
/* bereits vorhandene Styles bleiben */
/* Rot-Variante für abgesagt */
#bolist-panel .bo-accepted-box.is-cancelled{
  background: linear-gradient(135deg,#ef4444 0%,#f43f5e 60%,#fb7185 100%);
  box-shadow: 0 8px 24px rgba(239,68,68,.22);
}
#bolist-panel .bo-accepted-box.is-cancelled::before{
  content:"❌";
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

/* Icons in den Chunks */
#bolist-panel .bo-acc-ico::before{ content:"📅"; }
#bolist-panel .bo-acc-ico.loc::before{ content:"📍"; }
#bolist-panel .bo-acc-ico.cancel::before{ content:"🧨"; } /* oder 🛑 */

/* === Abgesagt (rote Variante) – muss NACH dem grünen Stil stehen === */
#bolist-panel .bo-accepted-box.is-cancelled{
  background: linear-gradient(135deg,#ef4444 0%,#f43f5e 55%,#fb7185 100%) !important;
  box-shadow: 0 8px 24px rgba(239,68,68,.25);
}

#bolist-panel .bo-accepted-box.is-cancelled::before{
  content: "❌"; /* statt Trompete */
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

#bolist-panel .bo-accepted-box.is-cancelled > strong{
  /* Label bleibt, nur optisch passend */
  background: rgba(255,255,255,.18);
}

/* Icon im Textteil für Grund */
#bolist-panel .bo-acc-ico.cancel::before{ content:"🛑"; } /* oder 🧨/⛔️ */