/* Buchungsseite für Gäste – nur App-eigenes Layout. Farben, Schrift und Bausteine kommen aus
   /montag-design.css (Montag App-Design, siehe DESIGN.md); die Farben der Villa Haar setzt die
   Markenvariante <html data-marke="villa-haar">. Hier nur var(--m-…), keine Farbwerte. */

.v-seite { min-height: 100vh; display: flex; flex-direction: column; }
.v-sprung { position: absolute; left: -9999px; top: var(--m-s2); background: var(--m-text); color: var(--m-bg); padding: var(--m-s3) var(--m-s4); border-radius: var(--m-r-s); z-index: 20; }
.v-sprung:focus { left: var(--m-s2); }
.v-live, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf und Fuß mit Zierlinie der Marke */
.v-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--m-s3); max-width: 680px; width: 100%; margin: 0 auto; padding: var(--m-s4) var(--m-s4) var(--m-s3); border-bottom: 1px solid var(--m-zier); }
.v-fuss { max-width: 680px; width: 100%; margin: 0 auto; padding: var(--m-s4); border-top: 1px solid var(--m-zier); font-size: 13px; color: var(--m-text-2); display: flex; flex-wrap: wrap; gap: var(--m-s2) var(--m-s4); }
.v-fuss a { color: var(--m-text-2); min-height: 44px; display: inline-flex; align-items: center; }
.v-fuss p { margin: 0; width: 100%; }

.v-inhalt { flex: 1; width: 100%; max-width: 680px; margin: 0 auto; padding: var(--m-s5) var(--m-s4) var(--m-s6); display: flex; flex-direction: column; gap: var(--m-s5); outline: none; }
.v-laden { color: var(--m-text-2); }

/* Phase: Bild, Überzeile, Titel, Zeitraum, Text */
.v-held { display: flex; flex-direction: column; gap: var(--m-s3); }
.v-held__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--m-r-m); background: var(--m-fill); }
.v-held__text { margin: 0; white-space: pre-line; }

/* Buchungsschritte */
.v-schritte { display: flex; flex-direction: column; gap: var(--m-s6); }
.v-schritt { display: flex; flex-direction: column; gap: var(--m-s3); }
.v-schritt h2 { outline: none; }
.v-schritt fieldset, .v-feldgruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.v-schritt legend { font-size: 17px; font-weight: 700; padding: 0; margin-bottom: var(--m-s3); }
.v-feldgruppe legend { font-size: 15px; font-weight: 700; padding: 0; margin-bottom: var(--m-s1); }

/* Karten mit Inhalt untereinander */
.v-karte { display: flex; flex-direction: column; gap: var(--m-s3); }
.v-karte > h2, .v-karte > h3, .v-karte > p { margin: 0; }
.v-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.v-knoepfe { display: flex; flex-wrap: wrap; gap: var(--m-s2); }
.v-knoepfe .m-btn { flex: 1 1 200px; }
.v-link, .v-zurueck { align-self: flex-start; }
.v-link { padding: 0; text-align: left; }
.v-kalender { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--m-s2); }

/* Eingebettet in villahaar.de (Wix-iFrame): ohne eigene Wortmarke, knapper */
.v-eingebettet .v-kopf { border-bottom: 0; padding-top: var(--m-s2); }
.v-eingebettet .v-kopf .m-brand { visibility: hidden; }
.v-eingebettet .v-inhalt { padding-top: var(--m-s2); }