/* =====================================================================
   support.css — the five pages that are not an instrument page:
   lehrende.html, unterricht.html, probestunde.html, impressum.html, 404.html.

   base.css holds the tokens, the type and the page chrome. instrument.css
   holds the components those five pages REUSE (.prices, .facts, .teacher-role,
   .btn-row, .steps). This file adds only what none of them had: the teacher
   list, the FAQ, the booking flow, the legal page and the 404 hero.

   Loaded THIRD, after base.css and instrument.css, so a class here can lean on
   a value declared there. Nothing in here overrides an existing class.

   Order: teacher list -> FAQ -> booking flow -> legal page -> 404 ->
   reduced motion.
   ===================================================================== */


/* ===== lehrende: the teacher list =====
   Six people, and deliberately NOT six identical cards in a grid. One vertical
   list separated by hairlines, the monogram set very large in the display
   serif, and the side it stands on alternates from row to row. The alternation
   is what stops six entries with the same ingredients from reading as a
   template: the eye lands in a different place on every second person.

   The bio column keeps its left alignment on both sides. Mirroring German
   paragraphs to the right would cost more in readability than the asymmetry
   buys, so only the monogram moves. */

.people { list-style: none; margin: 0; padding: 0; }

.person {
  display: grid;
  gap: 1rem;
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--rule);
}
.person:last-child { border-bottom: 1px solid var(--rule); }

/* The monogram is type, not a picture. No stock portrait of a person who does
   not exist, and no photo slot left empty for a client to fill later. */
.p-mono {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.25rem, 9vw, 5.5rem);
  line-height: .9;
  letter-spacing: .04em;
  color: var(--brass);
}
.p-mono::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--brass);
  margin-top: .6rem;
}

.p-body h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); margin-bottom: .2rem; }
.p-body p { max-width: 54ch; }
.p-days { color: var(--paper-60); font-size: .9375rem; }
/* The two links per person are the whole point of the page: from a name
   straight to that instrument or straight to a trial lesson with them. */
.p-links { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.1rem; font-size: .9375rem; }

@media (min-width: 760px) {
  .person {
    grid-template-columns: 10rem minmax(0, 1fr);
    column-gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  /* Even rows: monogram to the right of the text, and the text pushed in from
     the left so the two sides never line up into a column of cards. */
  .person:nth-child(even) { grid-template-columns: minmax(0, 1fr) 10rem; }
  .person:nth-child(even) .p-mono { grid-column: 2; grid-row: 1; text-align: right; }
  .person:nth-child(even) .p-mono::after { margin-left: auto; }
  .person:nth-child(even) .p-body { grid-column: 1; grid-row: 1; padding-left: clamp(0rem, 5vw, 4rem); }
}


/* ===== unterricht: the FAQ =====
   Native <details>, so it opens without a line of JavaScript, works with the
   keyboard by itself and is searchable in the page. The marker is a drawn
   chevron because the default triangle is a different shape on every browser
   and none of them match this type. */

.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  position: relative;
  cursor: pointer;
  padding: 1.15rem 2.75rem 1.15rem 0;
  font-size: 1.0625rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .5rem; top: 1.55rem;
  width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:hover { color: var(--brass); }
.faq details > p { color: var(--paper-60); margin: 0 0 1.35rem; padding-right: 2.75rem; }


/* =====================================================================
   probestunde: the booking flow
   =====================================================================
   Five fieldsets, one visible at a time. Everything is a real form control:
   radios for the instrument and the age group, buttons for day and time,
   inputs for the contact details. Nothing here is a div pretending to be a
   control, which is why the whole flow already works from the keyboard
   without a single key handler in probestunde.js. */

.book fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  /* A fieldset has an intrinsic minimum width that ignores min-width:auto and
     pushes a grid child wider than its track. Without this the slot grid
     overflows the page at 390. */
  min-width: 0;
}
/* The `hidden` attribute comes from the browser's own stylesheet, and ANY
   author `display` beats it. Everything this file gives a display value to
   (.field, .btn, the fieldsets) would therefore stay on screen while the
   markup says it is hidden. One rule inside the form fixes all of them. */
.book [hidden], .book fieldset[hidden] { display: none; }

.book legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -.015em;
}
.book .hint { color: var(--paper-60); max-width: 46ch; }

/* The honesty line. This demo stores a booking in the visitor's own browser
   and sends nothing anywhere, and that has to be said before the first field,
   not in the small print underneath. */
.book-note {
  border-left: 2px solid var(--brass);
  padding: .1rem 0 .1rem 1rem;
  margin: 0 0 2.25rem;
  color: var(--paper-60);
  font-size: .9375rem;
  max-width: 52ch;
}

/* ----- step indicator -----
   Five steps, always all five, so nobody wonders how much is still coming.
   aria-current="step" carries the state for a screen reader; the brass fill
   carries it for everyone else. */
.steps-ind {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
  margin: 0 0 2.5rem;
  padding: 0;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-60);
}
.steps-ind li { display: flex; align-items: center; gap: .55rem; line-height: 1.9; }
.steps-ind .sn {
  flex: none;
  width: 1.55rem; height: 1.55rem;
  display: grid; place-items: center;
  border: 1px solid var(--rule-strong);
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: 0;
}
.steps-ind [aria-current="step"] { color: var(--brass); }
.steps-ind [aria-current="step"] .sn { border-color: var(--brass); color: var(--brass); }
.steps-ind [data-done="1"] .sn { background: var(--brass); border-color: var(--brass); color: var(--ink); }

/* ----- step 1: the six instrument tiles -----
   The same six drawings as the home page, here as radio buttons. The input
   itself is off screen but still focusable and still arrow-navigable, and the
   focus ring is drawn on the tile it controls. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin: 0 0 .5rem;
}
.tile {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 1.1rem 1rem 1.05rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tile input {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0;
  opacity: 0;
  pointer-events: none;
}
.tile svg {
  width: 100%; max-width: 7rem; height: auto;
  color: var(--brass);
  opacity: .68;
  transition: opacity var(--dur) var(--ease);
}
.tile-name { display: block; margin-top: .9rem; font-size: 1rem; }
.tile-note { display: block; color: var(--paper-60); font-size: .8125rem; }
.tile:hover { border-color: var(--rule-strong); }
.tile:hover svg { opacity: 1; }
.tile input:checked ~ svg { opacity: 1; }
.tile:has(input:checked) { border-color: var(--brass); }
.tile input:checked ~ .tile-name { color: var(--brass); }
/* The ring belongs around the tile, not around the 1px input nobody can see.
   Two selectors on purpose: :has() puts it on the whole tile where it is
   supported, and the sibling rule on the drawing is the floor if it is not.
   The input's own ring is switched off, or a 7px brass dot appears in the
   corner of the tile and reads as a rendering bug. */
.tile input:focus-visible { outline: none; }
.tile:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .tile input:focus-visible ~ svg { outline: 2px solid var(--brass); outline-offset: 8px; }
}

/* ----- step 2: who the lesson is for ----- */
.choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0 0 1.75rem; }
.choice label {
  position: relative;
  display: block;
  cursor: pointer;
  padding: .95rem 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.choice input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.choice label:hover { border-color: var(--rule-strong); }
.choice input:checked ~ .c-name { color: var(--brass); }
.choice label:has(input:checked) { border-color: var(--brass); }
.choice input:focus-visible { outline: none; }
.choice label:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .choice input:focus-visible ~ .c-name { outline: 2px solid var(--brass); outline-offset: 6px; }
}
.c-name { display: block; }
.c-note { display: block; color: var(--paper-60); font-size: .8125rem; }

/* The size note updates when instrument, group or age changes, so it is a live
   region. Its height is reserved for three lines: the note is the reason a
   parent keeps reading, and it must not shove the buttons down when it grows. */
.sizenote {
  border-left: 1px solid var(--rule-strong);
  padding-left: 1.1rem;
  min-height: 8em;
  color: var(--paper-60);
  max-width: 54ch;
}
@media (min-width: 760px) { .sizenote { min-height: 5em; } }

/* ----- step 3: day and time ----- */
.daybar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
  gap: .5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.day {
  width: 100%;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--paper);
  padding: .6rem .3rem .7rem;
  text-align: center;
  line-height: 1.3;
  font-size: .8125rem;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.day span, .day b { display: block; }
.day b { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; line-height: 1.1; }
.day:hover { border-color: var(--rule-strong); }
.day[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }

.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slot {
  width: 100%;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r);
  color: var(--paper);
  padding: .62rem .2rem;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.slot:hover { border-color: var(--brass); color: var(--brass); }
.slot[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }
/* Taken times stay readable rather than being dimmed into an unreadable grey:
   a struck-through time at full body contrast says "gone" without dropping
   below 4.5:1, which a 30%-opacity control would. */
.slot[aria-disabled="true"] {
  border-color: transparent;
  color: var(--paper-60);
  text-decoration: line-through;
  cursor: not-allowed;
}
.slot[aria-disabled="true"]:hover { border-color: transparent; color: var(--paper-60); }

.slot-head { margin: 0 0 .9rem; font-size: .9375rem; }
/* No free time on the chosen day is a designed state, not an empty box: it
   says so and offers the next day that does have one. */
.slot-empty { color: var(--paper-60); margin: 0; max-width: 46ch; }

/* ----- step 4: contact ----- */
.field { display: grid; gap: .4rem; margin: 0 0 1.4rem; max-width: 32rem; }
.field > label {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--stage);
  border: 1px solid var(--rule-strong);
  border-left-width: 2px;
  border-radius: var(--r);
  color: var(--paper);
  padding: .75rem .85rem;
  font-size: 1rem;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--paper-60); }
/* Invalid is marked by a brass edge and by the sentence underneath, never by
   colour alone and never by a browser alert. Red is not in this palette. */
.field [aria-invalid="true"] { border-left-color: var(--brass); border-left-width: 3px; }
.err { color: var(--brass); font-size: .875rem; margin: 0; }
.opt { color: var(--paper-60); letter-spacing: .14em; }

.check { display: flex; gap: .8rem; align-items: flex-start; margin: 1.75rem 0 .4rem; max-width: 34rem; }
.check input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .3rem; accent-color: var(--brass); }
.check label { font-size: .9375rem; }

/* ----- step 5: the confirmation -----
   One bordered block, and nothing inside it is boxed again. */
.summary { border: 1px solid var(--brass); padding: clamp(1.4rem, 4vw, 2.25rem); max-width: 38rem; }
.summary dl { display: grid; gap: 0; margin: 1.5rem 0 0; }
.summary dl > div { display: grid; gap: .2rem; padding: .85rem 0; border-top: 1px solid var(--rule); }
.summary dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.summary dd { margin: 0; }
@media (min-width: 560px) {
  .summary dl > div { grid-template-columns: 9.5rem 1fr; gap: 1.5rem; align-items: baseline; }
}
.ref {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3rem);
  line-height: 1;
  letter-spacing: .05em;
  color: var(--brass);
  margin: .3rem 0 0;
}
.ref-label { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-60); margin: 0; }

/* The "you already have an appointment" line on a reload. */
.book-again { border-left: 2px solid var(--brass); padding-left: 1rem; margin: 0 0 2rem; max-width: 52ch; }


/* ===== impressum: legal text =====
   A single readable column. Legal copy is the one place on this site where the
   job is to be findable and skimmable, not to be composed. */

.legal h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-top: 2.75rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.legal p, .legal li { max-width: 62ch; }
.legal ul { padding-left: 1.15rem; margin: 0 0 1em; }
.legal li { margin-bottom: .45rem; }
.legal address { font-style: normal; margin-bottom: 1em; }
/* The storage key is named in the privacy text so a reader can look it up in
   their own browser. Monospace at 1em, because the browser default shrinks it
   below the body size and it is a name people are meant to read. */
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; color: var(--brass); }
/* The "this is invented" banner has to be impossible to skim past: it is the
   first thing on the page and it keeps a brass edge. */
.fiction { border-left: 2px solid var(--brass); padding: .2rem 0 .2rem 1.1rem; margin: 0 0 2.5rem; max-width: 56ch; }

/* instrument.css fixes the .facts label column at 12rem, which is right for
   the one-word instrument-page labels but too narrow for the longer dt's on
   this page ("Musikschule Tonleiter") and on unterricht.html ("Wenn wir
   absagen", "Noten und Material") — they wrapped onto several lines. Scoped
   to the three sections that hold a long label, so the six instrument pages
   (which do not load this file) keep their fixed 12rem column untouched.
   minmax keeps 12rem as the floor for the page's short labels and lets only
   the long one grow to its own max-content width instead of wrapping. */
@media (min-width: 720px) {
  [data-sid="angaben"] .facts > div,
  [data-sid="semester"] .facts > div,
  [data-sid="leihinstrumente"] .facts > div {
    grid-template-columns: minmax(12rem, max-content) 1fr;
  }
}


/* ===== 404 =====
   The one page on this site that is allowed a display line larger than the
   home page's H1. It has nothing else to carry. */

.nf { padding-block: clamp(4rem, 12vw, 9rem); }
.nf h1 { font-size: clamp(3rem, 1.5rem + 9vw, 6.5rem); margin-bottom: .3em; }
.nf .lead { max-width: 44ch; }
/* Two fixed columns, not auto-fit: auto-fit fills a half-width grid area with
   three 178px columns, which is narrower than a line of text has any business
   being. Two columns keep each link in a 260px cell. */
.nf-links { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 560px) { .nf-links { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }
.nf-links li { border-top: 1px solid var(--rule); }
.nf-links a { display: block; padding: .95rem .5rem .95rem 0; text-decoration: none; font-size: 1.0625rem; }
.nf-links a:hover { color: var(--brass); }


/* ===== reduced motion =====
   Only the chevron rotation and the tile transitions come from this file, and
   base.css already flattens their duration. Nothing is left parked in the
   wrong place, so there is nothing to undo here. */