/*
 * Balcon sur Mer: Kalender, Anfrageformular, Zwei-Klick-Karte.
 * Übernimmt Farben und Schriften aus styles.css des Prototyps (--navy, --cream, --gold ...).
 * Die Werte nach dem Komma sind Rückfallwerte, falls die Variablen fehlen.
 */
:root {
  --bk-text: var(--navy, #14344F);
  --bk-text-leise: var(--navy-soft, rgba(20, 52, 79, .72));
  --bk-akzent: var(--navy, #14344F);
  --bk-akzent-text: var(--cream, #FFFDF8);
  --bk-flaeche: var(--cream, #FFFDF8);
  --bk-frei: var(--cream-2, #FBF7EE);
  --bk-linie: var(--border, rgba(20, 52, 79, .12));
  --bk-belegt: #F6DCE5;                      /* Pink aus dem Prototyp-Mockup, deckend */
  --bk-bereich: rgba(44, 166, 196, .20);     /* Türkis für den gewählten Zeitraum */
  --bk-wechsel: var(--gold, #F5A93D);        /* Samstage */
  --bk-fehler: #B3261E;
  --bk-erfolg: #1F6B4E;
  --bk-radius: 14px;
  --bk-schrift-titel: var(--font-display, "Fraunces", Georgia, serif);
}

.bk-kalender, .bk-anfrage, .bk-karte { color: var(--bk-text); box-sizing: border-box; }
.bk-kalender *, .bk-anfrage *, .bk-karte * { box-sizing: border-box; }

/* ---------- Buttons im Stil von .btn.btn-primary ---------- */
.bk-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--bk-akzent);
  color: var(--bk-akzent-text) !important;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
}
.bk-button:hover { background: #0d2438; }
.bk-button:disabled { opacity: .6; cursor: progress; }
.bk-link {
  border: 0; background: none; padding: 0;
  color: var(--bk-text-leise); font: inherit; font-size: 13px;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.bk-link:hover { color: var(--bk-text); }

/* ---------- Kalender (gleiche Formensprache wie das Mockup .cal-mock) ---------- */
.bk-kalender {
  position: relative;
  flex: 1 1 380px;
  align-self: flex-start;
  background: var(--bk-flaeche);
  border: 1px solid var(--bk-linie);
  border-radius: var(--bk-radius);
  padding: 20px 22px;
}
.bk-kal-kopf { position: absolute; top: 18px; right: 22px; display: flex; gap: 6px; z-index: 1; }
.bk-kal-nav {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bk-linie);
  background: transparent;
  color: var(--bk-text-leise);
  font: inherit; font-size: 15px; line-height: 1;
  cursor: pointer;
}
.bk-kal-nav:hover:not(:disabled) { color: var(--bk-text); border-color: var(--bk-text); }
.bk-kal-nav:disabled { opacity: .3; cursor: default; }

.bk-kal-monate { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 36px; min-height: 120px; }
.bk-monat-titel {
  font-family: var(--bk-schrift-titel);
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  margin: 0 0 14px;
  color: var(--bk-text);
}
.bk-wochentage, .bk-tage { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-wochentage { margin-bottom: 6px; }
.bk-wochentage span {
  text-align: center;
  font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--bk-text-leise); /* Gold wäre bei 11 px zu kontrastarm */
}

.bk-tag {
  position: relative;
  height: 38px;
  border: 0; margin: 0; padding: 0;
  border-radius: 8px;
  background: var(--bk-frei);
  color: var(--bk-text);
  font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bk-tag:disabled { cursor: default; }
.bk-tag:not(:disabled):hover { box-shadow: inset 0 0 0 1.5px var(--bk-akzent); }
.bk-tag:focus-visible, .bk-kal-nav:focus-visible, .bk-button:focus-visible, .bk-link:focus-visible {
  outline: 2px solid var(--turquoise, #2CA6C4);
  outline-offset: 2px;
}
.bk-tag.is-vergangen { background: transparent; opacity: .35; }
.bk-tag.is-heute::after {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
}
.bk-tag.is-wechseltag { box-shadow: inset 0 0 0 2px var(--bk-wechsel); font-weight: 600; }
.bk-tag.is-wechseltag:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--bk-akzent); }

.bk-tag.is-belegt { background: var(--bk-belegt); color: var(--bk-text-leise); text-decoration: line-through; }
.bk-tag.is-wechsel-an { background: linear-gradient(135deg, var(--bk-frei) 50%, var(--bk-belegt) 50%); }
.bk-tag.is-wechsel-ab { background: linear-gradient(135deg, var(--bk-belegt) 50%, var(--bk-frei) 50%); }
.bk-tag.is-ausser-reichweite:not(.is-belegt) { opacity: .45; }

.bk-tag.is-bereich, .bk-tag.is-vorschau { background: var(--bk-bereich); font-weight: 600; opacity: 1; text-decoration: none; }
.bk-tag.is-start, .bk-tag.is-ende, .bk-tag.is-einzeln {
  background: var(--bk-akzent);
  color: var(--bk-akzent-text);
  box-shadow: none;
  font-weight: 600;
  opacity: 1;
  text-decoration: none;
}

.bk-kal-fuss { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bk-linie); }
.bk-kal-info { margin: 0; font-size: 14px; font-weight: 600; }
.bk-kal-info.is-hinweis { color: var(--bk-fehler); }
.bk-kal-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.bk-kal-aktionen:empty { display: none; }
.bk-legende { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--bk-text-leise); }
.bk-legende li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.bk-legende-feld { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.bk-legende-frei { background: var(--bk-frei); border: 1px solid var(--bk-linie); }
.bk-legende-belegt { background: var(--bk-belegt); }
.bk-legende-wechsel { box-shadow: inset 0 0 0 2px var(--bk-wechsel); }
.bk-legende-wahl { background: var(--bk-akzent); }

/* ---------- Formular (übernimmt den Look von .booking-form) ---------- */
.bk-anfrage { display: grid; gap: 24px; scroll-margin-top: 100px; }
.bk-anfrage .bk-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.bk-anfrage .bk-gruppe legend {
  font-family: var(--bk-schrift-titel);
  font-size: 19px;
  font-weight: 500;
  color: var(--bk-text);
  padding: 0;
  margin-bottom: 14px;
}
.bk-anfrage .bk-reihe { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.bk-anfrage .bk-feld { display: grid; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; }
.bk-anfrage .bk-optional { font-weight: 400; color: var(--bk-text-leise); }
.bk-anfrage .bk-feld input, .bk-anfrage .bk-feld select, .bk-anfrage .bk-feld textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(20, 52, 79, .22);
  border-radius: 8px;
  background: var(--bk-flaeche);
  color: var(--bk-text);
  font-family: inherit;
  font-weight: 400;
  font-size: 16px; /* verhindert das automatische Zoomen auf dem iPhone */
  -webkit-appearance: none;
  appearance: none;
}
.bk-anfrage .bk-feld select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.bk-anfrage .bk-feld textarea { min-height: 110px; resize: vertical; }
.bk-anfrage .bk-feld input:focus, .bk-anfrage .bk-feld select:focus, .bk-anfrage .bk-feld textarea:focus {
  outline: none;
  border-color: var(--turquoise, #2CA6C4);
  box-shadow: 0 0 0 3px rgba(44, 166, 196, .18);
}
.bk-anfrage .bk-feld.is-fehler input, .bk-anfrage .bk-feld.is-fehler select, .bk-anfrage .bk-feld.is-fehler textarea { border-color: var(--bk-fehler); }
.bk-anfrage .bk-feld-fehler { color: var(--bk-fehler); font-size: 13px; font-weight: 500; }
.bk-anfrage .bk-zeitraum-info { margin: 0; font-size: 14px; font-weight: 600; min-height: 1.5em; }
.bk-anfrage .bk-zeitraum-info.is-hinweis { color: var(--bk-fehler); }
.bk-anfrage .bk-absenden { display: grid; gap: 12px; justify-items: start; }
.bk-anfrage .bk-absenden button { margin: 0; }
.bk-anfrage .bk-hinweis { margin: 0; font-size: 13px; color: var(--bk-text-leise); }
.bk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.bk-meldung { padding: 16px 18px; border-radius: 12px; border: 1px solid; font-size: 15px; }
.bk-meldung.is-fehler { border-color: var(--bk-fehler); color: var(--bk-fehler); background: rgba(179, 38, 30, .05); }
.bk-meldung.is-erfolg { border-color: var(--bk-erfolg); color: var(--bk-erfolg); background: rgba(31, 107, 78, .06); font-weight: 600; }
.bk-meldung:focus { outline: none; }
.bk-anfrage.is-gesendet > :not(.bk-meldung) { display: none; }

/* ---------- Zwei-Klick-Karte (füllt den .map-embed-Rahmen des Prototyps) ---------- */
.bk-karte {
  display: grid; place-items: center; text-align: center;
  min-height: 260px;
  padding: 24px;
  border-radius: var(--bk-radius);
  border: 1px solid var(--bk-linie);
  background: linear-gradient(135deg, #e9eef0, var(--bk-frei));
}
.bk-karte p { max-width: 42ch; margin: 0 auto 14px; font-size: 14px; color: var(--bk-text-leise); }
.bk-karte p strong { display: block; font-family: var(--bk-schrift-titel); font-size: 18px; font-weight: 500; color: var(--bk-text); margin-bottom: 6px; }
.bk-karte iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }
.bk-karte.is-geladen { padding: 0; display: block; }
.map-embed > .bk-karte { flex: 1; align-self: stretch; border: 0; border-radius: 0; background: none; min-height: inherit; }
.map-embed > .bk-karte.is-geladen iframe { position: absolute; inset: 0; min-height: 0; }

@media (max-width: 600px) {
  .bk-kalender { padding: 16px; }
  .bk-kal-kopf { top: 14px; right: 16px; }
  .bk-wochentage, .bk-tage { gap: 4px; }
}