/* Belegungskalender und Buchungsstrecke.
   Farben kommen aus dem Theme, damit der Kalender nicht wie ein Fremdkörper
   wirkt. Fehlt das Theme, greifen die Ersatzwerte. */

.fewo-buchung {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.6rem, 3.5vw, 2.8rem);
  align-items: start;
  margin-top: 2.6rem;
}

/* --- Kalender ------------------------------------------------------------ */
.fewo-kal {
  background: var(--papier, #fff);
  border: 1px solid var(--linie, rgba(43,35,28,.10));
  border-radius: var(--rand, 22px);
  padding: 1.5rem 1.5rem 1.2rem;
  box-shadow: var(--schatten, 0 18px 40px -22px rgba(43,35,28,.22));
}
.fewo-kal__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.fewo-kal__kopf h3 { font-size: 1.1rem; margin: 0; }
.fewo-kal__pfeile { display: flex; gap: .4rem; }
.fewo-kal__pfeile button {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linie-kraeftig, rgba(43,35,28,.18));
  background: transparent; color: var(--tinte, #2B231C);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .3s ease, border-color .3s ease, opacity .3s ease;
}
.fewo-kal__pfeile button:hover:not(:disabled) { background: var(--sand, #F2EBE0); border-color: var(--tinte, #2B231C); }
.fewo-kal__pfeile button:disabled { opacity: .3; cursor: default; }
.fewo-kal__pfeile svg { width: 13px; height: 13px; }

.fewo-kal__monate { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
/* Platz fuer die beiden Monate freihalten, solange sie noch nicht da sind.
   Der Kalender kommt leer vom Server und wird erst nach der Abfrage der
   Belegung gefuellt. Vorher sprang dabei alles darunter nach unten, gemessen
   0,104 an der Stelle, an der Google 0,1 als Grenze zieht. Wer in dem Moment
   auf ein Feld tippt, trifft ein anderes.
   Die Reservierung haengt an :empty und verschwindet damit von selbst, sobald
   die Monate stehen. Eine feste Hoehe am gefuellten Element wuerde je nach
   Monatslaenge tote Flaeche hinterlassen. */
.fewo-kal__monate:empty { min-height: 300px; }
.fewo-kal__titel {
  font-family: var(--font-titel, 'Literata', Georgia, serif);
  font-weight: 600; font-size: 1rem; text-align: center; margin-bottom: .8rem;
}
.fewo-kal__wochentage, .fewo-kal__tage { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.fewo-kal__wochentage span {
  text-align: center; font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gedaempft, #8A7C6D); padding-bottom: .45rem;
}
.fewo-kal__tag {
  aspect-ratio: 1; border: 0; background: transparent; cursor: pointer;
  border-radius: 9px; font: inherit; font-size: .875rem; font-weight: 500;
  color: var(--tinte, #2B231C);
  transition: background .25s ease, color .25s ease;
}
.fewo-kal__tag:hover:not(:disabled) { background: var(--sand, #F2EBE0); }
.fewo-kal__tag.ist-vergangen { color: #C9BFB2; cursor: default; }
.fewo-kal__tag.ist-belegt {
  color: #BCA99C; cursor: not-allowed; position: relative;
  background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(176,97,60,.13) 3px, rgba(176,97,60,.13) 6px);
}
.fewo-kal__tag.ist-anreise, .fewo-kal__tag.ist-abreise {
  background: var(--ton, #B0613C); color: #fff; font-weight: 700;
}
.fewo-kal__tag.ist-dazwischen { background: var(--ton-zart, #F6E7DE); color: var(--ton-tief, #93492A); }

.fewo-kal__legende {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.3rem; padding-top: 1rem;
  border-top: 1px solid var(--linie, rgba(43,35,28,.10));
  font-size: .78rem; color: var(--gedaempft, #8A7C6D);
}
.fewo-kal__legende span { display: inline-flex; align-items: center; gap: .45rem; }
.fewo-kal__punkt { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.fewo-kal__punkt--frei { border: 1px solid var(--linie-kraeftig, rgba(43,35,28,.18)); }
.fewo-kal__punkt--belegt { background: repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(176,97,60,.30) 3px, rgba(176,97,60,.30) 6px); border: 1px solid rgba(176,97,60,.25); }
.fewo-kal__punkt--gewaehlt { background: var(--ton, #B0613C); }

.fewo-kal.ist-laden .fewo-kal__monate { opacity: .4; }
.fewo-kal.ist-fehler::after {
  content: "Die Belegung konnte nicht geladen werden. Bitte rufen Sie uns an.";
  display: block; margin-top: 1rem; font-size: .85rem; color: var(--ton-tief, #93492A);
}

/* --- Zusammenfassung und Formular ---------------------------------------- */
.fewo-seite { position: sticky; top: 90px; }
.fewo-uebersicht {
  background: var(--sand, #F2EBE0);
  border-radius: 16px; padding: 1.3rem 1.4rem;
  margin: 1.3rem 0 0;
}
.fewo-uebersicht__leer { margin: 0; font-size: .92rem; color: var(--tinte-weich, #5C5044); }
.fewo-uebersicht__liste { margin: 0; display: grid; gap: .55rem; }
.fewo-uebersicht__liste > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fewo-uebersicht__liste dt { font-size: .84rem; color: var(--gedaempft, #8A7C6D); margin: 0; }
.fewo-uebersicht__liste dd { margin: 0; font-weight: 700; font-size: .95rem; text-align: right; }
.fewo-uebersicht__liste dd small { display: block; font-weight: 400; font-size: .72rem; color: var(--gedaempft, #8A7C6D); }
.fewo-uebersicht__summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(43,35,28,.13);
}
.fewo-uebersicht__summe span { font-size: .86rem; color: var(--tinte-weich, #5C5044); }
.fewo-uebersicht__summe b {
  font-family: var(--font-titel, 'Literata', Georgia, serif);
  font-size: 1.45rem; color: var(--ton-tief, #93492A);
}
.fewo-uebersicht__hinweis { margin: .6rem 0 0; font-size: .78rem; color: var(--gedaempft, #8A7C6D); }
.fewo-uebersicht__warnung { margin: .8rem 0 0; font-size: .86rem; font-weight: 600; color: var(--ton-tief, #93492A); }

.fewo-unverbindlich {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--salbei-zart, #EDF0E4); border: 1px solid #CBD8B4;
  border-radius: 14px; padding: .95rem 1.1rem; margin-bottom: 1.3rem;
  font-size: .86rem; line-height: 1.6; color: #465232;
}
.fewo-unverbindlich svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; }

[data-fewo-absenden]:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 980px) {
  .fewo-buchung { grid-template-columns: 1fr; }
  .fewo-seite { position: static; }
}
@media (max-width: 560px) {
  .fewo-kal { padding: 1.1rem 1rem 1rem; }
  .fewo-kal__monate { grid-template-columns: 1fr; gap: 1.4rem; }
  /* Einspaltig stehen die Monate untereinander und brauchen entsprechend
     mehr Platz. */
  .fewo-kal__monate:empty { min-height: 630px; }
  .fewo-kal__tag { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fewo-kal__tag, .fewo-kal__pfeile button { transition: none; }
}