/* Kurs-Buchung – Frontend, Design im WSK-Look (schwarz / orange / weiß).
   Gescoped auf .kb-wrap (Karten) und .kb-modal-overlay (Anmelde-Dialog),
   damit nichts mit dem Theme kollidiert. */

/* Raleway selbst gehostet – wird nur geladen, wenn eine Kurs-Karte sie nutzt. */
@font-face{
  font-family:'KB Raleway';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('raleway.woff2') format('woff2');
}

.kb-wrap,
.kb-modal-overlay{
  --kb-bg:#0a0a0a;
  --kb-card:#161616;
  --kb-card-2:#1f1f1f;
  --kb-orange:#e87830;
  --kb-orange-soft:#f5a05c;
  --kb-orange-dim:#4a2a12;
  --kb-text:#ffffff;
  --kb-muted:#b9b9b9;
  --kb-green:#34c759;
  --kb-red:#ff453a;
  --kb-line:#2a2a2a;
  --kb-radius:14px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.kb-wrap *,
.kb-modal-overlay *{box-sizing:border-box;}

.kb-wrap{
  background:var(--kb-bg);
  color:var(--kb-text);
  padding:22px 18px;
  border-radius:var(--kb-radius);
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:780px;
  margin:0 auto;
}

/* ---- Karte ---- */
.kb-card{
  background:var(--kb-card);
  border:1px solid var(--kb-line);
  border-radius:var(--kb-radius);
  padding:20px 20px 18px;
}
.kb-card--full{opacity:.72;}
.kb-empty{text-align:center;color:var(--kb-muted);}
.kb-empty p{margin:0;}

.kb-card-head{display:flex;gap:16px;align-items:flex-start;}

/* Datums-Kachel */
.kb-date{
  flex:0 0 auto;min-width:64px;text-align:center;
  background:var(--kb-card-2);border:1px solid var(--kb-line);
  border-radius:12px;padding:8px 8px;line-height:1.1;
}
.kb-date-wday{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--kb-muted);}
.kb-date-day{display:block;font-size:1.8rem;font-weight:800;color:var(--kb-orange);white-space:nowrap;}
.kb-date-mon{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--kb-orange-soft);}

.kb-card-headtext{flex:1;min-width:0;}
.kb-title{
  font-family:"KB Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;letter-spacing:-.01em;
  font-size:1.4rem;margin:2px 0 8px;color:var(--kb-text);line-height:1.2;
}
.kb-meta{display:flex;flex-wrap:wrap;gap:6px 14px;}
.kb-meta-item{font-size:.9rem;color:var(--kb-muted);}

.kb-desc{
  margin:14px 0 0;color:var(--kb-muted);font-size:.95rem;
  border-top:1px dashed var(--kb-line);padding-top:14px;
}
.kb-desc p:first-child{margin-top:0;}
.kb-desc p:last-child{margin-bottom:0;}
.kb-desc a{color:var(--kb-orange);}

.kb-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:16px;
}
.kb-places{
  font-weight:700;font-size:.9rem;color:var(--kb-orange-soft);
  background:var(--kb-orange-dim);padding:5px 12px;border-radius:999px;
}
.kb-places--full{color:#fff;background:rgba(255,69,58,.2);}

/* ---- Buttons ---- */
.kb-btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--kb-orange);color:#1a1200;
  font-weight:700;font-size:1rem;
  padding:12px 22px;border-radius:11px;
  transition:transform .05s ease, filter .15s ease;
  font-family:inherit;line-height:1.2;
}
.kb-btn:hover{filter:brightness(1.08);}
.kb-btn:active{transform:translateY(1px);}
.kb-btn[disabled]{opacity:.5;cursor:not-allowed;filter:none;}

/* Formular-Vorlagen sind im DOM, aber unsichtbar (werden ins Modal geklont). */
.kb-form-store{display:none;}

/* ---- Modal / Overlay ---- */
.kb-modal-overlay{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow-y:auto;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  color:var(--kb-text);
  opacity:0;transition:opacity .18s ease;
}
.kb-modal-overlay.is-open{opacity:1;}
.kb-modal-overlay[hidden]{display:none;}
.kb-modal{
  position:relative;width:100%;max-width:560px;margin:auto;
  background:var(--kb-card);border:1px solid var(--kb-line);
  border-radius:var(--kb-radius);padding:26px 24px 24px;
  transform:translateY(8px) scale(.99);transition:transform .18s ease;
}
.kb-modal-overlay.is-open .kb-modal{transform:none;}
.kb-modal-close{
  position:absolute;top:12px;right:12px;
  width:36px;height:36px;border-radius:9px;border:0;cursor:pointer;
  background:var(--kb-card-2);color:var(--kb-muted);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.kb-modal-close:hover{color:#fff;background:#2c2c2c;}
.kb-modal-title{
  font-family:"KB Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em;
  margin:0 36px 4px 0;color:var(--kb-text);
}
.kb-modal-sub{font-size:.9rem;color:var(--kb-muted);margin:0 0 18px;}

/* ---- Formular ---- */
.kb-form{display:flex;flex-direction:column;gap:14px;}
.kb-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kb-field{display:flex;flex-direction:column;gap:6px;}
.kb-field--full{grid-column:1 / -1;}
.kb-field > span{font-weight:600;font-size:.9rem;color:var(--kb-text);}
.kb-field input{
  background:var(--kb-card-2);border:1.5px solid var(--kb-line);
  color:var(--kb-text);border-radius:10px;padding:11px 13px;
  font-size:1rem;font-family:inherit;width:100%;
}
.kb-field input:focus{outline:none;border-color:var(--kb-orange);}
.kb-field input::placeholder{color:#777;}
.kb-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.6);}

.kb-check{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.9rem;color:var(--kb-muted);cursor:pointer;
}
.kb-check input{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;
  accent-color:var(--kb-orange);cursor:pointer;
}
.kb-check a{color:var(--kb-orange);text-decoration:underline;}

/* Honeypot verstecken */
.kb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.kb-form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px;}
.kb-required-hint{margin:0;color:var(--kb-muted);font-size:.8rem;}

.kb-submit{width:100%;}
.kb-submit.is-loading{position:relative;color:transparent;}
.kb-submit.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:18px;height:18px;border:2.5px solid rgba(26,18,0,.35);
  border-top-color:#1a1200;border-radius:50%;animation:kb-spin .7s linear infinite;
}
@keyframes kb-spin{to{transform:rotate(360deg);}}

/* ---- Meldungen ---- */
.kb-message{font-size:.95rem;border-radius:10px;padding:0;}
.kb-message.is-error{
  background:rgba(255,69,58,.14);border:1px solid var(--kb-red);
  color:#ffb3ad;padding:12px 14px;
}

/* Erfolgsbox, die das Formular ersetzt */
.kb-done{text-align:center;padding:14px 8px 6px;}
.kb-done .kb-done-ico{
  width:56px;height:56px;border-radius:50%;
  background:var(--kb-green);color:#06270f;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;margin:0 auto 14px;
}
.kb-done h4{margin:0 0 8px;font-size:1.2rem;color:var(--kb-text);}
.kb-done p{margin:0;color:var(--kb-muted);}

/* Body-Scroll sperren, wenn Modal offen */
body.kb-modal-open{overflow:hidden;}

/* ---- Mobil ---- */
@media (max-width:560px){
  .kb-grid{grid-template-columns:1fr;}
  .kb-card-foot{flex-direction:column;align-items:stretch;}
  .kb-card-foot .kb-btn{width:100%;text-align:center;}
  .kb-modal{padding:22px 16px 18px;}
}