/* ==========================================================================
   Besichtigungstermin-Modul

   Eigenstaendig und mit dem Praefix bt- versehen, damit es weder etwas aus
   dem Theme uebernimmt noch etwas daran veraendert. Farben und Rundungen
   folgen den Standortseiten (css/standort.css).
   ========================================================================== */

.bt-modul {
    --bt-ink: #1f2d3a;
    --bt-muted: #5b6b7a;
    --bt-brand: #006db7;
    --bt-brand-dark: #005893;
    --bt-sand: #f7f4ef;
    --bt-line: #e3ded6;
    --bt-gut: #1c7a4a;
    --bt-weg: #a4243b;

    max-width: 880px;
    margin: 0 auto;
    padding: 26px 22px 28px;
    background: #ffffff;
    border: 1px solid var(--bt-line);
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(31, 45, 58, .07);
    color: var(--bt-ink);
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

.bt-modul *,
.bt-modul *::before,
.bt-modul *::after { box-sizing: border-box; }

.bt-modul__kopf { margin-bottom: 18px; }

.bt-modul .bt-eyebrow {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 99px;
    background: #eaf3fb;
    color: var(--bt-brand-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.bt-modul .bt-titel {
    margin: 12px 0 6px;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 800;
    color: var(--bt-ink);
}

.bt-modul .bt-vorspann {
    margin: 0;
    color: var(--bt-muted);
    font-size: 16px;
}

/* ------------------------------------------------------------- Schritte -- */

.bt-schritt { margin-top: 24px; }

.bt-schritt__titel {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.bt-schritt__nummer {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bt-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

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

.bt-kalender {
    max-width: 400px;
    padding: 12px;
    border: 1px solid var(--bt-line);
    border-radius: 13px;
    background: #fff;
}

.bt-kal-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.bt-kal-monat {
    font-family: 'Raleway', Arial, sans-serif;
    font-size: 16.5px;
    font-weight: 700;
}

.bt-kal-pfeil {
    width: 40px;
    height: 40px;
    border: 1px solid var(--bt-line);
    border-radius: 10px;
    background: #fff;
    color: var(--bt-brand);
    font: 700 20px/1 Arial, sans-serif;
    cursor: pointer;
}

.bt-kal-pfeil:hover:enabled { border-color: var(--bt-brand); }
.bt-kal-pfeil[disabled] { opacity: .35; cursor: default; }

.bt-kal-wochentage,
.bt-kal-raster {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bt-kal-wochentage {
    margin-bottom: 4px;
    color: var(--bt-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
}

.bt-kal-tag {
    aspect-ratio: 1 / 1;
    min-height: 42px;
    border: 1px solid var(--bt-line);
    border-radius: 10px;
    background: #fff;
    color: var(--bt-ink);
    font: 600 15px/1 'Open Sans', Arial, sans-serif;
    cursor: pointer;
}

.bt-kal-tag:hover:enabled { border-color: var(--bt-brand); }

.bt-kal-tag[disabled] {
    border-color: transparent;
    background: transparent;
    color: #b6c2cd;
    cursor: default;
}

.bt-kal-tag[aria-pressed="true"] {
    background: var(--bt-brand);
    border-color: var(--bt-brand);
    color: #fff;
    font-weight: 800;
}

.bt-kal-leer { display: block; }

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

.bt-zeithinweis {
    margin: 0 0 10px;
    color: var(--bt-muted);
    font-size: 14.5px;
}

/* Tageszeiten. Auf schmalen Bildschirmen waagerecht schiebbar, damit die
   Knoepfe nicht in drei Zeilen umbrechen. */
.bt-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.bt-filterknopf {
    min-height: 42px;
    padding: 9px 15px;
    border: 1px solid var(--bt-line);
    border-radius: 999px;
    background: #fff;
    color: var(--bt-muted);
    font: 700 14.5px/1 'Open Sans', Arial, sans-serif;
    cursor: pointer;
    white-space: nowrap;
}

.bt-filterknopf:hover { border-color: var(--bt-brand); color: var(--bt-brand); }

.bt-filterknopf[aria-pressed="true"] {
    background: #eaf3fb;
    border-color: var(--bt-brand);
    color: var(--bt-brand-dark);
}

.bt-zeiten { display: flex; flex-wrap: wrap; gap: 9px; }

.bt-zaehler {
    margin: 12px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--bt-brand-dark);
}

.bt-zaehler--voll { color: var(--bt-weg); }

.bt-zeit {
    min-width: 84px;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid var(--bt-line);
    border-radius: 11px;
    background: #fff;
    color: var(--bt-ink);
    font: 700 16px/1 'Open Sans', Arial, sans-serif;
    cursor: pointer;
}

.bt-zeit:hover { border-color: var(--bt-brand); }

.bt-zeit[aria-pressed="true"] {
    background: var(--bt-brand);
    border-color: var(--bt-brand);
    color: #fff;
}

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

.bt-felder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border: 0;
    margin: 0;
    padding: 0;
}

.bt-feld { display: flex; flex-direction: column; gap: 5px; }
.bt-feld--breit { grid-column: 1 / -1; }

.bt-feld label { font-size: 14px; font-weight: 700; }
.bt-feld .bt-pflicht { color: var(--bt-weg); }

.bt-feld input,
.bt-feld textarea {
    width: 100%;
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--bt-line);
    border-radius: 10px;
    background: #fff;
    color: var(--bt-ink);
    font: 16px/1.5 'Open Sans', Arial, sans-serif;
}

.bt-feld input:focus,
.bt-feld textarea:focus,
.bt-filterknopf:focus-visible,
.bt-kal-tag:focus-visible,
.bt-kal-pfeil:focus-visible,
.bt-zeit:focus-visible,
.bt-senden:focus-visible {
    outline: 2px solid var(--bt-brand);
    outline-offset: 2px;
}

.bt-feld textarea { min-height: 96px; resize: vertical; }

.bt-feld--fehler input,
.bt-feld--fehler textarea { border-color: var(--bt-weg); background: #fffafb; }

.bt-feldfehler { color: var(--bt-weg); font-size: 13.5px; font-weight: 600; }

.bt-hilfe { color: var(--bt-muted); font-size: 13px; }

/* Der Honigtopf muss fuer Menschen unsichtbar bleiben, aber im Quelltext stehen. */
.bt-honig {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

.bt-einwilligung {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 6px;
    font-size: 14px;
    color: var(--bt-muted);
}

.bt-einwilligung input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.bt-einwilligung a { color: var(--bt-brand-dark); }

.bt-senden {
    margin-top: 18px;
    width: 100%;
    min-height: 52px;
    padding: 14px 22px;
    border: 0;
    border-radius: 11px;
    background: var(--bt-brand);
    color: #fff;
    font: 700 16.5px/1 'Raleway', Arial, sans-serif;
    cursor: pointer;
}

.bt-senden:hover { background: var(--bt-brand-dark); }
.bt-senden[disabled] { opacity: .6; cursor: default; }

/* --------------------------------------------------------------- Meldungen -- */

.bt-meldung {
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 11px;
    border: 1px solid #cfe2f3;
    background: #eaf3fb;
    font-size: 15px;
}

.bt-meldung--fehler { background: #fdecef; border-color: #e7aab6; color: #7d1b2c; }
.bt-meldung--gut { background: #e8f6ee; border-color: #b7ddc7; color: #14603a; }
.bt-meldung__titel { display: block; font-weight: 700; margin-bottom: 3px; }

.bt-auswahl {
    margin-top: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    background: var(--bt-sand);
    font-size: 15px;
}

.bt-auswahl strong { color: var(--bt-brand-dark); }

.bt-verborgen { display: none; }

/* ------------------------------------------------------------------ Mobil -- */

@media (max-width: 640px) {
    .bt-modul { padding: 20px 15px 22px; border-radius: 13px; }
    .bt-modul .bt-titel { font-size: 21px; }
    .bt-felder { grid-template-columns: 1fr; gap: 12px; }
    .bt-zeit { flex: 1 1 28%; min-width: 0; padding: 11px 4px; font-size: 15px; }
    .bt-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .bt-filterknopf { flex: 0 0 auto; padding: 9px 13px; }
    .bt-kalender { max-width: 100%; padding: 10px; }
    .bt-kal-tag { min-height: 40px; font-size: 14.5px; }
}

/* Nur auf dem eigenen Rechner sichtbar: Kennzeichnung der Beispieltermine. */
.bt-modul .bt-vorschau {
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid #edd9a3;
    border-radius: 9px;
    background: #fdf1d6;
    color: #7a5c00;
    font-size: 13.5px;
    line-height: 1.55;
}

/* Knopf, der den Nachnamen in das Klingelfeld uebernimmt. Steht direkt unter
   dem Feld und erscheint nur, wenn er etwas bewirkt. */
.bt-modul .bt-uebernehmen {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    min-height: 38px;
    padding: 7px 13px;
    border: 1px dashed #b9cfe2;
    border-radius: 9px;
    background: #f2f8fd;
    color: var(--bt-brand-dark);
    font: 700 13.5px/1.2 'Open Sans', Arial, sans-serif;
    cursor: pointer;
}

/* Das hidden-Attribut allein reicht nicht: die Regel darueber ist
   spezifischer und wuerde den Knopf trotzdem anzeigen. */
.bt-modul .bt-uebernehmen[hidden] { display: none; }

.bt-modul .bt-uebernehmen:hover {
    border-style: solid;
    border-color: var(--bt-brand);
    background: #eaf3fb;
}

.bt-modul .bt-uebernehmen:focus-visible {
    outline: 2px solid var(--bt-brand);
    outline-offset: 2px;
}

.bt-uebernehmen__zeichen {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--bt-brand);
    color: #fff;
    font-size: 12px;
    line-height: 1;
}