/* --- Buchungsfeld für den Bauplan --- */
.buchung [hidden]{display:none!important}
.buchung h3{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.01em;margin-bottom:16px}
.buchung button{font-family:var(--font-body);-webkit-tap-highlight-color:transparent}
.buchung button:focus-visible,.buchung a:focus-visible{outline:3px solid var(--copper);outline-offset:2px}
.buchung-laden{color:var(--slate)}
.buchung-wahl{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.buchung-wahl>.buchung-meldung{grid-column:1/-1;margin-bottom:-24px}
.buchung-meldung{background:#FCF0EE;border:1px solid #E3BEB7;color:#8E2C1C;border-radius:10px;padding:14px 18px;font-weight:500;font-size:15.5px}
.buchung-formular .buchung-meldung{margin-top:20px}
.buchung-kalender{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.buchung-wt{font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);text-align:center}
.buchung-tag{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:56px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);line-height:1.2;padding:4px 2px}
.buchung-tag .nr{font-weight:600;font-size:17px}
.buchung-tag .mt{font-size:12.5px;color:var(--slate)}
button.buchung-tag{cursor:pointer;transition:border-color .2s,background .2s}
button.buchung-tag:hover,button.buchung-tag:active{border-color:var(--copper)}
.buchung-tag[aria-pressed="true"],.buchung-tag[aria-pressed="true"]:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.buchung-tag[aria-pressed="true"] .mt{color:#C9D3E3}
.buchung-tag.leer{border-color:transparent;opacity:.45}
.buchung-tag.leer .nr{font-weight:400}
.buchung-hinweis,.buchung-zone{color:var(--slate);font-size:15px}
.buchung-zone{margin-top:14px}
.buchung-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.buchung-zeit{min-height:48px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--navy);font-weight:600;font-size:16px;cursor:pointer;transition:border-color .2s}
.buchung-zeit:hover,.buchung-zeit:active{border-color:var(--copper)}
.buchung-gewaehlt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.buchung-gewaehlt:focus{outline:none}
.buchung-gewaehlt strong{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.3}
.buchung-link{background:none;border:0;padding:0;font-size:15.5px;color:var(--copper-dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Unter 16 px vergrössert Safari auf dem iPhone die Seite, sobald ein Feld angetippt wird. */
.buchung input{font-size:16px}
.buchung-art{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;margin:20px 0 0;padding:0;min-width:0}
.buchung-art legend{font-weight:600;font-size:14.5px;margin:0 0 7px;padding:0}
.buchung-art label{display:flex;gap:12px;align-items:flex-start;margin:0;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;font-weight:400;font-size:15px;line-height:1.45;color:var(--slate);cursor:pointer}
.buchung-art label:has(input:checked){border-color:var(--navy)}
.buchung-art input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--navy)}
.buchung-art strong{display:block;font-weight:600;color:var(--navy);font-size:15.5px}
.buchung .feld-fehler{color:#8E2C1C;font-size:14px;margin-top:6px}
.buchung input[aria-invalid="true"]{border-color:#C0533F}
.buchung-bestaetigt,.buchung-zu{max-width:640px}
.buchung-bestaetigt:focus{outline:none}
.buchung-bestaetigt h3{font-size:26px;margin-bottom:0}
.buchung-termin{font-family:var(--font-display);font-weight:600;font-size:19px;margin:22px 0 10px}
.buchung-bestaetigt p:not(.buchung-termin):not(.buchung-meldung),.buchung-zu p{color:var(--slate);margin-top:10px}
.buchung-bestaetigt .buchung-meldung{margin-top:16px}
.buchung-bestaetigt a[data-feld="kmeet"]{color:var(--copper-dark);font-weight:600;overflow-wrap:anywhere}
.buchung-wege{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.buchung-wege a:not(.btn){color:var(--copper-dark);font-weight:600}
@media (max-width:900px){
  .buchung-wahl{grid-template-columns:1fr;gap:36px}
  .buchung-wahl>.buchung-meldung{margin-bottom:-12px}
}
@media (max-width:760px){
  .buchung-art{grid-template-columns:1fr}
  .buchung-kalender{gap:6px}
  .buchung .row{row-gap:0}
  .buchung .form-footer .btn{width:100%;text-align:center}
}