.fsb-heading {
  font-size: var(--fsb-font-size, 32px);
  margin: 0;
  line-height: 1.3;
}

/* Tablet */
@media (max-width: 1024px) {
  .fsb-heading {
    font-size: var(
      --fsb-font-size-tablet,
      calc(var(--fsb-font-size, 32px) * 0.9)
    );
  }
}

/* Mobile */
@media (max-width: 768px) {
  .fsb-heading {
    font-size: var(
      --fsb-font-size-mobile,
      calc(
        var(--fsb-font-size-tablet, var(--fsb-font-size, 32px))
        * 0.8
      )
    );
  }
}


/* ============================================================
   FS Pagebuilder – Frontend Layout (Section / Columns)
   Minimal responsive contract:
   - Columns stack on mobile
   - Prevent overflow (min-width:0)
============================================================ */

.fsb-content-stage{
  width:100%;
  max-width: var(--fsb-stage-max, 1200px);
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--fsb-stage-pad, 16px);
  padding-right: var(--fsb-stage-pad, 16px);
  box-sizing:border-box;
  display: flow-root;
}

.fsb-sec{ box-sizing:border-box; width:100%; }
.fsb-sec-inner{ width:100%; box-sizing:border-box; }

.fsb-cols{
  display:flex;
  width:100%;
  box-sizing:border-box;
  align-items:stretch;
  flex-wrap:nowrap;
}

.fsb-col{
  box-sizing:border-box;
  min-width:0; /* wichtig: verhindert Overflow/Quetschen */
}

/* Mobile: Columns stack */
@media (max-width: 768px){
  .fsb-cols{
    flex-direction:column;
    gap: var(--fsb-cols-gap-mobile, 16px);
  }
  .fsb-col{
    width:100% !important;
    max-width:100% !important;
    flex: 0 0 auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* ============================================================
   CTA (Frontend)
   (gleiches Verhalten wie Canvas: Hover-Farbe + Icon-Reserve)
============================================================ */

.fsb-cta__btn{
  color: var(--fsb-cta-color, inherit);
  position: relative;
}

.fsb-cta__btn:hover{
  color: var(--fsb-cta-hover-color, var(--fsb-cta-color, inherit));
}

.fsb-cta__inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
}

.fsb-cta__icon{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width: var(--fsb-cta-icon-size, 18px);
  height: var(--fsb-cta-icon-size, 18px);
  display:inline-flex;
  line-height:0;
}

.fsb-cta__btn:not(.has-icon) .fsb-cta__icon{ display:none; }

.fsb-cta__btn.is-icon-left  .fsb-cta__icon{ left:  var(--fsb-cta-icon-inset, 12px); }
.fsb-cta__btn.is-icon-right .fsb-cta__icon{ right: var(--fsb-cta-icon-inset, 12px); }

.fsb-cta__icon svg{
  width:100%;
  height:100%;
  display:block;
}

.fsb-cta__btn.has-icon{
  --fsb-cta-icon-reserve: calc(var(--fsb-cta-icon-size, 18px) + var(--fsb-cta-icon-gap, 0px));
}

.fsb-cta__label{
  padding-left:  var(--fsb-cta-icon-reserve, 0px);
  padding-right: var(--fsb-cta-icon-reserve, 0px);
}

.fsb-preview-wrap .fsb-content-stage{
  padding-left:0;
  padding-right:0;
}
/* ============================================================
   FS Kalender – gemeinsame Regeln (Canvas + Frontend)
   Zentrale Version für Shortcode-Widget
============================================================ */

:root{
  --fs-accent:#16a34a;
  --fs-accent-contrast:#fff;
  --fs-border:#e5e7eb;
  --fs-muted:#64748b;
  --fs-bg:#fff;
  --fs-radius:0px;
}

.fs-cal{
  border:1px solid var(--fs-border);
  border-radius:var(--fs-radius);
  padding:16px;
  background:#FFFFFF;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}

.fs-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:16px;
  flex-wrap:nowrap;
}

.fs-title{font-weight:700;}
.fs-tz{color:var(--fs-muted);font-size:12px;}

.fs-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.fs-month{
  border:1px solid var(--fs-border);
  border-radius:var(--fs-radius);
  padding:12px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
  background:#FFFFFF;
}

.fs-right,
.fs-times,
.fs-box,
.fs-weekheads,
.fs-days,
.fs-monthtop,
.fs-monthnav,
.fs-row{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.fs-monthtop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}

.fs-monthnav{
  display:flex;
  gap:6px;
  align-items:center;
}

.fs-monthbtn,
.fs-todaybtn{
  display:inline-block;
  padding:6px 10px;
  border:1px solid var(--fs-border);
  border-radius:8px;
  text-decoration:none;
  background:#fff;
  font-size:13px;
  cursor:pointer;
}

.fs-todaybtn{
  border-color:var(--fs-accent);
}

.fs-weekheads{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.fs-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  width:100%;
  max-width:100%;
  min-width:0;
}

.fs-day{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--fs-border);
  border-radius:8px;
  padding:8px 0;
  background:#fafafa;
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
}

.fs-day--past,
.fs-day--disabled{
  background:#fff;
  opacity:.45;
  color:#777;
  pointer-events:none;
}

.fs-day--has button{
  display:block;
  width:100%;
  height:100%;
  padding:8px 0;
  text-align:center;
  background:#ecfdf5;
  border-radius:8px;
  border:1px solid #d1fae5;
  cursor:pointer;
}

.fs-day--sel{
  outline:2px solid var(--fs-accent);
}

.fs-day--today{
  box-shadow: inset 0 0 0 2px var(--fs-accent);
  border-radius:8px;
}

.fs-day--empty{
  background:#fff;
  opacity:.5;
  border-style:dashed;
}

.fs-times{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.fs-box{
  border:1px solid var(--fs-border);
  border-radius:var(--fs-radius);
  padding:12px;
  background:#FFFFFF;
  min-height:120px;
  max-height:260px;
  overflow-y:auto;
  scrollbar-gutter:stable both-edges;
}

.fs-box h4{
  margin:0 0 8px 0;
  font-size:14px;
  font-weight:600;
}

.fs-chip{
  display:inline-block;
  margin:4px 6px 0 0;
  padding:8px 10px;
  border:1px solid var(--fs-border);
  border-radius:8px;
  background:#fff;
  cursor:pointer;
}

.fs-chip:hover{
  border-color:var(--fs-accent);
}

.fs-form{
  margin-top:16px;
  border:1px solid var(--fs-border);
  border-radius:var(--fs-radius);
  padding:12px;
  background:#FFFFFF;
}

.fs-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.fs-input{
  flex:1 1 220px;
  padding:10px;
  border:1px solid var(--fs-border);
  border-radius:8px;
}

.fs-btn{
  padding:10px 14px;
  border-radius:8px;
  border:1px solid var(--fs-accent);
  background:var(--fs-accent);
  color:var(--fs-accent-contrast);
  cursor:pointer;
}

.fs-alert{
  padding:10px;
  border-radius:8px;
  margin-bottom:10px;
}

.fs-alert--ok{
  background:#ecfdf5;
  border:1px solid #86efac;
}

.fs-alert--err{
  background:#fee2e2;
  border:1px solid #fca5a5;
}

.fs-muted{
  color:var(--fs-muted);
}

.fs-right{
  min-height:360px;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}

.fs-head,
.fs-monthtop,
.fs-monthnav,
.fs-weekheads,
.fs-days,
.fs-times,
.fs-box,
.fs-form,
.fs-row,
.fs-day,
.fs-daybtn,
.fs-chip{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.fs-chip{
  white-space:normal;
  word-break:break-word;
  text-align:center;
}

.fs-cal.is-paused .fs-grid{
  opacity:.45;
  filter:grayscale(0.1);
}

.fs-cal.is-paused .fs-days button,
.fs-cal.is-paused .fs-monthbtn,
.fs-cal.is-paused .fs-todaybtn,
.fs-cal.is-paused .fs-chip,
.fs-cal.is-paused .fs-btn{
  pointer-events:none !important;
  cursor:not-allowed !important;
}

.fs-pause-banner{
  margin-bottom:12px;
  border:1px solid #f59e0b;
  background:#fff7ed;
  border-radius:var(--fs-radius);
  padding:10px;
}

@media (min-width:700px) and (max-width:1023px){
  .fs-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .fs-month{
    width:100%;
    min-width:0;
    max-width:none;
  }

  .fs-times{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:16px;
  }

  .fs-box{
    min-height:120px;
    max-height:none;
    overflow:visible;
  }

  .fs-head{
    flex-wrap:wrap;
    gap:12px;
  }
}

@media (max-width:832px){
  .fs-times{
    grid-template-columns:1fr;
    gap:12px;
  }

  .fs-box{
    min-height:auto;
    max-height:none;
    overflow:visible;
  }

  .fs-head{
    flex-wrap:wrap;
    gap:12px;
  }

  .fs-monthtop{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .fs-monthnav{
    flex-wrap:wrap;
  }

  .fs-cal{
    padding:12px;
    overflow:hidden;
  }

  .fs-days{
    gap:3px;
  }

  .fs-day{
    padding:6px 0;
  }
}

@media (min-width:1024px){
  .fs-cal{
    max-width:1160px;
    margin-left:auto;
    margin-right:auto;
  }

  .fs-grid{
    grid-template-columns:minmax(280px,360px) minmax(0,1fr);
    gap:24px;
    align-items:stretch;
    min-width:0;
  }

  .fs-month{
    width:100%;
    min-width:0;
    max-width:360px;
  }

  .fs-times{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:24px;
  }

  .fs-head{
    flex-wrap:nowrap;
    gap:16px;
  }

  .fs-btn{
    background: var(--fs-accent);
    border: 1px solid var(--fs-accent);
    color: var(--fs-accent-contrast);
    transition: filter .15s;
  }

  .fs-btn:hover,
  .fs-btn:focus{
    filter: brightness(0.95);
    outline:none;
  }

  .fs-chip{
    border:1px solid var(--fs-accent);
    color:var(--fs-accent);
    background:#fff;
    transition: all .15s;
  }

  .fs-chip:hover,
  .fs-chip:focus{
    background:var(--fs-accent);
    color:var(--fs-accent-contrast);
    border-color:var(--fs-accent);
    outline:none;
  }

  .fs-monthbtn,
  .fs-todaybtn{
    display:inline-block;
    padding:6px 10px;
    border:1px solid var(--fs-accent);
    border-radius:8px;
    background:#fff;
    font-size:13px;
    cursor:pointer;
    transition:all .15s;
  }

  .fs-monthbtn:hover,
  .fs-monthbtn:focus,
  .fs-todaybtn:hover,
  .fs-todaybtn:focus{
    background:var(--fs-accent);
    color:var(--fs-accent-contrast);
    outline:none;
  }

  :root{
    --fs-day-h: 44px;
  }

  .fs-days .fs-day,
  .fs-days .fs-day--empty{
    height:var(--fs-day-h);
    padding:0;
    box-sizing:border-box;
  }

  .fs-days .fs-daybtn{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    background:#ecfdf5;
    border:1px solid #d1fae5;
    border-radius:8px;
    cursor:pointer;
    transition: all .15s;
  }

  .fs-days .fs-daybtn:hover,
  .fs-days .fs-daybtn:focus{
    border-width:1px;
    outline:none;
    border-color:var(--fs-accent);
    box-shadow: inset 0 0 0 2px var(--fs-accent);
  }

  .fs-days .fs-day:not(.fs-day--has){
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .fs-monthbtn:disabled{
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
  }

  .fs-days .fs-daybtn,
  .fs-days .fs-daybtn:hover,
  .fs-days .fs-daybtn:focus{
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
}