/* Seitenspezifische Regeln fuer Termin vereinbaren.
   Gemeinsame Muster stehen in bausteine.css. */

/* Die einzige Seite mit weissem Seitengrund: die Vorlage setzt hier bgCover auf
   #ffffff, waehrend Start-, Ueber-uns-, Impressums- und Datenschutzseite #e6f7ff
   zeigen. Das data-Merkmal setzt build.mjs. */
body[data-seite="termin-vereinbaren"] {
  background: var(--weiss);
}

/* Buchungskarte: mittig, nicht ueber die volle Innenbreite — das Kalender-Widget aus
   Phase 5 rechnet mit rund 900px. */
.buchung {
  max-width: 900px;
  margin-inline: auto;
  padding: 2rem 1.5rem;
}

/* Hinweiszeile mit der aus dem Versicherungsfinder uebergebenen Auswahl. Steht
   ueber der Buchungskarte und nimmt deren Breite auf, damit beides eine Spalte
   bildet.

   Bewusst OHNE display-Angabe: Das Markup traegt hidden, und dessen Wirkung ist
   nichts weiter als das Browser-Default display: none. Eine Klassenregel wiegt
   schwerer als dieses Default — ein display: flex hier wuerde den Kasten also
   auch ohne Parameter zeigen. Wird eine Ausrichtung noetig, muss zusaetzlich
   .auswahl[hidden] { display: none } gesetzt werden. */
.auswahl {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 0.875rem 1.25rem;
  border-radius: var(--radius);
  background: var(--flaeche-blau);
  color: var(--text-gedaempft-stark);
  font-family: var(--schrift-text);
  /* Ein langer Wert aus der Adresszeile darf den Kasten nicht sprengen. Die
     Laengengrenze steht in termin-auswahl.js, das hier ist die zweite Sicherung
     fuer lange Woerter ohne Trennstelle. */
  overflow-wrap: break-word;
}

/* Der Name selbst hebt sich ab. --primaer-dunkel statt --primaer: Der Primaerton
   haelt auf der 20-%-Blauflaeche nur 3,68:1 und verfehlt damit WCAG AA fuer
   Normaltext; dieser Ton haelt dort 8,3:1. Gleiche Begruendung wie beim
   Budget-Hinweis des Versicherungsfinders. */
#auswahl-werte {
  font-family: var(--schrift-headline);
  color: var(--primaer-dunkel);
}

.buchung__kontakt {
  margin-top: 1.5rem;
  text-align: center;
  color: var(--text-gedaempft);
}