/* Kursplan (30.09.2026) — hims/hers-Designsprache wie /preise: eine Glasplatte ueber der
   verschwommenen Seite, leichte zweifarbige Titel, runde Tages-Chips, Kurs-Zeilen mit weissem
   „Buchen"-Knopf. Ersetzt index-courseplan.css + courseplan-v3.css (vier Schichten v1/v2/D/v3).
   Markup: includes/kursplan.blade.php + create_course_home_schedule_html().

   app.css traegt noch alte #courseplan-Regeln (teils !important, z. B. width/right/padding im
   Mobil-Breakpoint). Deshalb hier bewusst #courseplan.kp bzw. body.planActive #courseplan.kp
   mit !important an genau diesen Stellen. */

#courseplan.kp {
  --t: #f4f1ea;
  --t2: rgba(244, 241, 234, .74);
  --t3: rgba(244, 241, 234, .5);
  --cream: #e9dcc3;
  --on-cream: #2e281e;
  --ink: #1b211c;
  --hair: rgba(255, 255, 255, .16);
  --blur: blur(28px) saturate(150%);
  position: fixed !important;
  inset: 0;
  top: 0 !important;
  right: 0 !important;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0;
  transform: none !important;
  z-index: 1200;
  display: flex;
  justify-content: center;
  overflow: hidden !important;
  background: rgba(8, 11, 9, .5);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  color: var(--t);
  font-family: 'Jost', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
body.planActive #courseplan.kp, #courseplan.kp.courseplan_show {
  right: 0 !important;
  transform: none !important;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .3s ease;
}
#courseplan.kp::before, #courseplan.kp::after { content: none; }
#courseplan.kp *, #courseplan.kp *::before, #courseplan.kp *::after { box-sizing: border-box; }
#courseplan.kp h1, #courseplan.kp h2, #courseplan.kp p { margin: 0; font-family: inherit; text-transform: none; }
#courseplan.kp :focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

/* Die Platte: am Handy der ganze Bildschirm, am Desktop eine schwebende Glasplatte. */
#courseplan.kp .kp-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .03));
  transform: translateY(18px);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
body.planActive #courseplan.kp .kp-sheet, #courseplan.kp.courseplan_show .kp-sheet { transform: none; }

/* ---------- Kopf ---------- */
#courseplan.kp .kp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14.5px; padding: calc(20px + env(safe-area-inset-top, 0px)) 18.5px 7.5px; }
#courseplan.kp .kp-titel { font-size: 31.5px; font-weight: 300; line-height: 1.06; letter-spacing: -.025em; color: var(--t); }
#courseplan.kp .kp-titel span { color: rgba(244, 241, 234, .52); }
#courseplan.kp .kp-close {
  position: static !important;
  flex: 0 0 auto;
  width: 42.5px !important;
  height: 42.5px !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  background: rgba(255, 255, 255, .06) !important;
  color: var(--t) !important;
  cursor: pointer;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: background-color .2s ease;
}
#courseplan.kp .kp-close:hover { background: rgba(255, 255, 255, .14) !important; }
#courseplan.kp .kp-close svg { width: 16.5px; height: 16.5px; }
#courseplan.kp .kp-hint { padding: 0 18.5px; font-size: 12px; line-height: 1.5; color: var(--t3); }
#courseplan.kp .kp-hint b { font-weight: 500; color: var(--t2); }

/* ---------- Tages-Chips ---------- */
#courseplan.kp .kp-days ul {
  display: flex;
  gap: 7.5px;
  margin: 0;
  padding: 14.5px 18.5px 13px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
#courseplan.kp .kp-days ul::-webkit-scrollbar { display: none; }
#courseplan.kp .kp-days a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 51.5px;
  height: 59px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .05);
  color: var(--t);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
#courseplan.kp .kp-days .d { font-size: 10px; font-weight: 400; color: var(--t3); line-height: 1; }
#courseplan.kp .kp-days .n { font-size: 17.5px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
#courseplan.kp .kp-days a.is-active { background: var(--t); border-color: var(--t); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
#courseplan.kp .kp-days a.is-active .d { color: rgba(27, 33, 28, .6); }
#courseplan.kp .kp-days a.is-empty { opacity: .3; pointer-events: none; }

/* ---------- Liste ---------- */
#courseplan.kp .kp-list {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 13px;
}
#courseplan.kp .kp-list::-webkit-scrollbar { display: none; }
#courseplan.kp .schedule-bottom-space { height: 110.5px; }
#courseplan.kp .kp-day-t { margin: 24px 5.5px 13px; font-size: 26px; font-weight: 300; line-height: 1.1; letter-spacing: -.02em; color: var(--t); }
#courseplan.kp .kp-day-t span { font-size: 13px; letter-spacing: 0; color: var(--t3); }
#courseplan.kp .kp-empty { margin: 37px 5.5px; font-size: 14px; line-height: 1.6; color: var(--t2); }

/* ---------- Kurs-Zeile ---------- */
#courseplan.kp .class-item {
  position: relative;
  margin: 0 0 11px;
  border-radius: 26px;
  border: 1px solid var(--hair);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: border-color .25s ease, background-color .25s ease;
}
#courseplan.kp .class-header { display: flex; align-items: center; gap: 11px; padding: 13px 11px 13px 16.5px; }
#courseplan.kp .class-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#courseplan.kp .time { display: flex; flex-direction: column; flex: 0 0 auto; font-size: 24px; font-weight: 300; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--t); }
#courseplan.kp .time small { margin-top: 4.5px; font-size: 10px; letter-spacing: 0; color: var(--t3); }
#courseplan.kp .cp-mid { display: flex; flex-direction: column; gap: 6.5px; min-width: 0; }
#courseplan.kp .title-wrapper { display: flex; align-items: center; gap: 5.5px; min-width: 0; }
#courseplan.kp .class-name { font-size: 15.5px; font-weight: 400; letter-spacing: -.01em; line-height: 1.2; color: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#courseplan.kp .chevron { width: 14.5px; height: 14.5px; flex: 0 0 auto; color: var(--t3); transition: transform .3s ease; }
#courseplan.kp .class-item.expanded .chevron { transform: rotate(180deg); }
#courseplan.kp .class-sub { display: flex; flex-wrap: wrap; gap: 4.5px; }
#courseplan.kp .kp-chip { display: inline-flex; align-items: center; padding: 2px 8.5px; border-radius: 999px; font-size: 10px; font-weight: 400; line-height: 1.5; white-space: nowrap; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: var(--t2); }
#courseplan.kp .kp-chip.is-hot { color: var(--cream); border-color: rgba(233, 220, 195, .4); }
#courseplan.kp .kp-chip.is-cream { background: var(--cream); border-color: var(--cream); color: var(--on-cream); font-weight: 500; }

/* Gebucht: kommt allein aus .btn-cancel, damit es auch nach einer Buchung ohne Neuladen stimmt. */
#courseplan.kp .class-item:has(.btn-cancel) { border: 1.5px solid rgba(233, 220, 195, .75); background: rgba(233, 220, 195, .08); }
#courseplan.kp .class-item:has(.btn-cancel)::before {
  content: "Gebucht";
  position: absolute;
  top: -9px;
  left: 16.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--on-cream);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
}
#courseplan.kp .class-item.is-off { opacity: .55; }

/* ---------- Knoepfe ---------- */
#courseplan.kp .btn_reserve {
  /* app.css setzt .btn_reserve global mit !important (absolut, beige, 55px hoch, Spalte). */
  position: static !important;
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-height: 42.5px;
  margin: 0;
  padding: 0 16.5px !important;
  right: auto !important;
  top: auto !important;
  border-radius: 999px;
  border: 1px solid transparent !important;
  box-shadow: none;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 500;
  line-height: 1.15 !important;
  letter-spacing: 0;
  text-transform: none;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: center;
  gap: 5.5px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
#courseplan.kp .btn_reserve:active { transform: scale(.97); }
#courseplan.kp .btn-book { background: var(--t) !important; color: var(--ink) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
#courseplan.kp .btn-book::after { content: ""; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231b211c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#courseplan.kp .btn-book:hover { background: #fff !important; }
#courseplan.kp .btn-cancel { background: transparent !important; border-color: rgba(255, 255, 255, .34) !important; color: var(--t2) !important; }
#courseplan.kp .btn-cancel:hover { background: rgba(255, 255, 255, .08) !important; color: var(--t) !important; }
#courseplan.kp .btn-waitlist { max-width: 128px; padding: 0 13px !important; background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .22) !important; color: var(--t) !important; font-size: 12px !important; text-align: center; white-space: normal; }
#courseplan.kp .btn-abgesagt { background: transparent !important; border: 1px dashed rgba(255, 255, 255, .22) !important; color: var(--t3) !important; cursor: not-allowed; }
#courseplan.kp .btn-subtext { display: none; }

/* ---------- Details (aufgeklappt) ---------- */
#courseplan.kp .class-details { display: none; padding: 0 16.5px 16.5px; }
#courseplan.kp .class-item.expanded .class-details { display: block; }
#courseplan.kp .class-desc { margin: 0 0 13px; font-size: 13px; line-height: 1.6; color: var(--t2); }
#courseplan.kp .class-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 7.5px; }
#courseplan.kp .cbadge { display: flex; flex-direction: column; gap: 3.5px; padding: 9px 13px; border-radius: 16.5px; background: rgba(0, 0, 0, .16); border: 1px solid rgba(255, 255, 255, .1); }
#courseplan.kp .cb-k { font-size: 10px; color: var(--t3); }
#courseplan.kp .cb-v { font-size: 14px; font-weight: 400; color: var(--t); }
#courseplan.kp .cb-dots { display: inline-flex; gap: 3.5px; }
#courseplan.kp .cb-dots i { width: 6.5px; height: 6.5px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
#courseplan.kp .cb-dots i.on { background: var(--t); }
#courseplan.kp .btn_waitlist { margin-top: 13px; width: 100%; min-height: 42.5px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: var(--t); font-family: inherit; font-size: 13px; font-weight: 400; }

/* Sehr schmale Telefone: Buchen-Knopf und Zeit duerfen den Namen nicht verdraengen. */
@media (max-width: 360px) {
  #courseplan.kp .class-header { gap: 7.5px; padding-left: 13px; }
  #courseplan.kp .class-info { gap: 9px; }
  #courseplan.kp .time { font-size: 20px; }
  #courseplan.kp .btn_reserve { padding: 0 13px !important; }
  #courseplan.kp .btn-book::after { display: none; }
}

/* Desktop/Tablet: schwebende Glasplatte statt Vollbild. */
@media (min-width: 768px) {
  #courseplan.kp { align-items: center; }
  #courseplan.kp .kp-sheet {
    height: min(88vh, 900px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 40px 90px -30px rgba(0, 0, 0, .7);
    overflow: hidden;
  }
  #courseplan.kp .kp-head { padding-top: 27.5px; padding-left: 26px; padding-right: 22px; }
  #courseplan.kp .kp-hint { padding: 0 26px; }
  #courseplan.kp .kp-days ul { padding-left: 26px; padding-right: 26px; }
  #courseplan.kp .kp-list { padding: 0 18.5px; }
  #courseplan.kp .schedule-bottom-space { height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  #courseplan.kp, #courseplan.kp * { transition: none !important; }
}

/* ---------- Buchungs-Hinweis (#courseplan_modal) im Glas-Look ----------
   Liegt ausserhalb von #courseplan; z-index ueber dem Kursplan (1200) wie bisher. */
#courseplan_modal.modal { z-index: 13050 !important; }
body.planActive .modal-backdrop.show { z-index: 13040 !important; opacity: 1; background: rgba(8, 10, 9, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#courseplan_modal .modal-dialog { color: #f4f1ea !important; max-width: 420px; margin: 16px auto; padding: 0 12px; }
#courseplan_modal .modal-content {
  font-family: 'Jost', 'Avenir Next', 'Segoe UI', Helvetica, Arial, sans-serif;
  color: #f4f1ea;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(20, 24, 21, .78);
  -webkit-backdrop-filter: blur(34px) saturate(180%);
  backdrop-filter: blur(34px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 30px 80px -20px rgba(0, 0, 0, .75);
}
#courseplan_modal .modal-header, #courseplan_modal .modal-footer { border: 0; padding: 22px 22px 8px; }
#courseplan_modal .modal-footer { padding: 4px 22px 22px; }
#courseplan_modal .modal-title { font-family: inherit !important; text-transform: none !important; font-size: 22px; font-weight: 400; color: #f4f1ea !important; }
#courseplan_modal .modal-body { padding: 4px 22px 12px; font-size: 14.5px; line-height: 1.6; color: rgba(244, 241, 234, .78); }
#courseplan_modal .modal-body strong { color: #f4f1ea; font-weight: 500; }
#courseplan_modal .close { display: grid; place-items: center; width: 36px; height: 36px; margin: 0 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: #f4f1ea; opacity: 1; text-shadow: none; }
#courseplan_modal .btn-secondary { width: 100%; min-height: 48px; border: 0 !important; border-radius: 999px; background: #f4f1ea !important; color: #1b211c !important; font-family: inherit; font-size: 15px; font-weight: 500; }