/* ==========================================================================
   Ergänzung zu custom.css — Bausteine für "Zur Unterlage" und "Termin"
   Im Include-Order nach custom.css einsortieren.
   ========================================================================== */

/* Formularfelder */

.form-label {
  font-family: var(--inst-ff-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--inst-ink);
  margin-bottom: 6px;
}

.form-control {
  background: var(--inst-bg);
  border: 1px solid var(--inst-line-band);
  border-radius: var(--inst-r-sm);
  color: var(--inst-ink);
  font-family: var(--inst-ff-body);
  font-size: 15.5px;
  padding: 12px 14px;
}

.form-control::placeholder {
  color: var(--inst-tertiary, #AAB3B8);
}

.form-control:focus {
  background: var(--inst-bg);
  border-color: var(--inst-accent);
  box-shadow: 0 0 0 4px rgba(225, 181, 99, .3);
  color: var(--inst-ink);
}

.form-check-label {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--inst-ink-soft);
}

.form-check-input {
  border-color: var(--inst-line-band);
}

.form-check-input:checked {
  background-color: var(--inst-accent);
  border-color: var(--inst-accent);
}

.form-check-input:focus {
  border-color: var(--inst-accent);
  box-shadow: 0 0 0 4px rgba(225, 181, 99, .3);
}

/* Terminkarte: dunkler Kasten mit Button zu cal.eu.
   Kein eingebetteter Kalender — die Seite lädt keine fremden Inhalte. */

.inst-terminkarte {
  border-radius: var(--inst-r-lg);
  padding: 36px clamp(24px, 3vw, 40px);
}

.inst-terminfakten {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inst-terminfakten li {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--inst-line-dark);
}

.inst-terminfakten li:last-child {
  border-bottom: 1px solid var(--inst-line-dark);
}

.inst-terminfakten .inst-mono {
  flex: 0 0 84px;
  color: var(--inst-on-dark-3);
}

.inst-terminfakten li > span:last-child {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--inst-on-dark);
}

.inst-terminkarte-hinweis {
  font-size: 13px;
  color: var(--inst-on-dark-3);
  margin-top: 14px;
}

/* Sprungmarken */

#nachricht, #termin {
  scroll-margin-top: 96px;
}

/* Kontakt-Hero: querformatiges Bild, damit der Schriftzug im Bild
   nicht beschnitten wird. Nur auf termin.html verwendet. */

.inst-hero-img--breit {
  height: auto;
}

@media (max-width: 991.98px) {
  .inst-hero-img--breit {
    height: auto;
  }
}

/* Honigtopf: für Menschen unsichtbar, für Bots aber vorhanden.
   Kein display:none — manche Bots ignorieren solche Felder gezielt. */

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

/* Statusmeldungen nach dem Absenden */

.inst-hinweis {
  border-radius: var(--inst-r-sm);
  padding: 16px 18px;
  margin-bottom: 24px;
  font-size: 15.5px;
  line-height: 1.55;
}

.inst-hinweis--fehler {
  background: rgba(156, 90, 44, .12);
  border-left: 3px solid #9C5A2C;
  color: var(--inst-ink);
  display: none;
}

.inst-hinweis--fehler:target {
  display: block;
}

/* Danke-Seite */

.inst-danke {
  padding-block: clamp(64px, 8vw, 120px);
}