/* lesson.css — booking page. draft only: on integration this block moves into
   assets/css/style.css and the second stylesheet link disappears.
   tokens come from style.css, nothing is redefined here.

   no inline styles anywhere — the csp is style-src 'self', so an element level
   style attribute would simply be dropped. that matters most for the honeypot
   below: hidden by class, never by attribute, otherwise it stays visible and
   the spam trap is worthless. */

/* ---------- page frame ---------- */
.booking-main{max-width:760px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad-x) clamp(64px,8vw,110px)}
.booking-main h1{font-size:clamp(34px,4.2vw,50px);margin:14px 0 0;font-variant-numeric:lining-nums}
.booking-intro{font:300 16px/1.8 var(--sans);color:var(--text);max-width:60ch;margin-top:var(--s3)}

/* price sits above every action on this page, never after it. that is the whole
   reason the calendly version was pulled */
.booking-price{font:600 18px/1.5 var(--sans);color:var(--ink);margin-top:var(--s4)}
.booking-price .vat,.booking-price .cur{display:block;font:400 12.5px/1.6 var(--sans);color:var(--muted);margin-top:6px}
.booking-price .todo{display:block;font:600 12.5px/1.6 var(--sans);color:var(--accent-deep);margin-top:6px}

/* ---------- step heads ---------- */
/* three levels, in this order: which day (context, largest), then the two
   actions — pick a time, give your details — at the same weight, because they
   are steps of equal rank */
.step{margin-top:clamp(40px,5vw,64px)}
.step > h2{font-size:clamp(26px,2.9vw,34px);margin-bottom:10px}
.step-title,.slot-legend{font-family:var(--serif);font-weight:400;line-height:1.15;
  font-size:clamp(22px,2.4vw,28px);color:var(--ink)}
.step-title{margin:clamp(36px,4.5vw,56px) 0 0}
.slot-legend{padding:0;margin-bottom:var(--s2)}
.step-hint{font:400 13.5px/1.7 var(--sans);color:var(--muted);margin-bottom:var(--s3)}

/* ---------- setup form (internal) ---------- */
/* setup-llc.php reuses .field and .btn-book. only the select needs a rule —
   it did not exist on the public pages */
.field select{width:100%;padding:12px 14px;border:1px solid var(--hair-strong);border-radius:10px;
  background:var(--paper);color:var(--ink);font:400 15.5px/1.5 var(--sans)}
.field select:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}
.form-actions{margin-top:var(--s4)}

/* ---------- teacher choice ---------- */
/* the first step once a second teacher is active. it borrows the date cell's
   frame — same border, same radius, same hover — because it IS the same kind of
   act: pick one of a few and move on. what differs is the payload, so the cell
   is wider and taller: a name needs room a two digit day does not.
   auto-fit, not auto-fill: with two teachers the row is filled, not left with a
   phantom third column. */
.teacher-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:var(--s2);padding:0;list-style:none}
.teacher-cell{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:84px;padding:16px 18px;
  border:1px solid var(--hair-strong);border-radius:12px;text-decoration:none;color:var(--ink);
  transition:border-color .2s ease-out,background .2s ease-out}
a.teacher-cell:hover{border-color:var(--accent-text);background:var(--paper-warm);color:var(--ink)}
.teacher-name{font:400 21px/1.2 var(--serif)}
/* the language is the one fact that tells them apart, so it is the only thing
   beside the name. same treatment as .dow — small caps, muted, never colour
   alone carrying meaning */
.teacher-langs{font:600 11px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- date grid ---------- */
.date-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px;margin-top:var(--s2);padding:0;list-style:none}
.date-cell{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:68px;padding:10px 12px;
  border:1px solid var(--hair-strong);border-radius:12px;text-decoration:none;color:var(--ink);
  transition:border-color .2s ease-out,background .2s ease-out}
a.date-cell:hover{border-color:var(--accent-text);background:var(--paper-warm);color:var(--ink)}
/* a fully booked day stays in the grid. one that silently disappears reads as
   "she does not teach then", which is a different statement. dashed border and
   the word, not colour alone */
.date-cell.is-full{border-style:dashed;border-color:var(--hair);color:var(--muted);cursor:default}
.date-cell.is-full .dom{text-decoration:line-through;text-decoration-thickness:1px}
.date-state{font:600 9.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.date-grid .dow{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.date-grid .dom{font:500 17px/1.2 var(--serif);font-variant-numeric:lining-nums}
.month-head{font:600 12px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--accent-text);margin-top:var(--s4)}
.month-head:first-of-type{margin-top:var(--s2)}

/* ---------- slot radios ---------- */
.slot-field{border:0;padding:0;margin:clamp(28px,3.5vw,40px) 0 0;min-width:0}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.slot{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 10px;
  border:1px solid var(--hair-strong);border-radius:12px;cursor:pointer;
  font:500 15px/1 var(--sans);font-variant-numeric:lining-nums;color:var(--ink);
  transition:border-color .2s ease-out,background .2s ease-out,color .2s ease-out}
/* the radio stays in the tab order — display:none would take it out. it is moved
   out of sight, and :has() carries both the checked and the focus state */
.slot input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
/* hover only on the pills that can actually be picked */
label.slot:hover{border-color:var(--accent-text)}
.slot:has(:checked){background:var(--accent-text);border-color:var(--accent-text);color:#fff}
.slot:has(:focus-visible){outline:2px solid var(--accent-text);outline-offset:3px}

/* taken slots stay visible (Festlegung Marcus, 2026-08-02). rendered as inert
   spans, not disabled inputs — nothing to submit and nothing to re-enable from
   the console. the strikethrough carries the meaning visually, the .sr-only word
   carries it for screen readers; colour alone would carry it for neither */
.slot.is-taken{border-style:dashed;border-color:var(--hair);color:var(--muted);cursor:default;font-weight:400}
.slot.is-taken .slot-time{text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- form ---------- */
.booking-form{margin-top:clamp(32px,4vw,48px)}
.field{margin-top:var(--s3)}
.field label{display:block;font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px}
.field input[type="text"],.field input[type="email"],.field textarea{
  width:100%;min-height:48px;padding:12px 14px;
  border:1px solid var(--hair-strong);border-radius:10px;background:var(--paper);
  font:300 16px/1.6 var(--sans);color:var(--text);
  transition:border-color .2s ease-out}
.field textarea{min-height:132px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}
/* placeholder contrast is the one people forget — muted on paper is 4.5:1 */
.field ::placeholder{color:var(--muted);opacity:1}
.field-hint{font:400 12.5px/1.6 var(--sans);color:var(--muted);margin-top:6px}
.field-optional{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}

/* ---------- consent checkboxes ---------- */
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:var(--s3)}
.consent input{flex:0 0 auto;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent-text)}
.consent label{font:300 14.5px/1.7 var(--sans);color:var(--text);margin:0;
  text-transform:none;letter-spacing:0;font-weight:300}
.consent a{color:var(--accent-text)}

/* ---------- submit ---------- */
.booking-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:clamp(28px,3.5vw,40px)}
/* --accent-text, not --accent: white on #C25706 is 4.51:1 and clears the text
   threshold, white on #F2700C is 2.96:1 and does not. this is the one control
   on the page that must not be borderline */
.btn-book{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border:0;border-radius:999px;
  background:var(--accent-text);color:#fff;font:600 14.5px/1 var(--sans);cursor:pointer;
  transition:background .2s ease-out}
.btn-book:hover{background:var(--accent-deep)}
.btn-book:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.booking-actions .note{font:400 13px/1.6 var(--sans);color:var(--muted)}

/* ---------- back links ---------- */
.step-back{display:inline-flex;align-items:center;min-height:44px;font:500 13.5px/1 var(--sans);
  color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair-strong)}
.step-back:hover{color:var(--accent-text)}

/* ---------- messages ---------- */
/* errors stay inside the accent family. a second hue would read as a second
   brand colour on a page that has exactly one */
.form-error{margin-top:var(--s3);padding:16px 20px;border-left:3px solid var(--accent-deep);
  border-radius:0 10px 10px 0;background:#FBEADC}
.form-error p{font:500 14.5px/1.7 var(--sans);color:var(--ink)}
.form-error ul{margin:8px 0 0;padding-left:20px}
.form-error li{font:300 14.5px/1.7 var(--sans);color:var(--text)}

.booking-done{margin-top:var(--s4);padding:clamp(24px,3vw,36px);border:1px solid var(--hair);border-radius:16px;background:var(--paper-warm)}
.booking-done h2{font-size:clamp(24px,2.6vw,31px);margin-bottom:12px}
.booking-done .when{font:600 17px/1.5 var(--sans);color:var(--ink);font-variant-numeric:lining-nums;margin-bottom:var(--s2)}
.booking-done p{font:300 15.5px/1.8 var(--sans);color:var(--text);margin-bottom:12px}
.booking-done .next{margin-top:var(--s3)}

.empty-note{margin-top:var(--s3);padding:20px;border:1px dashed var(--hair-strong);border-radius:12px;
  font:300 15px/1.7 var(--sans);color:var(--text)}

/* ---------- draft banner ---------- */
/* removed together with the noindex meta on integration, see README.md */
.draft-flag{padding:10px var(--pad-x);background:var(--ink);color:var(--paper);
  font:600 11.5px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:center}

/* ---------- screen reader only ---------- */
/* not display:none — that would take the text out of the accessibility tree,
   which is the one place it needs to be */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- honeypot ---------- */
/* class only. a style attribute would be dropped by style-src 'self' and the
   field would sit visible in the form */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- narrow screens ---------- */
@media (max-width: 640px){
  .date-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .booking-actions{gap:var(--s2)}
  .btn-book{width:100%}
}