/* ══════════════════════════════════════════════════════
   KURSBUCHUNG SAAS — Components
   Buttons, forms, cards, calendar, slots, modals, admin
   ══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   EYEBROW WITH DASH (orestis-brand signature)
   ══════════════════════════════════════════════════════ */

.kb-eyebrow-row {
  display: flex; align-items: center; gap: .65rem;
}
.kb-eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
}
.kb-eyebrow-dash {
  width: 24px; height: 1px; background: var(--amber); flex-shrink: 0;
}
.kb-eyebrow-text {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .3em; text-transform: uppercase; color: var(--amber);
}

/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */

.kb-btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.9rem;
  background: var(--ink); border: none; border-radius: var(--r);
  color: var(--bg);
  font-family: var(--font-sans); font-size: .9rem; font-weight: 400;
  letter-spacing: .02em;
  cursor: pointer; user-select: none;
  transition: background var(--t-base), transform var(--t-fast);
  will-change: transform;
}
.kb-btn-primary:hover  { background: var(--amber); }
.kb-btn-primary:active { transform: translateY(1px); }
.kb-btn-primary:disabled { opacity: .35; pointer-events: none; }

.kb-btn-ghost {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem;
  background: transparent;
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--muted);
  font-family: var(--font-sans); font-size: .88rem;
  cursor: pointer;
  transition: border-color var(--t-base), color var(--t-base);
}
.kb-btn-ghost:hover { border-color: var(--amber); color: var(--ink); }

.kb-btn-danger {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.3rem;
  background: transparent;
  border: 1px solid rgba(192,64,64,.3); border-radius: var(--r);
  color: var(--error);
  font-family: var(--font-sans); font-size: .85rem;
  cursor: pointer;
  transition: all var(--t-base);
}
.kb-btn-danger:hover { background: rgba(192,64,64,.06); border-color: var(--error); }

.kb-btn-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--muted); cursor: pointer;
  transition: all var(--t-base);
}
.kb-btn-icon:hover { border-color: var(--amber); color: var(--amber); }

.kb-btn-row { display: flex; gap: .65rem; align-items: center; margin-top: auto; padding-top: 2rem; flex-wrap: wrap; }

.kb-btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 1.4rem;
  background: transparent;
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--muted);
  font-family: var(--font-sans); font-size: .88rem;
  cursor: pointer;
  transition: border-color var(--t-base), color var(--t-base);
}
.kb-btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

/* ══════════════════════════════════════════════════════
   FORM FIELDS
   ══════════════════════════════════════════════════════ */

.kb-field { display: flex; flex-direction: column; gap: .35rem; }

.kb-field label {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .08em;
  color: var(--ink);
  line-height: 1.3;
}
/* inline hint inside a field label must not grow the label height,
   or it pushes the input down and breaks grid row alignment (e.g. BIC vs IBAN) */
.kb-field label .kb-sub {
  font-size: .9em;
  line-height: 1;
  letter-spacing: inherit;
}

.kb-field input,
.kb-field select,
.kb-field textarea,
.kb-select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font-sans); font-size: .9rem;
  outline: none;
  transition: border-color var(--t-base);
  appearance: none;
  box-sizing: border-box;
}
.kb-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999990' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
  /* Clean truncation instead of clipping mid-character behind the chevron */
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.kb-field textarea { min-height: 100px; resize: vertical; line-height: 1.6; }
.kb-field input:focus,
.kb-field select:focus,
.kb-field textarea:focus,
.kb-select:focus { border-color: var(--amber); }
.kb-field input::placeholder { color: var(--muted); opacity: .5; }

.kb-form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.25rem; }
.kb-form-grid-1 { display: grid; grid-template-columns: 1fr;     gap: .8rem; margin-bottom: 1.25rem; }

/* Password input */
.kb-pw-field {
  display: flex;
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--t-base);
}
.kb-pw-field:focus-within { border-color: var(--amber); }
.kb-pw-field input {
  flex: 1; padding: .9rem 1.1rem;
  background: transparent; border: none;
  color: var(--ink);
  font-family: var(--font-mono); font-size: .95rem;
  letter-spacing: .1em; outline: none;
}
.kb-pw-field input::placeholder { color: var(--muted); opacity: .45; letter-spacing: .05em; }
.kb-pw-submit {
  width: 44px;
  background: var(--ink); border: none;
  color: var(--bg); font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: background var(--t-base);
}
.kb-pw-submit:hover { background: var(--amber); }

/* ══════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════ */

@keyframes kb-form-flash {
  0%   { border-color: var(--border); }
  30%  { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(200,137,26,.12); }
  100% { border-color: var(--border); box-shadow: none; }
}
.kb-form-highlight {
  animation: kb-form-flash 1.2s ease forwards;
}

.kb-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.kb-confirm-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 1.75rem;
  box-shadow: var(--shadow-sm);
}
.kb-confirm-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-mid);
}
.kb-confirm-row:last-child { border-bottom: none; }
.kb-confirm-key {
  font-family: var(--font-mono); font-size: .63rem;
  letter-spacing: .1em; color: var(--muted); text-transform: uppercase;
}
.kb-confirm-val { font-size: .88rem; color: var(--ink); font-weight: 500; text-align: right; }

/* ══════════════════════════════════════════════════════
   COURSE CARDS
   ══════════════════════════════════════════════════════ */

.kb-course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; }

.kb-course-card {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  transition: all var(--t-base);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.kb-course-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(200,137,26,.05) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.kb-course-card:hover { border-color: rgba(200,137,26,.45); transform: translateY(-2px); }
.kb-course-card:hover::before { opacity: 1; }
.kb-course-card.selected { border-color: var(--amber); background: rgba(200,137,26,.03); }
.kb-course-card.selected::before { opacity: 1; }

.kb-cc-icon {
  width: 42px; height: 42px;
  border-radius: var(--r);
  background: var(--bg-light); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 1rem;
}
.kb-cc-name  { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.kb-cc-sub   { font-size: .76rem; color: var(--muted); line-height: 1.55; }
.kb-cc-badge {
  position: absolute; top: .8rem; right: .8rem;
  width: 20px; height: 20px;
  background: var(--amber); border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  font-size: .62rem; color: #fff; font-weight: 700;
}
.kb-course-card.selected .kb-cc-badge { display: flex; }

/* ══════════════════════════════════════════════════════
   DURATION PILLS
   ══════════════════════════════════════════════════════ */

.kb-dur-row  { display: flex; gap: .45rem; flex-wrap: wrap; }
.kb-dur-pill {
  padding: .5rem 1.3rem;
  background: var(--card);
  border: 1.5px solid var(--border); border-radius: 99px;
  color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: .83rem; font-weight: 500;
  transition: all var(--t-base);
}
.kb-dur-pill:hover   { border-color: rgba(200,137,26,.5); color: var(--text); }
.kb-dur-pill.selected{ background: var(--amber); border-color: var(--amber); color: #fff; }

/* ══════════════════════════════════════════════════════
   TIMEZONE TOGGLE
   ══════════════════════════════════════════════════════ */

.kb-tz-toggle {
  display: inline-flex;
  border: 1px solid var(--border); border-radius: 50px;
  padding: 3px; gap: 0;
}
.kb-tz-btn {
  padding: .28rem .9rem; border-radius: 50px; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: .63rem; font-weight: 500;
  letter-spacing: .05em; transition: all var(--t-base);
  line-height: 1.5; white-space: nowrap;
}
.kb-tz-btn.active  { background: var(--amber); color: #fff; }
.kb-tz-btn:hover:not(.active) { color: var(--text); }
.kb-tz-sub { font-size: .5rem; opacity: .7; display: block; }

/* ══════════════════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════════════════ */

.kb-cal-wrap  { max-width: 400px; }
.kb-cal-nav   { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.kb-cal-title { font-family:var(--font-mono); font-size:.95rem; color:var(--ink); font-weight:400; letter-spacing:-.01em; cursor:pointer; }
.kb-cal-title:hover { color: var(--amber); }

.kb-cal-arrow {
  width:32px; height:32px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r);
  color:var(--muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; transition:all var(--t-base);
}
.kb-cal-arrow:hover    { border-color:var(--amber); color:var(--amber); }
.kb-cal-arrow:disabled { opacity:.25; pointer-events:none; }

.kb-cal-wds { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:3px; }
.kb-cal-wd  { text-align:center; font-family:var(--font-mono); font-size:.58rem; color:var(--muted); padding:.3rem 0; }

.kb-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.kb-cal-day  {
  aspect-ratio:1;
  background:var(--card); border:1px solid rgba(14,14,14,.07); border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .18s;
  font-family:var(--font-mono); font-size:.8rem; color:var(--text);
  min-height:38px; user-select:none; position:relative;
}
.kb-cal-day:hover:not(.empty):not(.past):not(.weekend) {
  border-color:rgba(200,137,26,.5); background:var(--bg-light); color:var(--ink);
}
.kb-cal-day.empty   { background:transparent; border-color:transparent; cursor:default; }
.kb-cal-day.past    { opacity:.2; cursor:not-allowed; }
.kb-cal-day.weekend { opacity:.25; cursor:not-allowed; color:var(--muted); }
.kb-cal-day.today   { border-color:rgba(200,137,26,.45); color:var(--amber); }
.kb-cal-day.blocked { border-color:rgba(192,64,64,.2); color:var(--muted); }
.kb-cal-day.selected{
  background:var(--amber)!important; border-color:var(--amber)!important;
  color:#fff!important; font-weight:700;
}

/* Calendar dots */
.kb-cal-dots { position:absolute; bottom:3px; left:0; right:0; display:flex; gap:2px; align-items:center; justify-content:center; pointer-events:none; }
.kb-cal-dot  { width:3px; height:3px; border-radius:50%; background:var(--amber); opacity:.7; flex-shrink:0; }
.kb-cal-day.selected .kb-cal-dot { background:#fff; opacity:1; }
.kb-cal-day.past .kb-cal-dot,
.kb-cal-day.weekend .kb-cal-dot  { opacity:.2; }

/* Date + Slots side-by-side */
.kb-date-time-layout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: start;
}
.kb-slots-col { min-width: 0; }

/* ══════════════════════════════════════════════════════
   TIME SLOTS
   ══════════════════════════════════════════════════════ */

.kb-slot-group        { margin-bottom: 1.25rem; }
.kb-slot-group-label  { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-bottom:.5rem; }
.kb-slot-grid         { display:flex; flex-wrap:wrap; gap:.4rem; }

.kb-slot-btn {
  padding: .55rem 1rem;
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--r);
  color: var(--text); cursor: pointer;
  font-family: var(--font-mono); font-size: .83rem;
  transition: all .18s;
}
.kb-slot-btn:hover    { border-color:rgba(200,137,26,.5); background:var(--bg-light); }
.kb-slot-btn.selected { background:var(--amber); border-color:var(--amber); color:#fff; font-weight:600; }
.kb-slot-btn.booked   {
  background:rgba(200,137,26,.05); border-style:dashed; border-color:rgba(200,137,26,.3);
  color:var(--muted); cursor:default; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; gap:.08rem;
}
.kb-slot-btn.tentative {
  background:rgba(80,80,80,.08); border-style:dashed; border-color:rgba(120,120,120,.4);
  color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:.08rem;
}
.kb-slot-btn.tentative:hover { border-color:rgba(200,137,26,.5); background:rgba(80,80,80,.13); }
.kb-slot-btn.tentative.selected { background:var(--amber); border-color:var(--amber); color:#fff; border-style:dashed; }
.kb-slot-btn.affected { background:rgba(80,80,80,.05); border-color:rgba(120,120,120,.28); border-style:dashed; }
.kb-slot-btn.affected:hover { background:rgba(80,80,80,.1); }
.kb-slot-btn.affected.selected { background:var(--amber); border-color:var(--amber); color:#fff; }
/* Pending-payment (unbezahlt) tentative slot — distinct warm colour + ⏳ */
.kb-slot-btn.tentative.pending {
  background:rgba(192,134,58,.12); border-style:dashed; border-color:rgba(192,134,58,.6);
}
.kb-slot-btn.tentative.pending:hover { border-color:rgba(192,134,58,.85); background:rgba(192,134,58,.18); }
.kb-slot-btn.tentative.pending.selected { background:#c0863a; border-color:#c0863a; color:#fff; }
.kb-slot-name.pending { color:#c0863a; opacity:1; font-weight:600; }

.kb-slot-name  { font-size:.56rem; color:var(--amber); opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:86px; }
.kb-slot-empty { color:var(--muted); font-size:.83rem; padding:1.25rem; text-align:center; background:var(--card); border:1px dashed var(--border); border-radius:var(--r); line-height:1.7; }

/* ── Timeline slot view ───────────────────────────────── */
.kb-timeline { display:flex; flex-direction:column; gap:2px; }

.kb-tl-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.52rem .85rem; border-radius:var(--r);
  border:1.5px solid transparent; background:none;
  width:100%; text-align:left; cursor:default;
  transition:background .14s,border-color .14s;
  font-family:var(--font-sans);
}
.kb-tl-time {
  font-family:var(--font-mono); font-size:.85rem;
  font-weight:500; color:var(--ink);
  min-width:3.4rem; flex-shrink:0;
}
.kb-tl-sep  { flex:1; height:1px; background:var(--border); opacity:.5; }
.kb-tl-status { font-size:.72rem; color:var(--muted); font-family:var(--font-mono); white-space:nowrap; }

.kb-tl-row--avail { cursor:pointer; border-color:var(--border); background:var(--card); }
.kb-tl-row--avail:hover { border-color:rgba(200,137,26,.45); background:rgba(200,137,26,.04); }
.kb-tl-row--avail:hover .kb-tl-time { color:var(--amber); }

.kb-tl-row--sel { background:var(--amber) !important; border-color:var(--amber) !important; }
.kb-tl-row--sel .kb-tl-time   { color:#fff !important; }
.kb-tl-row--sel .kb-tl-status { color:rgba(255,255,255,.85) !important; }
.kb-tl-row--sel .kb-tl-sep    { background:rgba(255,255,255,.4) !important; opacity:1 !important; }

.kb-tl-row--booked {
  border-left:2.5px solid rgba(200,137,26,.35);
  border-radius:0 var(--r) var(--r) 0;
  background:rgba(200,137,26,.035);
  padding-left:calc(.85rem - 1px);
}
.kb-tl-row--booked .kb-tl-time   { color:var(--muted); }
.kb-tl-row--booked .kb-tl-status {
  color:var(--amber); opacity:.75; font-size:.68rem;
  max-width:130px; overflow:hidden; text-overflow:ellipsis;
}

.kb-tl-row--tent { cursor:pointer; border:1.5px dashed rgba(120,120,120,.4); background:var(--card); }
.kb-tl-row--tent:hover { border-color:rgba(200,137,26,.45); background:rgba(200,137,26,.04); }
.kb-tl-row--tent:hover .kb-tl-time { color:var(--amber); }

/* ══════════════════════════════════════════════════════
   HOME OVERLAY — Student Grid
   ══════════════════════════════════════════════════════ */

/* ── Phase layout: header pinned, only grid scrolls ── */
.kb-home-phase-header {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 1.6rem 2rem 1.4rem;
  width: 100%;
}

.kb-home-grid-scroll {
  flex: 0 1 auto;
  max-height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  justify-content: center;
  /* Generous top/bottom padding so the selected-card glow (~38px bloom) has room
     to fade out BEFORE the overflow clip edge — otherwise it's chopped flat. */
  padding: 34px 2rem 34px;
  min-height: 0; /* required for flex child overflow */
}
.kb-home-grid-scroll::-webkit-scrollbar { display: none; }
/* Smooth top fade — appears once the grid is scrolled (content hidden above).
   Mirrors the bottom gradient fade, no scroll-hint arrow. */
.kb-home-grid-scroll.fade-top {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 52px, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 52px, #000 100%);
}

.kb-home-phase-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 2rem 1.2rem;
  display: flex;
  justify-content: center;
}

/* ── Discreet student search — top-right, collapsible magnifier ── */
.kb-home-search {
  position: absolute;
  top: 1.05rem;
  right: 1.3rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .3rem;
  opacity: .5;
  transition: opacity .2s;
}
.kb-home-search:hover,
.kb-home-search.is-open { opacity: 1; }
.kb-home-search-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.kb-home-search-toggle:hover { color: var(--amber); border-color: var(--border); }
.kb-home-search.is-open .kb-home-search-toggle { color: var(--amber); }
.kb-home-search-input {
  width: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--ink);
  letter-spacing: .02em;
  outline: none;
  opacity: 0;
  pointer-events: none;
  transition: width .25s ease, opacity .2s ease, border-color .18s, padding .25s ease;
}
.kb-home-search.is-open .kb-home-search-input {
  width: 168px;
  padding: .28rem .15rem;
  opacity: 1;
  pointer-events: auto;
  border-bottom-color: var(--border);
}
.kb-home-search.is-open .kb-home-search-input:focus { border-bottom-color: rgba(200,137,26,.55); }
.kb-home-search-input::placeholder { color: var(--muted); }
.kb-home-search-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: .1rem .25rem;
  transition: color .15s;
}
.kb-home-search-clear:hover { color: var(--amber); }
.kb-home-search-count {
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--muted);
  white-space: nowrap;
}
.kb-home-search:not(.is-open) .kb-home-search-count { display: none; }

/* Gradient fade overlay — full "peek" pattern: covers the partial last row */
.kb-home-gradient-fade {
  position: absolute;
  bottom: 56px; left: 0; right: 0;   /* clear the Kalender footer (~56px) */
  height: 190px;                       /* tall enough to swallow an entire row */
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(252,250,245,.18) 25%,
    rgba(252,250,245,.72) 55%,
    var(--bg) 78%,
    var(--bg) 100%
  );
  pointer-events: none;
  z-index: 5;
  transition: opacity .35s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .6rem;
}
.kb-home-gradient-fade.hidden { opacity: 0; pointer-events: none; }

/* Scroll chevron pill — wide, subtle, clickable */
.kb-home-scroll-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 24px;
  background: rgba(200,137,26,.06);
  border: 1px solid rgba(200,137,26,.16);
  border-radius: 99px;
  color: rgba(200,137,26,.55);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  animation: kbHintBob 2.6s ease-in-out infinite;
  transition: background .2s, border-color .2s, color .2s;
}
.kb-home-scroll-hint:hover {
  background: rgba(200,137,26,.12);
  border-color: rgba(200,137,26,.32);
  color: var(--amber);
}
.kb-home-scroll-hint svg { display: block; }
@keyframes kbHintBob {
  0%, 100% { transform: translateY(0);   opacity: .82; }
  50%       { transform: translateY(4px); opacity: 1;   }
}


.kb-home-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  justify-content: center;
  align-content: flex-start;
  max-width: 630px;
  padding: .25rem;
  /* Auto margins center the grid vertically while it fits the scroll area,
     and collapse to top-align (keeping the top scrollable) once it overflows. */
  margin: auto;
}

.kb-student-card {
  display: flex; flex-direction: column; align-items: center;
  padding: .85rem .65rem .7rem;
  border: 1.5px solid var(--border); border-radius: 18px;
  cursor: pointer; width: clamp(118px, 13vw, 138px); flex-shrink: 0;
  position: relative; overflow: hidden;
  transition: border-color .25s, background .25s, transform .22s, box-shadow .25s;
  background: var(--bg); box-shadow: 0 2px 10px rgba(14,14,14,.05);
}
.kb-student-card:hover {
  border-color: color-mix(in srgb, var(--amber) 38%, transparent);
  background: var(--amber-dim);
  transform: translateY(-5px);
  /* Graduated multi-layer glow: blooms a little OUTSIDE the card and dissolves
     smoothly (no hard ring). Decreasing alpha over increasing blur = soft falloff. */
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--amber) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--amber) 20%, transparent),
    0 0 38px color-mix(in srgb, var(--amber) 11%, transparent);
}
.kb-student-card:active { transform: translateY(-2px); }
.kb-student-card--active {
  border-color: color-mix(in srgb, var(--amber) 38%, transparent) !important;
  background: var(--amber-dim) !important;
  transform: translateY(-5px);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--amber) 24%, transparent),
    0 0 18px color-mix(in srgb, var(--amber) 20%, transparent),
    0 0 38px color-mix(in srgb, var(--amber) 11%, transparent) !important;
}

.kb-student-fig {
  width: clamp(72px, 8.5vw, 90px);
  aspect-ratio: 3 / 4; height: auto;
  object-fit: contain; margin-bottom: .45rem;
  /* Soften the hard black PNG strokes against the warm bg — full strength on hover/active */
  opacity: .9;
  transition: filter .25s, opacity .25s;
}
.kb-student-card:hover .kb-student-fig,
.kb-student-card--active .kb-student-fig,
.kb-student-card--soon .kb-student-fig,
.kb-student-card--imminent .kb-student-fig {
  opacity: 1;
  /* Tint toward the actual brand colour (computed in JS from accent_color). Amber fallback. */
  filter: var(--fig-filter, invert(52%) sepia(60%) saturate(600%) hue-rotate(5deg) brightness(90%));
}

.kb-student-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset;
}
.kb-student-name {
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--text); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  line-height: 1.3; word-break: break-word;
  max-width: 112px;
  transition: color .25s;
}
.kb-student-card:hover .kb-student-name,
.kb-student-card--active .kb-student-name { color: var(--ink); }
.kb-student-card--soon .kb-student-name,
.kb-student-card--imminent .kb-student-name { color: var(--amber) !important; }

/* ── Empty state: "add new student" card ── */
.kb-student-card--new {
  width: 78px;
  padding: .7rem .5rem .6rem;
  border-style: dashed;
  border-color: rgba(14,14,14,.14);
  background: transparent;
}
.kb-new-student-icon {
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .45rem;
  transition: color .25s, transform .25s;
}
.kb-student-card--new:hover {
  border-color: color-mix(in srgb, var(--amber) 38%, transparent);
  background: var(--amber-dim);
  transform: translateY(-4px);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--amber) 18%, transparent),
    0 0 24px color-mix(in srgb, var(--amber) 10%, transparent);
}
.kb-student-card--new:hover .kb-new-student-icon {
  color: var(--amber);
  transform: scale(1.1);
}
.kb-student-card--new .kb-student-name {
  color: var(--muted);
  font-size: .63rem;
}
.kb-student-card--new:hover .kb-student-name { color: var(--amber); }

/* ── Figure picker (student form) ── */
.kb-sc-figrow {
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-height: 138px; overflow-y: auto; padding: .15rem;
}
.kb-sc-fig {
  flex: 0 0 auto; width: 40px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 10px;
  cursor: pointer; padding: 4px; overflow: hidden; position: relative;
  transition: border-color .15s, background .15s, transform .12s;
}
/* "Already in use" — dimmed + amber dot, but still selectable */
/* Figures already in use recede so the FREE ones stand out (no dot needed). */
.kb-sc-fig.is-used:not(.is-sel) { border-color: var(--border-mid); background: transparent; }
.kb-sc-fig.is-used:not(.is-sel) img { opacity: .3; filter: grayscale(.55); }
.kb-sc-fig:hover { border-color: rgba(200,137,26,.5); transform: translateY(-2px); }
.kb-sc-fig.is-sel { border-color: var(--amber); background: var(--amber-dim); }
.kb-sc-fig img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: .82; pointer-events: none; }
.kb-sc-fig.is-sel img { opacity: 1; }
.kb-sc-fig--auto {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em;
  color: var(--muted);
}
.kb-sc-fig--auto.is-sel { color: var(--amber); }

/* ══════════════════════════════════════════════════════
   CALENDAR MIGRATION ASSISTANT
   ══════════════════════════════════════════════════════ */
.kb-mig-card {
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: var(--r-lg); background: var(--card);
  padding: 1rem 1.2rem 1rem 1.1rem; margin-top: .6rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.kb-mig-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.kb-mig-card-label { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.kb-mig-card-tag { font-family: var(--font-mono); font-size: .59rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--border); padding: .14rem .5rem; border-radius: 999px; white-space: nowrap; }
.kb-mig-card-desc { font-size: .8rem; color: var(--muted); line-height: 1.55; margin: 0; }
.kb-mig-card-foot { display: flex; justify-content: flex-end; margin-top: .1rem; }

#kb-mig-overlay {
  position: fixed; inset: 0; z-index: 3600; display: none;
  align-items: center; justify-content: center;
  background: rgba(10,12,18,.72); backdrop-filter: blur(4px);
}
.kb-mig-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: min(720px, 96vw); max-height: 88vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.kb-mig-hd {
  display: flex; flex-direction: column; gap: .75rem;
  padding: .95rem 1.1rem .85rem; border-bottom: 1px solid var(--border);
}
.kb-mig-hd-top { display: flex; align-items: center; justify-content: space-between; }
.kb-mig-title { font-family: var(--font-mono); font-size: .8rem; color: var(--amber); letter-spacing: .08em; }

/* Step indicator */
.kb-mig-steps { display: flex; align-items: center; gap: .55rem; }
.kb-mig-step { display: inline-flex; align-items: center; gap: .4rem; opacity: .4; transition: opacity .2s; }
.kb-mig-step:not(:last-child)::after {
  content: ''; width: 16px; height: 1px; background: var(--border); margin-left: .4rem;
}
.kb-mig-step.is-active, .kb-mig-step.is-done { opacity: 1; }
.kb-mig-step-n {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .58rem;
  border: 1px solid var(--border); color: var(--muted); transition: all .2s;
}
.kb-mig-step.is-active .kb-mig-step-n { background: var(--amber); border-color: var(--amber); color: #fff; }
.kb-mig-step.is-done   .kb-mig-step-n { border-color: var(--amber); color: var(--amber); }
.kb-mig-step-l {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.kb-mig-step.is-active .kb-mig-step-l { color: var(--ink); }

/* Selection summary + section dividers */
.kb-mig-summary {
  font-family: var(--font-mono); font-size: .66rem; color: var(--muted);
  letter-spacing: .02em; margin: -.45rem 0 .85rem;
}
.kb-mig-sumnum { color: var(--amber); font-weight: 600; }
.kb-mig-seclabel {
  display: flex; align-items: center; gap: .6rem; margin: .55rem 0 .2rem;
  font-family: var(--font-mono); font-size: .54rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.kb-mig-seclabel:first-child { margin-top: 0; }
.kb-mig-secrule { flex: 1; height: 1px; background: var(--border); }
.kb-mig-row--moved { animation: kbMigRise .42s cubic-bezier(.22,.8,.32,1); }
@keyframes kbMigRise { from { transform: translateY(-7px); opacity: .35; } to { transform: none; opacity: 1; } }
.kb-mig-body { overflow-y: auto; padding: 1.1rem 1.2rem 1.2rem; }
.kb-mig-lead { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 0 0 1rem; }
.kb-mig-date { font-family: var(--font-mono); }
.kb-mig-foot { display: flex; justify-content: flex-end; align-items: center; gap: .9rem; margin-top: 1.2rem; }

.kb-mig-busy { text-align: center; padding: 2.4rem 1rem; color: var(--muted); }
.kb-mig-spinner {
  width: 34px; height: 34px; margin: 0 auto .9rem; border-radius: 50%;
  border: 3px solid rgba(200,137,26,.2); border-top-color: var(--amber);
  animation: kbSpin .8s linear infinite;
}
@keyframes kbSpin { to { transform: rotate(360deg); } }
.kb-mig-check {
  width: 44px; height: 44px; margin: 0 auto .8rem; border-radius: 50%;
  background: var(--amber-dim); color: var(--amber); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

.kb-mig-groups, .kb-mig-preview { display: flex; flex-direction: column; gap: .55rem; }
.kb-mig-row {
  border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem;
  background: var(--card);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.kb-mig-row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.kb-mig-gtitle { font-weight: 600; color: var(--ink); font-size: .9rem; word-break: break-word; }
.kb-mig-gmeta { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); white-space: nowrap; }
.kb-mig-row-ctrl { display: flex; align-items: center; gap: .6rem; justify-content: space-between; flex-wrap: wrap; }
.kb-mig-stuwrap { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 220px; }
.kb-mig-stu { flex: 0 1 auto; max-width: 60%; }
.kb-mig-newname { flex: 1; min-width: 120px; }
.kb-mig-conf {
  font-family: var(--font-mono); font-size: .58rem; white-space: nowrap;
  padding: .12rem .45rem; border-radius: 99px; letter-spacing: .02em;
}
.kb-mig-conf--hi   { color: #2f7d4f; background: rgba(47,125,79,.12); }
.kb-mig-conf--mid  { color: var(--amber); background: var(--amber-dim); }
.kb-mig-conf--lo   { color: #9a6a00; background: rgba(154,106,0,.1); }
.kb-mig-conf--none { color: var(--muted); background: rgba(0,0,0,.05); }

.kb-mig-row-colors { display: flex; align-items: center; gap: .5rem; margin-top: .55rem; flex-wrap: wrap; }
.kb-mig-clabel { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kb-mig-sw { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; }

/* Row include checkbox + dimmed (excluded) state */
.kb-mig-inc-wrap { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.kb-mig-inc { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; flex-shrink: 0; }
.kb-mig-row--on { border-color: var(--amber); background: var(--amber-dim); box-shadow: inset 3px 0 0 var(--amber); }

/* Visible colour swatches */
.kb-mig-swatches { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.kb-mig-swatch {
  width: 18px; height: 18px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; transition: transform .1s, box-shadow .15s;
}
.kb-mig-swatch:hover { transform: scale(1.18); }
.kb-mig-swatch.is-sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }
.kb-mig-swatch--none { background: var(--card); box-shadow: 0 0 0 1px var(--border) inset; position: relative; }
.kb-mig-swatch--none::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 8px; height: 1.5px;
  background: var(--muted); transform: rotate(-45deg);
}
.kb-mig-swatch--none.is-sel { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ink); }

.kb-mig-prow { display: flex; align-items: center; gap: .55rem; font-size: .82rem; padding: .35rem .2rem; border-bottom: 1px solid rgba(0,0,0,.05); }
.kb-mig-pcount { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); min-width: 34px; }
.kb-mig-pbefore { color: var(--muted); text-decoration: line-through; flex: 1; }
.kb-mig-parrow { color: var(--amber); }
.kb-mig-pafter { color: var(--ink); font-weight: 600; flex: 1; }

.kb-student-earnings {
  position: absolute;
  top: 7px;
  right: 9px;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 600;
  color: var(--amber); letter-spacing: .04em; line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* ── HOME PHASE 2: Student Detail ── */
#home-phase-detail { padding:1.6rem 2.2rem 1.8rem; overflow-y:auto; flex-direction:column; }
#home-phase-detail.anim-in { animation:homeSlideIn .32s cubic-bezier(.22,.8,.32,1) both; }
@keyframes homeSlideIn { from{opacity:0;transform:translateX(16px);}to{opacity:1;transform:translateX(0);} }

.kb-home-back-btn {
  background:none; border:none;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
  cursor:pointer; padding:0; margin-bottom:1.4rem;
  display:inline-flex; align-items:center; gap:.35rem;
  transition:color .2s;
}
.kb-home-back-btn:hover { color:var(--amber); }

.kb-home-detail-layout {
  display:flex; gap:1.6rem; align-items:flex-start; flex:1;
}

/* Left col: figure + name + info card + upcoming */
.kb-home-detail-left {
  width:270px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center;
}
.kb-home-det-figure {
  width:120px; height:160px; object-fit:contain; margin-bottom:.55rem;
  filter:drop-shadow(0 4px 12px rgba(14,14,14,.08));
}
.kb-home-det-name {
  font-family:var(--font-mono); font-size:1.15rem; color:var(--ink);
  font-weight:400; margin-bottom:.85rem; letter-spacing:.02em;
}
.kb-home-info-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.8rem 1.1rem; width:100%;
  box-shadow:var(--shadow-sm);
}
.kb-home-info-row {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:.28rem 0; border-bottom:1px solid var(--border-mid);
  font-size:.8rem; gap:.5rem;
}
.kb-home-info-row:last-child { border-bottom:none; }
.kb-home-info-key {
  font-family:var(--font-mono); font-size:.57rem; letter-spacing:.08em;
  color:var(--muted); text-transform:uppercase; flex-shrink:0;
}
.kb-home-info-val { color:var(--ink); font-weight:500; text-align:right; word-break:break-all; }

.kb-home-upcoming { margin-top:.55rem; width:100%; }
.kb-home-upcoming-label {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.22em;
  color:var(--amber); text-transform:uppercase; margin-bottom:.28rem; opacity:.85;
}
.kb-home-appt-item {
  display:flex; flex-direction:column; gap:.38rem;
  padding:.65rem .9rem; background:var(--bg-light);
  border-radius:var(--r); margin-bottom:.3rem;
  border-left:2.5px solid var(--amber);
  cursor:pointer; transition:background .15s, border-color .15s;
}
.kb-home-appt-item:hover { background:var(--card); }
.kb-home-appt-item.expanded { background:var(--card); border-left-color:var(--ink); }
.kb-home-appt-item--tentative {
  border-left-color:var(--border) !important;
  border-left-style:dashed !important; opacity:.8;
  cursor:default;
}
.kb-home-appt-item--tentative .kb-home-appt-date { color:var(--muted) !important; }

.kb-tent-card-top {
  display:flex; justify-content:space-between; align-items:flex-start; gap:.75rem;
}
.kb-tent-micro-btns {
  display:flex; flex-direction:row; gap:.3rem; flex-shrink:0; align-self:center;
}
.kb-tent-micro-btn {
  width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg);
  cursor:pointer; font-size:.7rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, border-color .15s, color .15s;
}
.kb-tent-micro-btn--ok  { color:var(--amber); }
.kb-tent-micro-btn--ok:hover  { background:var(--amber); border-color:var(--amber); color:#fff; }
.kb-tent-micro-btn--del { color:var(--muted); }
.kb-tent-micro-btn--del:hover { background:rgba(192,64,64,.1); border-color:var(--error); color:var(--error); }
.kb-home-appt-actions {
  display:none; flex-direction:row; gap:.45rem;
  padding-top:.45rem; border-top:1px solid var(--border); margin-top:.05rem;
}
.kb-home-appt-item.expanded .kb-home-appt-actions { display:flex; }


.kb-home-act-btn {
  flex:1; padding:.35rem .5rem;
  font-family:var(--font-mono); font-size:.65rem; font-weight:500;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); cursor:pointer; color:var(--text);
  transition:background .15s, border-color .15s, color .15s;
}
.kb-home-act-btn:hover { background:var(--bg-light); border-color:var(--amber); color:var(--ink); }
.kb-home-act-btn--cancel { color:var(--error); border-color:rgba(192,64,64,.25); }
.kb-home-act-btn--cancel:hover { background:rgba(192,64,64,.06); border-color:var(--error); }
.kb-home-appt-act-btn {
  flex:1; padding:.35rem .5rem; font-size:.65rem;
  font-family:var(--font-mono); font-weight:500;
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); cursor:pointer; color:var(--text);
  transition:background .15s, border-color .15s, color .15s;
}
.kb-home-appt-act-btn:hover { background:var(--bg-light); border-color:var(--amber); color:var(--ink); }
.kb-home-appt-act-confirm { color:#3a8f5c; border-color:rgba(58,143,92,.35); }
.kb-home-appt-act-confirm:hover { background:rgba(58,143,92,.06); border-color:#3a8f5c; }
.kb-home-appt-act-del  { color:var(--error); border-color:rgba(192,64,64,.25); }
.kb-home-appt-act-del:hover  { background:rgba(192,64,64,.06); border-color:var(--error); }
.kb-home-appt-act-edit { color:var(--amber); border-color:rgba(200,137,26,.35); }
.kb-home-appt-act-edit:hover { background:rgba(200,137,26,.07); border-color:var(--amber); }
.kb-home-appt-date {
  font-family:var(--font-mono); color:var(--ink);
  font-size:.73rem; font-weight:500; white-space:nowrap;
}
.kb-home-appt-time {
  font-family:var(--font-mono); font-size:.95rem;
  font-weight:600; color:var(--ink); letter-spacing:-.01em;
}
.kb-appt-tz2 {
  font-family:var(--font-mono); font-size:.68rem;
  color:var(--muted); margin-top:-.1rem;
}
.kb-appt-tz2-label {
  font-size:.58rem; letter-spacing:.05em;
  text-transform:uppercase; opacity:.7;
}
.kb-home-appt-times { display:flex; gap:.45rem; align-items:center; }
.kb-home-appt-tz {
  display:flex; flex-direction:column; align-items:center;
  background:rgba(0,0,0,.06); border-radius:7px;
  padding:.22rem .65rem; min-width:72px;
}
.kb-home-appt-tz-time {
  font-family:var(--font-mono); font-size:.72rem;
  font-weight:600; color:var(--amber); line-height:1.2; white-space:nowrap;
}
.kb-home-appt-tz-label {
  font-size:.5rem; letter-spacing:.06em; color:var(--muted);
  text-transform:uppercase; line-height:1.3;
}
.kb-home-appt-tz-sep { font-size:.65rem; color:var(--muted); opacity:.45; flex-shrink:0; }
.kb-home-appt-empty  { font-size:.73rem; color:var(--muted); padding:.1rem 0; }
.kb-home-loading { font-family:var(--font-mono); font-size:.67rem; color:var(--muted); padding:.2rem 0; }

/* Right col: action buttons */
.kb-home-detail-right {
  flex:1; display:flex; flex-direction:column;
  justify-content:center; gap:.85rem; min-height:260px;
}
.kb-home-btn-launch {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:2.1rem 1.5rem;
  background:var(--amber); border:none; border-radius:var(--r-lg);
  color:#fff; font-family:var(--font-sans); cursor:pointer;
  transition:background .2s, transform .2s, box-shadow .2s; width:100%;
}
.kb-home-btn-launch:hover {
  background:var(--ink); transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(14,14,14,.16);
}
.kb-home-btn-book {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:2.1rem 1.5rem;
  background:transparent; border:1.5px solid var(--border);
  border-radius:var(--r-lg); color:var(--text);
  font-family:var(--font-sans); cursor:pointer;
  transition:border-color .2s, color .2s, transform .2s, box-shadow .2s; width:100%;
}
.kb-home-btn-book:hover {
  border-color:var(--amber); color:var(--ink); transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(200,137,26,.12);
}
.kb-home-btn-prep {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:1.4rem 1.5rem;
  background:transparent; border:1.5px dashed var(--border);
  border-radius:var(--r-lg); color:var(--muted);
  font-family:var(--font-sans); cursor:pointer;
  transition:border-color .2s, color .2s, transform .2s; width:100%;
}
.kb-home-btn-prep:hover {
  border-color:rgba(200,137,26,.5); color:var(--text); transform:translateY(-1px);
}
.kb-home-btn-prep.prep-active {
  background:rgba(192,64,64,.12); border-color:rgba(192,64,64,.4); color:var(--error);
}
.kb-home-btn-prep.prep-active:hover {
  background:rgba(192,64,64,.22); border-color:rgba(192,64,64,.65);
}
.kb-hb-icon  { font-size:1.7rem; line-height:1; opacity:.85; }
.kb-hb-label { font-size:.98rem; font-weight:500; letter-spacing:.01em; }
/* Pill row under student name */
.kb-home-fig-pills {
  display:flex; align-items:center; justify-content:center;
  gap:.4rem; margin-bottom:.5rem;
}

/* Pause pill — text label, pill shape */
.kb-home-pause-pill {
  display:inline-flex; align-items:center; gap:.28rem;
  padding:.22rem .65rem; border-radius:99px;
  border:1px solid rgba(14,14,14,.13); background:none;
  color:var(--ink); opacity:.5;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.04em;
  cursor:pointer;
  transition:opacity .18s, border-color .18s, background .18s, color .18s;
}
.kb-home-pause-pill:hover {
  opacity:1; border-color:rgba(14,14,14,.28);
  background:rgba(14,14,14,.04);
}
.kb-home-pause-pill.is-inactive {
  opacity:1; color:var(--amber);
  border-color:rgba(200,137,26,.4);
  background:rgba(200,137,26,.08);
}
.kb-home-pause-pill.is-inactive:hover {
  background:rgba(200,137,26,.14);
}

/* Icon pills — settings, portal & reminder (unified) */
.kb-home-icon-pill {
  display:inline-flex; align-items:center; justify-content:center;
  width:1.8rem; height:1.8rem; border-radius:50%;
  border:1px solid rgba(14,14,14,.13); background:none;
  color:var(--ink); opacity:.5; cursor:pointer;
  transition:opacity .18s, border-color .18s, background .18s, color .18s;
}
.kb-home-icon-pill:hover {
  opacity:1; border-color:rgba(14,14,14,.28);
  background:rgba(14,14,14,.04);
}
.kb-home-icon-pill.is-on {
  opacity:1; border-color:rgba(200,137,26,.4);
  background:rgba(200,137,26,.08); color:var(--amber);
}
.kb-home-icon-pill.is-on:hover { background:rgba(200,137,26,.14); }

/* ══════════════════════════════════════════════════════
   STUDENT DETAIL v2 — 2-column CSS Grid
   Col 1: kb-det2-left  — independent flex column (figure+controls, info, Nächste Termine)
   Col 2: kb-det2-main  — independent flex column (all action buttons, equal gaps)
   ══════════════════════════════════════════════════════ */
.kb-det2-layout {
  display:grid;
  grid-template-columns:292px 1fr;
  column-gap:1.6rem;
  row-gap:.7rem;
  align-items:start;
  flex:1;
}

/* ── Left column wrapper — independent flex column ── */
.kb-det2-left {
  display:flex; flex-direction:column; gap:.7rem;
}

/* ── Left col 1: figure + name + controls (flex child of kb-det2-left) ── */
.kb-det2-z1l {
  display:flex; flex-direction:column; align-items:center;
}
.kb-det2a-figure {
  width:150px; height:172px; object-fit:contain; margin-bottom:.5rem;
  filter:drop-shadow(0 4px 12px rgba(14,14,14,.08));
}
.kb-det2a-name {
  font-family:var(--font-mono); font-size:1.15rem; font-weight:400; color:var(--ink);
  letter-spacing:.02em; line-height:1.25; text-align:center; margin-bottom:.85rem;
}

/* ── Left col 2: identity info card (flex child of kb-det2-left) ── */
.kb-det2a-info {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.15rem .9rem; box-shadow:var(--shadow-sm);
}
.kb-det2-irow {
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem;
  padding:.26rem 0; border-bottom:1px solid var(--border-mid);
}
.kb-det2-irow:last-child { border-bottom:none; }
.kb-det2-ilbl { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); flex-shrink:0; }
.kb-det2-ival { font-size:.78rem; color:var(--ink); font-weight:500; text-align:right; word-break:break-all; }

/* ── Left col 3: Nächste Termine (flex child of kb-det2-left) ── */
.kb-det2a-termine { width:100%; }

/* ── Right: single flex column — equal gaps guaranteed, independent of left ── */
.kb-det2-main {
  display:flex; flex-direction:column; gap:.7rem;
}
/* Strip built-in margins so flex gap is the sole spacing source */
.kb-det2-main .kb-det2-start,
.kb-det2-main .kb-det2-vbtn,
.kb-det2-main .kb-det2-seg-bar,
.kb-det2-main .kb-home-lesson-panel { margin-bottom:0; margin-top:0; }

/* Controls — 2-column grid (legacy, kept for backward compat) */
.kb-det2a-controls { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; width:100%; margin:.1rem 0 .65rem; }
.kb-det2a-controls .kb-det2-ctrl { justify-content:center; }
.kb-det2-ctrl--wide { grid-column:1 / -1; justify-content:center; }

/* Action buttons — vertical stack, modern (solid, no dashed) */
.kb-det2-vbtn {
  width:100%; min-height:76px; display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--card); border:1px solid rgba(20,17,13,.12); border-radius:var(--r-lg);
  padding:1.5rem 1.2rem; margin-bottom:.7rem; cursor:pointer; color:var(--text);
  font-family:var(--font-sans); font-size:.95rem; text-align:center;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.kb-det2-vbtn:hover { border-color:rgba(200,137,26,.5); transform:translateY(-1px); box-shadow:0 6px 18px rgba(14,14,14,.06); }
.kb-det2-vbtn-ic { display:inline-flex; align-items:center; justify-content:center; color:var(--amber); width:20px; flex-shrink:0; }
.kb-det2-vbtn-ic svg { width:20px; height:20px; stroke:currentColor; }
.kb-det2-vbtn.prep-active { background:rgba(192,64,64,.1); border-color:rgba(192,64,64,.4); color:var(--error); }
.kb-det2-vbtn.prep-active .kb-det2-vbtn-ic { color:var(--error); }

/* Lesson-notes box — shown when saved notes exist */
.kb-det2-notesbox {
  margin-top:1.1rem; background:var(--card); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:.75rem .95rem; box-shadow:var(--shadow-sm);
}
.kb-det2-notesbox-hd {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); opacity:.85; margin-bottom:.5rem;
}
.kb-det2-notesbox-ta {
  width:100%; min-height:72px; resize:vertical; background:var(--bg);
  border:1px solid var(--border); border-radius:var(--r);
  padding:.55rem .7rem; font-family:var(--font-sans); font-size:.82rem; line-height:1.5; color:var(--text);
}
.kb-det2-notesbox-ta:focus { outline:none; border-color:rgba(200,137,26,.5); }

/* Schnellzugriff — segmented bar (Option A) */
.kb-det2-seg-bar {
  display:flex; width:100%;
  background:var(--card); border:1px solid rgba(20,17,13,.12);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:.7rem;
}
.kb-det2-seg {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; padding:1.3rem .5rem;
  background:transparent; border:none; border-right:1px solid var(--border);
  cursor:pointer; color:var(--text);
  font-family:var(--font-mono); font-size:.63rem; letter-spacing:.03em;
  transition:background .15s, color .15s;
}
.kb-det2-seg:last-child { border-right:none; }
.kb-det2-seg:hover { background:rgba(200,137,26,.07); color:var(--ink); }
.kb-det2-seg svg { width:16px; height:16px; flex-shrink:0; stroke:var(--amber); }

/* Status chip (shared) — reset margin inside the name row */
.kb-det2-status {
  display:inline-flex; align-items:center; gap:.34rem;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.05em;
  border-radius:99px; padding:.2rem .65rem;
}
.kb-det2-status .kb-det2-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.kb-det2-status.is-active   { color:#3a8f5c; background:rgba(58,143,92,.1);  border:1px solid rgba(58,143,92,.28); }
.kb-det2-status.is-inactive { color:var(--amber); background:rgba(200,137,26,.08); border:1px solid rgba(200,137,26,.4); }

/* Labeled control pills (shared) */
.kb-det2-ctrl {
  display:inline-flex; align-items:center; gap:.3rem;
  border:1px solid rgba(20,17,13,.13); background:none; border-radius:99px;
  padding:.27rem .56rem; color:var(--ink); opacity:.62; cursor:pointer;
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.02em;
  transition:opacity .15s, border-color .15s, background .15s, color .15s;
}
.kb-det2-ctrl svg { width:12px; height:12px; flex-shrink:0; }
.kb-det2-ctrl:hover { opacity:1; border-color:rgba(20,17,13,.28); background:rgba(20,17,13,.04); }
.kb-det2-ctrl.is-on,
.kb-det2-ctrl.is-inactive {
  opacity:1; color:var(--amber);
  border-color:rgba(200,137,26,.4); background:rgba(200,137,26,.08);
}
.kb-det2-ctrl.is-on:hover, .kb-det2-ctrl.is-inactive:hover { background:rgba(200,137,26,.14); }
.kb-det2-ctrl.kb-plan-locked { opacity:.45; filter:grayscale(.5); }

/* ── Primary action + next-lesson context ── */
.kb-det2-start, .kb-det2a-start {
  width:100%; display:flex; align-items:center; justify-content:center; gap:.55rem;
  background:var(--amber); border:none; border-radius:var(--r-lg);
  color:#fff; font-family:var(--font-sans); font-size:1.02rem; font-weight:500;
  min-height:76px; padding:1.5rem 1rem; cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s;
}
.kb-det2-start:hover:not(:disabled), .kb-det2a-start:hover:not(:disabled) {
  background:var(--ink); transform:translateY(-1px); box-shadow:0 8px 22px rgba(14,14,14,.14);
}
.kb-det2a-context {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  background:rgba(200,137,26,.07); border:1px solid rgba(200,137,26,.2);
  border-radius:var(--r); padding:.5rem .85rem; margin-top:.55rem;
}
.kb-det2a-context-lbl { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.16em; color:var(--amber); text-transform:uppercase; }
.kb-det2a-context-val { font-family:var(--font-mono); font-size:.8rem; color:var(--ink); }

/* ── Aktionen 2×2 (solid, equal-weight — no more dashed) ── */
.kb-det2a-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-bottom:.4rem; }
.kb-det2-tool {
  display:flex; flex-direction:row; align-items:center; gap:.65rem;
  background:var(--card); border:1px solid rgba(20,17,13,.12); border-radius:10px;
  padding:.9rem 1.1rem; cursor:pointer; color:var(--text);
  transition:border-color .15s, transform .15s;
}
.kb-det2-tool:hover { border-color:rgba(200,137,26,.55); transform:translateY(-1px); }
.kb-det2-tool-ic  { font-size:1.2rem; line-height:1; color:var(--amber); flex-shrink:0; }
.kb-det2-tool-lbl { font-family:var(--font-mono); font-size:.72rem; color:var(--text); letter-spacing:.01em; }
.kb-det2-tool.prep-active { background:rgba(192,64,64,.1); border-color:rgba(192,64,64,.4); }
.kb-det2-tool.prep-active .kb-det2-tool-ic,
.kb-det2-tool.prep-active .kb-det2-tool-lbl { color:var(--error); }

/* ── Section labels ── */
.kb-det2-sec-label {
  font-family:var(--font-mono); font-size:.56rem; letter-spacing:.2em;
  color:var(--amber); opacity:.85; text-transform:uppercase; margin-bottom:.5rem;
}
.kb-det2a-sec-row { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1.3rem; margin-bottom:.5rem; }
.kb-det2a-sec-row .kb-det2-sec-label { margin-bottom:0; }

/* ── Nächste Termine — its own panel so it stands out ── */
.kb-det2a-termine {
  background:var(--card);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:.9rem 1rem; box-shadow:var(--shadow-sm);
}
.kb-det2a-termine-head { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.6rem; }
.kb-det2a-termine-head .kb-det2-sec-label { margin-bottom:0; font-size:.62rem; }

/* ── Schnellzugriff chips ── */
.kb-det2a-quick { display:flex; flex-wrap:wrap; gap:.5rem; }
.kb-det2a-ql {
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--card); border:1px solid rgba(20,17,13,.12); border-radius:8px;
  padding:.55rem .8rem; cursor:pointer; color:var(--text);
  font-family:var(--font-mono); font-size:.68rem;
  transition:border-color .15s, transform .15s;
}
.kb-det2a-ql:hover { border-color:rgba(200,137,26,.55); transform:translateY(-1px); }
.kb-det2a-ql svg { width:15px; height:15px; color:var(--amber); flex-shrink:0; }

/* ── Notizen — toggle + textarea ── */
.kb-det2-notetabs { display:inline-flex; border:1px solid var(--border-mid); border-radius:99px; overflow:hidden; }
.kb-det2-notetab {
  background:none; border:none; cursor:pointer;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.02em;
  padding:.22rem .7rem; color:var(--muted); transition:background .15s, color .15s;
}
.kb-det2-notetab.active { background:var(--amber); color:#fff; }
.kb-det2a-notes {
  width:100%; min-height:88px; resize:vertical;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:.75rem .9rem; font-family:var(--font-sans); font-size:.82rem; line-height:1.55;
  color:var(--text); box-shadow:var(--shadow-sm);
}
.kb-det2a-notes:focus { outline:none; border-color:rgba(200,137,26,.5); }

@media (max-width:780px) {
  .kb-det2-layout { grid-template-columns:1fr; row-gap:.9rem; }
  /* On mobile: left cells first, right zones after */
  .kb-det2-left { order:1; }
  .kb-det2-main { order:2; }
  .kb-det2a-tools { grid-template-columns:1fr; }
}

/* Lesson running panel */
.kb-home-lesson-panel {
  background:rgba(192,64,64,.05); border:1.5px solid rgba(192,64,64,.22);
  border-radius:var(--r-lg); padding:1.1rem 1.3rem;
  display:flex; flex-direction:column; align-items:center; gap:.65rem; width:100%;
}
.kb-home-lesson-info { display:flex; align-items:center; gap:.65rem; }
.kb-dot-pulse {
  width:9px; height:9px; border-radius:50%; background:var(--error); flex-shrink:0;
  animation:dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.35; transform:scale(.7); }
}
.kb-home-lesson-label {
  font-family:var(--font-mono); font-size:.65rem; letter-spacing:.18em;
  color:var(--error); text-transform:uppercase;
}
.kb-home-lesson-timer {
  font-family:var(--font-mono); font-size:2rem; color:var(--ink);
  font-weight:400; letter-spacing:.06em; line-height:1;
}
.kb-home-lesson-btns { display:flex; gap:.6rem; width:100%; }
.kb-home-btn-stop {
  flex:1; display:inline-flex; align-items:center; justify-content:center;
  gap:.4rem; padding:.75rem 1rem;
  background:var(--error); border:none; border-radius:var(--r);
  color:#fff; font-family:var(--font-sans); font-size:.88rem; font-weight:500;
  cursor:pointer; transition:all .2s;
}
.kb-home-btn-stop:hover { background:#a03030; transform:translateY(-1px); }
.kb-home-lesson-confirm {
  display:none; flex-direction:column; align-items:center; gap:.6rem; width:100%;
}
.kb-home-lesson-confirm-text { font-size:.75rem; color:var(--muted); text-align:center; line-height:1.5; }
.kb-home-lesson-confirm-btns { display:flex; gap:.5rem; width:100%; }
.kb-home-btn-close-all {
  flex:1; padding:.65rem .4rem;
  background:rgba(192,64,64,.1); border:1.5px solid rgba(192,64,64,.28);
  border-radius:var(--r); color:var(--error);
  font-size:.75rem; font-family:var(--font-sans); font-weight:500; cursor:pointer;
  transition:background .18s;
}
.kb-home-btn-close-all:hover { background:rgba(192,64,64,.2); }
.kb-home-btn-keep-open {
  flex:1; padding:.65rem .4rem;
  background:var(--bg-mid); border:1.5px solid var(--border);
  border-radius:var(--r); color:var(--text);
  font-size:.75rem; font-family:var(--font-sans); font-weight:400; cursor:pointer;
  transition:background .18s;
}
.kb-home-btn-keep-open:hover { background:var(--bg-light); }

/* ══════════════════════════════════════════════════════
   WEEKLY SCHEDULE (Left Panel)
   ══════════════════════════════════════════════════════ */

.kb-wk-section { margin-bottom: 1.5rem; }
.kb-wk-title   { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }

.kb-wk-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .65rem;
  border-radius: var(--r); margin-bottom: .3rem;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color var(--t-fast);
}
.kb-wk-item:hover { border-color: rgba(200,137,26,.4); }
.kb-wk-item.clickable { cursor: pointer; }
.kb-wk-item.tentative { border-style: dashed; border-color: rgba(120,120,120,.35); background: transparent; }

.kb-wk-time  { font-family:var(--font-mono); font-size:.68rem; color:var(--amber); white-space:nowrap; padding-top:1px; }
.kb-wk-name  { font-size:.78rem; color:var(--text); font-weight:500; line-height:1.3; }
.kb-wk-sub   { font-size:.68rem; color:var(--muted); line-height:1.3; }

.kb-wk-empty { font-size:.76rem; color:var(--muted); font-style:italic; padding:.35rem 0; opacity:.6; }

/* Earnings panel */
.kb-earnings-toggle { cursor:pointer; display:flex; align-items:center; gap:.4rem; }
.kb-earnings-panel  { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:.9rem; margin-top:.6rem; }
.kb-earn-row        { display:flex; justify-content:space-between; font-size:.75rem; padding:.2rem 0; border-bottom:1px solid var(--border-mid); }
.kb-earn-row:last-child { border-bottom:none; font-weight:600; }
.kb-earn-label      { color:var(--muted); font-family:var(--font-mono); font-size:.62rem; }
.kb-earn-val        { color:var(--ink); font-family:var(--font-mono); }
.kb-earn-val.amber  { color:var(--amber); }

/* ══════════════════════════════════════════════════════
   LESSON TIMER
   ══════════════════════════════════════════════════════ */

.kb-timer-display {
  font-family: var(--font-mono);
  font-size: clamp(3rem, 10vw, 5rem);
  color: var(--ink);
  letter-spacing: -.02em;
  text-align: center;
  margin: 1.5rem 0;
}
.kb-timer-display.running { color: var(--amber); }

.kb-timer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 420px; margin: 0 auto;
  box-shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════
   ADMIN PANEL
   ══════════════════════════════════════════════════════ */

.kb-admin-tabs { display:flex; border:1px solid var(--border); border-radius:var(--r); overflow:hidden; margin-bottom:1.75rem; }
.kb-a-tab {
  flex:1; padding:.8rem 1rem;
  background:transparent; border:none; border-right:1px solid var(--border);
  color:var(--muted); cursor:pointer;
  font-family:var(--font-sans); font-size:.83rem; font-weight:500;
  transition:all var(--t-base);
}
.kb-a-tab:last-child { border-right:none; }
.kb-a-tab.active { background:var(--ink); color:var(--bg); }
.kb-a-tab:hover:not(.active) { background:var(--bg-light); color:var(--ink); }

.kb-admin-badge {
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.2em;
  color:var(--error); border:1px solid rgba(192,64,64,.3);
  padding:.28rem .7rem; border-radius:99px; text-transform:uppercase;
}

.kb-btn-close {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: none; padding: .3rem .1rem;
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #aaa; cursor: pointer;
  transition: color var(--t-base);
}
.kb-btn-close:hover { color: var(--ink); }

.kb-settings-h {
  font-family:var(--font-mono); font-size:1rem; color:var(--ink);
  font-weight:400; margin-bottom:1.1rem; letter-spacing:-.01em;
}

/* ── Admin blocked-days calendar cells ── */
.kb-adm-cell {
  width:32px; height:28px; background:var(--card); border:1px solid var(--border-mid);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .15s;
  font-family:var(--font-mono); font-size:.7rem; color:var(--ink);
  user-select:none;
}
.kb-adm-cell.empty   { background:transparent; border-color:transparent; cursor:default; }
.kb-adm-cell.past    { opacity:.22; cursor:not-allowed; }
.kb-adm-cell.today   { border-color:rgba(200,137,26,.5); color:var(--amber); }
/* blocked = amber diagonal hatch — stays in palette; red reserved for real delete */
.kb-adm-cell.blocked {
  color:#8a5e10; font-weight:500; border-color:rgba(200,137,26,.30);
  background:
    repeating-linear-gradient(45deg, var(--amber-dim) 0, var(--amber-dim) 3px, transparent 3px, transparent 6px),
    var(--amber-glow);
}
.kb-adm-cell.blocked:hover:not(.past) {
  background:
    repeating-linear-gradient(45deg, rgba(200,137,26,.18) 0, rgba(200,137,26,.18) 3px, transparent 3px, transparent 6px),
    var(--amber-dim);
}
.kb-adm-cell.dragsel { background:var(--amber-dim) !important; border-color:rgba(200,137,26,.4) !important; }
.kb-adm-cell:hover:not(.empty):not(.past):not(.blocked) { border-color:rgba(200,137,26,.5); background:var(--amber-dim); }

/* ── Freie-Tage redesign: month grid + controls ── */
.kb-adm-wd    { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; max-width:340px; margin-bottom:6px; }
.kb-adm-wd > div { text-align:center; font-family:var(--font-mono); font-size:.56rem; color:var(--muted); letter-spacing:.06em; }
.kb-adm-month { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; max-width:340px; margin-bottom:.5rem; }
.kb-adm-month .kb-adm-cell { width:auto; height:auto; aspect-ratio:1/1; font-size:.82rem; }

/* two-column body: calendar left, summary right (stacks on narrow) */
.kb-adm-cols { display:flex; gap:2.5rem; align-items:flex-start; }
.kb-adm-col-cal { flex:none; width:340px; max-width:100%; }
.kb-adm-col-sum { flex:1; min-width:0; }
.kb-adm-col-cal .kb-adm-wd,
.kb-adm-col-cal .kb-adm-month { max-width:none; }
.kb-adm-col-sum .kb-adm-sumlabel { margin-top:0; }
@media (max-width:680px) {
  .kb-adm-cols { flex-direction:column; gap:.5rem; }
  .kb-adm-col-cal { width:340px; }
  .kb-adm-col-sum { width:100%; }
  .kb-adm-col-sum .kb-adm-sumlabel { margin-top:1.5rem; }
}

.kb-adm-presets { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.kb-adm-chip {
  font-family:var(--font-mono); font-size:.74rem; padding:.45rem .85rem;
  border:1px solid var(--border); border-radius:99px; background:transparent;
  color:var(--text); cursor:pointer; transition:.18s ease;
}
.kb-adm-chip:hover  { border-color:var(--amber); color:var(--amber); background:var(--amber-glow); }
.kb-adm-chip.active { border-color:var(--amber); background:var(--amber-dim); color:var(--amber); }

.kb-adm-range { display:none; gap:.6rem; align-items:flex-end; flex-wrap:wrap;
  padding:1rem; background:var(--bg-mid); border:1px solid var(--border-mid);
  border-radius:var(--r); margin-bottom:1.25rem; }
.kb-adm-range.open { display:flex; }
.kb-adm-range .f { display:flex; flex-direction:column; gap:.25rem; }
.kb-adm-range label { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kb-adm-range input { font-family:var(--font-mono); font-size:.82rem; padding:.4rem .55rem;
  border:1px solid var(--border); border-radius:var(--r); background:var(--card); color:var(--text); }
.kb-adm-range input:focus { outline:none; border-color:var(--amber); }

.kb-adm-bt-row { display:flex; gap:.6rem; align-items:flex-end; flex-wrap:wrap; margin-bottom:.75rem; }
.kb-adm-bt-row .f { display:flex; flex-direction:column; gap:.25rem; }
.kb-adm-bt-row label { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kb-adm-bt-date { font-family:var(--font-mono); font-size:.82rem; padding:.4rem .55rem; border:1px solid var(--border); border-radius:var(--r); background:var(--card); color:var(--text); }
.kb-adm-bt-date:focus { outline:none; border-color:var(--amber); }
.kb-adm-quiet-action { padding:.2rem .3rem; border:none; background:none; border-radius:var(--r); font-family:var(--font-mono); font-size:.64rem; font-weight:500; color:var(--muted); cursor:pointer; white-space:nowrap; transition:color var(--t-base); }
.kb-adm-quiet-action:hover { color:var(--ink); }

.kb-adm-sumlabel { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:1.5rem 0 .5rem; }
.kb-adm-sumhead { display:flex; align-items:baseline; justify-content:space-between; gap:.6rem; }
.kb-adm-sumline { display:flex; align-items:center; gap:.6rem; padding:.5rem 0; border-top:1px solid var(--border-mid); }
.kb-adm-sumline:first-child { border-top:none; }
.kb-adm-sumdash { width:14px; height:1px; background:var(--amber); flex:none; }
.kb-adm-sumdate { font-family:var(--font-mono); font-size:.8rem; color:var(--text); }
.kb-adm-sumx { margin-left:auto; background:none; border:none; color:var(--muted); cursor:pointer;
  font-family:var(--font-mono); font-size:.95rem; line-height:1; padding:.1rem .35rem; border-radius:4px; transition:.15s ease; }
.kb-adm-sumx:hover { color:var(--error); background:rgba(192,64,64,.07); }
.kb-adm-empty {
  font-family:var(--font-mono); font-size:.74rem; color:var(--muted);
  padding:1rem 1.1rem; text-align:center;
  border:1px dashed var(--border-mid); border-radius:var(--r);
  background:var(--bg-mid);
}
.kb-adm-saved { font-family:var(--font-mono); font-size:.66rem; color:var(--success); opacity:0; transition:opacity .3s ease;
  text-transform:none; letter-spacing:0; flex:none; white-space:nowrap; }
.kb-adm-saved.show { opacity:1; }
/* clear-all: quiet destructive link under the summary list */
.kb-adm-clear { display:block; margin-top:1rem; padding-top:.9rem; border:none; border-top:1px solid var(--border-mid);
  background:none; color:var(--muted); font-family:var(--font-mono); font-size:.76rem; cursor:pointer; text-align:left; }
.kb-adm-clear:hover { color:var(--error); }

/* ── Display-name accent preview ── */
.kb-name-preview {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: .55rem;
  min-height: 1.8rem;
  padding: .35rem .55rem;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--r);
  transition: border-color .2s;
}
.kb-name-preview:not(:empty) { border-color: rgba(200,137,26,.3); }

/* ── Settings grid layout ── */
.kb-set-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin-bottom: 1rem;
}
.kb-set-grid3 {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .85rem; margin-bottom: 1rem;
}
/* Telefon is a free-text input (no dropdown) so it must show its full value →
   give it the widest cell. Kurs/Zeitzone are selects that truncate cleanly
   (ellipsis + title tooltip, and the shortened Zeitzone labels fit anyway). */
.kb-set-grid3--kz { grid-template-columns: 1.2fr 1fr 1fr; }
.kb-set-grid2 > *,
.kb-set-grid3 > * { min-width: 0; }
@media (max-width: 560px) {
  .kb-set-grid2,
  .kb-set-grid3 { grid-template-columns: 1fr; }
}

/* ── Arbeitstage day-toggle buttons ── */
.kb-day-row {
  display: flex; gap: .4rem; flex-wrap: wrap;
}
.kb-day-btn {
  width: 42px; height: 42px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--bg);
  font-family: var(--font-mono); font-size: .74rem; color: var(--muted);
  cursor: pointer; user-select: none;
  transition: background .15s, border-color .15s, color .15s;
  display: flex; align-items: center; justify-content: center;
}
.kb-day-btn.active {
  background: var(--amber); border-color: var(--amber);
  color: #fff; font-weight: 600;
}
.kb-day-btn:hover:not(.active) {
  border-color: var(--amber); color: var(--amber);
}

/* ── Settings page redesign ──────────────────────── */

/* Sticky jump nav */
.kb-set-nav {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin-bottom: 0; padding: .55rem .65rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
}
.kb-set-nav-btn {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .38rem .85rem;
  border: 1px solid var(--border); border-radius: 99px;
  background: none; color: var(--muted); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
}
.kb-set-nav-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }

/* ── Real tabs (replaces jump-nav) ── */
.kb-set-tabs { display: flex; flex-wrap: wrap; gap: .1rem .35rem; border-bottom: 1px solid var(--border); margin-bottom: 0; }
.kb-set-tab {
  font-family: var(--font-sans); font-size: .9rem; color: var(--muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: .7rem 1rem; cursor: pointer; white-space: nowrap; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.kb-set-tab:hover { color: var(--text); }
.kb-set-tab.active { color: var(--ink); border-bottom-color: var(--amber); font-weight: 500; }
.kb-set-tab-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-left: .4rem; vertical-align: middle; }

/* ── Tab panels (one visible at a time) ── */
.kb-set-panel { display: none; }
.kb-set-panel.active { display: block; animation: kbSetFade .25s ease; }
@keyframes kbSetFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ── Onboarding helper (auto-hides at 100%) ── */
.kb-set-onboard { background: linear-gradient(160deg, var(--amber-glow), var(--card)); border: 1px solid rgba(200,137,26,.22); border-radius: var(--r-lg); padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.kb-set-onboard-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kb-set-onboard-title { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink); font-weight: 500; }
.kb-set-onboard-count { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.kb-set-onboard-collapse { font-size: .74rem; color: var(--muted); background: none; border: none; cursor: pointer; }
.kb-set-onboard-collapse:hover { color: var(--text); }
.kb-set-onboard-bar { height: 5px; background: rgba(14,14,14,.06); border-radius: 999px; overflow: hidden; margin: .85rem 0; }
.kb-set-onboard-fill { height: 100%; background: var(--amber); border-radius: 999px; transition: width .4s ease; }
.kb-set-onboard-open { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.kb-set-onboard-lbl { font-size: .78rem; color: var(--muted); }
.kb-set-open-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--amber); background: var(--card); border: 1px solid rgba(200,137,26,.32); border-radius: 999px; padding: .34rem .72rem; cursor: pointer; font-weight: 500; transition: background .15s, color .15s; }
.kb-set-open-item:hover { background: var(--amber); color: #fff; }
.kb-set-onboard.collapsed .kb-set-onboard-bar, .kb-set-onboard.collapsed .kb-set-onboard-open { display: none; }

/* ── Important field callout (e.g. Kalender-Präfix) ── */
.kb-set-callout { display: flex; gap: .55rem; align-items: flex-start; background: rgba(200,137,26,.08); border: 1px solid rgba(200,137,26,.22); border-radius: var(--r); padding: .7rem .85rem; margin: .1rem 0 1rem; font-size: .78rem; color: var(--text); line-height: 1.5; }
.kb-set-callout .ic { flex: none; }

/* Section wrapper — card per section */
.kb-set-section {
  margin-bottom: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 72px;
}

/* Section header: amber dot + uppercase label + extending rule */
.kb-set-sec-hd {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.5rem;
}
.kb-set-sec-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); flex-shrink: 0;
}
.kb-set-sec-label {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); white-space: nowrap;
}
.kb-set-sec-rule {
  flex: 1; height: 1px; background: var(--border);
}

/* Hint / caption text */
.kb-hint {
  font-family: var(--font-mono); font-size: .64rem;
  color: var(--muted); opacity: .8; line-height: 1.55;
  margin-top: .35rem;
}
.kb-hint code {
  background: rgba(0,0,0,.05); padding: .05rem .3rem; border-radius: 3px;
}

/* Help button (?) that replaces inline hints */
.kb-help-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--border); background: none;
  font-family: var(--font-mono); font-size: .58rem; color: var(--muted);
  cursor: pointer; flex-shrink: 0; margin-left: .4rem;
  transition: border-color .15s, color .15s, background .15s;
  vertical-align: middle; line-height: 1;
}
.kb-help-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.kb-help-btn.active { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }

/* Help popover */
.kb-help-pop {
  position: fixed; z-index: 1400;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r);
  padding: .7rem .9rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.13);
  max-width: 300px;
  font-family: var(--font-mono); font-size: .64rem;
  color: var(--text); line-height: 1.6;
  opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
  transform: translateY(-4px);
}
.kb-help-pop.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Save row */
.kb-set-save-wrap {
  padding: .25rem 0 1.25rem;
}
.kb-set-save-wrap .kb-btn-primary {
  width: 100%; justify-content: center; padding: .95rem;
}

/* Accent button (name highlight) */
.kb-accent-btn {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; padding: .22rem .55rem;
  border: 1px solid var(--border); border-radius: 99px;
  background: none; color: var(--muted); cursor: pointer;
  transition: all .15s; white-space: nowrap; flex-shrink: 0;
}

/* Google connection card */
.kb-set-google-card {
  background: linear-gradient(135deg, rgba(66,133,244,.05), rgba(52,168,83,.03));
  border: 1px solid rgba(66,133,244,.18);
  border-radius: var(--r);
  padding: 1.1rem 1.25rem;
  margin-bottom: .75rem;
}

/* Danger zone */
.kb-set-danger-zone {
  padding: 1.1rem 1.25rem;
  background: rgba(192,64,64,.03);
  border: 1px solid rgba(192,64,64,.15);
  border-radius: var(--r);
  margin-top: .5rem;
}

/* Sticky header that holds both the dirty-bar and the jump-nav together */
.kb-set-sticky-hd {
  position: sticky; top: 0; z-index: 12;
  background: #fff;
  padding-bottom: 0;
}

/* Unsaved changes banner — slides down when dirty */
.kb-set-dirty-bar {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  overflow: hidden;
  max-height: 0; padding: 0 1.1rem; margin-bottom: 0;
  background: var(--amber-dim);
  border: 1px solid rgba(200,137,26,.3);
  border-radius: var(--r);
  transition: max-height .22s ease, padding .22s ease, margin .22s ease;
}
.kb-set-dirty-bar.show {
  max-height: 56px; padding: .55rem 1.1rem; margin-bottom: .5rem;
}
.kb-set-dirty-bar__label {
  flex: 1; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
  white-space: nowrap;
}
.kb-set-dirty-bar__discard {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .06em; color: var(--muted); background: none;
  border: none; cursor: pointer; padding: .25rem .4rem;
  text-decoration: underline; text-underline-offset: 2px;
  transition: color .15s;
}
.kb-set-dirty-bar__discard:hover { color: var(--ink); }
.kb-set-dirty-bar__save {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .35rem .9rem;
  background: var(--amber); color: #fff; border: none;
  border-radius: 99px; cursor: pointer;
  transition: opacity .15s;
  white-space: nowrap;
}
.kb-set-dirty-bar__save:hover { opacity: .88; }

/* Sub-section divider inside a settings card */
.kb-set-sub-hd {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.35rem 0 1rem;
}
.kb-set-sub-rule { flex: 1; height: 1px; background: var(--border); }
.kb-set-sub-label {
  font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* ── Student cards ─────────────────────────────────── */
/* ── Student card — redesigned ──────────────────────── */
.kb-sc-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: .45rem;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.kb-sc-card:hover {
  border-color: rgba(200,137,26,.4);
  box-shadow: 0 4px 18px rgba(200,137,26,.1);
  transform: translateY(-1px);
}
/* Left accent bar */
.kb-sc-card::before {
  content: ''; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber);
  border-radius: 3px 0 0 3px;
  opacity: .85;
}
.kb-sc-card.is-inactive { opacity: .5; filter: grayscale(.5); }
.kb-sc-card.is-inactive::before { background: var(--muted); opacity: .4; }
.kb-sc-card.is-inactive:hover {
  border-color: var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transform: none;
}

/* Avatar */
.kb-sc-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--amber-dim);
  border: 2px solid var(--amber-mid);
  color: var(--amber);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center;
  user-select: none;
  box-shadow: 0 0 0 3px var(--amber-dim);
}

/* Body */
.kb-sc-body  { flex: 1; min-width: 0; overflow: hidden; }
.kb-sc-top   { display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap; margin-bottom: .28rem; overflow: hidden; }
.kb-sc-name  { font-size: .92rem; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.kb-sc-badge {
  background: var(--amber-dim); color: var(--amber);
  border-radius: 99px; padding: .08rem .5rem;
  border: 1px solid rgba(200,137,26,.2);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap; flex-shrink: 0;
}
.kb-sc-badge-pause {
  font-size: .58rem; font-family: var(--font-mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: .08rem .5rem;
  white-space: nowrap; flex-shrink: 0;
}

/* Meta row — single line with dot separators */
.kb-sc-meta {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 0;
  overflow: hidden;
  font-size: .67rem; color: var(--muted); font-family: var(--font-mono);
}
.kb-sc-meta span { white-space: nowrap; }
.kb-sc-meta span:not(.kb-sc-dot) {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.kb-sc-meta .kb-sc-dot {
  margin: 0 .38rem; opacity: .35; font-size: .6rem; flex-shrink: 0;
}
.kb-sc-chip {
  font-size: .67rem; color: var(--text); font-family: var(--font-mono);
}

/* Card top row (clickable) */
.kb-sc-card-top {
  display: flex; align-items: center; gap: .85rem;
  cursor: pointer; user-select: none;
  padding: .8rem .95rem .8rem 1rem;
  transition: background .15s;
}
.kb-sc-card-top:hover { background: rgba(200,137,26,.03); }

/* Chevron */
.kb-sc-chevron {
  font-size: 1rem; color: var(--muted); flex-shrink: 0;
  transition: transform .25s cubic-bezier(.4,0,.2,1), color .15s;
  line-height: 1; margin-left: .25rem;
}
.kb-sc-chevron.open { transform: rotate(90deg); color: var(--amber); }

/* Expanded panel */
.kb-sc-expand {
  max-height: 0; overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.kb-sc-expand.open { max-height: 400px; }
.kb-sc-exp-inner {
  border-top: 1px solid var(--border);
  padding: .75rem 1rem .85rem 1rem;
  display: flex; flex-direction: column; gap: .45rem;
  margin-left: calc(44px + .85rem); /* align with body text */
}
.kb-sc-exp-row {
  display: flex; gap: .6rem; align-items: baseline;
  font-family: var(--font-mono); font-size: .67rem;
}
.kb-sc-exp-lbl {
  color: var(--muted); min-width: 90px; flex-shrink: 0;
  letter-spacing: .04em;
}
.kb-sc-exp-link {
  color: var(--amber); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px;
}
.kb-sc-exp-link:hover { text-decoration: underline; }
.kb-sc-exp-actions {
  display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap;
}

/* Card expanded state */
.kb-sc-card.expanded {
  border-color: rgba(200,137,26,.4);
  box-shadow: 0 4px 18px rgba(200,137,26,.1);
}

/* Actions */
.kb-sc-actions {
  display: flex; gap: .28rem; align-items: center; flex-shrink: 0; align-self: center;
}
.kb-sc-toggle-active, .kb-sc-edit, .kb-sc-del {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r); cursor: pointer;
  font-size: .78rem;
  transition: all .15s;
  opacity: .5;
}
.kb-sc-card-top:hover .kb-sc-toggle-active,
.kb-sc-card-top:hover .kb-sc-del { opacity: 1; }
.kb-sc-toggle-active { color: var(--muted); }
.kb-sc-toggle-active:hover { background: var(--amber-dim); color: var(--amber); border-color: rgba(200,137,26,.3); opacity:1; }
.kb-sc-del  { color: var(--error); opacity: .3; }   /* destructive: recessed until hover */
.kb-sc-del:hover  { background: rgba(192,64,64,.06); border-color: rgba(192,64,64,.4); opacity:1; }

/* Calendar color dot */
.kb-sc-color-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0; opacity: .85;
}

/* Notes indicator in meta row */
.kb-sc-note-dot {
  font-size: .56rem; letter-spacing: .05em;
  color: var(--muted); flex-shrink: 0;
  font-family: var(--font-mono);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: .02rem .32rem;
}

/* Portal/Reminder/Dashboard status chips in expanded panel */
.kb-sc-exp-status {
  display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem;
}
.kb-sc-exp-stat-chip {
  font-size: .56rem; font-family: var(--font-mono); letter-spacing: .05em;
  border-radius: 99px; padding: .08rem .42rem;
  color: var(--muted); background: var(--bg);
  border: 1px solid var(--border);
  opacity: .5;
}
.kb-sc-exp-stat-chip.on {
  color: var(--amber);
  background: var(--amber-dim);
  border-color: rgba(200,137,26,.25);
  opacity: 1;
}

/* Students list header */
.kb-sc-list-hd {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: .75rem;
}
.kb-sc-count {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 99px; padding: .2rem .6rem;
  flex-shrink: 0;
}

/* ── Student form: Meeting / Drive / Notizen tab panel ── */
.kb-sc-links {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.kb-sc-links-tabs {
  display: flex;
  background: rgba(14,14,14,.025);
}
.kb-sc-links-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .6rem .4rem;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.kb-sc-links-tab:not(:last-child) {
  border-right: 1px solid var(--border);
}
.kb-sc-links-tab:hover {
  color: var(--amber);
  background: rgba(200,137,26,.05);
}
.kb-sc-links-tab.active {
  color: var(--amber);
  background: rgba(200,137,26,.08);
  border-bottom-color: var(--amber);
}
.kb-sc-tab-emoji { font-size: .85rem; line-height: 1; }
.kb-sc-tab-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--amber);
  flex-shrink: 0;
}
.kb-sc-links-panel {
  padding: .85rem .85rem .95rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */

.kb-modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(14,14,14,.35);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: kbFadeIn .2s ease;
}

.kb-modal {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 2rem;
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: kbCardIn .3s ease;
}
.kb-modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.kb-modal-title  { font-family:var(--font-mono); font-size:1.1rem; color:var(--ink); font-weight:400; }
.kb-modal-close  { background:none; border:none; color:var(--muted); font-size:1.25rem; cursor:pointer; line-height:1; padding:.2rem; }
.kb-modal-close:hover { color:var(--ink); }

/* ══════════════════════════════════════════════════════
   ONBOARDING STEPS
   ══════════════════════════════════════════════════════ */

.kb-ob-step { display:none; animation:kbStepIn .35s ease both; }
.kb-ob-step.active { display:block; }

.kb-ob-progress { display:flex; gap:.4rem; margin-bottom:2rem; }
.kb-ob-dot {
  width: 8px; height: 8px; border-radius:50%;
  background: var(--border); transition: background var(--t-base);
}
.kb-ob-dot.done   { background: var(--amber); }
.kb-ob-dot.active { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-dim); }

/* ══════════════════════════════════════════════════════
   LOADING / SKELETON
   ══════════════════════════════════════════════════════ */

.kb-load-bar {
  width: 160px; height: 3px;
  background: rgba(200,137,26,.15); border-radius: 99px;
  overflow: hidden; margin: .75rem auto 0;
}
.kb-load-bar-inner {
  height: 100%; width: 45%;
  background: var(--amber); border-radius: 99px;
  animation: kbSlide 1.1s ease-in-out infinite;
}

.kb-skeleton {
  background: linear-gradient(90deg, var(--bg-light) 25%, var(--bg-mid) 50%, var(--bg-light) 75%);
  background-size: 200% 100%;
  animation: kbSkeleton 1.4s infinite;
  border-radius: var(--r);
}
@keyframes kbSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════
   RECURRING APPOINTMENTS
   ══════════════════════════════════════════════════════ */

.kb-recur-preview-row { display:flex; align-items:center; gap:.5rem; padding:.18rem 0; }
.kb-recur-del {
  background:none; border:none; color:var(--muted); font-size:.72rem;
  cursor:pointer; padding:.05rem .2rem; border-radius:3px; transition:color var(--t-fast);
}
.kb-recur-del:hover { color:var(--error); }

/* ══════════════════════════════════════════════════════
   NOTIFICATION TOAST
   ══════════════════════════════════════════════════════ */

#kb-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 9000;
  background: var(--ink); color: var(--bg);
  padding: .75rem 1.5rem; border-radius: 99px;
  font-size: .85rem; font-family: var(--font-sans);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
#kb-toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
#kb-toast.ok   { background: var(--success); }
#kb-toast.err  { background: var(--error); }
#kb-toast.warn { background: #b45309; }

/* Themed confirm dialog (kbConfirm) */
#kb-cd-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(14,14,14,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#kb-cd-overlay.show { opacity: 1; pointer-events: auto; }
.kb-cd-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  width: 100%; max-width: 384px; padding: 1.85rem 1.5rem 1.25rem;
  box-shadow: 0 24px 64px rgba(14,14,14,.24); text-align: center;
  transform: translateY(14px) scale(.97); transition: transform .2s cubic-bezier(.16,.84,.44,1);
}
#kb-cd-overlay.show .kb-cd-card { transform: none; }
.kb-cd-icon {
  width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; line-height: 1;
  background: rgba(200,137,26,.12); border: 1.5px solid rgba(200,137,26,.3); color: var(--accent, var(--amber, #c8891a));
}
.kb-cd-icon.danger {
  background: linear-gradient(145deg, #d35e5e, #c04040 60%, #a23232); border: none; color: #fff;
  box-shadow: 0 6px 16px rgba(192,64,64,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.kb-cd-title { font-family: var(--font-mono); font-size: 1rem; color: var(--ink); margin-bottom: .5rem; letter-spacing: -.01em; }
.kb-cd-msg { font-size: .85rem; color: var(--muted); line-height: 1.55; white-space: pre-line; margin-bottom: 1.4rem; }
.kb-cd-actions { display: flex; gap: .6rem; }
.kb-cd-btn {
  flex: 1; padding: .72rem 1rem; border-radius: var(--r);
  font-family: var(--font); font-size: .875rem; font-weight: 500; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  transition: background .15s, border-color .15s, filter .15s;
}
.kb-cd-cancel:hover { background: rgba(14,14,14,.04); }
.kb-cd-ok { background: var(--accent, var(--amber, #c8891a)); color: #fff; border-color: var(--accent, var(--amber, #c8891a)); }
.kb-cd-ok:hover { filter: brightness(1.08); }
.kb-cd-ok.danger { background: transparent; color: var(--error); border-color: rgba(192,64,64,.3); }
.kb-cd-ok.danger:hover { background: rgba(192,64,64,.08); border-color: var(--error); filter: none; }
/* Themed prompt input — matches .kb-field input, full width inside the dialog */
.kb-cd-input {
  width: 100%; box-sizing: border-box;
  margin-bottom: 1.4rem; padding: .72rem .85rem;
  background: var(--card, #fff); border: 1px solid var(--border); border-radius: var(--r);
  font-family: var(--font); font-size: .9rem; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.kb-cd-input::placeholder { color: var(--muted); opacity: .7; }
.kb-cd-input:focus {
  outline: none; border-color: var(--accent, var(--amber, #c8891a));
  box-shadow: 0 0 0 3px rgba(200,137,26,.12);
}
@keyframes kb-cd-shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.kb-cd-shake {
  animation: kb-cd-shake .35s ease;
  border-color: #c0392b !important;
}

/* ══════════════════════════════════════════════════════
   CALENDAR — extras
   ══════════════════════════════════════════════════════ */

/* Line indicator for 4+ events (replaces dots) */
.kb-cal-line {
  position: absolute; bottom: 5px; left: 22%; right: 22%;
  height: 2px; border-radius: 1px;
  background: var(--amber); opacity: .75;
}
.kb-cal-day.selected .kb-cal-line { background: #fff; opacity: 1; }
.kb-cal-day.past    .kb-cal-line,
.kb-cal-day.weekend .kb-cal-line  { opacity: .2; }

/* Clickable off-day in weekly modal header */
.kb-cal-wd.off-day { opacity: .38; }

/* ══════════════════════════════════════════════════════
   WEEKLY SCHEDULE — reference-parity styles
   ══════════════════════════════════════════════════════ */

/* Left panel weekly items (reference style) */
.kb-pw-wk-title {
  font-family: var(--font-mono); font-size: .52rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: .35rem; opacity: .8;
}
.kb-pw-wk-empty { font-size: .65rem; color: var(--ink); opacity: .55; padding: .15rem 0; }
.kb-pw-wk-item {
  display: grid; grid-template-columns: auto 1fr;
  gap: .15rem .5rem; padding: .38rem 0;
  border-bottom: 1px solid rgba(14,14,14,.08);
  cursor: pointer;
}
.kb-pw-wk-item:last-child { border-bottom: none; }
.kb-pw-wk-item--active {
  background: rgba(200,137,26,.12); border-radius: 6px;
  padding: .3rem .4rem; border-bottom: none !important;
  box-shadow: inset 2px 0 0 var(--amber);
}
.kb-pw-wk-item--active .kb-pw-wk-day  { color: var(--amber); }
.kb-pw-wk-item--active .kb-pw-wk-time { color: var(--amber); }
.kb-pw-wk-item--clickable { border-radius: 6px; transition: background .18s; }
.kb-pw-wk-item--clickable:hover { background: rgba(200,137,26,.07); }
.kb-pw-wk-day  {
  font-family: var(--font-mono); font-size: .6rem; color: var(--ink);
  opacity: .75; grid-row: span 2; padding-top: .05rem; min-width: 2.8rem;
}
.kb-pw-wk-time { font-size: .76rem; color: var(--ink); font-weight: 600; line-height: 1.2; }
.kb-pw-wk-who  { font-size: .68rem; color: var(--amber); font-weight: 500; line-height: 1.2; }
.kb-pw-wk-sep  { margin-top: .6rem; margin-bottom: .35rem; }

/* Tentative items in left panel */
.kb-pw-wk-item--tentative { opacity: .72; }
.kb-pw-wk-item--tentative .kb-pw-wk-time { color: var(--muted); }
.kb-pw-wk-tentative-tag {
  font-family: var(--font-mono); font-size: .48rem; color: var(--amber);
  opacity: .65; grid-column: 2; letter-spacing: .05em; margin-top: .05rem;
}
.kb-pw-wk-pending-tag {
  font-family: var(--font-mono); font-size: .48rem; color: #c0863a;
  grid-column: 2; letter-spacing: .05em; margin-top: .05rem; font-weight: 600;
}
.kb-pw-wk-confirm-btn {
  grid-column: 2; margin-top: .2rem; padding: .18rem .45rem;
  background: rgba(58,143,92,.1); border: 1px solid rgba(58,143,92,.3);
  border-radius: 3px; color: #3a8f5c;
  font-family: var(--font-mono); font-size: .52rem; cursor: pointer;
  transition: all .15s; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .15rem;
}
.kb-pw-wk-confirm-btn:hover { background: rgba(58,143,92,.22); border-color: rgba(58,143,92,.55); }
.kb-pw-wk-del-tent-btn {
  background: none; border: 1px solid rgba(192,64,64,.22); border-radius: 3px;
  padding: .16rem .38rem; color: var(--error);
  font-family: var(--font-mono); font-size: .52rem; cursor: pointer;
  opacity: .55; transition: all .15s;
  display: inline-flex; align-items: center;
}
.kb-pw-wk-del-tent-btn:hover { opacity: 1; background: rgba(192,64,64,.08); border-color: rgba(192,64,64,.45); }

/* Home overlay footer */
.kb-home-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(14,14,14,.07);
  padding-top: .75rem !important;
}
.kb-home-footer-actions {
  display: flex; align-items: center; gap: .4rem;
}
.kb-home-footer-btn {
  display: inline-flex; align-items: center; gap: .38rem;
  background: none;
  border: 1px solid rgba(14,14,14,.13);
  border-radius: 7px;
  padding: .32rem .65rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .04em;
  color: var(--ink);
  opacity: .55;
  cursor: pointer;
  transition: opacity .18s, border-color .18s, background .18s;
}
.kb-home-footer-btn:hover {
  opacity: 1;
  border-color: rgba(14,14,14,.28);
  background: rgba(14,14,14,.04);
}
.kb-home-footer-btn--logout:hover {
  border-color: rgba(192,64,64,.35);
  background: rgba(192,64,64,.05);
  color: #c04040;
  opacity: 1;
}

/* Earnings row + toggle in left panel footer */
.kb-earnings-footer-row {
  display: flex; align-items: center; justify-content: space-between;
}
.kb-earnings-toggle-btn {
  background: none; border: 1px solid rgba(14,14,14,.14); border-radius: 6px;
  padding: .28rem .38rem; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); opacity: .38; cursor: pointer; transition: all .2s;
}
.kb-earnings-toggle-btn.active { border-color: var(--amber); color: var(--amber); opacity: 1; }
.kb-earnings-toggle-btn:hover  { opacity: .7; }

#kb-earnings-panel {
  background: rgba(200,137,26,.04); border: 1px solid rgba(200,137,26,.18);
  border-radius: var(--r); padding: .7rem .75rem .65rem; margin-bottom: .5rem;
}

/* shared: used also inside modals */
.kb-earn-row-ref {
  display: flex; justify-content: space-between; align-items: baseline; padding: .2rem 0;
}
.kb-earn-label-ref {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .1em;
  color: var(--ink); opacity: .5; text-transform: uppercase;
}
.kb-earn-val-ref {
  font-family: var(--font-mono); color: var(--amber); font-weight: 600; font-size: .72rem;
  text-align: right; width: 4.5rem; flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* ── Week stats (compact, side-by-side) ── */
.kb-earn-wk-row {
  display: flex; align-items: center; gap: .3rem;
  margin-bottom: .55rem;
}
.kb-earn-wk-stat { display: flex; flex-direction: column; align-items: center; flex: 1; }
.kb-earn-wk-val {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  color: var(--amber); opacity: .65; font-variant-numeric: tabular-nums;
}
.kb-earn-wk-lbl {
  font-family: var(--font-mono); font-size: .46rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink); opacity: .3; margin-top: .1rem;
}
.kb-earn-wk-next .kb-earn-wk-val    { opacity: .4; }
.kb-earn-wk-bisheute .kb-earn-wk-val { opacity: .85; }
.kb-earn-wk-sep {
  color: var(--muted); opacity: .25; font-size: .55rem; flex-shrink: 0;
}

/* ── Month box (amber-tinted card) ── */
.kb-earn-month-box {
  background: rgba(200,137,26,.07); border: 1px solid rgba(200,137,26,.2);
  border-radius: 6px; padding: .25rem .45rem .2rem; margin-bottom: .5rem;
}
.kb-earn-month-btn {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; padding: .15rem 0;
}
.kb-earn-month-btn .kb-earn-label-ref { opacity: .85; font-size: .57rem; }
.kb-earn-month-btn .kb-earn-val-ref   { font-size: .8rem; }

.kb-earn-tent-row { padding: .1rem 0; }
.kb-earn-tent-row .kb-earn-label-ref { font-size: .5rem; letter-spacing: .1em; opacity: .45; }
.kb-earn-tent-row .kb-earn-val-ref   { font-size: .68rem; opacity: .6; }

/* ── Hero GESAMT ── */
.kb-earn-hero-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  padding: .45rem .25rem .2rem;
  border-top: 1px solid rgba(200,137,26,.22);
  border-radius: 4px; transition: background .15s;
}
.kb-earn-hero-btn:hover { background: rgba(200,137,26,.08); }
.kb-earn-hero-val {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
  color: var(--amber); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kb-earn-hero-lbl {
  font-family: var(--font-mono); font-size: .47rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber); opacity: .45; margin-top: .25rem;
}

/* Gesamt detail modal — tentative section */
.kb-ed-tent-section thead { display: none; }
.kb-ed-tent-row td { opacity: .6; }
.kb-ed-tent-section tfoot .kb-ed-total-row td { opacity: .55; }
.kb-ed-grand-divider {
  height: 1px; background: var(--amber); opacity: .35; margin: .5rem 0;
}
.kb-ed-grand-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .45rem .4rem .2rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  color: var(--amber);
}

/* ══════════════════════════════════════════════════════
   WEEK CALENDAR MODAL — reference-parity styles
   ══════════════════════════════════════════════════════ */

#kb-wk-cal-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.72); backdrop-filter: blur(5px);
  z-index: 2000; align-items: center; justify-content: center; padding: 1.2rem;
  display: flex; opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
#kb-wk-cal-overlay.open { opacity: 1; pointer-events: auto; }

.kb-wk-cal-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: 100%; max-width: 1100px; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.kb-wk-cal-hdr {
  display: flex; align-items: center; gap: .5rem;
  padding: 1rem 1.4rem .8rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.kb-wk-cal-nav {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: .28rem .6rem; font-family: var(--font-mono); font-size: .78rem;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.kb-wk-cal-nav:hover { border-color: var(--amber); color: var(--amber); }
.kb-wk-cal-title-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: .3rem; position: relative;
}
.kb-wk-cal-title {
  font-family: var(--font-mono); font-size: .92rem;
  color: var(--text); letter-spacing: .04em; cursor: pointer; user-select: none;
}
.kb-wk-cal-title:hover { color: var(--amber); }
.kb-wk-cal-kw { color: var(--amber); margin-right: .5rem; }
.kb-wk-cal-close {
  margin-left: auto; background: none; border: none; font-size: 1.1rem;
  color: var(--muted); cursor: pointer; padding: .2rem .4rem; transition: color .15s;
}
.kb-wk-cal-close:hover { color: var(--text); }
.kb-wk-cal-body { overflow-y: auto; flex: 1; padding: 1rem 1.4rem 1.4rem; }
.kb-wk-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: .6rem; }
.kb-wk-cal-day        { display: flex; flex-direction: column; gap: .4rem; }
.kb-wk-cal-day--off   { opacity: .45; }
.kb-wk-cal-day-hdr {
  text-align: center; padding: .35rem .2rem .3rem; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer !important;
  transition: background .15s, border-color .15s;
}
.kb-wk-cal-day-hdr.is-today { background: rgba(200,137,26,.1); border-color: rgba(200,137,26,.3); }
.kb-wk-cal-day-hdr:hover { background: rgba(200,137,26,.12) !important; border-color: rgba(200,137,26,.4) !important; }
.kb-wk-cal-day-hdr:hover .kb-wk-cal-day-name,
.kb-wk-cal-day-hdr:hover .kb-wk-cal-day-num { color: var(--amber); }
.kb-wk-cal-day-name {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em;
  color: var(--muted); display: block;
}
.kb-wk-cal-day-num {
  font-family: var(--font-mono); font-size: 1.15rem;
  font-weight: 500; color: var(--text); display: block; line-height: 1.2;
}
.kb-wk-cal-day-hdr.is-today .kb-wk-cal-day-name,
.kb-wk-cal-day-hdr.is-today .kb-wk-cal-day-num { color: var(--amber); }

.kb-wk-cal-appt {
  border-radius: 6px; padding: .4rem .5rem;
  border-left: 2px solid var(--amber); background: rgba(200,137,26,.06); cursor: default;
}
.kb-wk-cal-appt.is-tent {
  border-left: 2px dashed rgba(120,120,120,.5); background: rgba(80,80,80,.05);
}
.kb-wk-cal-appt-time {
  font-family: var(--font-mono); font-size: .62rem;
  color: var(--amber); display: block; line-height: 1.4;
}
.kb-wk-cal-appt.is-tent .kb-wk-cal-appt-time { color: var(--muted); }
.kb-wk-cal-appt-name {
  font-family: var(--font-mono); font-size: .75rem;
  font-weight: 500; color: var(--text); display: block; line-height: 1.3;
}
.kb-wk-cal-appt-dur { font-size: .58rem; color: var(--muted); display: block; margin-top: .1rem; }
.kb-wk-cal-appt--click { cursor: pointer; transition: background .15s, border-left-color .15s; }
.kb-wk-cal-appt--click:hover { background: rgba(200,137,26,.14); border-left-color: var(--amber); }
.kb-wk-cal-appt.is-tent.kb-wk-cal-appt--click:hover { background: rgba(80,80,80,.1); border-left-color: rgba(120,120,120,.7); }
.kb-wk-cal-day:not(.kb-wk-cal-day--off) { cursor: pointer; }
.kb-wk-cal-empty {
  text-align: center; color: var(--border); font-size: 1.2rem;
  padding: 1.2rem 0; letter-spacing: .1em;
}
.kb-wk-cal-loading {
  text-align: center; color: var(--muted); font-family: var(--font-mono);
  font-size: .78rem; padding: 2rem; grid-column: 1/-1;
}
/* ── Woche / Monat view toggle ── */
.kb-wk-view-toggle {
  display: flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;
}
.kb-wk-vbtn {
  background: none; border: none; padding: .28rem .65rem;
  font-family: var(--font-mono); font-size: .68rem; cursor: pointer;
  color: var(--muted); transition: background .15s, color .15s;
}
.kb-wk-vbtn.active  { background: var(--amber); color: #fff; }
.kb-wk-vbtn:hover:not(.active) { background: rgba(200,137,26,.1); color: var(--amber); }

/* ── Month view grid ── */
.kb-wk-mv-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.kb-wk-mv-hdr {
  background: var(--card); padding: .35rem 0;
  text-align: center; font-family: var(--font-mono);
  font-size: .58rem; letter-spacing: .08em;
  color: var(--muted); text-transform: uppercase;
}
.kb-wk-mv-cell {
  background: var(--card); min-height: 80px;
  padding: .3rem .35rem .35rem; display: flex;
  flex-direction: column; gap: .18rem;
}
.kb-wk-mv-empty { background: var(--bg); min-height: 80px; }
.kb-wk-mv-cell.is-past  { background: var(--bg); }
.kb-wk-mv-cell.is-off   { opacity: .45; }
.kb-wk-mv-cell.is-today { background: rgba(200,137,26,.07); outline: 1px solid rgba(200,137,26,.35); }
.kb-wk-mv-num {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  color: var(--muted); line-height: 1; margin-bottom: .1rem;
}
.kb-wk-mv-cell.is-today .kb-wk-mv-num { color: var(--amber); font-weight: 700; }
.kb-wk-mv-appt {
  font-family: var(--font-sans); font-size: .65rem;
  padding: .15rem .3rem; border-radius: 4px;
  cursor: pointer; display: flex; align-items: baseline;
  gap: .25rem; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; line-height: 1.3;
  transition: opacity .12s;
}
.kb-wk-mv-appt:hover { opacity: .75; }
.kb-wk-mv-appt--conf {
  background: rgba(200,137,26,.12); color: var(--text);
}
.kb-wk-mv-appt--tent {
  background: rgba(120,120,120,.1); color: var(--muted);
}
.kb-wk-mv-t {
  font-family: var(--font-mono); font-size: .6rem;
  color: var(--amber); flex-shrink: 0; font-weight: 600;
}
.kb-wk-mv-appt--tent .kb-wk-mv-t { color: var(--muted); }
.kb-wk-mv-cell--clickable { cursor: pointer; }
.kb-wk-mv-cell--clickable:hover { background: rgba(200,137,26,.05) !important; }

.kb-wk-cal-today-btn {
  background: none; border: 1px solid rgba(200,137,26,.35); border-radius: 6px;
  padding: .28rem .7rem; font-family: var(--font-mono); font-size: .72rem;
  color: var(--amber); cursor: pointer; transition: all .15s;
}
.kb-wk-cal-today-btn:hover { background: rgba(200,137,26,.1); }
.kb-wk-cal-tz {
  display: flex; align-items: center; gap: .18rem;
  background: var(--bg-mid); border: 1px solid var(--border); border-radius: 8px;
  padding: .18rem .22rem;
}
.kb-wk-cal-tz-btn {
  background: none; border: none; border-radius: 5px; padding: .22rem .5rem;
  font-family: var(--font-mono); font-size: .65rem; color: var(--muted);
  cursor: pointer; transition: all .15s; line-height: 1;
}
.kb-wk-cal-tz-btn.active { background: var(--amber); color: #fff; }
.kb-wk-cal-tz-btn:not(.active):hover { color: var(--text); }

/* Month picker popover in week calendar */
.kb-wk-month-picker {
  position: absolute; top: calc(100% + .5rem); left: 50%;
  transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: .7rem; z-index: 10; display: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.18); min-width: 220px;
}
.kb-wk-month-picker.open { display: block; }
.kb-wk-month-picker-yr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .55rem; gap: .4rem;
}
.kb-wk-month-picker-yr span {
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--text);
}
.kb-wk-month-picker-yr button {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: .15rem .45rem; font-family: var(--font-mono); font-size: .72rem;
  color: var(--muted); cursor: pointer; transition: all .15s;
}
.kb-wk-month-picker-yr button:hover { border-color: var(--amber); color: var(--amber); }
.kb-wk-month-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .3rem; }
.kb-wk-month-pill {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  padding: .3rem .2rem; font-family: var(--font-mono); font-size: .65rem;
  color: var(--muted); cursor: pointer; transition: all .15s; text-align: center;
}
.kb-wk-month-pill:hover  { border-color: var(--amber); color: var(--amber); }
.kb-wk-month-pill.is-cur { border-color: var(--amber); color: var(--amber); background: rgba(200,137,26,.08); }

/* ══════════════════════════════════════════════════════
   STUDENT PICKER OVERLAY (SPU — 3D Carousel)
   ══════════════════════════════════════════════════════ */

#kb-spu-overlay {
  position: fixed; inset: 0;
  background: rgba(249,248,245,.92); backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center; z-index: 2200;
}
#kb-spu-overlay.open { display: flex; animation: kbSpuFadeIn .22s ease both; }
@keyframes kbSpuFadeIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }

.kb-spu-box {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  padding: 2.5rem 2rem 2rem; max-width: 700px; width: 100%;
}
.kb-spu-eyebrow {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .25em;
  text-transform: uppercase; color: var(--amber);
}
.kb-spu-title { font-size: 1.75rem; font-weight: 700; color: var(--ink); text-align: center; line-height: 1.15; }
.kb-spu-title em { color: var(--amber); font-style: normal; }

/* SPU search */
.kb-spu-search {
  display: flex; align-items: center; gap: .4rem;
  margin: .55rem auto 0; width: fit-content; max-width: 240px;
  border-bottom: 1.5px solid var(--border); padding-bottom: .2rem;
  transition: border-color .18s;
}
.kb-spu-search:focus-within { border-color: var(--amber); }
.kb-spu-search-icon { font-size: .95rem; color: var(--muted); line-height: 1; user-select: none; }
#kb-spu-q {
  border: none; outline: none; background: transparent;
  font-size: .85rem; color: var(--ink); width: 160px;
  font-family: var(--font); caret-color: var(--amber);
}
#kb-spu-q::placeholder { color: var(--muted); }

.kb-spu-scene {
  perspective: 900px; perspective-origin: 50% 50%;
  width: 100%; height: 300px; display: flex; align-items: center; justify-content: center;
}
.kb-spu-carousel {
  width: 0; height: 200px; position: relative;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.kb-spu-card {
  position: absolute; width: 160px; left: -80px; top: 0; height: 200px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; cursor: pointer; backface-visibility: hidden; padding: 1.2rem .75rem;
  transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .4s ease, border-color .3s, box-shadow .3s;
}
.kb-spu-card.is-front {
  border-color: var(--amber);
  box-shadow: 0 4px 32px rgba(200,137,26,.18), 0 1px 4px rgba(0,0,0,.06);
}
.kb-spu-card:not(.is-front) { box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.kb-spu-card:not(.is-front):hover { border-color: rgba(200,137,26,.4); }
.kb-spu-fig    { width: 72px; height: 72px; object-fit: contain; }
.kb-spu-name   { font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-top: .3rem; }
.kb-spu-course { font-size: .67rem; color: var(--muted); font-family: var(--font-mono); letter-spacing: .05em; }

.kb-spu-nav { display: flex; align-items: center; gap: 1.5rem; }
.kb-spu-nav-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 40px; height: 40px; color: var(--ink); font-size: 1.2rem; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.kb-spu-nav-btn:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }
.kb-spu-counter { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); min-width: 48px; text-align: center; }

.kb-spu-actions { display: flex; flex-direction: column; align-items: center; gap: .55rem; margin-top: .2rem; }
.kb-spu-select-btn {
  background: var(--amber); color: #fff; border: none; border-radius: var(--r);
  padding: .7rem 2.4rem; font-weight: 600; font-size: .88rem; cursor: pointer;
  transition: opacity .15s, transform .1s; letter-spacing: .03em;
}
.kb-spu-select-btn:hover { opacity: .88; transform: translateY(-1px); }
.kb-spu-cancel-btn {
  background: none; border: none; color: var(--muted); font-size: .75rem;
  cursor: pointer; padding: .3rem; transition: color .15s;
}
.kb-spu-cancel-btn:hover { color: var(--ink); }

/* ══════════════════════════════════════════════════════
   EARNINGS DETAIL MODAL
   ══════════════════════════════════════════════════════ */

#kb-earnings-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.72); backdrop-filter: blur(4px);
  z-index: 3000; display: none; align-items: center; justify-content: center;
}
#kb-earnings-detail-overlay.open { display: flex; }
.kb-ed-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: min(540px,96vw); max-height: 80vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.kb-ed-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem .7rem; border-bottom: 1px solid var(--border);
}
.kb-ed-title { font-family: var(--font-mono); font-size: .75rem; color: var(--amber); letter-spacing: .08em; }
.kb-ed-close {
  background: none; border: none; color: var(--muted); font-size: 1.1rem; cursor: pointer;
  padding: .1rem .4rem; border-radius: 4px; transition: color .15s;
}
.kb-ed-close:hover { color: var(--ink); }
.kb-ed-body { overflow-y: auto; padding: .8rem 1.1rem 1rem; flex: 1; }
.kb-ed-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-family: var(--font-mono); font-size: .62rem;
}
.kb-ed-table td, .kb-ed-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ed-table th {
  color: var(--muted); font-weight: 400; letter-spacing: .07em; text-align: left;
  padding: .35rem .4rem; border-bottom: 1px solid var(--border);
}
.kb-ed-table th:last-child, .kb-ed-table td:last-child { text-align: right; }
.kb-ed-table td { padding: .32rem .4rem; color: var(--text); border-bottom: 1px solid rgba(0,0,0,.04); }
.kb-ed-table tr:last-child td { border-bottom: none; }
.kb-ed-table .kb-ed-total-row td {
  border-top: 1px solid var(--border); padding-top: .6rem;
  color: var(--amber); font-weight: 600;
}
.kb-ed-loading {
  text-align: center; padding: 2rem; color: var(--muted);
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .06em;
}

/* ── Receipt button inside Abrechnung header ───────────── */
.kb-ed-receipt-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--amber); font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .04em; padding: .22rem .55rem; cursor: pointer; transition: all .15s;
}
.kb-ed-receipt-btn:hover { border-color: var(--amber); background: var(--amber-dim); }

/* ── Receipt (Zahlungsbeleg) overlay ───────────────────── */
#kb-receipt-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.72); backdrop-filter: blur(4px);
  z-index: 3500; display: none; align-items: center; justify-content: center;
}
.kb-rc-box {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: min(940px, 96vw); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.kb-rc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem .7rem; border-bottom: 1px solid var(--border);
}
.kb-rc-title { font-family: var(--font-mono); font-size: .75rem; color: var(--amber); letter-spacing: .08em; }
.kb-rc-body { display: flex; flex: 1; min-height: 0; }
.kb-rc-pane { overflow-y: auto; padding: 1rem 1.1rem; }
.kb-rc-pane-config { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); }
.kb-rc-pane-preview { flex: 1; background: #f1f1ee; }
.kb-rc-monthnav {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .6rem;
}
.kb-rc-monthnav button {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer;
  padding: .15rem .55rem; transition: all .15s;
}
.kb-rc-monthnav button:hover { border-color: var(--amber); color: var(--amber); }
.kb-rc-monthnav span {
  font-family: var(--font-mono); font-size: .72rem; color: var(--ink); letter-spacing: .04em;
}
.kb-rc-month-center { display: flex; align-items: center; justify-content: center; gap: .4rem; }
.kb-rc-addmonth {
  background: none; border: 1px solid var(--amber); border-radius: 5px;
  color: var(--amber); font-size: .8rem; line-height: 1; cursor: pointer;
  padding: .1rem .4rem; transition: all .15s;
}
.kb-rc-addmonth:hover:not(:disabled) { background: var(--amber); color: #fff; }
.kb-rc-addmonth:disabled { opacity: .5; cursor: default; }

/* Month group subheader (shown only when 2+ months are on the receipt) */
.kb-rc-grp {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin: .55rem 0 .1rem;
}
.kb-rc-grp:first-child { margin-top: 0; }
.kb-rc-grp-lbl {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.kb-rc-grp-del {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .7rem; line-height: 1; padding: .1rem .25rem; border-radius: 4px;
  transition: color .15s, background .15s;
}
.kb-rc-grp-del:hover { color: var(--error); background: rgba(0,0,0,.04); }
.kb-rc-hint { font-size: .68rem; color: var(--muted); margin: 0 0 .7rem; line-height: 1.4; }
.kb-rc-list { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.kb-rc-empty { color: var(--muted); font-family: var(--font-mono); font-size: .65rem; padding: .6rem 0; }
.kb-rc-item {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .35rem .45rem; border: 1px solid var(--border); border-radius: 6px;
  transition: border-color .15s;
}
.kb-rc-item:hover { border-color: var(--amber); }
.kb-rc-item input { accent-color: var(--amber); flex-shrink: 0; }
.kb-rc-item-txt { flex: 1; font-size: .7rem; color: var(--text); }
.kb-rc-item-amt { font-family: var(--font-mono); font-size: .68rem; color: var(--amber); white-space: nowrap; }
.kb-rc-sum {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .6rem; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .8rem; color: var(--amber); font-weight: 600;
}

/* Issued-receipts history list */
.kb-rc-history { margin-top: 1rem; }
.kb-rc-hist-head {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .07em;
  color: var(--muted); text-transform: uppercase; margin-bottom: .45rem;
}
.kb-rc-hist-list { display: flex; flex-direction: column; gap: .25rem; }
.kb-rc-hist-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 6px;
}
.kb-rc-hist-num { font-family: var(--font-mono); font-size: .68rem; color: var(--amber); flex-shrink: 0; }
.kb-rc-hist-meta { flex: 1; font-size: .66rem; color: var(--muted); }
.kb-rc-hist-del {
  background: none; border: none; cursor: pointer; font-size: .8rem;
  padding: .1rem .3rem; border-radius: 4px; opacity: .6; transition: opacity .15s, background .15s;
}
.kb-rc-hist-del:hover { opacity: 1; background: var(--amber-dim); }

/* Pending payments (teacher) */
#kb-pending-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.72); backdrop-filter: blur(4px);
  z-index: 3500; display: none; align-items: center; justify-content: center;
}
.kb-pp-item {
  border: 1px solid var(--border); border-radius: 8px; padding: .7rem .8rem; margin-bottom: .6rem;
}
.kb-pp-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.kb-pp-name { font-weight: 600; color: var(--ink); font-size: .9rem; }
.kb-pp-amt { font-family: var(--font-mono); color: var(--amber); font-size: .85rem; white-space: nowrap; }
.kb-pp-meta { color: var(--muted); font-size: .72rem; margin-top: .2rem; }
.kb-pp-claimed { display: inline-block; margin-top: .35rem; font-size: .68rem; color: #3a8f5c; font-weight: 600; }
.kb-pp-claimed.no { color: var(--muted); font-weight: 400; }
.kb-pp-actions { display: flex; gap: .5rem; margin-top: .6rem; }
.kb-pp-btn {
  flex: 1; border: 1px solid var(--border); border-radius: 7px; padding: .4rem .6rem;
  cursor: pointer; font-size: .76rem; background: none; color: var(--ink); transition: all .15s;
}
.kb-pp-btn:disabled { opacity: .5; cursor: default; }
.kb-pp-btn.confirm { background: var(--amber); border-color: var(--amber); color: #1a1a1a; font-weight: 600; }
.kb-pp-btn.confirm:hover:not(:disabled) { filter: brightness(1.06); }
.kb-pp-btn.reject:hover:not(:disabled) { border-color: var(--error); color: var(--error); }

/* The printable paper document */
.kb-rc-doc {
  background: #fff; color: #1c1c1c; max-width: 640px; margin: 0 auto;
  border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.16);
  font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.55;
  overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.kb-rc-band  { height: 6px; width: 100%; background: #c8891a; }
.kb-rc-inner { padding: 2.2rem 2.5rem 2.4rem; }
.kb-rc-head  { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; margin-bottom: 1.1rem; }
.kb-rc-brand-name { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: #1a1a1a; line-height: 1.1; }
.kb-rc-brand-sub  { font-size: 11.5px; color: #8a8a8a; margin-top: .3rem; letter-spacing: .02em; }
.kb-rc-eyebrow    { font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-align: right; }
.kb-rc-rule  { height: 1px; background: #ededed; margin: 0 0 1.3rem; }
.kb-rc-cols  { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.4rem; }
.kb-rc-block { font-size: 12.5px; color: #333; }
.kb-rc-block-label { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; color: #b3b3b3; text-transform: uppercase; margin-bottom: .35rem; }
/* Beleg-Nr / Datum — label left, value right, aligned */
.kb-rc-num   { min-width: 190px; }
.kb-rc-numrow { display: flex; justify-content: space-between; gap: 1.2rem; font-size: 12px; line-height: 1.7; }
.kb-rc-numrow span { color: #aaa; }
.kb-rc-numrow b    { color: #333; font-weight: 600; }
.kb-rc-to-name   { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: .12rem; }
.kb-rc-rec-lines { font-size: 12px; color: #666; }
.kb-rc-table { width: 100%; border-collapse: collapse; margin-bottom: .2rem; }
.kb-rc-table thead tr { background: #c8891a; }
.kb-rc-table th { text-align: left; font-size: 10px; color: #fff; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 8px 10px; }
.kb-rc-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; font-size: 12.5px; }
.kb-rc-table tbody tr:nth-child(even) { background: #faf7f1; }
.kb-rc-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 1.4rem; padding: .8rem 10px 0; margin-bottom: 1.3rem; border-top: 2px solid #1a1a1a; }
.kb-rc-total-lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #888; }
.kb-rc-total-val { font-size: 19px; font-weight: 700; }
.kb-rc-note { font-size: 12.5px; color: #555; margin-bottom: 1.4rem; font-style: italic; }
/* Payment details — discreet, label column + aligned value lines */
.kb-rc-pay { margin-bottom: 1.6rem; }
.kb-rc-pay-hd { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: #bdbdbd; text-transform: uppercase; margin-bottom: .55rem; }
.kb-rc-pay-row { display: flex; gap: 1rem; font-size: 11.5px; line-height: 1.65; margin-bottom: .4rem; }
.kb-rc-pay-row:last-child { margin-bottom: 0; }
.kb-rc-pay-k { flex: 0 0 118px; font-weight: 600; color: #555; }
.kb-rc-pay-v { flex: 1; color: #9a9a9a; }
.kb-rc-sign { margin-top: 1.6rem; font-size: 11px; color: #999; }
.kb-rc-sign span { display: block; width: 200px; border-top: 1px solid #bbb; margin-bottom: 4px; }

/* ── Plan / Abo block modal ───────────────────────────── */
.kb-plan-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(10,12,18,.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  animation: kbFadeIn .25s ease;
}
.kb-plan-card {
  background: var(--card, #fff); border: 1px solid var(--border, #e5e5e5);
  border-radius: 16px; max-width: 420px; width: 100%;
  padding: 2rem 1.8rem 1.7rem; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.32);
}
.kb-plan-icon  { font-size: 2rem; margin-bottom: .6rem; }
.kb-plan-title { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin-bottom: .7rem; }
.kb-plan-msg   { font-size: .92rem; color: var(--text); line-height: 1.6; margin: 0 0 1.4rem; }
.kb-plan-btn   {
  background: var(--amber); border: none; color: #1a1a1a; font-weight: 600;
  font-family: var(--font-mono); font-size: .85rem; padding: .6rem 1.5rem;
  border-radius: 9px; cursor: pointer; transition: filter .15s;
}
.kb-plan-btn:hover { filter: brightness(1.06); }

/* ── Plan-gated (locked) controls + Pro pill ───────────── */
.kb-plan-locked {
  opacity: .5;
  filter: grayscale(.4);
  position: relative;
}
.kb-plan-locked,
.kb-plan-locked * { cursor: not-allowed !important; }
.kb-plan-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .03em; line-height: 1;
  color: var(--amber); background: rgba(214,158,46,.12);
  border: 1px solid rgba(214,158,46,.35); border-radius: 999px;
  padding: .18rem .5rem; margin-left: .4rem; vertical-align: middle;
  white-space: nowrap;
}
/* Chip variant: a locked toggle-chip stays dimmed but still receives the click (for the upsell toast) */
.kb-sc-toggle-chip.kb-plan-locked,
.kb-home-icon-pill.kb-plan-locked { opacity: .45; filter: grayscale(.5); }
.kb-sc-toggle-chip.kb-plan-locked,
.kb-sc-toggle-chip.kb-plan-locked *,
.kb-home-icon-pill.kb-plan-locked,
.kb-home-icon-pill.kb-plan-locked * { cursor: pointer !important; }

/* ── Super-admin entry pill (own line, above Einstellungen) ── */
.kb-admin-entry {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: .3rem;
  margin-bottom: .6rem;
  background: var(--ink, #1a1a1a); color: #fff; border: none;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  padding: .45rem .8rem; border-radius: 8px; cursor: pointer; opacity: .55;
  box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: opacity .15s;
}
.kb-admin-entry:hover { opacity: 1; }

/* ── Super-admin panel ─────────────────────────────────── */
.kb-admin-overlay {
  position: fixed; inset: 0; z-index: 4200;
  background: rgba(14,14,14,.5); backdrop-filter: blur(8px) saturate(1.4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 3.5vh 1rem 3rem; overflow-y: auto; animation: kbFadeIn .18s ease;
}
.kb-admin-card {
  background: #fefefe; border: 1px solid rgba(14,14,14,.09);
  border-radius: 20px; width: 100%; max-width: 640px; margin: auto;
  padding: 1.6rem 1.75rem 1.75rem;
  box-shadow: 0 40px 100px rgba(14,14,14,.18), 0 6px 20px rgba(14,14,14,.07);
}
/* Header */
.kb-admin-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid rgba(14,14,14,.07);
}
.kb-admin-title {
  font-family: var(--font-mono); font-size: .92rem; font-weight: 500;
  color: var(--ink); letter-spacing: -.01em;
}
.kb-admin-close {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-alt); font-size: .85rem; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .14s; flex-shrink: 0;
}
.kb-admin-close:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Summary stat chips */
.kb-admin-summary { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; }
.kb-admin-chip {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--bg-alt); border: 1px solid var(--border);
  color: var(--muted); display: flex; align-items: center; gap: .3rem;
}
.kb-admin-chip b   { font-weight: 700; color: var(--ink); font-size: .68rem; }
.kb-admin-chip.pro { background: rgba(200,137,26,.07); border-color: rgba(200,137,26,.28); }
.kb-admin-chip.pro b     { color: var(--amber); }
.kb-admin-chip.trial b   { color: #2a8a50; }
.kb-admin-chip.expired   { background: rgba(192,57,43,.06); border-color: rgba(192,57,43,.28); }
.kb-admin-chip.expired b { color: #c0392b; }
/* Search */
.kb-admin-search {
  width: 100%; padding: .65rem 1rem; margin-bottom: .9rem;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-alt); font-size: .83rem; color: var(--ink);
  box-sizing: border-box; outline: none; transition: border-color .14s, background .14s;
}
.kb-admin-search:focus { border-color: rgba(14,14,14,.35); background: #fff; }
.kb-admin-search::placeholder { color: var(--muted); }
/* List */
.kb-admin-list { display: flex; flex-direction: column; gap: .4rem; }
.kb-admin-loading, .kb-admin-empty, .kb-admin-err { color: var(--muted); font-size: .82rem; text-align: center; padding: 1.5rem; }
.kb-admin-err { color: #c0392b; }
/* User card */
.kb-admin-row {
  border: 1px solid rgba(14,14,14,.08); border-radius: 12px;
  padding: .75rem .95rem; background: #fff;
  border-left-width: 3px;
  transition: border-color .14s, box-shadow .14s;
}
.kb-admin-row:hover       { box-shadow: 0 3px 12px rgba(14,14,14,.06); }
.kb-admin-row.is-inactive { opacity: .5; }
/* Left border accent = current plan color */
.kb-admin-row.plan-pro     { border-left-color: var(--amber); }
.kb-admin-row.plan-starter { border-left-color: var(--ink); }
.kb-admin-row.plan-trial   { border-left-color: #2a8a50; }
/* Card top row */
.kb-admin-row-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .14rem; }
.kb-admin-row-name { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .88rem; color: var(--ink); font-family: var(--font-mono); }
.kb-admin-me, .kb-admin-adminbadge {
  font-family: var(--font-mono); font-size: .5rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .13rem .42rem; border-radius: 4px;
}
.kb-admin-me { background: rgba(200,137,26,.1); color: var(--amber); }
.kb-admin-adminbadge { background: var(--ink); color: #fff; }
/* Plan badge top-right */
.kb-admin-plan {
  font-family: var(--font-mono); font-size: .54rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .68rem; border-radius: 999px; white-space: nowrap;
}
.kb-admin-plan.plan-pro     { background: var(--amber); color: #fff; }
.kb-admin-plan.plan-starter { background: var(--ink); color: #fff; }
.kb-admin-plan.plan-trial   { color: #2a8a50; border: 1.5px solid rgba(42,138,80,.45); }
/* Email + meta */
.kb-admin-row-email { font-size: .71rem; color: var(--muted); margin: 0 0 .38rem; word-break: break-all; }
.kb-admin-row-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .28rem;
  font-size: .67rem; color: var(--muted);
  padding-bottom: .55rem; margin-bottom: .55rem;
  border-bottom: 1px solid rgba(14,14,14,.06);
}
.kb-admin-dot { opacity: .35; font-size: .4rem; }
.kb-admin-meta-item.meta-ok      { color: #2a8a50; font-weight: 500; }
.kb-admin-meta-item.meta-off     { color: #c0392b; font-weight: 500; }
.kb-admin-meta-item.meta-expired { color: #c0392b; font-weight: 600; }
.kb-admin-meta-item.meta-soon    { color: var(--amber); font-weight: 600; }
/* Action buttons */
.kb-admin-actions { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.kb-admin-act {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .03em;
  padding: .3rem .65rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: transparent;
  color: var(--ink); transition: all .12s; white-space: nowrap;
}
.kb-admin-act:hover:not(:disabled)         { background: var(--bg-alt); border-color: rgba(14,14,14,.28); }
/* Current plan = filled "active" state (not greyed out) */
.kb-admin-act.act-pro:disabled     { background: var(--amber); color: #fff; border-color: var(--amber); opacity: 1; cursor: default; font-weight: 600; }
.kb-admin-act.act-starter:disabled { background: var(--ink);   color: #fff; border-color: var(--ink);   opacity: 1; cursor: default; font-weight: 600; }
/* Other plan button — upgradeable */
.kb-admin-act.act-pro:not(:disabled)       { color: var(--amber); border-color: rgba(200,137,26,.4); }
.kb-admin-act.act-pro:not(:disabled):hover { background: var(--amber); color: #fff; border-color: var(--amber); }
.kb-admin-act.act-starter:not(:disabled):hover { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Trial Gewähren */
.kb-admin-act.act-trial { color: var(--muted); font-size: .63rem; }
.kb-admin-act.act-trial:hover:not(:disabled) { color: var(--ink); border-color: rgba(14,14,14,.28); background: var(--bg-alt); }
/* Danger */
.kb-admin-act.act-del { color: #c0392b; border-color: rgba(192,57,43,.3); }
.kb-admin-act.act-del:hover:not(:disabled) { background: rgba(192,57,43,.07); border-color: #c0392b; }
.kb-admin-act.act-off:hover:not(:disabled) { color: #c0392b; border-color: rgba(192,57,43,.45); }
.kb-admin-act.act-on:hover:not(:disabled)  { color: #2a8a50; border-color: rgba(42,138,80,.45); }
@media (max-width: 520px) {
  .kb-admin-card { padding: 1rem .95rem 1.25rem; border-radius: 16px; }
  .kb-admin-act  { flex: 1; text-align: center; }
}

.kb-rc-footer {
  display: flex; gap: .6rem; justify-content: flex-end;
  padding: .8rem 1.1rem; border-top: 1px solid var(--border);
}
.kb-rc-act {
  background: none; border: 1px solid var(--border); border-radius: 7px;
  color: var(--ink); font-size: .72rem; padding: .45rem .9rem; cursor: pointer;
  transition: all .15s;
}
.kb-rc-act:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.kb-rc-act:disabled { opacity: .5; cursor: default; }
.kb-rc-act-primary { background: var(--amber); border-color: var(--amber); color: #1a1a1a; font-weight: 600; }
.kb-rc-act-primary:hover:not(:disabled) { color: #1a1a1a; filter: brightness(1.06); }

@media (max-width: 720px) {
  .kb-rc-body { flex-direction: column; }
  .kb-rc-pane-config { width: auto; border-right: none; border-bottom: 1px solid var(--border); }
}

/* Print: show only the paper document */
@media print {
  body.kb-rc-printing > * { display: none !important; }
  body.kb-rc-printing #kb-receipt-overlay {
    display: block !important; position: static !important;
    background: #fff !important; backdrop-filter: none !important;
  }
  body.kb-rc-printing .kb-rc-box {
    display: block !important; box-shadow: none !important; border: none !important;
    max-height: none !important; width: auto !important; background: #fff !important;
  }
  body.kb-rc-printing .kb-rc-header,
  body.kb-rc-printing .kb-rc-footer,
  body.kb-rc-printing .kb-rc-pane-config { display: none !important; }
  body.kb-rc-printing .kb-rc-body { display: block !important; overflow: visible !important; }
  body.kb-rc-printing .kb-rc-pane-preview { overflow: visible !important; background: #fff !important; padding: 0 !important; }
  body.kb-rc-printing .kb-rc-doc { box-shadow: none !important; margin: 0 !important; max-width: none !important; }
}

/* ── Student modal ─────────────────────────────────────── */
.kb-sc-modal-ov {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.65); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 2500;
}
.kb-sc-modal-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); width: min(800px, 96vw);
  max-height: 88vh; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45);
}

/* ── Redesigned student form: 2-column with live preview ── */
.kb-sc-layout { display: grid; grid-template-columns: 1fr 250px; gap: 1.6rem; align-items: start; }
.kb-sc-identity-col { padding-left: 1.4rem; border-left: 1px solid var(--border); }
.kb-sc-preview { display: flex; justify-content: center; margin-bottom: 1.1rem; }
.kb-sc-preview-card { width: 150px; cursor: default !important; }
.kb-sc-preview-card:hover { transform: none !important; border-color: var(--border) !important; background: var(--bg) !important; box-shadow: 0 2px 10px rgba(14,14,14,.05) !important; }
.kb-sc-preview-card .kb-student-fig { opacity: 1; }
/* "Auto" pill next to the Figur label (replaces the in-grid Auto cell) */
.kb-sc-fig-lbl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; opacity: 1; }
.kb-sc-auto-pill {
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .6rem; border-radius: 999px; cursor: pointer; line-height: 1;
  border: 1.5px solid var(--border); background: var(--card); color: var(--muted);
  transition: border-color .15s, background .15s, color .15s;
}
.kb-sc-auto-pill:hover { border-color: rgba(200,137,26,.5); color: var(--ink); }
.kb-sc-auto-pill.is-active { border-color: var(--amber); background: var(--amber-dim); color: var(--amber); }

/* Figure picker inside the right identity column: exactly 5 per row, no inner scroll */
.kb-sc-identity-col .kb-sc-figrow {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  /* Compact: ~3 rows visible + a sliver of the next to hint scrolling. Keeps the
     identity column close in height to the form column so the action button below
     doesn't float over an empty gap. */
  max-height: 158px; overflow-y: auto; overflow-x: hidden;
  padding: .1rem 2px .1rem 0;
}
.kb-sc-identity-col .kb-sc-fig { width: 100%; height: 46px; }
.kb-sc-identity-col .kb-mig-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-sc-adv { margin-top: .2rem; border-top: 1px solid var(--border); padding-top: .5rem; }
.kb-sc-adv-summary {
  cursor: pointer; font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
  list-style: none; padding: .35rem 0; user-select: none;
}
.kb-sc-adv-summary::-webkit-details-marker { display: none; }
.kb-sc-adv-summary::before { content: '▸ '; }
.kb-sc-adv[open] .kb-sc-adv-summary::before { content: '▾ '; }
.kb-sc-adv-body { padding-top: .8rem; }
@media (max-width: 680px) {
  .kb-sc-layout { grid-template-columns: 1fr; }
  .kb-sc-identity-col { padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 1rem; }
}
.kb-sc-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: .9rem 1.1rem .7rem; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kb-sc-modal-title {
  font-family: var(--font-mono); font-size: .7rem;
  color: var(--amber); letter-spacing: .1em; text-transform: uppercase;
}
.kb-sc-modal-body {
  overflow-y: auto; padding: 1rem 1.25rem 1.5rem; flex: 1;
}
/* Header row with + button */
.kb-sc-list-hd {
  display: flex; align-items: center; gap: .55rem; margin-bottom: 1rem;
}

/* Month earnings detail overlay (uses style.display directly, no .open class) */
#kb-month-detail-overlay {
  position: fixed; inset: 0;
  background: rgba(10,12,18,.72); backdrop-filter: blur(4px);
  z-index: 3000; align-items: center; justify-content: center;
}

/* GRATIS tag for free first lesson */
.kb-gratis-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: .56rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); background: rgba(200,137,26,.12);
  border: 1px solid rgba(200,137,26,.3); border-radius: 3px;
  padding: .05rem .3rem; margin-left: .3rem; vertical-align: middle;
}

/* free_first_lesson checkbox row in student form (legacy — kept for compat) */
.kb-sc-free-row {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .6rem; font-size: .8rem; color: var(--muted);
}
.kb-sc-free-row input[type="checkbox"] { accent-color: var(--amber); width: 14px; height: 14px; cursor: pointer; }
.kb-sc-free-row label { cursor: pointer; }

/* ── Student form section labels ── */
.kb-sc-section-lbl {
  font-family: var(--font-mono); font-size: .55rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .55rem; opacity: .65;
}

/* ── Extras row: free-first-lesson + billing chip ── */
.kb-sc-extras-row {
  display: flex; align-items: flex-start; flex-wrap: wrap;
  gap: .5rem 1.5rem; margin-top: .75rem;
  padding-top: .75rem; border-top: 1px solid var(--border);
}
.kb-sc-free-item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--muted); padding-top: .2rem;
}
.kb-sc-free-item input[type="checkbox"] { accent-color: var(--amber); width: 14px; height: 14px; cursor: pointer; }
.kb-sc-free-item label { cursor: pointer; }

/* Billing-from chip button */
/* Messaging app chip selector (WhatsApp / Viber / None) */
.kb-msg-app-chips {
  display: flex; gap: .3rem; margin-top: .4rem; flex-wrap: wrap;
}
.kb-msg-chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .18rem .5rem; border-radius: 99px;
  border: 1px solid var(--border); background: transparent;
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .05em; color: var(--muted);
  cursor: pointer; transition: all var(--t-fast);
}
.kb-msg-chip:hover { border-color: var(--amber); color: var(--amber); }
.kb-msg-chip.active {
  background: rgba(200,137,26,.12);
  border-color: var(--amber); color: var(--amber);
}
.kb-msg-chip[data-val="none"].active {
  background: rgba(14,14,14,.06);
  border-color: var(--border); color: var(--muted);
}

.kb-sc-billing-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; border-radius: 99px;
  border: 1px dashed color-mix(in srgb, var(--border) 100%, transparent);
  font-size: .75rem; color: var(--muted);
  background: transparent; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  font-family: var(--font-sans); line-height: 1.4;
}
.kb-sc-billing-chip:hover {
  border-color: var(--amber); color: var(--amber);
}
.kb-sc-billing-chip.has-date {
  border-style: solid; border-color: rgba(200,137,26,.45);
  background: rgba(200,137,26,.09); color: var(--amber);
  font-weight: 500;
}
.kb-sc-billing-clear {
  font-size: .65rem; opacity: .65; margin-left: .1rem;
  line-height: 1; transition: opacity .1s;
}
.kb-sc-billing-clear:hover { opacity: 1; }

/* Inline date input that appears below the chip */
.kb-sc-billing-from-wrap {
  margin-top: .4rem;
}

/* ── Student form: toggle chips (Termin-Link / Erinnerung / Schülerportal) ── */
.kb-sc-chips-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem; margin-top: .75rem;
  padding-top: .75rem; border-top: 1px solid var(--border);
}
.kb-sc-toggle-chip {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .22rem .65rem .22rem .5rem;
  border-radius: 99px;
  border: 1px dashed rgba(14,14,14,.22);
  font-size: .75rem; color: var(--muted);
  background: transparent; cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
  font-family: var(--font-sans); line-height: 1.5; white-space: nowrap;
  user-select: none;
}
.kb-sc-toggle-chip:hover {
  border-style: solid; border-color: rgba(14,14,14,.28); color: var(--ink);
}
.kb-sc-toggle-chip.is-on {
  border-style: solid; border-color: rgba(200,137,26,.45);
  background: rgba(200,137,26,.09); color: var(--amber); font-weight: 500;
}
.kb-sc-toggle-chip.is-on:hover { background: rgba(200,137,26,.14); }
.kb-sc-toggle-chip.portal-sent {
  border-style: solid; border-color: rgba(58,143,92,.4);
  background: rgba(58,143,92,.08); color: #3a8f5c; font-weight: 500;
}
.kb-sc-toggle-chip.portal-sent:hover { background: rgba(58,143,92,.13); }
.kb-sc-toggle-chip:disabled { opacity: .35; pointer-events: none; }

/* ── Student form: footer action row ─────────────────── */
.kb-sc-form-footer {
  display: flex; align-items: center;
  gap: .75rem; margin-top: 1.1rem;
  padding-top: .9rem; border-top: 1px solid var(--border);
}
.kb-sc-save-btn {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .38rem 1.3rem; border-radius: 99px; border: none;
  background: var(--ink); color: var(--bg);
  font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  font-family: var(--font-sans); line-height: 1.5;
  cursor: pointer; transition: background .14s, transform .1s;
  user-select: none;
}
.kb-sc-save-btn:hover  { background: var(--amber); }
.kb-sc-save-btn:active { transform: translateY(1px); }
.kb-sc-save-btn:disabled { opacity: .35; pointer-events: none; }
.kb-sc-cancel-link {
  font-size: .76rem; color: var(--muted);
  background: none; border: none; padding: 0;
  font-family: var(--font-sans); cursor: pointer;
  transition: color .12s;
}
.kb-sc-cancel-link:hover { color: var(--ink); }
.kb-sc-billing-from-wrap input[type="date"] {
  font-size: .8rem; padding: .25rem .5rem;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg);
  accent-color: var(--amber);
}

/* ══════════════════════════════════════════════════════
   DURATION PILLS — booking step
   ══════════════════════════════════════════════════════ */

.kb-sec-label {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .2em;
  color: var(--amber); text-transform: uppercase; margin-bottom: .85rem; opacity: .8;
}

/* ══════════════════════════════════════════════════════
   DAY EVENTS STRIP
   ══════════════════════════════════════════════════════ */

#kb-day-events-strip {
  display: none; max-width: 680px; margin-bottom: 1rem;
  padding: .65rem .9rem;
  background: var(--amber-dim); border: 1px solid rgba(200,137,26,.2);
  border-radius: var(--r);
}
.kb-day-events-lbl {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em;
  color: var(--amber); text-transform: uppercase; margin-bottom: .45rem;
}
#kb-day-events-list {
  font-size: .82rem; color: var(--ink); line-height: 1.8;
  display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.35rem;
}
.kb-day-event-chip {
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: .2rem .55rem;
  background: var(--amber-dim);
  border: 1px solid rgba(200,137,26,.25);
  color: var(--ink);
  border-radius: 99px;
  white-space: nowrap;
}
.kb-day-event-chip--tent {
  background: transparent;
  border-style: dashed;
  border-color: rgba(120,120,120,.35);
  color: var(--ink);
}
.kb-day-event-chip.pending {
  background: rgba(192,134,58,.12);
  border-style: dashed;
  border-color: rgba(192,134,58,.55);
  color: var(--ink);
}

/* ── Ausstehende Zahlungen — Indikator (Figur + Badge, unten rechts) ── */
.kb-pending-fab {
  position: absolute;
  right: 26px;
  bottom: 20px;
  z-index: 250;
  cursor: pointer;
  display: block;
  width: 84px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.14));
  animation: kbFabDrop .55s cubic-bezier(.22,1,.36,1) both;
  transition: transform .2s ease;
}
.kb-pending-fab:hover { transform: translateY(-4px); }
.kb-pending-fab:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 8px; }
.kb-pending-fab-fig {
  width: 84px; height: auto; display: block;
  pointer-events: none; user-select: none;
}
.kb-pending-fab-badge {
  position: absolute;
  top: -2px; left: 4px;
  min-width: 26px; height: 26px; padding: 0 7px; box-sizing: border-box;
  background: var(--amber); color: #fff;
  border: 2px solid var(--card); border-radius: 99px;
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(200,137,26,.55);
  animation: kbFabPulse 1.8s ease-in-out 3;
}
.kb-pending-fab-tip {
  position: absolute;
  bottom: calc(100% + 8px); right: 0;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: .68rem; white-space: nowrap;
  padding: .32rem .6rem; border-radius: 6px;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kb-pending-fab:hover .kb-pending-fab-tip,
.kb-pending-fab:focus-visible .kb-pending-fab-tip { opacity: 1; transform: translateY(0); }
@keyframes kbFabDrop {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kbFabPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(200,137,26,.55); }
  50%      { box-shadow: 0 2px 16px rgba(200,137,26,.95); }
}

/* ══════════════════════════════════════════════════════
   MANAGE SECTION (URL-based reschedule/cancel)
   ══════════════════════════════════════════════════════ */

.kb-manage-wrap {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 2rem; margin-top: 2rem; box-shadow: var(--shadow-sm);
}
.kb-manage-heading {
  font-family: var(--font-mono); font-size: 1.2rem; color: var(--ink);
  margin-bottom: .4rem; font-weight: 400;
}
.kb-manage-sub   { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; }
.kb-manage-btns  { display: flex; gap: .75rem; flex-wrap: wrap; }
.kb-manage-btn {
  padding: .75rem 1.4rem; background: transparent;
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--muted); cursor: pointer;
  font-family: var(--font-sans); font-size: .85rem; transition: all .2s;
}
.kb-manage-btn:hover         { border-color: var(--amber); color: var(--ink); }
.kb-manage-btn.danger:hover  { border-color: var(--error);  color: var(--error); }
.kb-action-panel {
  margin-top: 1.5rem; padding: 1.5rem; background: var(--bg-light);
  border: 1px solid var(--border); border-radius: var(--r); display: none;
}
.kb-rsch-banner {
  background: var(--amber-dim); border: 1px solid rgba(200,137,26,.25);
  border-radius: var(--r); padding: 1.25rem 1.5rem; margin-bottom: 2rem; display: none;
}
.kb-rsch-banner-lbl {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em;
  color: var(--amber); text-transform: uppercase; margin-bottom: .5rem;
}

/* ══════════════════════════════════════════════════════
   TENTATIVE tag inline
   ══════════════════════════════════════════════════════ */

.kb-tentative-tag-inline {
  font-family: var(--font-mono); font-size: .48rem; letter-spacing: .05em;
  color: var(--muted); border: 1px dashed rgba(14,14,14,.2); border-radius: 3px;
  padding: .04rem .28rem; margin-left: .3rem; vertical-align: middle;
}

/* ══════════════════════════════════════════════════════
   CANCEL CONFIRMATION OVERLAY
   ══════════════════════════════════════════════════════ */

#kb-cancel-overlay,
#kb-portal-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(14,14,14,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  padding: 1rem;
}
#kb-cancel-overlay[style*="flex"],
#kb-portal-overlay[style*="flex"] { display: flex !important; }

.kb-cancel-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%; max-width: 384px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(14,14,14,.24);
  animation: kb-cancel-in .22s cubic-bezier(.16,.84,.44,1);
}
@keyframes kb-cancel-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.kb-cancel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 1.25rem .95rem;
  border-bottom: 1px solid var(--border);
}
.kb-cancel-eyebrow {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--error);
  display: inline-flex; align-items: center; gap: .55rem;
}
.kb-cancel-eyebrow::before {
  content: ''; width: 16px; height: 1.5px;
  background: var(--error); display: inline-block;
}

.kb-cancel-body {
  padding: 1.85rem 1.5rem 1.5rem;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 1.1rem;
}
.kb-cancel-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1;
  color: #fff;
  background: linear-gradient(145deg, #d35e5e, #c04040 60%, #a23232);
  box-shadow: 0 6px 16px rgba(192,64,64,.3), inset 0 1px 0 rgba(255,255,255,.3);
}

.kb-cancel-appt-info {
  width: 100%;
  display: flex; flex-direction: column; gap: .35rem;
  align-items: center;
  background: rgba(192,64,64,.045);
  border: 1px solid rgba(192,64,64,.14);
  border-radius: 12px;
  padding: .9rem 1rem;
}
.kb-cancel-appt-name {
  font-family: var(--font-mono); font-size: 1.02rem;
  color: var(--ink); font-weight: 500; letter-spacing: -.01em;
}
.kb-cancel-appt-date {
  font-family: var(--font-mono); font-size: .76rem;
  color: var(--muted); letter-spacing: .04em;
}

.kb-cancel-warning {
  font-size: .8rem; color: var(--muted);
  line-height: 1.55; max-width: 30ch;
}

.kb-cancel-footer {
  display: flex; gap: .6rem;
  padding: 1rem 1.25rem 1.15rem;
  border-top: 1px solid var(--border);
}
.kb-cancel-footer > button { flex: 1; justify-content: center; text-align: center; }

.kb-appt-absagen-btn {
  font-family: var(--font-mono);
  background: none;
  border: 1px solid rgba(192,64,64,.3);
  color: var(--error);
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kb-appt-absagen-btn:hover {
  background: rgba(192,64,64,.08);
  border-color: var(--error);
}

/* ══════════════════════════════════════════════════════
   RECURRING APPOINTMENTS OVERLAY
   ══════════════════════════════════════════════════════ */

#kb-recurring-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
  padding: 1rem;
}
#kb-recurring-overlay[style*="flex"] { display: flex !important; }

.kb-recur-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: calc(var(--r) * 1.5);
  width: 100%; max-width: 680px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}

.kb-recur-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.kb-recur-header-left { display: flex; flex-direction: column; gap: .25rem; }
.kb-recur-eyebrow {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--amber);
}
.kb-recur-title {
  font-family: var(--font-mono); font-size: 1.1rem;
  color: var(--ink); font-weight: 500;
}
.kb-recur-close {
  background: none; border: none; cursor: pointer;
  font-size: .9rem; color: var(--muted);
  padding: .2rem .4rem; border-radius: var(--r);
  line-height: 1; flex-shrink: 0; margin-top: .1rem;
  transition: color .15s;
}
.kb-recur-close:hover { color: var(--ink); }

.kb-recur-body {
  padding: 1rem 1.5rem;
  overflow-y: auto; flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.5rem;
  align-items: start;
}

.kb-recur-col {
  display: flex; flex-direction: column; gap: .85rem;
}

.kb-recur-field { display: flex; flex-direction: column; gap: .35rem; }
.kb-recur-label {
  font-family: var(--font-mono); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}

.kb-recur-pills { display: flex; flex-wrap: wrap; gap: .4rem; }
.kb-recur-pill {
  font-family: var(--font-mono); font-size: .72rem;
  border: 1px solid var(--border); border-radius: 100px;
  padding: .3rem .75rem; cursor: pointer;
  background: none; color: var(--text);
  transition: border-color .15s, background .15s, color .15s;
}
.kb-recur-pill:hover   { border-color: var(--amber); }
.kb-recur-pill.selected {
  background: var(--amber); border-color: var(--amber);
  color: #fff; font-weight: 600;
}

.kb-recur-time-row {
  display: flex; align-items: center; gap: .5rem;
}
.kb-recur-select {
  font-family: var(--font-mono); font-size: .82rem;
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: var(--r); padding: .35rem .6rem;
  color: var(--text); cursor: pointer;
}
.kb-recur-time-sep {
  font-family: var(--font-mono); color: var(--muted);
}

.kb-recur-date {
  font-family: var(--font-mono); font-size: .82rem;
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: var(--r); padding: .35rem .7rem;
  color: var(--text); cursor: pointer;
  width: fit-content;
}

.kb-recur-preview {
  display: flex; flex-direction: column; gap: .3rem;
  max-height: 130px; overflow-y: auto;
}
.kb-recur-preview-empty {
  font-family: var(--font-mono); font-size: .72rem;
  color: var(--muted); font-style: italic;
}
.kb-recur-preview-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--text);
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: var(--r); padding: .35rem .75rem;
}
.kb-recur-preview-del {
  background: none; border: none; cursor: pointer;
  font-size: .7rem; color: var(--muted);
  padding: .1rem .3rem; border-radius: 3px;
  transition: color .15s;
  flex-shrink: 0;
}
.kb-recur-preview-del:hover { color: var(--error); }

.kb-recur-footer {
  display: flex; gap: .75rem; justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* ── Mini calendar ──────────────────────────────────── */
.kb-recur-cal {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-light);
  user-select: none;
}
.kb-recur-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.kb-recur-cal-nav {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--muted);
  padding: .1rem .45rem; border-radius: 4px;
  line-height: 1; transition: color .15s, background .15s;
}
.kb-recur-cal-nav:hover { background: var(--border); color: var(--ink); }
.kb-recur-cal-month {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .05em; color: var(--ink);
}
.kb-recur-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
}
.kb-recur-cal-daylbl {
  font-family: var(--font-mono); font-size: .55rem;
  text-align: center; padding: .4rem 0;
  color: var(--muted); letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.kb-recur-cal-day {
  font-family: var(--font-mono); font-size: .7rem;
  text-align: center; padding: .38rem 0;
  cursor: pointer; color: var(--text);
  transition: background .1s, color .1s;
}
.kb-recur-cal-day:hover { background: rgba(200,137,26,.12); }
.kb-recur-cal-day.in-week {
  background: rgba(200,137,26,.13);
  color: var(--amber);
}
.kb-recur-cal-day.target-day {
  background: var(--amber);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}
.kb-recur-cal-day.non-working {
  color: var(--border);
  cursor: default;
}
.kb-recur-cal-day.non-working:hover { background: none; }
.kb-recur-cal-day.is-today {
  outline: 1.5px solid var(--amber);
  outline-offset: -2px;
  border-radius: 4px;
  color: var(--amber);
  font-weight: 600;
}
.kb-recur-cal-day.is-today.target-day { outline: none; }
.kb-recur-cal-day.is-today.in-week { color: var(--amber); }

.kb-recur-preview-row--conflict {
  border-color: rgba(192,64,64,.35);
  background: rgba(192,64,64,.06);
  color: var(--error);
  opacity: .85;
}
.kb-recur-preview-row--conflict .kb-recur-conflict-tag {
  font-size: .65rem; color: var(--error);
  background: rgba(192,64,64,.1);
  border-radius: 3px; padding: .05rem .3rem;
  flex-shrink: 0;
}

/* ── Recurring: mode toggle ─────────────────────────── */
.kb-recur-mode-toggle {
  display: flex;
  margin: 0 0 .75rem;
  border-bottom: 1px solid var(--border);
}
.kb-recur-mode-btn {
  flex: 1; padding: .45rem .5rem; border: none; background: transparent;
  font-size: .75rem; font-family: inherit; cursor: pointer; color: var(--muted);
  border-bottom: 2px solid transparent; letter-spacing: .01em;
  transition: color .15s, border-color .15s;
}
.kb-recur-mode-btn:hover { color: var(--ink); }
.kb-recur-mode-btn.active { color: var(--amber); border-bottom-color: var(--amber); font-weight: 500; }

/* ══════════════════════════════════════════════════════
   TIMEZONE TOGGLE PILLS (weekly panel + student detail)
   ══════════════════════════════════════════════════════ */

/* Weekly panel pills */
.kb-wk-tz-pill {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .18rem .55rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.kb-wk-tz-pill:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.kb-wk-tz-pill.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  font-weight: 600;
}

/* Student detail TZ toggle (Nächste Termine section) */
.kb-detail-tz-toggle {
  display: flex;
  gap: .3rem;
  align-items: center;
}
.kb-detail-tz-btn {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.kb-detail-tz-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}
.kb-detail-tz-btn.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════
   WEEK MODAL (old style kept for compat)
   ══════════════════════════════════════════════════════ */
.kb-week-modal .kb-modal { max-width: 900px; overflow-x: auto; }

/* ══════════════════════════════════════════════════════
   NACHRICHTEN TAB — view switcher (Nachrichten / Rundschreiben)
   ══════════════════════════════════════════════════════ */

.kb-msg-view-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  width: fit-content;
}
.kb-msg-view-btn {
  padding: .55rem 1.4rem;
  background: var(--bg);
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  transition: background var(--t-base), color var(--t-base);
}
.kb-msg-view-btn + .kb-msg-view-btn { border-left: 1px solid var(--border); }
.kb-msg-view-btn.active {
  background: var(--ink);
  color: #fff;
}
.kb-msg-view-btn:hover:not(.active) { background: var(--card); color: var(--text); }

/* ══════════════════════════════════════════════════════
   NACHRICHTEN TAB
   ══════════════════════════════════════════════════════ */

.kb-msg-subtabs {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.kb-msg-stab {
  padding: .45rem 1rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: .72rem;
  transition: border-color var(--t-base), color var(--t-base), background var(--t-base);
}
.kb-msg-stab.active {
  background: var(--amber); border-color: var(--amber); color: #fff;
}
.kb-msg-stab:hover:not(.active) {
  border-color: rgba(200,137,26,.4); color: var(--text);
}

.kb-anrede-row {
  display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem;
}
.kb-anrede-label {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.kb-anrede-toggle {
  display: inline-flex;
  border: 1px solid var(--border); border-radius: 99px;
  overflow: hidden; padding: 2px;
}
.kb-anrede-btn {
  padding: .3rem 1rem; border-radius: 99px; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  transition: all var(--t-base); white-space: nowrap;
}
.kb-anrede-btn.active { background: var(--amber); color: #fff; }
.kb-anrede-btn:hover:not(.active) { color: var(--ink); }

.kb-msg-output {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  font-size: .85rem; line-height: 1.85; color: var(--text);
  min-height: 120px; white-space: pre-wrap; user-select: all;
  font-family: var(--font-sans);
}

.kb-char-count {
  font-family: var(--font-mono); font-size: .6rem;
  color: var(--muted); text-align: right; margin-top: .25rem;
  opacity: .7;
}
.kb-char-count.warn { color: var(--amber); opacity: 1; }
.kb-char-count.over { color: var(--error); opacity: 1; }

.kb-msg-panel { display: none; }
.kb-msg-panel.active { display: block; }

.kb-attach-zone {
  border: 1.5px dashed var(--border); border-radius: var(--r);
  padding: .85rem 1.1rem;
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
}
.kb-attach-zone:hover,
.kb-attach-zone.drag-over {
  border-color: var(--amber); background: var(--amber-dim);
}
.kb-attach-zone input[type="file"] { display: none; }
.kb-attach-zone-label { font-size: .8rem; color: var(--muted); }

.kb-attach-chips {
  display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; min-height: .5rem;
}
.kb-attach-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .55rem;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 99px;
  font-size: .72rem; color: var(--text); font-family: var(--font-mono);
}
.kb-attach-chip button {
  border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: .75rem; line-height: 1; padding: 0 .1rem;
}
.kb-attach-chip button:hover { color: var(--error); }

.kb-btn-send {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.6rem;
  background: var(--ink); border: none; border-radius: var(--r);
  color: var(--bg); font-family: var(--font-sans); font-size: .88rem;
  cursor: pointer;
  transition: background var(--t-base);
}
.kb-btn-send:hover { background: var(--amber); }
.kb-btn-send:disabled { opacity: .4; pointer-events: none; }

.kb-broadcast-preview {
  font-family: var(--font-mono); font-size: .72rem; color: var(--muted);
  padding: .55rem .75rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r);
  margin-bottom: .75rem;
}
.kb-broadcast-preview strong { color: var(--amber); }

/* ══════════════════════════════════════════════════════
   ZAHLUNG TAB — month navigator + appointment list
   ══════════════════════════════════════════════════════ */

.kb-pay-month-nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .65rem;
}
.kb-pay-month-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--text);
  line-height: 1;
  transition: background var(--t-base);
}
.kb-pay-month-btn:hover { background: var(--bg); }
.kb-pay-month-lbl {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  min-width: 130px;
  text-align: center;
}

.kb-pay-appt-list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin-bottom: .65rem;
}
.kb-pay-appt-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .38rem .6rem;
  border-radius: 7px;
  background: var(--bg);
  font-size: .82rem;
  cursor: pointer;
  transition: background var(--t-base);
}
.kb-pay-appt-row:hover { background: rgba(245,158,11,.07); }
.kb-pay-appt-info { display: flex; align-items: center; flex-wrap: wrap; }
.kb-pay-appt-date { font-weight: 500; color: var(--text); }
.kb-pay-appt-time { color: var(--muted); }
.kb-pay-appt-ue   { color: var(--amber); font-family: var(--font-mono); font-size: .76rem; }
.kb-pay-appt-empty {
  font-size: .8rem;
  color: var(--muted);
  font-family: var(--font-mono);
  padding: .45rem .6rem;
}

.kb-pay-summary {
  font-size: .9rem;
  font-weight: 600;
  color: var(--amber);
  font-family: var(--font-mono);
  padding: .45rem .7rem;
  background: rgba(245,158,11,.08);
  border-radius: 7px;
  margin-bottom: .85rem;
}

/* ══════════════════════════════════════════════════════
   GENERIERTE NACHRICHT — modal overlay
   ══════════════════════════════════════════════════════ */

.kb-gen-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14,14,14,.45);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.kb-gen-modal-card {
  background: var(--card);
  border-radius: var(--r);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 580px;
  padding: 1.5rem;
  box-shadow: 0 8px 40px rgba(14,14,14,.2);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 85vh;
  overflow-y: auto;
}
.kb-gen-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kb-gen-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1;
  padding: .25rem .45rem;
  border-radius: 5px;
  transition: color var(--t-base), background var(--t-base);
}
.kb-gen-modal-close:hover { color: var(--text); background: var(--bg); }
.kb-gen-modal-textarea {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.65;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color var(--t-base);
  box-sizing: border-box;
}
.kb-gen-modal-textarea:focus { border-color: var(--amber); }

/* ══════════════════════════════════════════════════════
   RUNDSCHREIBEN — chip-based "To:" recipient field
   ══════════════════════════════════════════════════════ */

/* Outer "AN" frame */
.kb-bcast-to-wrap {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  margin-bottom: 1.1rem;
  transition: border-color var(--t-base);
}
.kb-bcast-to-wrap:focus-within { border-color: rgba(200,137,26,.4); }
.kb-bcast-to-lbl {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .4rem;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 1.5rem;
}
.kb-bcast-to-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Quick-select pills */
.kb-bcast-qsel {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
/* Course filter chips = the actual selectable pills */
.kb-bcast-q-course {
  padding: .22rem .7rem;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: none;
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  line-height: 1.5;
  color: var(--muted);
}
.kb-bcast-q-course:hover { border-color: var(--amber); color: var(--amber); background: var(--amber-dim); }

/* "Alle" / "Keiner" = quiet actions, deliberately NOT styled like the selectable chips */
.kb-bcast-q-all,
.kb-bcast-q-none {
  padding: .22rem .3rem;
  border: none; background: none; border-radius: 6px;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: color var(--t-base);
}
.kb-bcast-q-all:hover,
.kb-bcast-q-none:hover { color: var(--amber); }
/* thin divider separating the actions from the filter chips */
.kb-bcast-q-none { position: relative; margin-right: .55rem; }
.kb-bcast-q-none::after {
  content: ''; position: absolute; right: -.3rem; top: 50%;
  transform: translateY(-50%); width: 1px; height: 12px; background: var(--border);
}

/* Search field */
.kb-bcast-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  transition: border-color var(--t-base);
}
.kb-bcast-search-wrap:focus-within { border-color: var(--amber); }
.kb-bcast-search-icon {
  color: var(--muted);
  font-size: .82rem;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}
.kb-bcast-search-inp {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .83rem;
  color: var(--text);
  font-family: var(--font-sans);
  caret-color: var(--amber);
}
.kb-bcast-search-inp::placeholder { color: var(--muted); }

/* Live dropdown */
.kb-bcast-search-dd {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
  display: none;
}
.kb-bcast-search-dd.open { display: block; }
.kb-bcast-dd-item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .5rem .75rem;
  cursor: pointer;
  transition: background var(--t-base);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.kb-bcast-dd-item:last-child { border-bottom: none; }
.kb-bcast-dd-item:hover { background: rgba(200,137,26,.07); }
.kb-bcast-dd-name {
  font-size: .83rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.kb-bcast-dd-email {
  font-family: var(--font-mono);
  font-size: .63rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kb-bcast-dd-empty {
  padding: .65rem .75rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--muted);
  text-align: center;
}

/* Selected recipient chips */
.kb-bcast-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  min-height: .25rem;
}
.kb-bcast-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .28rem .45rem .28rem .65rem;
  background: var(--amber-dim);
  border: 1px solid rgba(200,137,26,.32);
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--amber);
  white-space: nowrap;
  animation: kbChipIn .15s ease both;
}
@keyframes kbChipIn {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
.kb-bcast-chip-x {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(200,137,26,.55);
  font-size: .6rem;
  line-height: 1;
  padding: .1rem;
  border-radius: 50%;
  width: 14px; height: 14px;
  transition: color var(--t-base), background var(--t-base);
  flex-shrink: 0;
}
.kb-bcast-chip-x:hover { color: var(--error); background: rgba(192,64,64,.12); }

/* Count bar */
.kb-bcast-count-bar { padding: .05rem 0 .1rem; }
#bcast-sel-count {
  font-family: var(--font-mono);
  font-size: .63rem;
  letter-spacing: .05em;
  color: var(--amber);
  font-weight: 600;
}

/* Body label row: label + insert button */
.kb-bcast-body-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .35rem;
}
.kb-bcast-insert-btn {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .25rem .75rem;
  border: 1px solid rgba(200,137,26,.38);
  border-radius: 99px;
  background: none;
  color: var(--amber);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .02em;
  transition: all var(--t-base);
  white-space: nowrap;
}
.kb-bcast-insert-btn:hover { background: var(--amber-dim); border-color: var(--amber); }

/* Broadcast textarea */
.kb-bcast-body-ta {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.72;
  padding: .75rem .95rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color var(--t-base);
}
.kb-bcast-body-ta:focus { border-color: var(--amber); }

/* ══════════════════════════════════════════════════════
   UPCOMING LESSON ALERT — student card + weekly item
   ══════════════════════════════════════════════════════ */

/* ── Student card: soon (10–30 min before) ──────────── */
.kb-student-card--soon {
  border-color: color-mix(in srgb, var(--amber) 38%, transparent) !important;
  background: var(--amber-dim) !important;
  transform: translateY(-4px);
  box-shadow:
    0 6px 16px color-mix(in srgb, var(--amber) 22%, transparent),
    0 0 18px color-mix(in srgb, var(--amber) 18%, transparent),
    0 0 36px color-mix(in srgb, var(--amber) 10%, transparent) !important;
}

/* ── Student card: imminent (≤10 min before / ≤10 min after) */
@keyframes kbCardPulse {
  /* Graduated soft bloom that breathes; no hard ring, fades outside the card. */
  0%, 100% {
    box-shadow:
      0 6px 16px color-mix(in srgb, var(--amber) 22%, transparent),
      0 0 18px color-mix(in srgb, var(--amber) 18%, transparent),
      0 0 34px color-mix(in srgb, var(--amber) 10%, transparent);
  }
  50% {
    box-shadow:
      0 10px 26px color-mix(in srgb, var(--amber) 34%, transparent),
      0 0 28px color-mix(in srgb, var(--amber) 28%, transparent),
      0 0 52px color-mix(in srgb, var(--amber) 16%, transparent);
  }
}
.kb-student-card--imminent {
  border-color: color-mix(in srgb, var(--amber) 48%, transparent) !important;
  background: var(--amber-dim) !important;
  transform: translateY(-5px);
  animation: kbCardPulse 2s ease-in-out infinite !important;
}
.kb-student-card--imminent .kb-student-name { font-weight: 600; }


/* ── Weekly panel item: soon ────────────────────────── */
.kb-pw-wk-item--soon {
  background: rgba(200,137,26,.08) !important;
  border-radius: 6px;
  padding: .3rem .45rem !important;
  border-bottom: none !important;
  box-shadow: inset 2px 0 0 var(--amber);
}
.kb-pw-wk-item--soon .kb-pw-wk-day,
.kb-pw-wk-item--soon .kb-pw-wk-time,
.kb-pw-wk-item--soon .kb-pw-wk-who  { color: var(--amber) !important; opacity: 1; }

/* ── Weekly panel item: imminent ────────────────────── */
@keyframes kbWkPulse {
  0%, 100% { background: rgba(200,137,26,.1); }
     50%   { background: rgba(200,137,26,.22); }
}
.kb-pw-wk-item--imminent {
  border-radius: 6px;
  padding: .3rem .45rem !important;
  border-bottom: none !important;
  box-shadow: inset 3px 0 0 var(--amber);
  animation: kbWkPulse 1.8s ease-in-out infinite !important;
}
.kb-pw-wk-item--imminent .kb-pw-wk-day,
.kb-pw-wk-item--imminent .kb-pw-wk-time,
.kb-pw-wk-item--imminent .kb-pw-wk-who  { color: var(--amber) !important; opacity: 1; }


/* ── Portal confirm modal extras ── */
.kb-portal-email-row {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; margin-top: .75rem; cursor: pointer;
}
.kb-portal-email-row input[type="checkbox"] { accent-color: var(--amber); width: 14px; height: 14px; }
.kb-portal-email-row input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.kb-portal-email-row input[type="checkbox"]:disabled + span { opacity: .45; }
.kb-portal-resend-hint {
  font-size: .7rem; color: var(--muted);
  margin-top: .3rem; margin-bottom: 0;
}

/* ── Email send toggle (booking confirm + cancel) ── */
.kb-email-toggle {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; margin-top: .9rem; cursor: pointer;
  color: var(--muted);
}
.kb-email-toggle input[type="checkbox"] { accent-color: var(--amber); width: 14px; height: 14px; flex-shrink: 0; }

.kb-btn-google {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .65rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--card); color: var(--ink);
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  cursor: pointer; transition: border-color var(--t-base), background var(--t-base);
}
.kb-btn-google:hover { border-color: var(--amber); background: var(--bg); }

/* ── Slot drag-range highlight ───────────────────────── */
.kb-slot-btn.range-start,
.kb-slot-btn.range-mid,
.kb-slot-btn.range-end {
  background: rgba(200,137,26,.15);
  color: var(--ink);
  border-color: rgba(200,137,26,.35);
}
.kb-slot-btn.range-start { border-radius: var(--r) 0 0 var(--r); }
.kb-slot-btn.range-mid   { border-radius: 0; border-left: none; border-right: none; }
.kb-slot-btn.range-end   { border-radius: 0 var(--r) var(--r) 0; border-left: none; }
.kb-slot-btn.range-start.range-end { border-radius: var(--r); }

/* ── UE basis picker (shown after drag) ─────────────── */
#kb-slot-ue-pick {
  display: none;
  margin-top: .6rem;
}
.kb-ue-pick-inner {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem;
  padding: .5rem .7rem;
  background: rgba(200,137,26,.06);
  border: 1px solid rgba(200,137,26,.2);
  border-radius: var(--r);
  font-size: .78rem;
}
.kb-ue-dur  { color: var(--ink); font-weight: 500; }
.kb-ue-sep  { color: var(--muted); }
.kb-ue-lbl  { color: var(--muted); }
.kb-ue-btn  {
  padding: .2rem .5rem; border-radius: var(--r);
  border: 1px solid var(--border); background: transparent;
  color: var(--muted); font-size: .78rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.kb-ue-btn:hover  { border-color: var(--amber); color: var(--amber); }
.kb-ue-btn.active { background: var(--amber); border-color: var(--amber); color: #fff; }
.kb-ue-result { color: var(--amber); font-weight: 600; min-width: 3.5rem; }

.kb-portal-sent-hint {
  font-size: .62rem; color: var(--muted);
  margin-top: .25rem; letter-spacing: .02em;
}

/* ══ Tarif card (Konto tab) ════════════════════════════ */
.kb-tarif-card { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

/* header */
.kb-tarif-hdr { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.2rem .9rem; }
.kb-tarif-hdr--pro     { background: rgba(200,137,26,.06); border-bottom: 1px solid rgba(200,137,26,.16); }
.kb-tarif-hdr--starter { background: rgba(14,14,14,.04);   border-bottom: 1px solid var(--border); }
.kb-tarif-hdr--trial   { background: rgba(200,137,26,.05); border-bottom: 1px solid rgba(200,137,26,.14); }
.kb-tarif-hdr--expired { background: rgba(192,64,64,.05);  border-bottom: 1px solid rgba(192,64,64,.16); }

.kb-tarif-hdr-left { display: flex; flex-direction: column; gap: .35rem; }
.kb-tarif-plan-name { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1; }
.kb-tarif-hdr--pro .kb-tarif-plan-name     { color: var(--amber); }
.kb-tarif-hdr--starter .kb-tarif-plan-name { color: var(--ink); }
.kb-tarif-hdr--trial .kb-tarif-plan-name   { color: var(--amber); }
.kb-tarif-hdr--expired .kb-tarif-plan-name { color: var(--error); }

.kb-tarif-hdr-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.kb-tarif-status { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: .57rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; }
.kb-tarif-hdr--pro .kb-tarif-status     { background: rgba(200,137,26,.13); color: var(--amber); }
.kb-tarif-hdr--starter .kb-tarif-status { background: rgba(14,14,14,.08);   color: var(--ink); }
.kb-tarif-status--ok      { background: rgba(42,138,80,.13);  color: #2a8a50; }
.kb-tarif-status--warn    { background: rgba(200,137,26,.14); color: var(--amber); }
.kb-tarif-status--urgent  { background: rgba(192,64,64,.12);  color: var(--error); }
.kb-tarif-status--expired { background: rgba(192,64,64,.12);  color: var(--error); }

.kb-tarif-hdr-date { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); }
.kb-tarif-user-email { font-family: var(--font-mono); font-size: .66rem; padding-top: .1rem; color: var(--muted); }

/* features */
.kb-tarif-body { padding: .55rem 1.2rem; border-bottom: 1px solid var(--border); }
.kb-tarif-row  { display: flex; align-items: baseline; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid rgba(14,14,14,.04); }
.kb-tarif-row:last-child { border-bottom: none; }
.kb-tarif-feat { font-size: .79rem; color: var(--muted); white-space: nowrap; }
.kb-tarif-dots { flex: 1; border-bottom: 1px dotted rgba(14,14,14,.15); margin-bottom: .2rem; min-width: .75rem; }
.kb-tarif-yes  { color: var(--amber); font-weight: 700; font-size: .85rem; }
.kb-tarif-no   { color: rgba(14,14,14,.22); font-size: .85rem; }
.kb-tarif-val  { font-family: var(--font-mono); font-size: .75rem; color: var(--ink); font-weight: 500; white-space: nowrap; }

/* footer */
.kb-tarif-footer { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .65rem 1.2rem; border-top: 1px solid var(--border); }
.kb-tarif-footer-note { font-family: var(--font-mono); font-size: .61rem; color: var(--muted); letter-spacing: .04em; }
.kb-tarif-footer-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.kb-tarif-action { font-size: .78rem; text-decoration: none; }

/* ══ Superadmin platform settings block ══════════════ */
.ksa-settings-block {
  background: rgba(200,137,26,.04); border: 1px solid rgba(200,137,26,.18);
  border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1.1rem;
}
.ksa-settings-title {
  font-family: var(--font-mono); font-size: .57rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber); margin-bottom: .55rem; opacity: .9;
}
.ksa-fields-row   { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.ksa-inline-field { display: flex; flex-direction: column; gap: .18rem; }
.ksa-email-field  { flex: 1; min-width: 180px; }
.ksa-inline-label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.ksa-days-wrap    { display: flex; align-items: center; gap: .3rem; }
.ksa-days-input   { width: 56px; text-align: center; font-family: var(--font-mono); }
.ksa-days-suffix  { font-size: .74rem; color: var(--muted); }
.ksa-save-btn     { flex-shrink: 0; align-self: flex-end; }
/* Per-user trial row */
.ksa-trial-row {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-top: .6rem; padding-top: .6rem;
  border-top: 1px solid rgba(14,14,14,.06); width: 100%;
}
.ksa-trial-label  { font-size: .7rem; color: var(--muted); white-space: nowrap; font-family: var(--font-mono); }
.ksa-trial-input  { width: 50px; text-align: center; font-family: var(--font-mono); font-size: .76rem; padding: .22rem .32rem; }
.ksa-trial-suffix { font-size: .7rem; color: var(--muted); }