/* Ö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; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; min-height:3.1rem; }
.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-tag.vergangen { background:#e9ecef; color:#9ca3af; }
.kalender-tag.frei small.kalender-preis { display:block; font-size:0.65rem; color:#64748b; }
.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; }

/* ── v0.0.125: Radio-Buttons im Hausstil + Feld-Paare nebeneinander (Axel) ── */

.art-umschalter {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.2rem;
}

.art-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.art-option input[type="radio"],
.art-wahl input[type="radio"],
.buchung-form .art-option input[type="radio"],
.buchung-form .art-wahl input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  padding: 0;
  border: 1px solid #b9ac97;
  border-radius: 50%;
  background: #fffdf9;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.art-option input[type="radio"]:hover,
.art-wahl input[type="radio"]:hover {
  border-color: #b85c38;
}

.art-option input[type="radio"]:checked,
.art-wahl input[type="radio"]:checked {
  border-color: #b85c38;
}

.art-option input[type="radio"]:checked::after,
.art-wahl input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #b85c38;
}

.art-option input[type="radio"]:focus-visible,
.art-wahl input[type="radio"]:focus-visible {
  outline: 2px solid #c9b458;
  outline-offset: 2px;
}

/* Feld-Paare nebeneinander (Vorname+Nachname, Straße+Hausnummer, PLZ+Ort) */
.buchung-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.2rem;
  min-width: 0;
}

.buchung-form .feld-reihe {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.buchung-form .feld-reihe label {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.buchung-form .feld-reihe label.feld-schmal {
  flex: 0 1 8.5rem;
}

/* v0.0.127 (Axel: „Hausnummern-Feld an die Straße heran, wie bei PLZ und Ort“):
   Straße wächst nur bis zur Input-Max-Breite (26rem) → Hausnummer schließt direkt
   mit gap an; vorher Label flex:1 → Lücke im Label. Mobil: shrink bis 10rem,
   kein Wrap. */
.buchung-form .feld-reihe label.feld-breit {
  flex: 1 1 10rem;
  max-width: 26rem;
}

/* Statusnachrichten-OK-Button (v0.0.143, Axel: wie Starface-WebApp) */
.status-ok-btn { margin-left: 0.9em; padding: 0.18em 0.9em; border: 1px solid #9b8f7d;
  border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 0.82em;
  cursor: pointer; vertical-align: middle; }
.status-ok-btn:hover { border-color: #b85c38; }