/* =============================================================================
   38. Fuenfzehn Minuten — der dreiseitige Terminweg

   Gehoert zu termin.html, termin-kontakt.html und termin-buchen.html. Der
   Weg beginnt im Menue unter "Projektanfrage → Beratungstermin
   vereinbaren" und an der dritten Karte am Ende von full-service.html.

   WARUM EIGENE FELDER (.feld-hell) UND NICHT .field AUS ABSCHNITT 18:
   Ausdrueckliche Vorgabe — die Eingabefelder dieses Weges sollen heller und
   freundlicher sein als die uebrigen Formulare der Website. Der Unterschied
   ist absichtlich und besteht aus drei Dingen:

     1. Heller Grund. .field steht auf rgba(255,255,255,0.03) und
        verschwindet fast im Seitenhintergrund; hier sind es 0.07 mit einem
        helleren Rahmen. Das Feld sieht aus wie etwas, in das man schreibt.
     2. Lesbare Beschriftung. .field beschriftet in 9 px Grossbuchstaben mit
        0.3em Sperrung — praezise, aber unwirsch. Hier steht ein normaler
        Satz in normaler Groesse.
     3. Runde Ecken und mehr Luft. Der Rest der Website ist kantig; an dieser
        einen Stelle ist das gewollt gebrochen.

   Die uebrigen Formulare bleiben unveraendert. Wer diesen Stil dort auch
   haben will, aendert nicht .field, sondern vergibt .feld-hell zusaetzlich —
   sonst kippt das Erscheinungsbild der ganzen Website mit einer Regel.

   MITTIG: Der ganze Weg steht in einer schmalen Spalte in der Seitenmitte.
   Wer einen Termin bucht, soll nichts anderes sehen — dieselbe Ueberlegung
   wie beim Anmeldekasten (.reg__kasten, Abschnitt 35).

   NICHT ZENTRIERT IST DER TEXT IN DEN FELDERN SELBST: Beschriftungen und
   Ueberschriften stehen mittig, die Eingabe steht links. Eine mittig
   laufende E-Mail-Adresse springt bei jedem Zeichen um eine halbe Breite —
   das liest sich beim Tippen wie ein Fehler.
   ========================================================================== */

.buchen {
  width: min(520px, 100%);
  margin: 0 auto;
  padding: 130px var(--pad-sm) 90px;
  text-align: center;
}

.buchen__stand {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #8a8a82;
}

.buchen__stand b {
  color: var(--glow);
  font-weight: 400;
}

.buchen__titel {
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.08;
  margin-top: 18px;
}

.buchen__zusage-marke {
  display: block;
  font-size: 9px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--glow);
  margin-bottom: 8px;
}

/* --- Das Formular ---------------------------------------------------------- */

.buchen__form {
  margin-top: 34px;
  display: grid;
  gap: 22px;
  text-align: left;
}

.buchen__form[hidden],
.buchen__fertig[hidden] {
  display: none;
}

.buchen__gruppe {
  border: 0;
}

.buchen__frage {
  display: block;
  width: 100%;
  /* Linksbuendig aus demselben Grund wie .feld-hell label weiter unten. */
  text-align: left;
  font-size: 14px;
  color: var(--mut);
  margin-bottom: 16px;
  padding: 0;
}

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

/* LINKSBUENDIG, nicht mittig -- Weisung der Auftraggeberin vom 2. September
   2026: Was ueber einem Eingabefeld steht, soll an dessen linker Kante
   beginnen. Der Rest der Seite (.buchen) bleibt mittig; eine mittige
   Beschriftung ueber einem linksbuendigen Feld sass optisch neben ihrem Feld
   statt darueber, und beim Ausfuellen sprang der Blick in jeder Zeile hin
   und her. */
.feld-hell label {
  display: block;
  font-size: 13px;
  color: #d8d8d2;
  margin-bottom: 9px;
  text-align: left;
}

.feld-hell input {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #4a4a52;
  border-radius: 10px;
  padding: 15px 18px;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}

.feld-hell input::placeholder {
  color: #82827b;
}

.feld-hell input:hover {
  background: rgba(255, 255, 255, 0.09);
}

.feld-hell input:focus {
  outline: none;
  border-color: var(--glow);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 3px rgba(255, 227, 176, 0.16);
}

/* Ein Feld, das der Besucher leer gelassen hat, obwohl es gebraucht wird.
   Gesetzt wird die Klasse vom Skript, nicht von :invalid — :invalid faerbt
   das Feld schon rot, bevor ueberhaupt jemand hineingeschrieben hat. */
.feld-hell.ist-leer input {
  border-color: #a05a4a;
  background: rgba(160, 90, 74, 0.1);
}

/* Ersatz fuer den Kalender, solange kein JavaScript laeuft. */
.feld-hell--ersatz[hidden] {
  display: none;
}

/* --- Kalender -------------------------------------------------------------- */

.kal[hidden] {
  display: none;
}

.kal__kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.kal__monat {
  font-size: 14.5px;
  color: var(--txt);
}

.kal__pfeil {
  font: inherit;
  font-size: 17px;
  line-height: 1;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #4a4a52;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  cursor: pointer;
  transition: 0.25s;
}

.kal__pfeil:hover:not(:disabled) {
  border-color: var(--glow);
  color: var(--glow);
}

.kal__pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}

.kal__wochentage,
.kal__tage {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  text-align: center;
}

.kal__wochentage span {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a7a73;
  padding-bottom: 9px;
}

.kal__tag {
  font: inherit;
  font-size: 13.5px;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid #3d3d45;
  border-radius: 8px;
  padding: 10px 0;
  cursor: pointer;
  transition: 0.2s;
}

.kal__tag:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--glow);
}

/* Vergangene Tage und Wochenenden. Sie bleiben stehen, statt zu
   verschwinden — ein Kalender mit Luecken liest sich nicht mehr als Monat. */
.kal__tag:disabled {
  color: #4c4c54;
  background: none;
  border-color: transparent;
  cursor: default;
}

.kal__tag--leer {
  visibility: hidden;
}

.kal__tag[aria-pressed="true"] {
  background: var(--glow);
  border-color: var(--glow);
  color: #0a0a0b;
  box-shadow: 0 0 22px rgba(255, 200, 140, 0.3);
}

/* --- Uhrzeiten ------------------------------------------------------------- */

.kal__zeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: center;
}

.kal__zeit {
  font: inherit;
  font-size: 13.5px;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid #4a4a52;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: 0.2s;
}

.kal__zeit:hover {
  border-color: var(--glow);
  background: rgba(255, 255, 255, 0.12);
}

.kal__zeit[aria-pressed="true"] {
  background: var(--glow);
  border-color: var(--glow);
  color: #0a0a0b;
}

.kal__hinweis {
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.6;
  color: #6c6c66;
  text-align: center;
}

/* --- Knopf, Fehler, Kleingedrucktes ---------------------------------------- */

.buchen__aktion {
  margin-top: 6px;
  text-align: center;
}

.buchen__aktion .button {
  width: 100%;
  display: block;
  padding: 17px 28px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
}

.buchen__fehler {
  font-size: 13px;
  color: #e0947f;
  text-align: center;
}

.buchen__fehler[hidden] {
  display: none;
}

.buchen__klein {
  font-size: 12.5px;
  line-height: 1.65;
  color: #7a7a73;
  text-align: center;
}

.buchen__zurueck {
  margin-top: 30px;
  font-size: 13px;
}

.buchen__loeschen {
  font: inherit;
  font-size: 12.5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #7a7a73;
  text-decoration: underline;
}

/* --- Bestaetigung ---------------------------------------------------------- */

.buchen__zusammenfassung {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--txt);
}

.buchen__zusammenfassung b {
  font-weight: 400;
  color: var(--mut);
}

@media (max-width: 700px) {
  .buchen {
    padding-top: 100px;
  }
}


/* .link bringt 30 px Abstand nach oben mit. Zusammen mit dem Abstand des
   Absatzes waeren es sechzig — der Zurueck-Weg stuende dann weit unter der
   Seite statt an ihrem Fuss. */
.buchen__zurueck .link {
  margin-top: 0;
}


/* =============================================================================
   LESBARKEIT UND BEDIENBARKEIT (seit dem 24. Oktober 2026)

   Nachbesserungen nach einer Prüfung auf Lesbarkeit und Bedienung mit
   Finger und Tastatur. Am Computer sieht alles aus wie vorher, die
   Änderungen greifen vor allem am Handy.
   ========================================================================== */

/* Dasselbe für die runden Felder der Anfragewege und Terminseiten. */
/* Steht gleich auch in anfrage.css, formulare.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.ablauf-hell .field input,
.ablauf-hell .field select,
.ablauf-hell .field textarea,
.feld-hell input {
  border-color: #70707a;
}

/* Steht gleich auch in formulare.css (Auftrag 043): nur zusammen ändern.
   Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
.ablauf-hell .field input:focus,
.ablauf-hell .field select:focus,
.ablauf-hell .field textarea:focus,
.feld-hell input:focus {
  border-color: var(--glow);
}

/* Kurzer Satz direkt am Feld in den Terminformularen. Das Skript setzt ihn
   ein, wenn das Feld beim Weiter leer oder unvollständig ist. */
.feld-hell__fehler {
  margin-top: 8px;
  font-size: 13px;
  color: #e0947f;
  text-align: left;
}

.buchen__klein {
  color: var(--mut-klein);
}

/* --- Kleine Beschriftungen am Handy: mindestens 11 Pixel ------------------
   Am Computer bleiben sie bei 9 Pixeln, wie gestaltet. Auf dem kleinen
   Bildschirm waren sie zu klein zum Lesen. Ausgenommen sind die Wochentage
   im Kalender: Sie stehen in sieben schmalen Spalten. */
@media (max-width: 560px) {
  /* Steht gleich auch in anfrage.css, basis.css, blog.css, loesungen.css, projekte.css, ratgeber.css, unternehmen.css (Auftrag 043): nur zusammen ändern.
     Grund: .agent/knowledge/css-js-files.md, "Doppelte Regeln". */
  .hero__scrollcue,
  .facts__label,
  .story__number,
  .project__link,
  .contact__label,
  .schritte b,
  .karte dt,
  .filter__name,
  .stelle .stelle__marke,
  .stelle__zwischen,
  .strip figcaption,
  .field label,
  .themen__nr,
  .faq__gruppe,
  .builder__stand,
  .uebernehmen__marke,
  .stimme__marke,
  .auswahl__weg,
  .anfrage__kachel .auswahl__weg,
  .anfrage__terminkopf,
  .stufenliste__nr,
  .pt__block,
  .liste th,
  .marke h3,
  .lichtprobe figcaption,
  .posten__gruppe,
  .stand__marke,
  .punkte__wer,
  .kette__stand,
  .marke__da,
  .buchen__zusage-marke,
  .karte__feldwort,
  .beitrag__thema,
  .faq__thema small,
  .probleme span,
  .leistungen__nr {
    font-size: 11px;
  }
}

/* =============================================================================
   Einwilligung vor dem Absenden (seit Auftrag 040)

   Die Einwilligung ist die einzige gewollte Änderung am Aussehen der
   Formulare (Baustein resources/views/partials/consent.blade.php).
   ========================================================================== */

.buchen__form .einwilligung {
  margin: 0;
}

/* =============================================================================
   Terminbuchung über Cal.com (seit dem 9. November 2026), termin-buchen.html.
   Nur sichtbar, wenn config('site.calcom.url') gesetzt ist.
   ========================================================================== */

.kalbuchung {
  margin: 0 0 36px;
}

.kalbuchung .buchen__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
}

.kalbuchung__rahmen {
  margin-top: 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.kalbuchung__rahmen[hidden] {
  display: none;
}

.kalbuchung__rahmen iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
}

.kalbuchung__oder {
  margin-top: 8px;
}