/* Villa Buchung – Gästeseite. Stil der Seite: #faf8f5, Lora, Akzent #3a6186, Linien #d4cec6 (Entwurf gast-buchung.html). */
.vb-buchung {
	--vb-karte: #fff; --vb-text: #222; --vb-leise: #6b6660; --vb-linie: #d4cec6; --vb-linie2: #ebe6df;
	--vb-akzent: #3a6186; --vb-akzent-dunkel: #2c4a66; --vb-akzent-hell: #e7eef5;
	--vb-frei: #eef5ec; --vb-frei-rand: #b9d3b2; --vb-belegt: #d9d4cd; --vb-rot: #a3332b;
	--vb-sans: -apple-system, 'Segoe UI', Roboto, 'Libre Franklin', Helvetica, Arial, sans-serif;
	font: 16px/1.5 var(--vb-sans); color: var(--vb-text);
	/* breiter als die Inhaltsspalte des Themes */
	width: min(1100px, calc(100vw - 32px)); position: relative; left: 50%; transform: translateX(-50%);
	margin: 0 0 2rem;
}
.vb-buchung *, .vb-buchung *::before, .vb-buchung *::after { box-sizing: border-box; }
.vb-buchung h2, .vb-buchung h3 { font-family: 'Lora', Georgia, serif; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--vb-text); }
.vb-kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 14px; }
.vb-untertitel { color: var(--vb-leise); margin: 0; }
.vb-sprache { font-size: 14px; white-space: nowrap; color: var(--vb-akzent); }
.vb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 26px; align-items: start; }
.vb-karte { background: var(--vb-karte); border: 1px solid var(--vb-linie2); border-radius: 10px; padding: 18px 20px; margin-bottom: 22px; }
.vb-karte h2 { font-size: 20px; margin: 0 0 12px; }
.vb-karte h3 { font-size: 16px; margin: 14px 0 6px; }
.vb-karte h3:first-child { margin-top: 0; }
.vb-hinweis { font-size: 13.5px; color: var(--vb-leise); margin: 0; }
.vb-knopf-hinweis { font-size: 15px; font-weight: 600; margin: 8px 0 0; } /* Auftrag G: Satz direkt unter dem Knopf, gut sichtbar */
.vb-kal-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.vb-kal-nav button { border: 1px solid var(--vb-linie); background: #fff; color: var(--vb-text); border-radius: 6px; padding: 4px 14px; font: 20px/1 var(--vb-sans); cursor: pointer; }
.vb-kal-nav .vb-hinweis { text-align: center; flex: 1; }
.vb-monate { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vb-monat h3 { text-align: center; font-size: 17px; margin: 0 0 8px; }
.vb-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.vb-wt { font-size: 12px; color: var(--vb-leise); text-align: center; padding: 2px 0; }
.vb-tag { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 1 / .92; border-radius: 6px; background: var(--vb-frei); border: 1px solid var(--vb-frei-rand);
	display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; line-height: 1.2; cursor: default; color: var(--vb-text); }
.vb-tag small { font-size: 10.5px; color: var(--vb-leise); }
.vb-tag.vb-waehlbar { cursor: pointer; }
.vb-tag.vb-waehlbar:hover, .vb-tag:focus-visible { outline: 2px solid var(--vb-akzent); outline-offset: -2px; }
.vb-tag.vb-leer { background: none; border: 0; }
.vb-tag.vb-vorbei { background: #f2f0ec; border-color: var(--vb-linie2); color: #b3ada6; }
.vb-tag.vb-voll { background: var(--vb-belegt); border-color: var(--vb-belegt); color: #7a746d; }
.vb-tag.vb-anreise { background: linear-gradient(135deg, var(--vb-frei) 70%, var(--vb-belegt) 70%); } /* Auftrag A: Diagonale nur in der Ecke, nicht durch die Zahl */
.vb-tag.vb-abreise { background: linear-gradient(135deg, var(--vb-belegt) 30%, var(--vb-frei) 30%); }
.vb-tag.vb-wahl { background: var(--vb-akzent); border-color: var(--vb-akzent); color: #fff; }
.vb-tag.vb-wahl small { color: #dbe6f1; }
.vb-tag.vb-wahl-an { background: linear-gradient(135deg, var(--vb-frei) 70%, var(--vb-akzent) 70%); border: 2px solid var(--vb-akzent); font-weight: 700; }
.vb-tag.vb-wahl-ab { background: linear-gradient(135deg, var(--vb-akzent) 30%, var(--vb-frei) 30%); border: 2px solid var(--vb-akzent); font-weight: 700; }
.vb-stammgast-hinweis { font-size: 14px; border-left: 3px solid var(--vb-akzent); } /* Auftrag E Teil 5 */
.vb-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--vb-leise); margin-top: 12px; }
.vb-legende i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--vb-linie); }
.vb-l-frei { background: var(--vb-frei); } .vb-l-belegt { background: var(--vb-belegt); }
.vb-l-halb { background: linear-gradient(135deg, var(--vb-frei) 60%, var(--vb-belegt) 60%); }
.vb-l-wahl { background: var(--vb-akzent); }
.vb-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.vb-feld { display: block; margin: 0; }
.vb-feld > span, .vb-feld > legend { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; padding: 0; }
fieldset.vb-feld { border: 0; padding: 0; min-width: 0; }
.vb-ganz { grid-column: 1 / -1; }
.vb-buchung input[type=text], .vb-buchung input[type=email], .vb-buchung input[type=tel], .vb-buchung select, .vb-buchung textarea {
	width: 100%; border: 1px solid var(--vb-linie); background: #fff; border-radius: 7px; padding: 9px 11px; font: 15px var(--vb-sans); color: var(--vb-text); }
.vb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vb-chip input, .vb-option input { position: absolute; opacity: 0; }
.vb-chip span { display: inline-block; border: 1px solid var(--vb-linie); border-radius: 20px; padding: 6px 12px; font-size: 14px; background: #fff; cursor: pointer; }
.vb-chip input:checked + span { border-color: var(--vb-akzent); background: var(--vb-akzent-hell); color: var(--vb-akzent-dunkel); }
.vb-chip input:checked + span::before { content: '✓ '; }
.vb-chip input:focus-visible + span, .vb-option input:focus-visible + span { outline: 2px solid var(--vb-akzent); }
.vb-optionen { display: grid; gap: 8px; }
.vb-optionen.vb-zwei { grid-template-columns: 1fr 1fr; }
.vb-option { position: relative; display: block; }
.vb-option span { display: block; border: 1px solid var(--vb-linie); border-radius: 8px; padding: 10px 12px; background: #fff; font-size: 14px; cursor: pointer; }
.vb-option b { display: block; font-size: 15px; }
.vb-option em { font-style: normal; color: var(--vb-leise); }
.vb-option input:checked + span { border-color: var(--vb-akzent); box-shadow: 0 0 0 1px var(--vb-akzent); }
.vb-haken { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 10px 0; }
.vb-haken input { margin-top: 3px; accent-color: var(--vb-akzent); }
.vb-hp { position: absolute; left: -9999px; }
.vb-knopf { background: var(--vb-akzent); color: #fff; border: 0; border-radius: 8px; padding: 12px 22px; font: 600 16px var(--vb-sans); cursor: pointer; }
.vb-knopf:disabled { opacity: .45; cursor: not-allowed; }
.vb-meldung, .vb-fehler { color: var(--vb-rot); font-size: 14px; }
.vb-danke { border-color: var(--vb-akzent); background: var(--vb-akzent-hell); font-size: 16px; }
.vb-preis .vb-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 15px; }
.vb-preis .vb-zeile span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.vb-preis .vb-zeile small { color: var(--vb-leise); font-size: 12.5px; }
.vb-preis .vb-klein { font-size: 13px; color: var(--vb-leise); padding: 1px 0 1px 12px; }
.vb-preis .vb-summe { border-top: 1px solid var(--vb-linie); margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 18px; }
.vb-raten { background: var(--vb-akzent-hell); border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.vb-laedt { opacity: .5; }
.vb-zeitraum { display: flex; gap: 10px; margin-bottom: 10px; }
.vb-zeitraum div { flex: 1; border: 1px solid var(--vb-linie); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; color: var(--vb-leise); }
.vb-zeitraum b { display: block; color: var(--vb-text); font-size: 15px; }
.vb-info table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0 0 6px; border: 0; }
.vb-info td { padding: 5px 0; border: 0; border-bottom: 1px solid var(--vb-linie2); vertical-align: top; }
.vb-info td:last-child { text-align: right; padding-left: 10px; }
@media (min-width: 861px) { .vb-seite { position: sticky; top: 20px; } }
@media (max-width: 860px) {
	.vb-raster { grid-template-columns: 1fr; }
	.vb-haupt { display: contents; }
	.vb-kalender-karte { order: 1; } .vb-seite { order: 2; } .vb-formular, .vb-danke { order: 3; }
	.vb-monate { grid-template-columns: 1fr; }
	.vb-monate .vb-monat + .vb-monat { display: none; }
	.vb-felder, .vb-optionen.vb-zwei { grid-template-columns: 1fr; }
	.vb-kopfzeile { flex-wrap: wrap; }
}
/* Auftrag A (02.10.2026) */
.vb-buchung [hidden] { display: none !important; } /* .vb-feld { display: block } hob das hidden-Attribut auf */
.vb-widerruf { font-size: 14px; background: var(--vb-frei); border: 1px solid var(--vb-frei-rand); border-radius: 8px; padding: 10px 12px; margin: 12px 0 4px; }
.vb-haken a { color: var(--vb-akzent); text-decoration: underline; }
.vb-mietbedingungen h3 { margin-top: 1.4em; }