/* =========================================================
  KS Booking – kompakter Kalender (7x7)  |  Clean Version
  ========================================================= */
/* === Poppins (nur TTF) ========================================= */


  :root{
 --ksb-teal:      #7BB9BC;
 --ksb-teal-dark: #6aa4a7;
 --ksb-busy:      #dbe0e6;
 --ksb-text:      #1f2a37;
 --ksb-muted:     #6b7684;
 --ksb-border:    #e6eaee;
 --ksb-bg:        #ffffff;
 --ksb-shadow:    0 6px 20px rgba(31,42,55,.08);
}


/* ---------- Card / Layout ---------- */
/* Breiter + flexibel */
#ksb{
  max-width: 680px;         /* <— vorher 360px */
  width: 100%;
  margin: 0 auto 16px;      /* enger am Formular */
  background: var(--ksb-bg);
  border: 1px solid var(--ksb-border);
  border-radius: 16px;
  box-shadow: var(--ksb-shadow);
  padding: 18px;
  color: var(--ksb-text);
  font-size: 16px;          /* etwas größer */
  line-height: 1.35;
}

/* Wenn deine Karte (Reservierungs-Seite) max. 640px hat, Kalender daran anpassen */
.has-inline-cal #ksb{
  max-width: 640px;         /* matcht die Card-Breite deiner Seite */
}

#ksb, #ksb *{ box-sizing: border-box; }


.ksb-head{
 display: grid;
 grid-template-columns: 36px 1fr 36px;
 align-items: center;
 margin-bottom: 10px;
}
#ksb-title{ text-align:center; font-weight:600; }


#ksb-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: clamp(44px, 7.2vw, 62px); /* skaliert mit Breite, deckelt oben */
  gap: 8px;                                  /* etwas mehr Luft */
  margin: 0 0 4px 0;
  width: 100%;
}


.ksb-days-head{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;                 /* passend zu #ksb-grid */
  margin: 0 0 2px 0;
}

.ksb-day-head{
 text-align: center;
 font-size: 12px;
 color: var(--ksb-muted);
}


/* ---------- Day buttons (reset + base) ---------- */
#ksb .ksb-day{
 margin: 0 !important;
 padding: 0 !important;
 border: 1px solid transparent;
 border-radius: 8px;
 background: transparent;
 color: #1f2a37;
 font: inherit;
 font-weight: 600;
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: background-color .15s ease, color .15s ease, border-color .15s ease;
 will-change: outline-color, box-shadow;
contain: paint;
}


/* Verfügbar: gefüllt türkis, weiße Zahl */
#ksb .ksb-day.ksb-day--free{
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border-color: var(--ksb-teal) !important;
}
#ksb .ksb-day.ksb-day--free:hover{
 background: var(--ksb-teal-dark) !important;
 border-color: var(--ksb-teal-dark) !important;
}


/* Ausgewählt: weiß, türkis umrandet + Schrift türkis */
#ksb .ksb-day.ksb-day--selected{
 background: #fff !important;
 color: var(--ksb-teal) !important;
 border: 2px solid var(--ksb-teal) !important;
 box-sizing: border-box;
}
#ksb .ksb-day.ksb-day--selected:hover{
 color: var(--ksb-teal-dark) !important;
 border-color: var(--ksb-teal-dark) !important;
}


/* Gebucht / Puffer */
#ksb .ksb-day.ksb-day--busy{
 background: var(--ksb-busy) !important;
 color: #7a858c !important;
 cursor: not-allowed !important;
 border-color: #b9c1cc !important;
}


/* Gaps (außerhalb des Monats) */
#ksb .ksb-day.ksb-day--gap{
 background: transparent !important;
 cursor: default !important;
}


/* Vergangenheit: grau + X */
#ksb .ksb-day.ksb-day--past{
 background: var(--ksb-busy) !important;
 color: #9aa3a9 !important;
 border-color: #b9c1cc !important;
 position: relative;
 cursor: not-allowed !important;
}
#ksb .ksb-day.ksb-day--past::before,
#ksb .ksb-day.ksb-day--past::after{
 content: "";
 position: absolute;
 left: 50%; top: 50%;
 width: 70%; height: 2px;
 background: #b9c1cc;
 transform-origin: center;
 pointer-events: none;
 opacity: .9;
}
#ksb .ksb-day.ksb-day--past::before{ transform: translate(-50%,-50%) rotate(45deg); }
#ksb .ksb-day.ksb-day--past::after { transform: translate(-50%,-50%) rotate(-45deg); }


/* ---------- Legend ---------- */
.ksb-legend{
 display:flex;
 gap:16px;
 align-items:center;
 justify-content:space-between;
 margin-top:10px;
 font-size:12px;
 color: var(--ksb-muted);
}
.ksb-key{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.ksb-swatch{ width:12px; height:12px; border-radius:3px; border:1px solid transparent; }


/* Legendenfarben passend zu den Kacheln */
.ksb-swatch--free   { background: var(--ksb-teal);       border-color: var(--ksb-teal); }
.ksb-swatch--select { background: #ffffff;               border-color: var(--ksb-teal); }
.ksb-swatch--busy   { background: var(--ksb-busy);       border-color: #b9c1cc; }


/* ---------- Info + Call-to-action Button ---------- */
#ksb-info{
 margin-top: 12px;
 padding: 12px;
 border: 1px solid var(--ksb-border);
 border-radius: 12px;
 background: #fbfcfd;
}
#ksb-info .ksb-msg{ margin: 0 0 8px 0; font-weight: 600; }


/* Outline-Button: Türkise Umrandung/Text, beim Hover gefüllt */
#ksb .ksb-btn, #ksb-info .ksb-btn{
 background: transparent !important;
 border: 2px solid var(--ksb-teal) !important;
 color: var(--ksb-teal) !important;
 font-weight: 700;
 border-radius: 8px;
 padding: 12px;
 width: 100%;
 text-align: center;
 transition: all .2s ease-in-out;
}
#ksb .ksb-btn:hover:not(:disabled),
#ksb-info .ksb-btn:hover:not(:disabled){
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border-color: var(--ksb-teal-dark) !important;
}
#ksb .ksb-btn:disabled, #ksb-info .ksb-btn:disabled{
 opacity:.6; cursor:not-allowed;
}


/* ---------- Monatspfeile ---------- */
#ksb .ksb-nav button,
#ksb #ksb-prev,
#ksb #ksb-next{
 width: 40px !important;
 height: 40px !important;
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 background: transparent !important;
 border: 2px solid var(--ksb-teal) !important;
 color: var(--ksb-teal) !important;
 border-radius: 8px !important;
 box-shadow: none !important;
 padding: 0 !important;
 line-height: 1 !important;
 transition: all .2s ease-in-out !important;
}
#ksb .ksb-nav button:hover:not(:disabled),
#ksb #ksb-prev:hover:not(:disabled),
#ksb #ksb-next:hover:not(:disabled){
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border-color: var(--ksb-teal-dark) !important;
}
#ksb .ksb-nav button.is-disabled,
#ksb .ksb-nav button:disabled,
#ksb #ksb-prev.is-disabled, #ksb #ksb-next.is-disabled,
#ksb #ksb-prev:disabled,   #ksb #ksb-next:disabled{
 opacity:.6 !important;
 cursor:not-allowed !important;
 background: transparent !important;
 border-color: #d6dee0 !important;
 color: #9aa3a9 !important;
}


/* ---------- Misc ---------- */
.ksb-prices{
 display:flex; justify-content:space-between;
 font-size:12px; color:var(--ksb-muted);
 margin-top:6px; border-top:1px dashed var(--ksb-border); padding-top:6px;
}


.ksb-addons{ margin-top:10px; font-size:14px; }
.ksb-addons label{ display:block; margin:4px 0; }


@media (max-width:420px){
 #ksb{ max-width:92vw; }
 #ksb-grid{ grid-auto-rows: 44px; }
}


/* =======================================================
  KS Booking – Reservierungsseite: Buttons in Türkis
  (hart gegen Theme überschrieben, nur im #ksb-res Bereich)
  ======================================================= */


/* === KS Booking – Anfrage absenden: gefüllt türkis, Hover weiß === */
#ksb-res button[type="submit"],
#ksb-res input[type="submit"],
#ksb-res .wp-block-button__link,
#ksb-res .wp-element-button,
#ksb-res .ksb-btn{
  background: var(--ksb-teal) !important;
  color: #fff !important;
  border: 2px solid var(--ksb-teal) !important;
  border-radius: 8px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  text-align: center !important;
  transition: all .25s ease-in-out !important;
}

#ksb-res button[type="submit"]:hover:not(:disabled),
#ksb-res input[type="submit"]:hover:not(:disabled),
#ksb-res .wp-block-button__link:hover:not(:disabled),
#ksb-res .wp-element-button:hover:not(:disabled),
#ksb-res .ksb-btn:hover:not(:disabled),
#ksb-res button[type="submit"]:focus-visible,
#ksb-res input[type="submit"]:focus-visible {
  background: #fff !important;
  color: var(--ksb-teal) !important;
  border-color: var(--ksb-teal) !important;
}

#ksb-res button[type="submit"]:disabled,
#ksb-res input[type="submit"]:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* optional: kleines Chevron/Icons im Details-Button mitfärben */
#ksb-res .btn-details .chev,
#ksb-res .ksb-details .chev{
 color: var(--ksb-teal) !important;
 transition: color .2s ease-in-out;
}
#ksb-res .btn-details:hover .chev,
#ksb-res .ksb-details:hover .chev,
#ksb-res .btn-details.is-open .chev{
 color: #fff !important;
}


/* ==== KS Booking – Reservierungsseite: Ultra-Override für Buttons ==== */
/* Gilt NUR im Reservierungsbereich (#ksb-res / #ksb-res-form) */


/* --- Anfrage absenden (Submit) -------------------------------------- */
/*#ksb-res form#ksb-res-form button[type="submit"],
#ksb-res form#ksb-res-form input[type="submit"],
#ksb-res form[id*="ksb"] button[type="submit"],
#ksb-res form[id*="ksb"] input[type="submit"],
#ksb-res .ksb-btn,
#ksb-res .button[type="submit"],
#ksb-res .wp-block-button__link,
#ksb-res-form button[type="submit"],
#ksb-res-form input[type="submit"]{
 background: transparent !important;
 border: 2px solid var(--ksb-teal) !important;
 color: var(--ksb-teal) !important;
 border-radius: 10px !important;
 padding: 10px 14px !important;
 font-weight: 700 !important;
 line-height: 1 !important;
 box-shadow: none !important;
 text-decoration: none !important;
 transition: all .2s ease-in-out !important;
}*/
#ksb-res form#ksb-res-form button[type="submit"]:hover:not(:disabled),
#ksb-res form#ksb-res-form input[type="submit"]:hover:not(:disabled),
#ksb-res .wp-block-button__link:hover,
#ksb-res-form button[type="submit"]:hover:not(:disabled),
#ksb-res-form input[type="submit"]:hover:not(:disabled){
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border-color: var(--ksb-teal-dark) !important;
}
#ksb-res form#ksb-res-form button[type="submit"]:disabled,
#ksb-res form#ksb-res-form input[type="submit"]:disabled,
#ksb-res-form button[type="submit"]:disabled,
#ksb-res-form input[type="submit"]:disabled{
 opacity:.6 !important;
 cursor:not-allowed !important;
}


/* Pfeil-/Chevron-Icon im Details-Button mitfärben (falls vorhanden) */
#ksb-res .btn-details .chev,
#ksb-res .ksb-details .chev{ color: var(--ksb-teal) !important; transition: color .2s; }
#ksb-res .btn-details:hover .chev,
#ksb-res .ksb-details:hover .chev{ color:#fff !important; }



/* ==== KS Booking — erzwungene Styles über eigene Klassen ==== */


/* Absenden-Button: Outline türkis, Hover gefüllt */
#ksb-res .ksb-submit-force{
 background: transparent !important;
 border: 2px solid var(--ksb-teal) !important;
 color: var(--ksb-teal) !important;
 border-radius: 8px !important;
 padding: 10px 14px !important;
 font-weight: 700 !important;
 line-height: 1 !important;
 box-shadow: none !important;
 text-decoration: none !important;
 transition: all .2s ease-in-out !important;
}
#ksb-res .ksb-submit-force:hover:not(:disabled){
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border-color: var(--ksb-teal-dark) !important;
}


/* === KS Booking CTA: Standard gefüllt, Hover = Outline === */
#ksb .ksb-btn,
#ksb-info .ksb-btn{
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border: 2px solid var(--ksb-teal) !important;
 border-radius: 8px;
 padding: 12px;
 font-weight: 700;
 width: 100%;
 text-align: center;
 transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}


/* Hover / Tastatur-Fokus / Active: wie ausgewählter Tag (weiß mit türkis) */
#ksb .ksb-btn:hover:not(:disabled),
#ksb-info .ksb-btn:hover:not(:disabled),
#ksb .ksb-btn:focus-visible,
#ksb-info .ksb-btn:focus-visible,
#ksb .ksb-btn:active,
#ksb-info .ksb-btn:active{
 background: #fff !important;
 color: var(--ksb-teal) !important;
 border-color: var(--ksb-teal) !important;
}


/* Deaktiviert bleibt klar erkennbar */
#ksb .ksb-btn:disabled,
#ksb-info .ksb-btn:disabled{
 opacity: .6;
 cursor: not-allowed;
}


/* === KS Booking – Anfrage absenden: gefüllt türkis, Hover weiß === */
#ksb-res button[type="submit"],
#ksb-res input[type="submit"],
#ksb-res .ksb-btn,
#ksb-res .wp-block-button__link {
 background: var(--ksb-teal) !important;
 color: #fff !important;
 border: 2px solid var(--ksb-teal) !important;
 border-radius: 8px !important;
 padding: 12px 18px !important;
 font-weight: 700 !important;
 text-align: center !important;
 transition: all .25s ease-in-out !important;
}


/* Hover / Fokus / Aktiv: weiß mit türkiser Umrandung */
#ksb-res button[type="submit"]:hover:not(:disabled),
#ksb-res input[type="submit"]:hover:not(:disabled),
#ksb-res .ksb-btn:hover:not(:disabled),
#ksb-res .wp-block-button__link:hover:not(:disabled),
#ksb-res button[type="submit"]:focus-visible,
#ksb-res input[type="submit"]:focus-visible {
 background: #fff !important;
 color: var(--ksb-teal) !important;
 border-color: var(--ksb-teal) !important;
}


/* Disabled bleibt klar erkennbar */
#ksb-res button[type="submit"]:disabled,
#ksb-res input[type="submit"]:disabled {
 opacity: 0.6 !important;
 cursor: not-allowed !important;
}

/* Sofortige, konfliktfeste Auswahl – ohne Reflow */
#ksb .ksb-day.is-selected,
#ksb .ksb-day.ksb-day--selected {
  outline: 2px solid var(--ksb-teal) !important;
  outline-offset: -2px;
  /* keine Übergänge beim Umschalten */
  transition: none !important;
}

#ksb .ksb-day.ksb-day--busy{
  background: var(--ksb-busy) !important;
  color: #7a858c !important;
  cursor: not-allowed !important;
  border-color: #b9c1cc !important;
  pointer-events: none; /* ← dazu */
}


/* FINAL OVERRIDE: "Details" wie Link, ohne Linie/Kasten */
#ksb-res .ksb-card-opt button.btn-details,
#ksb-res .ksb-card-opt button.btn-details:focus,
#ksb-res .ksb-card-opt button.btn-details:active {
  /* alles auf Link-Optik */
  color: #3ab6b6 !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline !important;
  line-height: inherit !important;

  /* Kasten/Kante vollständig entfernen */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;

  /* keine Text-Unterstreichung */
  text-decoration: none !important;
}

/* evtl. vom Theme erzeugte Pseudo-Linien killen */
#ksb-res .ksb-card-opt button.btn-details::before,
#ksb-res .ksb-card-opt button.btn-details::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Hover-Farbe */
#ksb-res .ksb-card-opt button.btn-details:hover {
  color: #000000 !important;
  text-decoration: none !important;
}

/* Pfeil übernimmt die Textfarbe */
#ksb-res .ksb-card-opt .btn-details .chev {
  margin-left: .25rem !important;
  color: currentColor !important;
}

/* Linie unter "Details" entfernen – Rahmen der Detailbox aus */
#ksb-res .ksb-card-opt .ksb-detailbox {
  border: 0 !important;           /* killt die sichtbare Linie */
  box-shadow: none !important;    /* falls ein Theme Schatten ergänzt */
  margin-top: 10px !important;    /* etwas Abstand für Luft */
}


/* --- Details-Trigger wirklich wie Textlink, ohne Linie/Rahmen/Schatten --- */
#ksb-res .ksb-card-opt .btn-details,
#ksb-res .ksb-card-opt .btn-details *,
#ksb-res .ksb-card-opt .btn-details::before,
#ksb-res .ksb-card-opt .btn-details::after {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-decoration: none !important;
}

/* Sicherheitshalber: keine pseudo-Unterstreichungen */
#ksb-res .ksb-card-opt .btn-details {
  display: inline !important;      /* verhindert breite Button-Box */
  padding: 0 !important;
  margin: 6px 0 0 0 !important;
  color: #3ab6b6 !important;
  font: inherit !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

/* Fokus/hover ohne Unterstreichung */
#ksb-res .ksb-card-opt .btn-details:hover,
#ksb-res .ksb-card-opt .btn-details:focus {
  color: #2a8f8f !important;
  text-decoration: none !important;
}

/* Falls die Detailbox darunter die „Linie“ erzeugt: Rahmen aus */
#ksb-res .ksb-card-opt .ksb-detailbox {
  border: 0 !important;
  box-shadow: none !important;
}

.ksb-cal__nav button.is-disabled {
  opacity: .35;
  pointer-events: none;
  cursor: default;
}
.ksb-day.is-disabled {
  opacity: .45;
  cursor: not-allowed;
}

#ksb .is-disabled { opacity:.45; cursor:not-allowed; }
#ksb .ksb-nav button.is-disabled { opacity:.35; pointer-events:none; }

/* --- Navigation --- */
.ksb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ksb-nav-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  color: #333;
  transition: color 0.2s;
}

.ksb-nav-btn:hover:not(:disabled) {
  color: #7BB9BC;
}

.ksb-nav-btn.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* --- Legende --- */
.ksb-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 12px;
  color: #6b7280;
  margin-top: 10px;
}

.ksb-legend .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.swatch-free   { background: #7BB9BC; }
.swatch-picked { background: #9ca3af; }
.swatch-booked { background: #d1d5db; }

/* Kopfzeile des Kalenders */
.ksb-cal__head {
  display: flex;
  align-items: center;
  justify-content: center;       /* Mitte für den Titel */
  position: relative;
  margin-bottom: 8px;
}

/* Monatstitel */
.ksb-cal__title {
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  min-width: 140px; /* sorgt dafür, dass der Titel genug Platz hat */
}

/* Pfeile links und rechts */
.ksb-cal__prev,
.ksb-cal__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #333;
  padding: 4px 8px;
  transition: color 0.2s;
}

.ksb-cal__prev:hover,
.ksb-cal__next:hover {
  color: #7BB9BC;
}

.ksb-cal__prev { left: 0; }
.ksb-cal__next { right: 0; }

/* ===== Kalender Kopf (Titel + Pfeile) ===== */
#ksb .ksb-cal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;          /* mehr Luft zwischen Pfeilen/Titel */
  padding: 0 8px;            /* etwas Innenabstand links/rechts */
}

#ksb #ksb-prev,
#ksb #ksb-next{
  width: 40px !important;
  height: 40px !important;
  margin: 0 6px;             /* Abstand zu Mo/So */
}

#ksb .ksb-cal__title{
  flex: 1 1 auto;
  text-align: center;
  margin: 0 12px;            /* hält Pfeile vom Titel/Spalten fern */
  font-weight: 700;          /* Monatsüberschrift kräftiger */
  font-size: 16px;
}

/* ===== Wochentags-Zeile (Mo–So) ===== */
.ksb-days-head{
  margin: 6px 0 10px 0;      /* etwas mehr Abstand nach unten */
  gap: 10px;                 /* gleiche Lücke wie im Grid */
}

.ksb-days-head > *{
  font-weight: 700;          /* deutlicher */
  font-size: 14px;           /* größer */
  color: #334155;            /* dunkleres Grau für bessere Lesbarkeit */
  letter-spacing: 0.2px;
}

@media (min-width: 720px){
  .ksb-days-head > *{ font-size: 15px; }
}

/* ===== Labels im Reservierungsformular fett ===== */
#ksb-res-form label {
  font-weight: 600 !important;   /* fett */
  color: #1f2a37;               /* optional dunklere Farbe */
  font-size: 15px;              /* optional etwas größer */
}

/* Zusatzfeld „Sonstiges“: volle Formularbreite + saubere Ausrichtung */
#ksb-res-form .form-row-full{
  grid-column: 1 / -1;       /* volle Breite wie das Datumsfeld */
  margin-top: 8px;
}
#ksb-res-form #ksb-occasion-other label{
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
#ksb-res-form #ksb-occasion-other input{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Container über volle Breite wie Datum */
#ksb-res-form .form-row-full { 
  grid-column: 1 / -1;
}

/* EINZEILIGE LEISTE: horizontal scrollen, kein Umbruch */
#ksb-res-form #ksb-occasion.ksb-choice-grid {
  display: flex;
  flex-wrap: nowrap;          /* alles in einer Reihe */
  gap: 10px;
  width: 100%;
  overflow-x: auto;           /* falls zu viele: horizontales Scrollen */
  padding: 6px 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; /* smooth auf iOS */
}

/* Chips: KEIN width:100% mehr! */
#ksb-res-form .ksb-choice {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 18px;
  border: 1.5px solid var(--ksb-teal);
  background: var(--ksb-teal);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;        /* nicht umbrechen */
  transition: background .15s, color .15s, border-color .15s;
}

#ksb-res-form .ksb-choice:hover {
  background: var(--ksb-teal-dark);
  border-color: var(--ksb-teal-dark);
}

#ksb-res-form .ksb-choice.is-selected {
  background: #fff;
  color: var(--ksb-teal);
  border-color: var(--ksb-teal);
}

/* Sonstiges-Feld weiterhin volle Breite + saubere Labels */
#ksb-res-form #ksb-occasion-other label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}
#ksb-res-form #ksb-occasion-other input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* === Lieferung / Abholung als Chips über gesamte Breite === */
#ksb-res-form .form-row-full { grid-column: 1 / -1; }

#ksb-res-form #ksb-delivery-chips.ksb-delivery-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* zwei Spalten, vollflächig */
  gap: 10px;
  width: 100%;
}

#ksb-res-form #ksb-delivery-chips .ksb-choice{
  /* Startzustand: weißer Button mit türkiser Kontur & Text */
  width: 100%;
  justify-content: center;
  border: 2px solid var(--ksb-teal);
  background: #fff;
  color: var(--ksb-teal);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  box-shadow: none;
}

#ksb-res-form #ksb-delivery-chips .ksb-choice:hover{
  border-color: var(--ksb-teal-dark);
  color: var(--ksb-teal-dark);
}

#ksb-res-form #ksb-delivery-chips .ksb-choice.is-selected{
  /* ausgewählt: gefüllt türkis, weiße Schrift – wie dein Submit */
  background: var(--ksb-teal);
  color: #fff;
  border-color: var(--ksb-teal);
}

/* keine fetten Container/„Kästen hinter den Buttons“ */
#ksb-res-form #ksb-delivery-chips { background: transparent; padding: 0; }

/* === Anlass: 2-Spalten-Grid + "Sonstiges" volle Breite ================== */
#ksb-res-form #ksb-occasion{
  display: grid !important;
  grid-template-columns: 1fr 1fr;   /* zwei Spalten */
  gap: 10px 12px;
}

/* Chips sollen die Spaltenbreite füllen */
#ksb-res-form #ksb-occasion .ksb-choice{
  width: 100%;
}
#ksb-res-form #ksb-occasion .ksb-choice .ksb-choice__btn{
  width: 100%;
}

/* "Sonstiges" über die gesamte Breite (eigene Zeile) */
#ksb-res-form #ksb-occasion .ksb-choice[data-value="sonstiges"]{
  grid-column: 1 / -1;      /* über beide Spalten */
  justify-self: stretch;
}

/* Mobile: einspaltig */
@media (max-width: 640px){
  #ksb-res-form #ksb-occasion{
    grid-template-columns: 1fr;
  }
}

/* Grid für 2 Spalten + 'Sonstiges' full width */
#ksb-occasion-chips.chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#ksb-occasion-chips .chip-full { grid-column: 1 / -1; }

/* Einheitliche Chip-Optik (wie bei Lieferung) */
.ksb-chip{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #7BB9BC;
  background: #fff;
  color: #2a8f8f;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  cursor: pointer;
  outline: none;
}
.ksb-chip:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); }
.ksb-chip.is-selected{
  background: #7BB9BC;
  color: #fff;
  border-color: #7BB9BC;
}

/* (Optional) neutraler ‚Hint‘ unter Lieferung */
#ksb-delivery-hint { color:#0f766e; font-size:13px; }

/* === ANLASS als Chips: ungeklickt Outline, geklickt gefüllt (wie Lieferung) === */
#ksb-res-form #ksb-occasion .ksb-choice{
  border: 2px solid var(--ksb-teal);
  background: #fff;
  color: var(--ksb-teal);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
#ksb-res-form #ksb-occasion .ksb-choice:hover{
  border-color: var(--ksb-teal-dark);
  color: var(--ksb-teal-dark);
}
#ksb-res-form #ksb-occasion .ksb-choice.is-selected{
  background: var(--ksb-teal);
  color: #fff;
  border-color: var(--ksb-teal);
}

/* Anlass-Grid: 2 Spalten, darunter Sonstiges in voller Breite */
#ksb-res-form #ksb-occasion.ksb-occasion-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#ksb-res-form #ksb-occasion .ksb-choice--full {
  grid-column: 1 / -1; /* volle Breite (für "Sonstiges") */
}

/* === Anlass: zwei Spalten, Buttons wie Lieferung === */
#ksb-res-form #ksb-occasion {
  display: grid;
  grid-template-columns: 1fr 1fr;        /* zwei gleich breite Spalten */
  gap: 10px;
  width: 100%;
}

/* Standard: weiß + türkise Kontur/Text (wie Liefer-Chips) */
#ksb-res-form #ksb-occasion .ksb-choice {
  width: 100%;
  justify-content: center;
  border: 2px solid var(--ksb-teal);
  background: #fff;
  color: var(--ksb-teal);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

/* Hover */
#ksb-res-form #ksb-occasion .ksb-choice:hover{
  border-color: var(--ksb-teal-dark);
  color: var(--ksb-teal-dark);
}

/* Ausgewählt: gefüllt türkis, weiße Schrift */
#ksb-res-form #ksb-occasion .ksb-choice.is-selected{
  background: var(--ksb-teal);
  color: #fff;
  border-color: var(--ksb-teal);
}

/* „Sonstiges“ über die gesamte Breite der Grid-Zeile */
#ksb-res-form #ksb-occasion .ksb-choice[data-value="sonstiges"]{
  grid-column: 1 / -1;
}

/* --- Anlass-Chips: Layout (2 Spalten + "Sonstiges" vollbreit) --- */
#ksb-res-form .ksb-occasion-chips{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  grid-column: 1 / -1; /* volle Formularbreite */
}
#ksb-res-form .ksb-occasion-chips .ksb-chip--wide{
  grid-column: 1 / -1;
}


#ksb-res-form .ksb-occasion-chips .ksb-chip:hover{
  background:#eaf5f6 !important;
}
#ksb-res-form .ksb-occasion-chips .ksb-chip.is-selected{
  background:#69b1b3 !important;  /* gefüllt */
  border-color:#69b1b3 !important;
  color:#fff !important;          /* weiße Schrift */
}

/* Falls Theme/Elementor irgendwo noch Button-Styles injiziert: neutralisieren */
#ksb-res-form .ksb-occasion-chips .ksb-chip:where(*) {
  box-shadow:none !important;
  text-decoration:none !important;
}

/* ========= Einheitliche Farben/Styles für ALLE Auswahl-Buttons ========= */
/* Tokens (ggf. anpassen) */
#ksb-res-form{
  --ksb-turq: #69b1b3;        /* Türkis-Fläche/Borderrand */
  --ksb-turq-ink: #2a8f8f;    /* Türkis Text/Outline-Text */
  --ksb-chip-radius: 12px;
  --ksb-chip-border: 1px;
}

/* Basisschaltflächen: Anlass & Lieferung in EINEM Look */
#ksb-res-form .ksb-occasion-chips .ksb-chip,
#ksb-res-form .ksb-delivery-chips .ksb-chip{
  appearance:none; -webkit-appearance:none;
  display:block;
  width:100%;
  text-align:center;
  padding:12px 16px;
  border-radius:var(--ksb-chip-radius);
  border:var(--ksb-chip-border) solid var(--ksb-turq) !important; /* gleiche Outline */
  background:#fff !important;            /* ungefüllt im Ruhezustand */
  color:var(--ksb-turq-ink) !important;   /* gleiche Textfarbe */
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
  box-shadow:none !important;
  background-image:none !important;
  text-decoration:none !important;
}

/* Hover gleich */
#ksb-res-form .ksb-occasion-chips .ksb-chip:hover,
#ksb-res-form .ksb-delivery-chips .ksb-chip:hover{
  background:#eaf5f6 !important;
}

/* Ausgewählt gleich (gefüllt) */
#ksb-res-form .ksb-occasion-chips .ksb-chip.is-selected,
#ksb-res-form .ksb-delivery-chips .ksb-chip.is-selected{
  background:var(--ksb-turq) !important;
  border-color:var(--ksb-turq) !important;
  color:#fff !important;
}

/* Sicherheit: entferne eventuelle Theme-Reste */
#ksb-res-form .ksb-occasion-chips .ksb-chip:where(*),
#ksb-res-form .ksb-delivery-chips .ksb-chip:where(*){
  box-shadow:none !important;
  background-image:none !important;
  text-decoration:none !important;
}

/* === FINAL OVERRIDE: Anlass (.ksb-chip) = Lieferung (.ksb-choice) === */
#ksb-res-form #ksb-occasion .ksb-chip,
#ksb-res-form #ksb-occasion .ksb-choice,
#ksb-res-form #ksb-delivery-chips .ksb-choice{
  -webkit-appearance:none; appearance:none;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  padding:12px 14px !important;
  border:2px solid var(--ksb-teal) !important;   /* = gleiche Kontur */
  border-radius:10px !important;                  /* = gleicher Radius */
  color:var(--ksb-teal) !important;               /* = gleiche Schriftfarbe */
  font:inherit; font-weight:700 !important; line-height:1.2;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}

/* Hover (beide gleich) */
#ksb-res-form #ksb-occasion .ksb-chip:hover,
#ksb-res-form #ksb-occasion .ksb-choice:hover,
#ksb-res-form #ksb-delivery-chips .ksb-choice:hover{
  background:#fff !important;
  border-color:var(--ksb-teal-dark) !important;
  color:var(--ksb-teal-dark) !important;
}

/* Ausgewählt (optional identisch) */
#ksb-res-form #ksb-occasion .ksb-chip.is-selected,
#ksb-res-form #ksb-occasion .ksb-choice.is-selected,
#ksb-res-form #ksb-delivery-chips .ksb-choice.is-selected{
  background:var(--ksb-teal) !important;
  color:#fff !important;
  border-color:var(--ksb-teal) !important;
}

/* "Sonstiges" volle Breite – falls vorhanden */
#ksb-res-form #ksb-occasion .ksb-chip[data-value="sonstiges"],
#ksb-res-form #ksb-occasion .ksb-choice[data-value="sonstiges"]{
  grid-column:1 / -1;
}

/* Anlass-Buttons exakt wie Lieferung */
#ksb-res-form #ksb-occasion .ksb-chip{
  -webkit-appearance:none; appearance:none;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  width:100%;
  padding:12px 14px !important;
  border:2px solid var(--ksb-teal) !important;  /* gleiche Kontur */
  border-radius:10px !important;                 /* gleicher Radius */
  color:var(--ksb-teal) !important;              /* gleiche Schriftfarbe */
  font:inherit; font-weight:700 !important; line-height:1.2;
  text-decoration:none !important;
  transition:background .15s, color .15s, border-color .15s;
}

/* Hover identisch */
#ksb-res-form #ksb-occasion .ksb-chip:hover{
  background:#fff !important;
  border-color:var(--ksb-teal-dark) !important;
  color:var(--ksb-teal-dark) !important;
}

/* Ausgewählt identisch */
#ksb-res-form #ksb-occasion .ksb-chip.is-selected{
  background:var(--ksb-teal) !important;
  border-color:var(--ksb-teal) !important;
  color:#fff !important;
}

/* === Nicht ausgewählt: Anlass & Lieferung identisch =================== */
#ksb-res-form #ksb-occasion .ksb-chip:not(.is-selected),
#ksb-res-form #ksb-occasion .ksb-choice:not(.is-selected),
#ksb-res-form #ksb-delivery-chips .ksb-choice:not(.is-selected) {
  -webkit-appearance: none;
  appearance: none;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  text-decoration: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px !important;

  border-style: solid !important;
  border-width: 2px !important;          /* gleiche Kontur-Dicke */
  border-color: var(--ksb-teal) !important;
  border-radius: 10px !important;        /* gleicher Radius */

  color: var(--ksb-teal) !important;     /* gleiche Schriftfarbe */
  font: inherit;
  font-weight: 700 !important;
  line-height: 1.2;

  transition: background .15s, color .15s, border-color .15s;
}

/* Hover (nur Outline/Text dunkler, kein Fill) */
#ksb-res-form #ksb-occasion .ksb-chip:not(.is-selected):hover,
#ksb-res-form #ksb-occasion .ksb-choice:not(.is-selected):hover,
#ksb-res-form #ksb-delivery-chips .ksb-choice:not(.is-selected):hover {
  background: #fff !important;
  border-color: var(--ksb-teal-dark) !important;
  color: var(--ksb-teal-dark) !important;
}

/* Ausgewählt bleibt wie bisher (falls vorhanden) */
#ksb-res-form #ksb-occasion .ksb-chip.is-selected,
#ksb-res-form #ksb-occasion .ksb-choice.is-selected,
#ksb-res-form #ksb-delivery-chips .ksb-choice.is-selected {
  background: var(--ksb-teal) !important;
  border-color: var(--ksb-teal) !important;
  color: #fff !important;
}

/* === FINAL: Anlass & Lieferung im NICHT ausgewählten Zustand identisch === */
#ksb-res-form #ksb-occasion .ksb-choice:not(.is-selected),
#ksb-res-form #ksb-occasion .ksb-chip:not(.is-selected),
#ksb-res-form .ksb-occasion-chips .ksb-chip:not(.is-selected),
#ksb-res-form #ksb-delivery-chips .ksb-choice:not(.is-selected){
  -webkit-appearance:none; appearance:none;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  text-decoration:none !important;

  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:12px 14px !important;

  border:2px solid var(--ksb-teal) !important;   /* gleiche Kontur */
  border-radius:10px !important;
  color:var(--ksb-teal) !important;              /* gleiche Schriftfarbe */
  font:inherit; font-weight:700 !important; line-height:1.2;
  transition:background .15s, color .15s, border-color .15s;
}

/* Hover: nur Outline/Text dunkler */
#ksb-res-form #ksb-occasion .ksb-choice:not(.is-selected):hover,
#ksb-res-form #ksb-occasion .ksb-chip:not(.is-selected):hover,
#ksb-res-form .ksb-occasion-chips .ksb-chip:not(.is-selected):hover,
#ksb-res-form #ksb-delivery-chips .ksb-choice:not(.is-selected):hover{
  background:#fff !important;
  border-color:var(--ksb-teal-dark) !important;
  color:var(--ksb-teal-dark) !important;
}

/* Ausgewählt (optional gleich) */
#ksb-res-form #ksb-occasion .ksb-choice.is-selected,
#ksb-res-form #ksb-occasion .ksb-chip.is-selected,
#ksb-res-form .ksb-occasion-chips .ksb-chip.is-selected,
#ksb-res-form #ksb-delivery-chips .ksb-choice.is-selected{
  background:var(--ksb-teal) !important;
  border-color:var(--ksb-teal) !important;
  color:#fff !important;
}

/* Icons in Chips: gleiche Größe, schöner Abstand */
#ksb-res-form .ksb-chip,
#ksb-res-form .ksb-choice { gap: 8px; }

#ksb-res-form .ksb-chip svg,
#ksb-res-form .ksb-choice svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-block;
  vertical-align: middle;
  stroke: currentColor;   /* übernimmt die Schriftfarbe */
  fill: none;
}

.ksb-card-opt {
  display: grid;
  grid-template-columns: 1fr 120px; /* Text links, Bild rechts */
  gap: 12px;
  align-items: center;
}

.ksb-card-opt .pkg-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ksb-card-opt .pkg-img {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.ksb-card-opt .pkg-img img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Externer Detail-Kasten unter den Paketen */
#ksb-package-details {
  margin-top: 12px;
}

#ksb-package-details .ksb-detailbox-external {
  background: #fff;
  border: 1px solid #d7e4e5;
  border-radius: 12px;
  padding: 14px;
}

#ksb-package-details .ksb-detailbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

#ksb-package-details .ksb-detailbox-close {
  appearance: none;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #999;
}

#ksb-package-details .ksb-detailbox-close:hover {
  color: var(--ksb-teal-dark);
}

#ksb-package-details .ksb-list {
  margin: 0;
  padding-left: 18px;
}

/* Aktives Paket (wenn ausgewählt) */
.ksb-card-opt.selected {
  background-color: var(--ksb-turq, #59c1c4); /* kräftiges Türkis */
  border: 2px solid var(--ksb-turq-dark, #249da1); /* stärkere Kontur */
  box-shadow: 0 0 6px rgba(36, 157, 161, 0.3); /* sanfter Glow */
  color: #fff; /* weiße Schrift für besseren Kontrast */
  transition: all 0.2s ease-in-out;
}


/* wenn du den Button anders absetzen willst */
.ksb-card-opt.selected .btn-details:hover {
  text-decoration: underline;
}

.ksb-card-opt:hover {
  border-color: var(--ksb-turq-dark, #249da1);
  box-shadow: 0 0 4px rgba(36, 157, 161, 0.25);
}

/* Ausgewähltes Paket: voller Türkis, kräftiger Rahmen,
   aber Text bleibt dunkel – NUR "Details" ist weiß */
#ksb-res .ksb-card-opt.selected{
  background: rgba(89, 193, 196, 0.391) !important; /* leicht transparent */
  border: 2px solid var(--ksb-teal-dark) !important;
  box-shadow: 0 0 6px rgba(36,157,161,.3);
  color: var(--ksb-text) !important; /* Basisschrift dunkel lassen */
}

/* explizit die Texte in dunkel halten */
#ksb-res .ksb-card-opt.selected .title,
#ksb-res .ksb-card-opt.selected .desc,
#ksb-res .ksb-card-opt.selected .price{
  color: var(--ksb-text) !important;
}

/* NUR "Details" in weiß */
#ksb-res .ksb-card-opt.selected .btn-details{
  color: #3a686c !important;
}
#ksb-res .ksb-card-opt.selected .btn-details .chev{
  color: currentColor !important;
}

/* Anmerkungen: Zeile über volle Formularbreite + Feld auf 100% */
#ksb-res-form > *:has(textarea) { 
  grid-column: 1 / -1 !important;
}
#ksb-res-form textarea {
  width: 100% !important;
  box-sizing: border-box; /* sichert, dass Padding nicht „übersteht“ */
}

/* Anmerkungen: Label nicht inline, sondern volle Zeile */
/* Nur das Label mit dem Anmerkungen-Textarea über volle Breite */
#ksb-res-form label:has(> textarea[name="notes"]) {
  display: block;
  width: 100%;
  grid-column: 1 / -1;
}

/* Textarea darin auf 100% Breite & Look angleichen */
#ksb-res-form label:has(> textarea[name="notes"]) > textarea {
  display: block;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  border: 1px solid #d7e4e5;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
}

/* Stil für die geöffnete Detailbox unter den Paketen */
.ksb-detailbox {
  color: #008b8b;                /* Text in Türkis */
  border: 2px solid #008b8b;     /* Türkise Kontur */
  background: #f8fbfb;           /* leicht hell hinterlegt, wie vorher */
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  transition: all 0.2s ease;
}

/* Optional: wenn du möchtest, dass Links oder Punkte noch stärker hervorgehoben werden */
.ksb-detailbox a,
.ksb-detailbox li {
  color: #008b8b;
}

/* Optional – kleine Animation beim Öffnen */
.ksb-detailbox.show {
  box-shadow: 0 4px 12px rgba(0, 139, 139, 0.15);
}

#ksb-package-details .ksb-detailbox-external{
  border:1px solid #d7e4e5;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

/* Header: heller Hintergrund, dunkle Schrift */
#ksb-package-details .ksb-detailbox-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: rgba(106, 168, 170, 0.66); /* leicht getöntes Türkis */
  color:#1f2937;                        /* dunkler Text */
  padding:10px 14px;
  border-top-left-radius: 10px;   /* linke obere Ecke */
  border-top-right-radius: 10px; 
  border-bottom-left-radius: 10px;   /* linke obere Ecke */
  border-bottom-right-radius: 10px; 
}

#ksb-package-details .ksb-detailbox-head strong{
  font-weight:700;
}

#ksb-package-details .ksb-detailbox-close{
  appearance:none;
  background:transparent;
  border:0;
  color:#1f2937;  /* dunkle Farbe */
  opacity:.7;
  cursor:pointer;
}

#ksb-package-details .ksb-detailbox-close:hover{
  opacity:1;
}

/* Body wie gehabt */
#ksb-package-details .ksb-detailbox-body{
  padding:14px 16px;
  background:#fff;
  color:#1f2937;
  font-size:16px;
  line-height:1.5;
}

#ksb-package-details .ksb-list{
  margin:0;
  padding-left:18px;
}

#ksb-package-details .ksb-list li{
  margin:6px 0;
}

#ksb-package-details .ksb-list li::marker{
  color: var(--ksb-teal, #7BB9BC);
}

/* Abstand zwischen "Anmerkungen" (Label) und dem Eingabefeld */
#ksb-res-form label[for="notes"] {
  display: block;
  margin-bottom: 12px;  /* Abstand Label → Feld */
}

/* Alternativ: Abstand zwischen dem ganzen Block und dem nächsten Element */
#ksb-res-form textarea[name="notes"] {
  margin-bottom: 24px;  /* Abstand Feld → darunter */
}

/* 1) Font-Face: Pfad anpassen falls nötig */
@font-face{
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-Regular.tff") format("woff2"),
       url("/wp-content/uploads/fonts/Poppins-Regular.tff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* TTF-Variante – reicht, aber ist etwas größer als WOFF2 */
@font-face{
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Regular - 400 */
@font-face {
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* SemiBold - 600 */
@font-face {
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold - 700 */
@font-face {
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Italic (optional) */
@font-face {
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bold Italic (optional) */
@font-face {
  font-family: "PoppinsCustom";
  src: url("/wp-content/uploads/fonts/Poppins-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Nur Formular + Kinder auf Poppins */
#ksb-res-form,
#ksb-res-form * {
  font-family: "PoppinsCustom", Arial, sans-serif !important;
  font-weight: 400; /* weil du nur Regular hast */
}

/* Form Controls explizit (manche Themes haben harte Regeln auf Inputs) */
#ksb-res-form input,
#ksb-res-form select,
#ksb-res-form textarea,
#ksb-res-form button {
  font-family: "PoppinsCustom", Arial, sans-serif !important;
}

/* Icons im Formular nicht überschreiben (falls dort welche sind) */
#ksb-res-form .dashicons,
#ksb-res-form .fa, #ksb-res-form .fas, #ksb-res-form .far, #ksb-res-form .fab,
#ksb-res-form .eicon,
#ksb-res-form .material-icons {
  font-family: inherit; /* oder die jeweilige Icon-Font explizit, wenn nötig */
}

/* Formular und Unterelemente */
#ksb-res-form,
#ksb-res-form * {
  font-family: "PoppinsCustom", Arial, sans-serif !important;
}

/* Beispiel für Gewichtsanwendung */
#ksb-res-form h1,
#ksb-res-form h2,
#ksb-res-form h3,
#ksb-res-form label[style*="font-weight: 700"],
#ksb-res-form strong,
#ksb-res-form .bold {
  font-weight: 700 !important;
}

#ksb-res-form label,
#ksb-res-form p,
#ksb-res-form span {
  font-weight: 400;
}

/* Eingabefelder explizit (Theme überschreibt oft Inputs separat) */
#ksb-res-form input,
#ksb-res-form select,
#ksb-res-form textarea,
#ksb-res-form button {
  font-family: "PoppinsCustom", Arial, sans-serif !important;
}

.ksb-privacy {
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.ksb-privacy label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.ksb-privacy input[type="checkbox"] {
  margin-top: 0.2rem;
}

/* Titel der Pakete */
#ksb-res-form .ksb-package-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

/* Abstand zwischen Kalender und Formular */
#ksb {
  margin-bottom: 40px;  /* hier kannst du z. B. 30–60px wählen */
}

/* Optional: Wenn das Formular direkt darunter sitzt */
#ksb + #ksb-res-form {
  margin-top: 0; /* stellt sicher, dass sich der Abstand nicht verdoppelt */
}

#ksb-res-form #ksb-total {
  font-weight: 800 !important;
  font-size: 20px !important;
  color: rgb(95, 186, 189) !important; /* optional für mehr Kontrast */
  margin-top: 16px;
}

/* Standardzustand – türkis ausgefüllt */
#ksb-res-form button[type="submit"],
#ksb-res-form input[type="submit"] {
  background: var(--ksb-teal) !important;
  color: #fff !important;
  border: 2px solid var(--ksb-teal) !important;
  border-radius: 8px !important;
  padding: 12px 20px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
}

/* Hover / Focus – dunklerer Türkiston */
#ksb-res-form button[type="submit"]:hover:not(:disabled),
#ksb-res-form input[type="submit"]:hover:not(:disabled),
#ksb-res-form button[type="submit"]:focus,
#ksb-res-form input[type="submit"]:focus {
  background: #5ba0a2 !important;        /* leicht dunkler */
  border-color: #5ba0a2 !important;
  color: #fff !important;
  outline: none;
}

/* Active (beim Klicken gedrückt halten) – noch dunkler */
#ksb-res-form button[type="submit"]:active,
#ksb-res-form input[type="submit"]:active {
  background: #4a8a8d !important;
  border-color: #4a8a8d !important;
}

/* --- Monatsname + Jahr im Kalendertitel größer/auffälliger --- */
#ksb #ksb-title,
#ksb .ksb-cal__title {
  font-size: clamp(22px, 2.6vw, 32px) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  color: var(--ksb-text);
  text-align: center;
}

/* etwas mehr Luft unter der Kopfzeile */
#ksb .ksb-head,
#ksb .ksb-cal__head{
  margin-bottom: 14px !important;
}

/* Pfeile dürfen ruhig einen Tick größer sein, damit der Titel „trägt“ */
#ksb #ksb-prev,
#ksb #ksb-next{
  width: 44px !important;
  height: 44px !important;
  font-size: 18px; /* falls du Icon-Fonts/‹› nutzt */
}

/* Einheitlicher Look der Kalender-Legende */
.ksb-legend {
  display: flex;
  justify-content: center;
  gap: 20px; /* Abstand zwischen den Elementen */
  margin-top: 20px;
  font-size: 14px;
}

.ksb-legend .leg {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ksb-legend .swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

/* Farben angleichen */
.swatch-free {
  background-color: var(--ksb-teal);
  border-color: var(--ksb-teal); /* Türkis */
}
.swatch-picked {
  background-color: #ffffff;
  border-color:var(--ksb-teal); /* dunkleres Türkis */
  border-radius: 3px;
}

.swatch-picked { border:1px solid var(--ksb-teal) !important; }

.swatch-booked {
  background-color:var(--ksb-busy);
  border-color: #b9c1cc;
  
   /* Grau */
}

/* Icon in der Verfügbarkeitsbox (#ksb-info) schön ausrichten */
#ksb-info .ksb-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#ksb-info .ksb-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.ksb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  vertical-align: middle;
}

.ksb-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.dashicons {
  color: #7BB9BC;
  font-size: 22px;
  vertical-align: middle;
  margin-right: 6px;
}