/* ==========================================================================
   buchung.css — Buchungsstrecke TCG Akademie

   Aufbau, Feldgroessen, Abstaende und Zustaende sind identisch zur
   Strecke von bkm consultants. Wer im Vortrag Kachel 1 antippt und wer
   Kachel 3 antippt, soll denselben Vorgang erleben. Unterschiedlich sind
   allein die Farben und das Logo.

   Gold wird bewusst nicht als Flaechen- oder Schriftfarbe eingesetzt: auf
   hellem Grund erreicht es 2,25:1 und waere weder lesbar noch
   bedeutungstragend. Es bleibt dem Logo vorbehalten.
   ========================================================================== */

/* --- Schrift und Farben der Akademie ---------------------------------------
   Uebernommen aus der Startseite: dieselben Schriftdateien aus fonts/,
   dieselben Farbwerte. Damit fuegt sich das Formular in die Website ein,
   ohne dass eine zweite Schriftlast entsteht — die Dateien sind bereits
   im Zwischenspeicher, wenn jemand ueber "Jetzt buchen" hierher kommt.

   Serif traegt die Ueberschriften, Sans den Fliesstext — wie auf der
   Startseite. Kein externer Aufruf.
   -------------------------------------------------------------------------- */

@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-serif-4-400.woff2') format('woff2');}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-serif-4-600.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/source-sans-3-400.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/source-sans-3-600.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/source-sans-3-700.woff2') format('woff2');}

:root {
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Source Sans 3', Arial, Helvetica, sans-serif;
  --schrift: var(--sans);

  /* Farbwerte der Startseite, unveraendert uebernommen */
  --flaeche:   #FFFFFF;   /* paper */
  --bg:        #FBFAF7;   /* soft  */
  --text:      #20303F;   /* ink   */
  --titel:     #041D3F;   /* navy  */
  --primaer:   #041D3F;
  --akzent:    #041D3F;
  --kante:     #5A6672;   /* muted */
  --warmweiss: rgba(4, 29, 63, .14);   /* ln */
  --fehler:    #8C2F27;   /* brick */

  --breite: 640px;
  --rand:   1.5rem;
  --sp-s:   1.25rem;
  --sp-m:   2rem;
  --sp-l:   2.5rem;
}

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

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

body {
  margin: 0;
  padding: 0 0 var(--sp-m);
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* --- Kopfleiste ----------------------------------------------------------- */

.kopfleiste {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--rand);
  background: var(--flaeche);
  border-bottom: 1px solid var(--warmweiss);
}

.kopfleiste__logo { display: block; }
.kopfleiste__logo img { display: block; height: 44px; width: auto; }

/* Nur fuer Vorlesesoftware. Ein Verweis, der ein neues Fenster oeffnet,
   muss angekuendigt werden — sichtbar stoert der Zusatz, hoerbar fehlt
   er sonst. */

.nur-vorlesen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Huelle --------------------------------------------------------------- */

.huelle {
  max-width: var(--breite);
  margin-left: auto;
  margin-right: auto;
  padding: var(--sp-l) var(--rand) 0;
}

.kopf { margin-bottom: var(--sp-m); }

.kopf__titel {
  margin: 0;
  color: var(--titel);
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.kopf__unter {
  margin: 0.75rem 0 0;
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.45;
}

/* --- Hinweisblock --------------------------------------------------------- */

.hinweis {
  margin-bottom: var(--sp-m);
  padding: 1rem 1.125rem;
  background: var(--flaeche);
  border: 1px solid var(--primaer);
}
.hinweis p { margin: 0; }

/* --- Felder --------------------------------------------------------------- */

.feld { margin-bottom: 1.25rem; }

.feld label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--titel);
  font-size: 1rem;
  font-weight: 700;
}

.feld input,
.feld select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.75rem;
  background: var(--flaeche);
  border: 1px solid var(--titel);
  border-radius: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.feld select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--titel) 50%),
                    linear-gradient(135deg, var(--titel) 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.feld input:focus-visible,
.feld select:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

.feld input[aria-invalid="true"],
.feld select[aria-invalid="true"] {
  border-color: var(--fehler);
  border-width: 2px;
}

.feld__fehler {
  margin: 0.375rem 0 0;
  color: var(--fehler);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

/* Koeder: fuer Menschen und Vorlesesoftware unerreichbar, fuer einfache
   Skripte aber ein normales Feld. Bewusst nicht allein ueber display:none. */

.koeder {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Datenschutzhinweis und Knopf ----------------------------------------- */

.datenschutz {
  margin: 1.5rem 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.datenschutz a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.knopf {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.875rem 1.25rem;
  background: var(--primaer);
  border: 1px solid var(--primaer);
  border-radius: 0;
  color: var(--flaeche);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.knopf:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}

.knopf:disabled {
  background: var(--kante);
  border-color: var(--kante);
  cursor: default;
}

/* --- Status und Bestaetigung ---------------------------------------------- */

.status {
  margin: 1rem 0 0;
  font-size: 1rem;
  line-height: 1.45;
}
.status:empty { margin: 0; }
.status--fehler {
  color: var(--fehler);
  font-weight: 700;
}

.bestaetigung {
  padding: 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--primaer);
}
.bestaetigung:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 3px;
}
.bestaetigung h2 {
  margin: 0 0 0.75rem;
  color: var(--titel);
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.25;
}
.bestaetigung p { margin: 0 0 0.5rem; }
.bestaetigung p:last-child { margin-bottom: 0; }
.bestaetigung a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* --- Fuss ----------------------------------------------------------------- */

.fuss {
  margin-top: var(--sp-l);
  padding-top: var(--sp-s);
  border-top: 1px solid var(--kante);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.fuss a {
  color: var(--akzent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.fuss a:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}
.fuss__trenner { padding: 0 0.375rem; }

/* --- Grosse Anzeigen ------------------------------------------------------ */

@media (min-width: 40rem) {
  .huelle { padding-top: 4rem; }
  .kopf__titel { font-size: 2.3rem; }
}