/* Öffentliche Buchungswebseite — helles Layout (Phase 1-Grundgerüst).
   Finale Optik (Mail-/Rechnungstemplate) folgt in Phase 5.
   Cache-Buster: ?v={{ app_version }} automatisch in buchung/base.html. */

.buchung-seite {
  margin: 0;
  background: #f7f5f1;            /* warmes Papier-Weiß (Rechnungs-Look) */
  color: #2b2b2b;
  font-family: Georgia, "Times New Roman", serif;  /* klassisch wie Rechnung */
  line-height: 1.55;
}

.buchung-inhalt {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

.buchung-inhalt h1 {
  font-size: 1.7rem;
  border-bottom: 2px solid #c9b458;  /* dezenter Akzent */
  padding-bottom: 0.4rem;
}

.einfuehrung {
  font-size: 1.05rem;
}

.muted {
  color: #6b6b6b;
  font-size: 0.9rem;
}

.buchung-fuss {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #6b6b6b;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
}

/* ── Phase 2 (M11.25): Navigation, Banner, Formulare, Konto ─────────────── */

.buchung-nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.buchung-marke {
  font-size: 1.15rem;
  font-weight: bold;
  color: #b85c38;
  text-decoration: none;
}

.buchung-nav-rechts a {
  margin-left: 1rem;
  color: #4a352c;
  font-size: 0.95rem;
}

.buchung-banner {
  background: #eaf4e4;
  border: 1px solid #c7ddbb;
  color: #2f5d2f;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.4rem;
}

.buchung-fehler {
  background: #f9e6e2;
  border: 1px solid #e7b8ad;
  color: #8a3320;
  padding: 0.8rem 1rem;
  border-radius: 6px;
  margin-bottom: 1.4rem;
}

.buchung-form label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.95rem;
}

.buchung-form input {
  display: block;
  width: 100%;
  max-width: 26rem;
  padding: 0.55rem 0.7rem;
  margin-top: 0.3rem;
  border: 1px solid #cfc5b4;
  border-radius: 6px;
  font: inherit;
  background: #fffdf9;
  box-sizing: border-box;
}

.buchung-button {
  display: inline-block;
  background: #c96f4a;
  color: #ffffff;
  border: 1px solid #b85c38;
  padding: 0.65rem 1.6rem;
  border-radius: 6px;
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
  margin-top: 0.4rem;
}

.buchung-button-zweit {
  background: transparent;
  color: #b85c38;
  border-color: #cfc5b4;
  margin-top: 0.75rem;
}

.bestaetigungs-form {
  margin-top: 1.6rem;
  border-top: 1px dashed #cfc5b4;
  padding-top: 1rem;
}

.konto-karte {
  background: #fffdf9;
  border: 1px solid #e4dccd;
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
}

.konto-karte h2 {
  font-size: 1.1rem;
  margin-top: 0;
  border-bottom: 1px solid #e4dccd;
  padding-bottom: 0.4rem;
}

.konto-daten th {
  text-align: left;
  padding-right: 1.2rem;
  color: #6b6b6b;
  font-weight: normal;
  vertical-align: top;
}

/* ---- Phase 3 (v0.0.111): +/- Verfügbarkeit & Buchung ---- */
.button { display:inline-block; padding:0.55em 1.1em; border-radius:6px;
  background:#1e6f50; color:#fff; text-decoration:none; font-weight:600; }
.button:hover { background:#185a41; }
.button.sekundaer { background:#e2e8f0; color:#243b53; }
.button.sekundaer:hover { background:#cbd5e1; }
.fehler { background:#fdecea; border-left:4px solid #b3261e; padding:0.6em 0.9em; }
.hinweis { background:#e8f5e9; border-left:4px solid #1e6f50; padding:0.6em 0.9em; }
.wohnung-kacheln { display:flex; flex-wrap:wrap; gap:1.2rem; margin:1.2rem 0; }
.wohnung-kachel { border:1px solid #d7dee6; border-radius:10px; padding:1rem;
  max-width:320px; background:#fff; }
.wohnung-kachel.aktiv { border-color:#1e6f50; box-shadow:0 0 0 2px #d3ecdf; }
.monat-nav { display:flex; gap:1rem; align-items:center; margin:0.6rem 0; }
.kalender { max-width:560px; }
.kalender-kopf, .kalender-tage { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; }
.kalender-kopf span { text-align:center; font-size:0.8rem; color:#64748b; }
.kalender-tag { text-align:center; padding:0.35rem 0; border-radius:6px;
  font-size:0.9rem; position:relative; }
.kalender-tag.frei { background:#f1f5f9; color:#1e293b; }
.kalender-tag.belegt { background:#fdecea; color:#b3261e; }
.kalender-tag.belegt small { display:block; font-size:0.6rem; color:#b3261e; }
.kalender-leer { visibility:hidden; }
.buchungsformular { max-width:360px; display:flex; flex-direction:column; gap:0.8rem; }
.buchungsformular label { display:flex; flex-direction:column; gap:0.25rem; }
.buchungsformular input, .buchungsformular select { padding:0.5em; border:1px solid #cbd5e1;
  border-radius:6px; }
.adressformular { display:flex; flex-direction:column; gap:0.8rem; max-width:520px; }
.adressformular label { display:flex; flex-direction:column; gap:0.25rem; }
.adressformular input[type=text] { padding:0.5em; border:1px solid #cbd5e1; border-radius:6px; }
.adressformular .feld-reihe { display:flex; gap:0.8rem; }
.adressformular .feld-reihe label { flex:1; }
.art-wahl { display:flex; gap:1rem; align-items:center; }
.art-wahl label { display:inline-flex; flex-direction:row; align-items:center; gap:0.3rem; }
.buchungen { border-collapse:collapse; }
.buchungen th, .buchungen td { text-align:left; padding:0.45em 0.9em;
  border-bottom:1px solid #e2e8f0; }