.msbk-wrap{margin:0 auto;font-family:inherit}
.msbk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:16px 0}
.msbk-card{border:1px solid #e5e7eb;border-radius:12px;padding:16px}
.msbk-btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid #111;cursor:pointer;background:#111;color:#fff}
.msbk-btn[disabled]{opacity:.6;cursor:not-allowed}
.msbk-row{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.msbk-input{padding:10px;border:1px solid #d1d5db;border-radius:10px;width:100%}
.msbk-badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid #d1d5db}
.msbk-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:12px 0}
.msbk-time{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;cursor:pointer}
.msbk-time.active{background:#111;color:#fff;border-color:#111}

/* --- Fluent-like styling to resemble Microsoft Bookings --- */
.msbk-wrap{font-family:"Segoe UI",SegoeUI,system-ui,-apple-system,Roboto,Arial,sans-serif}
.msbk-card{background:#fff;border:1px solid #e1e1e1;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.msbk-btn{background:#006c70;border-color:#006c70;color:#fff}
.msbk-btn:hover{filter:brightness(.95)}
.msbk-time{background:#fff}
.msbk-time.active{background:#006c70;border-color:#006c70;color:#fff}
.msbk-badge{background:#f6f6f6}

/* === Calendar UI === */
.msbk-calendar{border:1px solid #e5e7eb;border-radius:12px;padding:12px;margin:12px 0;width:100%;background:#fff}
.msbk-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.msbk-cal-nav{display:flex;gap:8px}
.msbk-cal-btn{border:1px solid #d1d5db;border-radius:8px;padding:6px 10px;cursor:pointer;background:#fff}
.msbk-cal-title{font-weight:600}
.msbk-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.msbk-cal-dow{font-size:.85rem;color:#6b7280;text-align:center}
.msbk-cal-day{padding:8px 0;text-align:center;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;background:#fff}
.msbk-cal-day.disabled{opacity:.4;cursor:not-allowed}
.msbk-cal-day.today{border-color:#006c70}
.msbk-cal-day.selected{background:#006c70;border-color:#006c70;color:#fff}

/* === CUSTOM === */
span.msbk-badge{display:none;}
.msbk-wrap.msbk-root{width:100%;}


/* === Ansprechpartner Box === */
.msbk-aside{margin-top:20px}
.msbk-aside h4{margin-bottom:10px;font-weight:600}
.msbk-aside .msbk-card{padding:16px 16px 36px 16px;border:1px solid #e5e7eb;border-radius:12px;background:#f9fafb}
.msbk-aside a{color:#006c70;text-decoration:none}
.msbk-aside a:hover{text-decoration:underline}

/* === 2-Spalten-Layout für Shortcode === */
.msbk-layout {
  display: flex;
  gap: 5%;
  align-items: flex-start;
}
.msbk-main {
  flex: 1 1 auto;
  min-width: 0;
}
.msbk-aside {
  flex: 0 0 320px;
}
@media (max-width: 992px) {
  .msbk-layout {
    flex-direction: column;
    gap: 1.25rem;
  }
  .msbk-aside {
    flex: 1 1 auto;
  }
}

.hidethat {
    visibility: hidden;
    height: 0px;
}
/* Zeit-Buttons als Grid-Chips */
.msbk-time-btn{display:block;text-align:center;border:1px solid #e1e1e1;border-radius:10px;padding:10px 14px;background:#fff;cursor:pointer}
.msbk-time-btn:hover{filter:brightness(.98)}
.msbk-time-btn.active{background:#006c70;border-color:#006c70;color:#fff}

/* === Datum + Uhrzeit nebeneinander === */
.msbk-row.msbk-date-time{
  display:flex;
  flex-direction:row; /* override default column of .msbk-row */
  align-items:flex-start;
  gap:5%;
}
.msbk-row.msbk-date-time .msbk-calendar-wrap{flex:1 1 50%;}
.msbk-row.msbk-date-time .msbk-times{flex:1 1 50%;}

.msbk-calendar-wrap .msbk-calendar{margin:0}

@media (max-width: 800px){
  .msbk-row.msbk-date-time{display: block;}
  .msbk-main{width:95%;}
  .msbk-calendar{width: 100%;}
}

.msbk-main h2 {
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
    color: var( --e-global-color-primary );
}

@media (max-width: 768px) {
  .msbk-main h2 {
      font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
      font-size: 36px;
      font-weight: var(--e-global-typography-secondary-font-weight);
      color: var( --e-global-color-primary );
  }
}

.msbk-main p {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    line-height: var(--e-global-typography-text-line-height);
    color: var(--e-global-color-text);  
}

.msbk-time-btn {
      color: var( --e-global-color-primary );
}

.msbk-time-btn:hover, button:hover, button:focus {
  background: var( --e-global-color-primary );
  background-color: var( --e-global-color-primary );
  color: #fff;
}
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
  background: var( --e-global-color-primary );
  background-color: var( --e-global-color-primary );
  color: #fff;
}

.msbk-cal-btn, .msbk-cal-btn:focus {
      color: var( --e-global-color-primary );
}
  .msbk-grid {
    width: 33%;
  }

@media (max-width: 1024px) {
  img#msbk-staff-photo {
    height: 48px !important;
    width: 48px !important;
}
}