/* Demo-Termin-Fenster: von jeder Seite aus erreichbar (Kopfzeile und
   Aufklapp-Menue). Bauart nach dem kontakt-fenster des Schwesterprojekts.
   Nutzt die :root-Farbvariablen, die jede Seite selbst definiert. */

/* Ausloeser in der Kopfzeile - der wichtigste Knopf der Seite, deshalb
   Magenta (Martin, 20.08.2026). Padding 10px ersetzt 8px + 2px Rahmen:
   gleiche Hoehe wie vorher, nichts springt. */
.kopf-demo {
  border: none; color: var(--c-text);
  background: var(--c-signal); border-radius: 8px;
  padding: 10px 14px; font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.kopf-demo:hover { background: var(--c-signal-dunkel); }
@media (max-width: 1160px) { .kopf-demo { display: none; } }

/* Ausloeser im Aufklapp-Menue */
.klappnav-demo {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-top: 1px solid var(--c-linie);
  padding: 12px 4px; font: inherit; font-weight: 600; color: var(--c-titel);
  cursor: pointer;
}

/* Das Fenster selbst: liegt fest ueber der Seite, verschiebt nichts. */
.demo-fenster {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: rgba(31, 45, 61, .55);
}
.demo-fenster.offen { display: flex; }
.demo-fenster-panel {
  background: #ffffff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(6, 68, 146, .25);
  width: 100%; max-width: 560px; margin: 4vh auto;
  padding: 28px; position: relative;
}
.demo-fenster-titel { margin: 0 36px 6px 0; font-size: 1.4rem; font-weight: 800; color: var(--c-titel); }
.demo-fenster-text { margin: 0 0 18px; color: var(--c-nebentext); font-size: .95rem; line-height: 1.55; }
.demo-fenster-zu {
  /* 44px statt 36: Klickziele sind mindestens 40px hoch - auf dem Handy
     zielt ein Daumen (Befund der Anruf-Fenster-Messung, 31.08.2026).
     top/right um die 8px Zuwachs verringert, damit das x optisch an
     seinem Platz bleibt. */
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border: none; border-radius: 8px;
  background: #f5f7fa; color: var(--c-nebentext);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.demo-fenster-zu:hover { background: #eef4fb; color: var(--c-titel-dunkel); }
/* min-height mildert das asynchrone Nachladen des Bitrix-Formulars. */
.demo-fenster .bitrix-form { min-height: 420px; }

/* Bitrix-Formular im Fenster: Optik aus unserem CSS, nicht aus Bitrix
   (Bauart Schwesterprojekt, Farben auf KIHRa angepasst). */
.demo-fenster .bitrix-form { max-width: 100%; }
.demo-fenster .b24-form-wrapper, .demo-fenster .b24-form { max-width: 100%; }
.demo-fenster .b24-form-wrapper { box-shadow: none !important; border: none !important; border-radius: 0 !important; background: transparent !important; }
.demo-fenster .b24-form-header { display: none; }
.demo-fenster .b24-form-padding-side { padding-left: 0; padding-right: 0; }
.demo-fenster .b24-form-control {
  background: #ffffff !important;
  border-color: var(--c-linie) !important;
  border-radius: 9px !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
}
.demo-fenster .b24-form-control:focus { border-color: var(--c-titel) !important; }
.demo-fenster .b24-form-btn {
  background: var(--c-titel) !important;
  color: #ffffff !important;
  border-radius: 9px !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 14px 26px !important;
  transition: background .15s;
}
.demo-fenster .b24-form-btn:hover { background: var(--c-titel-dunkel) !important; }
.demo-fenster .b24-form-control-alert-message { background: #C0392B !important; }
.demo-fenster .b24-form-success { background: #eef4fb !important; color: var(--c-titel-dunkel) !important; }
.demo-fenster .b24-form-error { background: #C0392B !important; color: #ffffff !important; }
.demo-fenster .b24-form-warning { background: #ffcb73 !important; color: var(--c-text) !important; }
.demo-fenster .calendar-resbook-webform-block-input {
  background: #ffffff !important;
  border: 1px solid var(--c-linie) !important;
  border-radius: 9px !important;
}
.demo-fenster .calendar-resbook-webform-block-date-item-select .calendar-resbook-webform-block-date-item-inner {
  background: var(--c-titel) !important;
}