/*
 * Stil der Buchungsseite und der Kundinnenseiten hinter /t/<token>
 * (Aufgabe 13, Klassen aus token/seiten.js ergaenzt in Aufgabe 14).
 *
 * Fuer das Handy entworfen und ohne JavaScript lauffaehig. Die
 * Klassennamen stammen ausschliesslich aus src/web/buchung/seiten.js,
 * src/web/token/seiten.js, src/web/rahmen.js und -- seit Aufgabe 4,
 * Fix-Runde 2 -- src/web/kalender.js (Bauform kalenderLinks, Schritt 3
 * der Buchungsseite) -- kein Selektor hier zielt auf eine Klasse, die dort
 * nicht tatsaechlich vergeben wird.
 *
 * Die Farbtafel (:root) steht seit Aufgabe 14 nicht mehr hier, sondern
 * an EINER Stelle in oeffentlich/farben.css -- geladen ueber ein zweites
 * <link> in src/web/rahmen.js, VOR diesem Stylesheet.
 */

*, *::before, *::after {
  box-sizing: border-box;
}

/* Die Schrift des Systems (Spec 11.3). Keine geladene Schrift: sie waere
   eine externe Quelle, die das Inhaltsregelwerk ohnehin nicht zulaesst,
   und faellt bei fehlendem Netz oder blockiertem Laden einfach weg. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: #ffffff;
  margin: 0 auto;
  max-width: 34rem;
  padding: 0 1rem 2rem;
  line-height: 1.5;
}

header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rahmen);
}

.studio {
  margin: 0;
  font-weight: 700;
  color: var(--primaer);
}

/* Das Logo statt des Schriftzugs (Josef, 21.09.2026). width/height im HTML
   halten den Platz frei, bevor das Bild geladen ist; hier die Anzeigegroesse. */
.studio img {
  display: block;
  height: 88px;
  width: auto;
}

.fortschritt {
  margin: 0.5rem 0 0;
  color: var(--text);
  font-size: 0.9rem;
}

main {
  padding: 1.5rem 0;
}

footer {
  border-top: 1px solid var(--rahmen);
  padding: 1rem 0;
  font-size: 0.85rem;
}

h1 {
  font-size: 1.4rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.5rem;
}

a {
  color: var(--primaer);
}

/* Bedienelemente: mindestens 44 Pixel hoch (Spec 11.3), fuer den Daumen
   entworfen. Die Liste deckt jedes tatsaechlich antippbare Element ab, das
   seiten.js vergibt: button, summary sowie die Links in .behandlung,
   .wahl und .zeiten -- dazu jedes einzeilige Eingabefeld. .kalendertag
   (Fix-Runde 3, Aufgabe 4): ein waehlbarer Kalendertag ist hier ein <a>,
   kein <button> -- er faellt sonst durch jedes der obigen Muster. Der
   gesperrte Tag (<span class="kalendertag gesperrt">) ist AUSDRUECKLICH
   NICHT hier gelistet: span.kalendertag.gesperrt (siehe unten) setzt
   min-width/min-height eigens auf 0 und ist ein eigener, spezifischerer
   Regelblock -- kein Bedienelement, keine 44-Pixel-Pflicht (Spec 11.3). */
button,
summary,
.behandlung a,
.wahl a,
.zeiten a,
.kalendertag,
input:not([type="hidden"]) {
  min-height: 44px;
}

/* Knoepfe nie ueber die ganze Breite (Josef, 21.09.2026): so breit wie ihr
   Text, linksbuendig. */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  background: var(--primaer);
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  padding: 0 1rem;
  cursor: pointer;
}

button:hover,
button:active {
  background: var(--gedrueckt);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "\25B8";
  margin-right: 0.5rem;
  color: var(--primaer);
}

details[open] summary::before {
  content: "\25BE";
}

.anzahl {
  margin-left: auto;
  background: var(--flaeche);
  color: var(--text);
  border-radius: 1rem;
  padding: 0.1rem 0.6rem;
  font-size: 0.85rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.behandlung,
.wahl li,
.zeiten li {
  border-bottom: 1px solid var(--rahmen);
}

.behandlung a,
.wahl a,
.zeiten a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--text);
}

.behandlung .name {
  flex: 1;
}

.behandlung .dauer,
.behandlung .preis {
  color: var(--text);
  font-size: 0.9rem;
  white-space: nowrap;
}

.hinweis {
  display: block;
  font-size: 0.85rem;
  color: var(--text);
}

.zeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.zeiten li {
  border-bottom: none;
}

.zeiten a {
  justify-content: center;
  min-width: 4.5rem;
  border: 1px solid var(--primaer);
  border-radius: 0.5rem;
  padding: 0 0.75rem;
}

.zeiten a:hover,
.zeiten a:active {
  background: var(--flaeche);
}

.gewaehlt {
  background: var(--flaeche);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--text);
}

.leer {
  color: var(--text);
}

.feld {
  margin: 0 0 1rem;
}

.feld label,
.suche label {
  display: block;
  /* Eigene Zeile: zusammen mit flex-wrap in .suche bleibt die volle Breite
     fuer Eingabefeld und Knopf. */
  flex-basis: 100%;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.pflicht {
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 400;
}

/* Eingabefelder: die Umrandung ist das einzige Kennzeichen des Feldes,
   darum die dunklere Rahmenfarbe --rahmen-feld statt der allgemeinen
   --rahmen fuer Trennlinien. */
input,
textarea {
  width: 100%;
  border: 1px solid var(--rahmen-feld);
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: #ffffff;
}

input::placeholder,
textarea::placeholder {
  color: var(--hilfstext);
}

/* Beschriftung, Feld und Knopf nebeneinander -- aber die Beschriftung nimmt
   eine eigene Zeile (flex-basis: 100%), sonst bliebe fuer das Eingabefeld auf
   einem Handy ein Drittel der Breite. Spec 11.1 nennt Schritt 1 den
   kritischen Bildschirm und das Suchfeld das Mittel gegen 48 Behandlungen;
   dort darf es nicht das kleinste Element sein. */
.suche {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  margin: 0 0 1rem;
}

.suche input {
  flex: 1;
}

.suche button {
  width: auto;
  padding: 0 1rem;
}

.meldung {
  background: var(--flaeche);
  border: 1px solid var(--primaer);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--text);
  font-weight: 600;
}

.rechtliches {
  font-size: 0.85rem;
  color: var(--text);
}

.platzhalter {
  background: var(--flaeche);
  padding: 0.75rem;
  border-radius: 0.5rem;
}

/* Der Fokus wird NIE entfernt. Ohne Skript ist die Tastatur der einzige
   Weg fuer Menschen, die keine Maus benutzen. */
:focus-visible {
  outline: 3px solid var(--gedrueckt);
  outline-offset: 2px;
}

/* Das Fallenfeld (Aufgabe 12). BEWUSST NICHT display:none oder
   visibility:hidden -- gute Automaten erkennen beides und lassen das Feld
   dann leer. Aus dem sichtbaren Bereich geschoben fuellen sie es
   trotzdem aus. */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Jeder Tag in Schritt 3 (schrittZeit): eigener Abstand zum vorigen Tag,
   die Ueberschrift darin ist bereits h2. */
.tag {
  margin: 1.5rem 0 0;
}

/* Die Kundinnenseiten hinter /t/<token> (Aufgabe 14 -- Aufgabe 12 hat die
   Bildschirme gebaut, aber noch keinen Stil dafuer). */
.zeitknopf {
  margin-bottom: 0.5rem;
}

.verwerfen {
  margin-top: 1rem;
}

.zeit {
  font-weight: 600;
  margin: 0.25rem 0;
}

/* .knopf: eine Handlung, die wie ein Knopf aussieht, aber ein Link ist
   (z.B. "Abbrechen") -- deshalb eigene Regeln statt der button-Regel oben,
   die nur auf das Element button zielt. */
.knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 44px;
  border: 1px solid var(--primaer);
  border-radius: 0.5rem;
  padding: 0 1rem;
  margin-top: 0.5rem;
  text-decoration: none;
  color: var(--primaer);
  font-weight: 600;
}

.knopf:hover,
.knopf:active {
  background: var(--flaeche);
}

/* .gefahr: eine Handlung, die sich nicht zuruecknehmen laesst (Ablehnen,
   Absagen, Zurueckziehen). Auf einem Link (.knopf) faerbt sie Rahmen und
   Text um, auf einem Knopf (button, z.B. .haupt.gefahr) die Flaeche --
   die button-Regel oben setzt sonst die normale Primaerfarbe. */
a.gefahr {
  border-color: var(--zustand-abgelehnt-text);
  color: var(--zustand-abgelehnt-text);
}

button.gefahr {
  background: var(--zustand-abgelehnt-text);
}

button.gefahr:hover,
button.gefahr:active {
  background: #7c2517;
}

/* .haupt: die hervorgehobene Haupthandlung eines Bildschirms. Auf einem
   button ohnehin schon die Primaerfarbe (siehe button oben) -- die eigene
   Regel haelt die Klasse trotzdem als eigenstaendigen Selektor fest, statt
   sich allein auf die Elementregel zu verlassen. */
.haupt {
  font-weight: 700;
}

/*
 * Der Monatskalender aus src/web/kalender.js, Bauform kalenderLinks
 * (Schritt 3 der Buchungsseite, Aufgabe 4). Dieselben Regeln wie in
 * oeffentlich/dashboard.css fuer dieselben Klassen -- die
 * Bedienbarkeitsanforderungen (Spec 11.3: 44 Pixel, kein Zustand
 * ausschliesslich ueber Farbe) gelten fuer beide Seiten gleich, nur die
 * Bauform der Tage unterscheidet sich (dort <button>, hier <a>).
 */
.kalender {
  border-collapse: collapse;
  width: 100%;
  margin: 0.5rem 0;
}

.kalender th,
.kalender td {
  text-align: center;
  padding: 0.15rem;
}

/* Tage ausserhalb des Monats: leer, kein Rahmen, nicht antippbar (siehe
   src/web/kalender.js: zelle()). */
.ausserhalb {
  border: none;
}

/* min-height kommt aus der gemeinsamen Antipp-Ziele-Regel oben (button,
   summary, ..., .kalendertag) -- hier nur min-width, das dort nicht
   gesetzt wird. Zwei Deklarationen derselben Eigenschaft mit derselben
   Selektor-Spezifitaet waeren sonst eine Quelle, die je nach Reihenfolge
   im Stylesheet auseinanderlaufen kann, ohne dass eine Textpruefung es
   noch bemerkt (Fix-Runde 3, Aufgabe 4). */
.kalendertag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border: 1px solid var(--primaer);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--primaer);
  text-decoration: none;
}

a.kalendertag:hover,
a.kalendertag:active {
  background: var(--flaeche);
}

/* Nicht nur Farbe (Spec 11.3): der gewaehlte Tag bekommt zusaetzlich
   font-weight, wie im Dashboard, dazu aria-current="date" (siehe
   src/web/kalender.js) und eine dickere, aber unveraenderte Rahmenfarbe --
   kein neuer Farbwert, darum keine erneute Kontrastrechnung noetig (Auftrag
   Aufgabe 11, Teil A). */
.kalendertag.gewaehlt {
  background: var(--flaeche);
  font-weight: 600;
  border-width: 2px;
}

/* Kein Bedienelement (Spec 11.3): ein <span>, keine 44-Pixel-Pflicht.
   background und border-width stehen hier ABSICHTLICH nochmal explizit
   (Nachtrag zu Aufgabe 11, Ruling C26): Ein vergangener Tag kann gleichzeitig
   "gewaehlt" (der angefragte Tag) und "gesperrt" (nicht buchbar) sein --
   ohne die Wiederholung hier schiene die Farbflaeche von .kalendertag.gewaehlt
   durch, obwohl der Tag ausgegraut ist. So gewinnt "gesperrt" die Optik immer
   vollstaendig; aria-current bleibt trotzdem stehen (siehe kalender.js). */
span.kalendertag.gesperrt {
  min-width: 0;
  min-height: 0;
  background: transparent;
  border-width: 1px;
  /* Kein Kreis um nicht waehlbare Tage (Josef, 21.09.2026). Durchsichtig
     statt border: none, damit das Raster nicht um einen Pixel verrutscht. */
  border-color: transparent;
  color: var(--hilfstext);
}

.monatswechsel {
  display: flex;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem;
}

.monatswechsel a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Nie ueber die ganze Breite (Josef, 21.09.2026). */
  padding: 0 1rem;
  background: transparent;
  color: var(--primaer);
  border: 1px solid var(--primaer);
  border-radius: 0.5rem;
  text-decoration: none;
}

.monatswechsel a:hover,
.monatswechsel a:active {
  background: var(--flaeche);
}

/* Rechtstexte (21.09.2026): Aufzaehlungen mit Punkt -- die allgemeine
   ul-Regel oben nimmt ihn fuer die Auswahllisten weg. */
.aufzaehlung {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.5rem 0 1rem;
}

.aufzaehlung li {
  margin-bottom: 0.25rem;
}

/* Noch nicht geklaerte Stelle in den Rechtstexten: sichtbar, damit sie nicht
   unbemerkt live geht (Waechter in test/web/buchung.test.js). */
.offen {
  background: var(--flaeche);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
  font-weight: 600;
}