/*
 * Das Stilblatt des Schalters — nach der Ablaufstudie F-08 (E-051), ohne
 * ihre rosa Anmerkungen. Gehört der Gestaltung (docs/bau/schnittstellen.md).
 *
 * **Zwei Blätter, beide vom eigenen Ursprung** (vorlagen/rahmen.php):
 *
 *   1. /gesicht.css           die Farben der Marke als --haus-<name>
 *   2. /stil/schalter.css     dieses Blatt: Aufbau, Abstände, Zustände
 *
 * **Das Stilblatt der Marke erreicht den Browser nie selbst** (E-067). Der
 * Takt holt es, liest daraus nur die Variablen, die private/stil.php
 * einer Hausfarbe zuordnet (E-096) — --haus-pink, -blau, -gelb, -platte,
 * -akzent, -akzent-tief, -hervor, -fokus und -veranstaltung —, prüft
 * jede auf ihren Kontrast und gibt sie über /gesicht.css weiter
 * (src/Stil/Auslese.php). Fehlt das Blatt oder scheitert das Holen, stehen
 * dort die Hausfarben (E-048). *Eine Marke ändert ihre Farben, nicht den
 * Aufbau — und nicht, was auf dem Bestellknopf steht.*
 *
 * **Die Stellschrauben** (je mit Rückfall auf die bestätigten Hausfarben):
 *
 *   --schalter-platte          Kopf, Summe, der jetzige Schritt     #1d2244
 *   --schalter-akzent          der eine Knopf je Seite              #e10c7e
 *   --schalter-akzent-tief     derselbe Knopf unter dem Zeiger      #b8096a
 *   --schalter-hervor          Markenname im Kopf, Hinweisstreifen  #f8d247
 *   --schalter-fokus           der Fokusrahmen                      #387dbf
 *   --schalter-veranstaltung   Marke am jetzigen Schritt            #0b7fc4
 *   --schalter-schrift         Schriftfamilie                       Systemschrift
 *
 * Schrift und Logo kommen nicht aus dem Blatt der Marke: keine Webschrift,
 * und das Logo ist eine geprüfte Datei unter /bild/ (E-096), ein <img> im
 * Kopf, kein url() hier.
 *
 * **Warum der Knopf pink ist und nicht Schiffstour-Blau wie in der Studie:**
 * Weiß auf #0b7fc4 hat 4,33:1, Weiß auf #387dbf ebenso — beides unter 4,5:1
 * für gewöhnliche Schrift. Weiß auf #e10c7e hat 4,61:1, und pink ist auch
 * auf tourmittunte.de die Farbe der Knöpfe. Das Blau bleibt dort, wo es
 * keine Schrift trägt: am Fokusrahmen und am jetzigen Schritt.
 *
 * Jeder Kontrast hier ist gerechnet (Claude Apps/Werkzeug/farbrechnung.py),
 * die Werte stehen am Wert. **Keine Webschrift, kein fremder Aufruf, kein
 * @import** (plan.md, „Das Aussehen“; die Inhaltsrichtlinie ließe es auch
 * nicht zu).
 */

:root {
  --schalter-platte: var(--haus-platte, #1d2244);
  --schalter-akzent: var(--haus-akzent, var(--haus-pink, #e10c7e));
  --schalter-akzent-tief: var(--haus-akzent-tief, #b8096a);
  --schalter-hervor: var(--haus-hervor, var(--haus-gelb, #f8d247));
  --schalter-fokus: var(--haus-fokus, var(--haus-blau, #387dbf));
  --schalter-veranstaltung: var(--haus-veranstaltung, #0b7fc4);
  --schalter-schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Das Grau der Studie (#6b6f76) hatte auf dem Grund außen 4,28:1. */
  --grund-aussen: #efece6;
  --grund: #fdfdfb;
  --papier: #fff;
  --text: #1d2024;            /* 16,05:1 auf --grund */
  --leise: #5d6168;           /* 6,11:1 auf --grund, 5,28:1 außen */
  --linie: #e3e1dc;           /* nur Trennlinie, kein Rand eines Feldes */
  --feldrand: #8b8780;        /* 3,51:1 auf --grund — ein Feldrand braucht 3:1 */
  --fehler: #c0392b;          /* 5,44:1 auf Weiß, 5,12:1 auf --fehler-grund */
  --fehler-grund: #fff6f5;
  --knapp: #7a5c00;           /* Rand des gelben Zustands: 6,14:1 auf --grund */
  --aus: #5d6168;             /* 5,35:1 auf --aus-grund */
  --aus-grund: #eceef0;
  --hinweis-grund: #fff8e6;

  /* Eine Abstandsskala, deren Stufen trennen und verbinden. */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;

  /* Drei Rundungen für drei Arten: Feld, Knopf, Fläche. */
  --rund-feld: .375rem;
  --rund-knopf: .5rem;
  --rund-flaeche: .625rem;

  --breite: 60rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--grund-aussen);
  color: var(--text);
  font: 1rem/1.55 var(--schalter-schrift);
}

/* Nur für Vorleseprogramme: der Zusammenhang, den das Auge aus der Lage
   liest („Tickets“ — für welchen Termin?). */
.unsichtbar {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Wer mit der Tastatur kommt, springt am Kopf und an den Schritten vorbei. */
.sprung {
  position: absolute;
  left: var(--s4);
  top: -10rem;
  z-index: 10;
  padding: var(--s2) var(--s4);
  background: var(--papier);
  color: var(--text);
  border-radius: var(--rund-knopf);
}
.sprung:focus { top: var(--s4); }

a { color: inherit; text-underline-offset: .15em; }

:focus-visible {
  outline: 3px solid var(--schalter-fokus);   /* 4,25:1 auf --grund, 3,56:1 auf der Platte */
  outline-offset: 2px;
}

.rahmen {
  max-width: var(--breite);
  margin: 0 auto;
}

/* MARK: - Probebetrieb (E-060) */
.probe {
  margin: 0;
  padding: var(--s2) var(--s4);
  background: var(--schalter-hervor);
  color: var(--text);                          /* 11,13:1 */
  font-size: .9rem;
  text-align: center;
}

/* MARK: - Kopf: der Firmenteil (E-009) */
/* Der pinke Strich unten ist das Erkennungszeichen der Marke — derselbe
   Dreiklang wie auf tourmittunte.de, auf der Platte der Studie. */
.kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--schalter-platte);
  color: #fff;                                 /* 15,39:1 */
  border-bottom: 4px solid var(--schalter-akzent);
}
.kopf a { text-decoration: none; }
.kopf a:hover { text-decoration: underline; }

.kopf-start {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-weight: 700;
  font-size: 1.05rem;
}
/* Das Logo der Marke (E-096) an der Stelle ihres Namens: 3rem hoch, so hoch
   wie der Griff um den Kopf (44 px) und etwas darüber, damit die Schrift im
   Bild so groß wirkt wie „Karten“ daneben. Die Datei ist doppelt so groß
   (96 px), für scharfe Bildschirme. Die weiße Kontur des Logos trägt es auf
   der Platte; die Breite folgt dem Seitenverhältnis. */
.kopf-logo {
  display: block;
  height: 3rem;
  width: auto;
}
.kopf-marke { color: var(--schalter-hervor); }  /* 10,48:1 auf der Platte */

.kopf-website {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9rem;
  color: #d5d8e0;                              /* 10,79:1 auf der Platte */
}

/* MARK: - Die Schritte */
/* Anzeige, keine Navigation: Zurück geht über den Weg am Ende des
   Schrittes. Zwei Griffe für dieselbe Sache waren eine Doppelung (E-051). */
.schritte {
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  overflow-x: auto;
}
.schritte ol {
  display: flex;
  gap: var(--s1) var(--s4);
  margin: 0;
  padding: var(--s2) var(--s4);
  list-style: none;
}
.schritte li {
  padding: var(--s1) 0;
  font-size: .85rem;
  color: var(--leise);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
/* Der jetzige Schritt: fett, dunkel und unterstrichen — nicht nur farbig. */
.schritte li.jetzt {
  color: var(--schalter-platte);
  font-weight: 700;
  border-bottom-color: var(--schalter-veranstaltung);  /* 4,33:1 auf Weiß */
}
.schritte li.fertig::before { content: "✓\00a0"; }

/* MARK: - Die Seite */
.inhalt {
  background: var(--grund);
  padding: var(--s5) var(--s4) var(--s6);
}
.inhalt > :first-child { margin-top: 0; }

h1 {
  margin: 0 0 var(--s1);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.75rem);
  line-height: 1.2;
}
h2 {
  margin: var(--s6) 0 var(--s2);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
}
p { margin: 0 0 var(--s3); }
.unter { color: var(--leise); margin-bottom: var(--s5); }

/* Der Veranstaltungsteil (E-009): Titel, Zeit, Ort — was der Gast kauft. */
.veranstaltung { margin-bottom: var(--s5); }
.veranstaltung p,
.veranstaltung .wann,
.veranstaltung .wo { margin: 0; }
.veranstaltung .wann { font-weight: 600; }
.veranstaltung .wo { color: var(--leise); }

/* MARK: - Die vier Zustände (E-051) — ein Wort für einen Zustand */
.zustand {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: var(--rund-knopf);
  font-size: .9rem;
  font-weight: 700;
}
.zustand.knapp {
  background: var(--schalter-hervor);
  color: var(--schalter-platte);               /* 10,48:1 */
  border: 1.5px solid var(--knapp);
}
.zustand.ausverkauft,
.zustand.geschlossen { background: var(--aus-grund); color: var(--aus); }

/* MARK: - Die Terminliste */
.termine {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linie);
}
.termin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s4);
  align-items: center;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--linie);
}
.termin h2 {
  margin: 0 0 var(--s1);
  font-size: 1.1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.termin p { margin: 0; }
.termin .wo,
.termin .preis { color: var(--leise); font-size: .95rem; }

/* Wie auf tourmittunte.de: Der Zustand ist zugleich der Griff. Frei und
   knapp führen zum Termin, ausverkauft und geschlossen sind nur ein Wort. */
.griff {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 8.5rem;
  padding: var(--s2) var(--s4);
  border-radius: var(--rund-knopf);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
a.griff.frei { background: var(--schalter-akzent); color: #fff; }        /* 4,61:1 */
a.griff.frei:hover { background: var(--schalter-akzent-tief); }          /* 6,39:1 */
a.griff.knapp {
  background: var(--schalter-hervor);
  color: var(--schalter-platte);
  border: 1.5px solid var(--knapp);
}
a.griff.knapp:hover { text-decoration: underline; }
.griff.ausverkauft,
.griff.geschlossen {
  background: var(--aus-grund);
  color: var(--aus);
  font-weight: 600;
}

.leer {
  padding: var(--s5);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-flaeche);
}

/* MARK: - Tabellen */
table {
  width: 100%;
  margin: 0 0 var(--s3);
  border-collapse: collapse;
}
th, td {
  padding: var(--s2) var(--s1);
  border-bottom: 1px solid var(--linie);
  text-align: left;
  vertical-align: top;
}
thead th {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--leise);
}
tbody th { font-weight: 400; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.auswahl td { vertical-align: middle; }

/* MARK: - Formulare */
label, .beschriftung {
  display: block;
  margin: var(--s4) 0 var(--s1);
  font-size: .9rem;
  font-weight: 600;
}
.pflicht { color: var(--leise); font-weight: 400; }

input, select {
  width: 100%;
  min-height: 44px;
  padding: var(--s2) var(--s3);
  font: inherit;
  color: var(--text);
  background: var(--papier);
  border: 1.5px solid var(--feldrand);
  border-radius: var(--rund-feld);
}
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--fehler);
  background: var(--fehler-grund);
}

.warum {
  margin: var(--s1) 0 0;
  font-size: .85rem;
  color: var(--leise);
}
/* Der Fehler sagt in Worten, was fehlt — die rote Farbe allein trüge es nicht. */
.fehler {
  margin: var(--s1) 0 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--fehler);
}
.fehler[hidden] { display: none; }

.fehlerliste {
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--fehler-grund);
  border-left: 4px solid var(--fehler);   /* trägt den Zustand: hier stimmt etwas nicht */
  border-radius: 0 var(--rund-feld) var(--rund-feld) 0;
}
.fehlerliste p { margin: 0 0 var(--s1); font-weight: 700; }
.fehlerliste ul { margin: 0; padding-left: var(--s5); }
.fehlerliste a { color: var(--fehler); }

.zeile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s3);
}
.zeile.schmal-breit { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.zeile.breit-schmal { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Eine Karte je Fieldset: die Nummer vorn, damit sie beim Prüfen
   wiederzufinden ist. */
fieldset.karte {
  margin: 0 0 var(--s3);
  padding: var(--s2) var(--s4) var(--s4);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-flaeche);
}
fieldset.karte legend {
  padding: 0 var(--s1);
  font-weight: 700;
}
fieldset.karte legend .nr { color: var(--schalter-platte); }
/* Name und Anschrift als Gruppe: ein Zweck für mehrere Felder (E-051). */
fieldset.gruppe {
  min-width: 0;
  margin: var(--s4) 0 0;
  padding: 0;
  border: 0;
}
fieldset.gruppe legend { margin: 0; padding: 0; font-size: 1rem; }
fieldset.gruppe > .warum { margin-top: 0; }
fieldset.gruppe label { margin-top: var(--s3); }
.leise-block { display: block; color: var(--leise); font-size: .9rem; font-weight: 400; }
fieldset.zahlart { margin: 0; padding: 0; border: 0; }
fieldset.zahlart label { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 400; }
fieldset.zahlart input { width: auto; min-height: 0; margin-top: .3rem; }
/* Das Feld „AGB zur Kenntnis genommen“ (Antwort 6 des Anwalts): ein Häkchen
   mit gutem Ziel, der Satz daneben, der Fehler darunter. */
.agb { margin: var(--s4) 0; }
.agb label { display: flex; gap: var(--s2); align-items: flex-start; font-weight: 400; }
.agb input { flex: none; width: 1.5rem; height: 1.5rem; min-height: 0; margin-top: 0; }

/* MARK: - Summe und Knöpfe */
.summe {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin: var(--s2) 0 0;
  padding: var(--s2) 0;
  border-top: 2px solid var(--schalter-platte);
  font-size: 1.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Eine Handlung je Seite (E-051): ein Knopf, und daneben leise der Weg zurück. */
.knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  margin-top: var(--s5);
}
.knopf {
  appearance: none;
  min-height: 48px;
  padding: var(--s3) var(--s5);
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;                                   /* 4,61:1 auf dem Pink */
  background: var(--schalter-akzent);
  border: 0;
  border-radius: var(--rund-knopf);
  cursor: pointer;
}
.knopf:hover { background: var(--schalter-akzent-tief); }
.knopf[disabled] { cursor: progress; background: var(--schalter-akzent-tief); }
/* Zurück ist ein Weg, keine Handlung — deshalb sieht auch der Knopf mit
   `richtung=zurueck` aus wie ein Verweis. */
.zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: .15em;
  background: none;
  border: 0;
  cursor: pointer;
}

/* MARK: - Hinweise */
/* Der gelbe Streifen trägt eine Auskunft: Das hier muss man gelesen haben,
   bevor man bestellt (Vertragspartner, kein Widerrufsrecht). */
.hinweis {
  margin: var(--s5) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--hinweis-grund);
  border-left: 4px solid var(--schalter-hervor);
  border-radius: 0 var(--rund-feld) var(--rund-feld) 0;
  font-size: .95rem;
}
.hinweis p:last-child { margin-bottom: 0; }
.hinweis a { color: var(--schalter-platte); }

/* MARK: - Bestätigung: was der Gast zum Überweisen braucht */
.bank {
  margin: 0 0 var(--s4);
  padding: var(--s4);
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-flaeche);
  font-variant-numeric: tabular-nums;
}
.bank dt {
  margin-top: var(--s3);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--leise);
}
.bank dt:first-child { margin-top: 0; }
.bank dd { margin: .1rem 0 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.bank dd.gross { font-size: 1.35rem; font-weight: 700; }
/* IBAN und Verwendungszweck mit einem Griff markieren — abgeschrieben
   wird hier nur, was falsch ankommt. */
.bank .ganz { user-select: all; -webkit-user-select: all; }

/* MARK: - Die Leiste am Handy (E-051) */
/* Nur am Handy, und ohne Knopf: Sie hält den Kauf in Sichtweite, sie ist
   nicht die Handlung. Die steht einmal, am Ende des Schrittes. */
.leiste { display: none; }

/* MARK: - Fußzeile: wer verkauft (E-051) */
.fuss {
  padding: var(--s4);
  background: var(--papier);
  border-top: 1px solid var(--linie);
  font-size: .9rem;
  color: var(--leise);
}
.fuss p { margin: 0 0 var(--s2); }
.fuss b { color: var(--text); }
.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.fuss a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text);
}
/* Ein Rechtstext ohne Adresse (E-068): kein toter Verweis, sondern ein Wort,
   das auffällt. Die Farbe trägt es nicht allein — „nicht hinterlegt“ steht da. */
.fuss li { display: inline-flex; align-items: center; min-height: 44px; }
.fuss .fehlt { margin-left: .25em; color: var(--fehler); font-weight: 600; }   /* 5,44:1 auf Weiß */
.fuss .wortmarke { margin: var(--s2) 0 0; color: var(--text); font-weight: 700; }

/* MARK: - Schmale Bildschirme */
/* Die Leiste erscheint dort, wo der Knopf am Ende des Formulars aus dem Bild
   rutscht — ab der Breite, an der die Studie sie zeigt. */
@media (max-width: 51.25rem) {
  .leiste {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--s3);
    padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: var(--papier);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .06);   /* sie liegt über der Seite */
  }
  .leiste .wert {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .leiste .was { color: var(--leise); font-size: .9rem; }
}

/* Am Handy stapeln sich die Felder, statt zu schrumpfen. */
@media (max-width: 40rem) {
  .inhalt { padding: var(--s4) var(--s4) var(--s5); }
  .zeile,
  .zeile.schmal-breit,
  .zeile.breit-schmal { grid-template-columns: minmax(0, 1fr); }
  .termin { grid-template-columns: minmax(0, 1fr); }
  .griff { justify-self: start; }
  .knopf { width: 100%; }
  .kopf-website { margin-left: 0; font-size: .85rem; min-height: 32px; }
  /* Fünf Namen passen nicht nebeneinander; der jetzige behält seinen, die
     anderen zeigen die Nummer. Vorgelesen werden alle. */
  .schritte li:not(.jetzt) .schritt-name {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* MARK: - Drucken: die Bestätigung als Beleg */
@media print {
  body { background: #fff; }
  .sprung, .schritte, .leiste, .knoepfe, .kopf-website { display: none; }
  .kopf { background: none; color: #000; border-bottom: 2px solid #000; }
  .kopf-marke { color: #000; }
  .inhalt { padding: 0; }
  .bank { border-color: #000; }
}