/* ==========================================================================
   Termine — Kundenseite unter /termin/<token>/
   Das Backend bringt seine Stile inline mit (siehe inc/termine-admin.php);
   hier steht nur, was Besucher zu sehen bekommen.
   ========================================================================== */

.termin-antwort {
  padding-block: var(--space-20);
}

.termin-antwort__lead {
  max-width: 62ch;
  margin-block: var(--space-6);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ---------- Rückmeldung nach dem Absenden ---------- */

.termin-antwort__hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  background: var(--color-surface);
  line-height: var(--leading-relaxed);
}

.termin-antwort__hinweis--fehler {
  border-left-color: var(--color-error);
}

.termin-antwort__hinweis i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 1.25rem;
  color: var(--color-success);
}

.termin-antwort__hinweis--fehler i {
  color: var(--color-error);
}

/* ---------- Die Terminkarte ---------- */

.termin-karte {
  margin-block: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.termin-karte__kopf {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

.termin-karte__status {
  display: inline-block;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.termin-karte__body {
  padding: var(--space-6);
}

.termin-karte__datum {
  margin: 0 0 var(--space-6);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.termin-karte__daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-5);
  margin: 0;
}

.termin-karte__daten dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.termin-karte__daten dd {
  margin: 0;
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* ---------- Die drei Möglichkeiten ---------- */

.termin-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.termin-aktionen__form {
  flex: 1 1 240px;
  margin: 0;
}

.termin-aktionen__btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Alternativvorschlag ---------- */

.termin-alternativ {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.termin-alternativ[open] {
  border-color: var(--color-primary);
}

.termin-alternativ__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.termin-alternativ__summary::-webkit-details-marker { display: none; }
.termin-alternativ__summary::marker { content: ''; }

.termin-alternativ__summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

.termin-alternativ__summary i:first-child {
  color: var(--color-primary);
  margin-right: var(--space-2);
}

.termin-alternativ__icon {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.termin-alternativ[open] .termin-alternativ__icon {
  transform: rotate(180deg);
}

.termin-alternativ__form {
  padding: 0 var(--space-6) var(--space-6);
}

.termin-alternativ__hint {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.termin-alternativ__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* ---------- Kontakt am Seitenende ---------- */

.termin-kontakt {
  margin-top: var(--space-14);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.termin-kontakt__intro {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.termin-kontakt__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ---------- Formularfelder auf dieser Seite ---------- */

.termin-alternativ__form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.termin-alternativ__form label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.termin-alternativ__form input[type="date"],
.termin-alternativ__form input[type="time"],
.termin-alternativ__form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.termin-alternativ__form input:focus-visible,
.termin-alternativ__form textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

@media (max-width: 600px) {
  .termin-antwort {
    padding-block: var(--space-12);
  }

  .termin-karte__datum {
    font-size: var(--text-xl);
  }

  .termin-aktionen__form {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Terminanfrage — das öffentliche Formular auf /terminbuchung/
   ========================================================================== */

.terminanfrage {
  max-width: 760px;
  margin-top: var(--space-10);
}

/* Der Hinweis, dass eine Anfrage keine Zusage ist. Steht bewusst über dem
   Formular und nicht darunter — wer ihn erst nach dem Absenden liest, hat
   die Anfahrt womöglich schon eingeplant. */
.terminanfrage__hinweis {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
  padding: var(--space-5) var(--space-6);
  max-width: none;
  border: 1px solid rgba(232, 180, 0, 0.4);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.terminanfrage__hinweis i {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 1.15rem;
  color: var(--color-primary-dark);
}

[data-theme="dark"] .terminanfrage__hinweis i {
  color: var(--color-primary);
}

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

.terminanfrage__block {
  margin: 0 0 var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.terminanfrage__block legend {
  padding: 0 var(--space-3);
  margin-left: calc(var(--space-3) * -1);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.terminanfrage__zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
}

.terminanfrage__form .form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.terminanfrage__form label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.terminanfrage__form input[type="text"],
.terminanfrage__form input[type="email"],
.terminanfrage__form input[type="tel"],
.terminanfrage__form input[type="date"],
.terminanfrage__form input[type="time"],
.terminanfrage__form select,
.terminanfrage__form textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.terminanfrage__form input:focus-visible,
.terminanfrage__form select:focus-visible,
.terminanfrage__form textarea:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 1px;
}

/* :user-invalid statt :invalid — sonst sind leere Pflichtfelder schon rot
   umrandet, bevor jemand das Formular überhaupt angefasst hat. Bei Datums-
   und E-Mail-Feldern ohne Platzhalter greift der sonst übliche Trick
   :not(:placeholder-shown) nicht, weil es gar keinen Platzhalter gibt. */
.terminanfrage__form input:user-invalid,
.terminanfrage__form select:user-invalid,
.terminanfrage__form textarea:user-invalid {
  border-color: var(--color-error);
}

/* Honigtopf: für Menschen unsichtbar, für Bots ausfüllbar. Nicht display:none —
   manche Bots erkennen das und lassen das Feld dann leer. */
.form-row--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.terminanfrage__zeiten {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.terminanfrage__zeiten i {
  color: var(--color-primary);
}

.terminanfrage__senden {
  width: 100%;
  justify-content: center;
}

.terminanfrage__senden[disabled] {
  opacity: 0.6;
  cursor: wait;
}

.terminanfrage__datenschutz {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* ---------- Rückmeldung ---------- */

.terminanfrage .form-feedback:empty {
  display: none;
}

.terminanfrage .form-feedback {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-success);
  background: var(--color-surface);
  line-height: var(--leading-relaxed);
}

.terminanfrage .form-feedback--error {
  border-left-color: var(--color-error);
}

@media (max-width: 600px) {
  .terminanfrage__block {
    padding: var(--space-5) var(--space-4);
  }
}

/* Urlaubshinweis am Formular: gleiche Form wie der Pflichthinweis, aber in der
   ruhigeren Blaunote — es ist eine Information, keine Warnung. */
.terminanfrage__hinweis--urlaub {
  border-color: color-mix(in srgb, var(--color-info, #35667A) 35%, transparent);
  border-left-color: var(--color-info, #35667A);
  background: color-mix(in srgb, var(--color-info, #35667A) 8%, var(--color-surface));
}

.terminanfrage__hinweis--urlaub i,
[data-theme="dark"] .terminanfrage__hinweis--urlaub i {
  color: var(--color-info, #35667A);
}

[data-theme="dark"] .terminanfrage__hinweis--urlaub i {
  color: #7FB3C8;
}

/* ==========================================================================
   Terminbuchung — Formular links, Zahlungsarten rechts
   ==========================================================================
   Gemessen am 04.09.2026: Der Inhaltsbereich ist 1152px breit, das Formular
   nutzte davon 760px und ist 1416px hoch. Rechts lagen also 440px ueber die
   gesamte Formularhoehe brach, und die Zahlungsbox stand darunter mit voller
   Breite — breiter als das Formular, was die Blockkante der Seite brach.

   Raster und Umbruchpunkt sind bewusst identisch zu .chiptuner-layout auf
   /kunde-werden/, damit sich benachbarte Seiten nicht unterschiedlich
   verhalten. minmax(0, 1fr) aus demselben Grund wie dort: Sonst kann die linke
   Spalte nicht unter die Mindestbreite ihres Inhalts schrumpfen.
   ========================================================================== */

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-12);
  /* stretch, nicht start: Sonst schrumpft die rechte Spalte auf die Hoehe
     ihres Inhalts, und die klebende Karte darin hat keinen Weg — sie scrollt
     dann einfach mit weg. Derselbe Fehler ist bei .chiptuner-layout in
     pages.css schon einmal aufgetreten und dort ausfuehrlich vermerkt. */
  align-items: stretch;
  margin-top: var(--space-10);
}

@media (max-width: 960px) {
  .booking-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Die Spalte begrenzt jetzt, nicht mehr das Element selbst. */
.booking-layout .terminanfrage {
  max-width: none;
  margin-top: 0;
}

/* Der Aufruf in der Randspalte springt hierher. Ohne diese Zeile verschwindet
   der Formularanfang unter dem klebenden Kopfbereich. */
.booking-layout__main .terminanfrage__form,
#dmw-terminanfrage {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

/* Die Karte begleitet das Ausfuellen. Die Hoehenbedingung ist dieselbe
   Vorsichtsmassnahme wie bei .contact-card: Was nicht ins Fenster passt, darf
   nicht kleben, sonst haengt der untere Teil dauerhaft ausserhalb. */
@media (min-width: 961px) and (min-height: 700px) {
  .booking-layout__aside .financing-box {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
  }
}

/* ── Die Box in der schmalen Spalte ──────────────────────────────────────────
   Ausschliesslich hier gescopet: .financing-box steht auch auf /alientech/ und
   /kunde-werden/, dort in breiteren Spalten und unveraendert. */

/* Nur in der Zweispalten-Ansicht: In 360 Pixeln Breite funktioniert das
   Nebeneinander von Bild und Text nicht mehr. Unterhalb von 961px steht die Box
   wieder unter dem Formular ueber die volle Breite — dort ist die Anordnung der
   Basisklasse richtig, samt ihrer eigenen Stapelung ab 600px. */
@media (min-width: 961px) {
  .booking-layout__aside .financing-box {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }

  /* Die Vorlage ist 397px breit. 200px angezeigt entsprechen 400 Geraetepixeln
     auf einem 2x-Display — darueber wird sie sichtbar unscharf. */
  .booking-layout__aside .financing-box__media {
    width: 200px;
    max-width: 100%;
    margin: 0 auto var(--space-4);
  }

  .booking-layout__aside .financing-box__content strong {
    font-size: var(--text-lg);
  }

  /* In der Randspalte ist der Aufruf das einzige Handlungsangebot — er bekommt
     die volle Breite statt als Textlink mitzulaufen. */
  .booking-layout__aside .financing-box__cta {
    justify-content: space-between;
    width: 100%;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
}

/* Einspaltig: Der untere Abstand der Basisklasse ist hier ueberfluessig, die
   naechste Sektion bringt ihren eigenen mit. */
@media (max-width: 960px) {
  .booking-layout__aside .financing-box { margin-bottom: 0; }
}