/*
 * Haus-Websites von gretyl (Pension Villa Waldeck, Berghaus Walden) – gemeinsame Ergänzungen zur gretyl-Markenbasis (gretyl.css).
 * Liegt in gemeinsam\assets\css und wird von gemeinsam\build-site.ps1 in jede Site kopiert.
 * Besonderheiten nur einer Site gehören in deren eigenes src\assets\css.
 */

/* ---------- Mobilmenü: Villa klappt schon ab lg auf (gretyl.css erst ab xl) ---------- */
@media (min-width: 992px) {
  .navbar-light .navbar-absolute-top-scroller {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    box-shadow: none;
  }
}

/* ---------- Logo-Gruppe im Header: gretyl | Villa Waldeck ---------- */
.v-brand-group {
  display: flex;
  align-items: center;
}

.v-brand-gretyl {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.v-brand-gretyl .navbar-brand-logo {
  height: 2rem;
}

.v-brand-divider {
  width: 1px;
  height: 2.25rem;
  margin: 0 1rem;
  background-color: rgba(31, 46, 35, .2);
}

.v-brand-group .navbar-brand {
  margin-right: 0;
}

@media (max-width: 575.98px) {
  .v-brand-gretyl .navbar-brand-logo { height: 1.6rem; }
  .v-brand-divider { margin: 0 .65rem; height: 1.9rem; }
  .v-brand-group .v-brand-name { font-size: 1.25rem; }
  .v-brand-group .v-brand-sub { font-size: .5625rem; letter-spacing: .1em; }
}

/* ---------- Wortmarke ---------- */
.v-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.1;
  text-decoration: none;
}

.v-brand-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--g-forest);
  letter-spacing: -.01em;
}

.v-brand-sub {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-gold);
  margin-top: .2rem;
}

/* ---------- Hero ---------- */
.v-hero-img {
  border-radius: 1.5rem;
  box-shadow: 0 2rem 4rem rgba(31, 46, 35, .18);
  width: 100%;
  aspect-ratio: 960 / 560;
  object-fit: cover;
}

.v-hero-badge {
  position: absolute;
  left: -1.5rem;
  bottom: 2rem;
  max-width: 15rem;
}

@media (max-width: 991.98px) {
  .v-hero-badge {
    left: 1rem;
    bottom: 1rem;
  }
}

/* ---------- Zimmer ---------- */
.v-room-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1rem;
}

.v-price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 2rem;
  color: var(--g-forest);
  line-height: 1;
}

.v-price small {
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  font-weight: 400;
  color: var(--g-text);
}

.v-room + .v-room {
  border-top: 1px solid rgba(31, 46, 35, .1);
}

/* ---------- Zimmer-Blöcke (Hauptbild + Collage) ---------- */
.v-room-block {
  padding: 3.5rem 0;
}

.v-room-block + .v-room-block {
  border-top: 1px solid rgba(31, 46, 35, .1);
}

.v-room-main,
.v-collage {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem rgba(31, 46, 35, .12);
}

.v-room-main img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.v-collage {
  margin-top: 2rem;
  border-radius: 1rem;
  box-shadow: 0 .75rem 1.5rem rgba(31, 46, 35, .1);
}

.v-collage img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .5s ease;
}

.v-room-main:hover img,
.v-collage:hover img {
  transform: scale(1.03);
}

/* ---------- Galerie ---------- */
.v-gallery-item {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
}

.v-gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s ease;
}

/* Hochformat neben einem doppelt so breiten 4:3-Bild → gleiche Höhe (nur ab md, mobil normal) */
@media (min-width: 768px) {
  .v-gallery-item img.v-tall {
    aspect-ratio: 2 / 3;
  }
}

.v-gallery-item:hover img {
  transform: scale(1.05);
}

.v-gallery-caption {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .4rem .85rem;
  border-radius: 2rem;
  background: rgba(250, 247, 240, .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 .25rem .75rem rgba(31, 46, 35, .18);
  color: var(--g-forest);
  font-size: .875rem;
  font-weight: 600;
}

/* Beschriftung erst bei Mouse-over/Fokus – auf Touch-Geräten (kein Hover) immer sichtbar */
@media (hover: hover) {
  .v-gallery-caption.v-on-hover {
    opacity: 0;
    transform: translateY(.4rem);
    transition: opacity .25s ease, transform .25s ease;
  }

  .v-gallery-item:hover .v-gallery-caption.v-on-hover,
  .v-gallery-item:focus-visible .v-gallery-caption.v-on-hover {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Handlungsknöpfe (Verfügbarkeit, Anfragen): ruhig, aber gut sichtbar ---------- */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Haupt (Verfügbarkeit): Salbeigrün, erst beim Darüberfahren kräftig */
.v-btn-haupt { background: #d5e5cf; border-color: #b4cfab; color: #2a5126; }
.v-btn-haupt:hover, .v-btn-haupt:focus-visible { background: #3e6b3a; border-color: #3e6b3a; color: #fff; }
/* Anfragen (die Aktion, um die es geht): zartes Bernstein, beim Darüberfahren kräftiger */
.v-btn-anfrage { background: #f3e2bd; border-color: #e2c78e; color: #5c3f0e; }
.v-btn-anfrage:hover, .v-btn-anfrage:focus-visible { background: #b9852f; border-color: #b9852f; color: #fff; }
/* Leise: nur feiner Rahmen */
.v-btn-leise { background: transparent; border-color: #d9d2c2; color: #1f2e23; }
.v-btn-leise:hover, .v-btn-leise:focus-visible { border-color: #3e6b3a; color: #2f5a2b; }
/* Voll: nur für das Absenden der Anfrage */
.v-btn-voll { background: #3e6b3a; border-color: #3e6b3a; color: #fff; }
.v-btn-voll:hover, .v-btn-voll:focus-visible { background: #2f5a2b; border-color: #2f5a2b; color: #fff; }
.v-btn-klein { padding: .45rem 1rem; font-size: .875rem; }
.v-btn:disabled { opacity: .6; cursor: default; }
/* Header: kleiner Kalender-Knopf neben dem Menü (nur Handy/Tablet) */
.v-header-kalender {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  margin-left: auto;
  margin-right: .5rem;
  font-size: 1.1rem;
}
/* Desktop-Header: vier Menüpunkte + zwei Knöpfe in einer Zeile neben den Logos */
@media (min-width: 992px) {
  #header .navbar-nav .nav-link { padding-left: .65rem; padding-right: .65rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  #header .v-brand-sub { display: none; }
}
/* kleiner Hinweis-Block mit Knopf (Startseite, Zimmerseite) */
.v-cta-zeile { text-align: center; }
.v-cta-zeile .g-claim { font-size: 1.35rem; }

/* ---------- Verfügbarkeitskalender (flatpickr, Dialog auf allen Seiten) ---------- */
/* nur zur Info (außerhalb der Anfrage): Tage nicht anklickbar, Blättern geht */
.v-nur-info .flatpickr-day { pointer-events: none; }
.v-kalender .flatpickr-calendar.inline {
  margin: 0 auto;
  box-shadow: none;
  border: 1px solid #ece6d8;
  border-radius: 12px;
}
.v-kalender .flatpickr-months .flatpickr-month,
.v-kalender .flatpickr-weekdays,
.v-kalender span.flatpickr-weekday {
  background: transparent;
}
.flatpickr-day.v-frei {
  background: #e3efe0;
  border-color: #e3efe0;
  color: #1f2e23;
}
.flatpickr-day.v-frei:hover,
.flatpickr-day.v-frei:focus {
  background: #3e6b3a;
  border-color: #3e6b3a;
  color: #fff;
}
/* ganzes Haus: schon Buchungen, aber noch Zimmer frei – dezentes Bernstein */
.flatpickr-day.v-teil {
  background: #f6e7c8;
  border-color: #f6e7c8;
  color: #6b4a12;
}
.flatpickr-day.v-teil:hover,
.flatpickr-day.v-teil:focus {
  background: #3e6b3a;
  border-color: #3e6b3a;
  color: #fff;
}
.flatpickr-day.v-voll,
.flatpickr-day.v-voll.flatpickr-disabled,
.flatpickr-day.v-voll.flatpickr-disabled:hover {
  background: #f6dcd8;
  border-color: #f6dcd8;
  color: #a33a2c;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* gewählter Zeitraum in Villa-Grün statt flatpickr-Blau */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange,
.flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.startRange:hover,
.flatpickr-calendar .flatpickr-day.endRange:hover {
  background: #3e6b3a;
  border-color: #3e6b3a;
  color: #fff;
  text-decoration: none;
}
.flatpickr-calendar .flatpickr-day.inRange,
.flatpickr-calendar .flatpickr-day.v-frei.inRange {
  background: #b9d4b2;
  border-color: #b9d4b2;
  box-shadow: -5px 0 0 #b9d4b2, 5px 0 0 #b9d4b2;
  color: #1f2e23;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #3e6b3a;
}

/* Anzeigefelder Anreise/Abreise im Formular (öffnen den Kalender) */
.v-datumsfeld[readonly] {
  cursor: pointer;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%233e6b3a' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
.v-legende .v-punkt {
  display: inline-block;
  width: .9rem;
  height: .9rem;
  margin-right: .4rem;
  vertical-align: -.1rem;
  border-radius: 4px;
  background: #eceae4;
}
.v-legende .v-punkt-frei { background: #e3efe0; border: 1px solid #b9d4b2; }
.v-legende .v-punkt-voll { background: #f6dcd8; border: 1px solid #e6b3ab; }
.v-legende .v-punkt-teil { background: #f6e7c8; border: 1px solid #e3cc98; }

/* ---------- Spamschutz-Fangfeld: für Menschen unsichtbar ---------- */
.v-hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Abschnittsüberschriften im Anfrageformular (mit Icon) ---------- */
.v-form-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.v-form-head .g-icon {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.15rem;
}

/* Text unter Überschrift mit Icon bündig zum Text, nicht zum Icon */
.v-form-head + p {
  padding-left: 3.25rem;
}

/* ---------- Auswahl-Kacheln im Anfrageformular ---------- */
.v-choice {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  height: 100%;
  padding: .9rem 1rem;
  border: 1px solid rgba(31, 46, 35, .14);
  border-radius: .75rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.v-choice:hover {
  border-color: rgba(var(--g-moss-rgb), .5);
}

.v-choice:has(input:checked) {
  border-color: var(--g-moss);
  background-color: rgba(var(--g-moss-rgb), .06);
}

.v-choice .form-check-input {
  flex-shrink: 0;
  margin-top: .2rem;
}

.v-choice .form-check-input:checked {
  background-color: var(--g-moss);
  border-color: var(--g-moss);
}

.v-choice-title {
  display: block;
  font-weight: 600;
  color: var(--g-forest);
}

.v-choice-text {
  display: block;
  font-size: .875rem;
  margin-top: .15rem;
}

.v-choice-sm {
  padding: .65rem 1rem;
  align-items: center;
}

.v-choice-sm .form-check-input {
  margin-top: 0;
}

.v-choice-sm .v-choice-title {
  font-weight: 500;
}

/* ---------- Rechtstexte ---------- */
.v-legal ol {
  padding-left: 1.25rem;
}

.v-legal li + li {
  margin-top: .5rem;
}

/* Erfolgsmeldung des Anfrageformulars bekommt per Skript den Fokus (Barrierefreiheit) – ohne sichtbaren Rahmen */
.js-anfrage-erfolg:focus {
  outline: none;
}


/* ---------- Sprachumschalter DE / EN im Header (setzt build-site.ps1 für @@sprachwahl ein, nur bei src\en\) ---------- */
.g-sprache {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .5rem .5rem .75rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
}

.g-sprache-aktiv { color: var(--g-forest, #1f2e23); }
.g-sprache-trenner { color: rgba(31, 46, 35, .3); }

.g-sprache-link {
  color: rgba(31, 46, 35, .5);
  text-decoration: none;
}

.g-sprache-link:hover,
.g-sprache-link:focus-visible {
  color: var(--g-gold, #b9852f);
}
/* Ab Desktop: Umschalter klein ÜBER den Knöpfen rechts – nimmt in der Menüzeile keine Breite weg
   (sonst rutscht das Menü neben der Wortmarke in eine zweite Zeile). Im Handy-Menü bleibt er ein Menüpunkt. */
@media (min-width: 992px) {
  #header:has(.g-sprache) { padding-top: 1.25rem; }   /* nur mit Umschalter (Walden ohne en/ bleibt unverändert) */
  #header .navbar-nav-wrap { position: relative; }
  #header .g-sprache {
    position: absolute;
    top: -.65rem;
    right: .25rem;
    padding: 0;
    line-height: 1;
  }
}
/* Handy-Menü: Umschalter bündig mit den Menüpunkten */
@media (max-width: 991.98px) {
  #header .g-sprache { padding-left: 0; }
}

/* ===== Themenseite „Wandern“ (villawaldeck.de/wandern.html): Unterkunft am Fernwanderweg ===== */
/* Stimmungsbild im Kopf: schräg angeschnitten wie auf gretyl.net/fernwandern.html */
.v-wandern-bild {
  aspect-ratio: 5 / 4;
  background: #1f2a20 50% 70% / cover no-repeat;
  clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
}

/* zwei Arten zu bleiben */
.v-wandern-karte {
  padding: 2rem 1.8rem;
  border-radius: 1.5rem;
  background-color: #fff;
  box-shadow: 0 .5rem 1.6rem rgba(31, 46, 35, .08);
}

.v-wandern-karte-dunkel {
  background-color: #2d3e2c;
  color: #e9e2cd;
}

.v-wandern-karte-dunkel p {
  color: #e9e2cd;
}

.v-wandern-karte-dunkel h3,
.v-wandern-karte-dunkel p.g-claim {
  color: #fff;
}

/* Band mit Bild (Albsteig, „in Kürze“) */
.v-wandern-band {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background: #1f2a20 50% 85% / cover no-repeat;
}

.v-wandern-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15, 20, 15, .88) 0%, rgba(15, 20, 15, .6) 55%, rgba(15, 20, 15, .2) 100%);
}

.v-wandern-band-inhalt {
  position: relative;
  max-width: 34rem;
  padding: 2.2rem 1.8rem;
  color: #e6dfcc;
}

@media (min-width: 768px) {
  .v-wandern-band-inhalt { padding: 3rem; }
}

.v-wandern-band p { color: #e6dfcc; }
.v-wandern-liste { margin: 0 0 1rem; padding-left: 1.2rem; color: #e6dfcc; }
.v-wandern-liste li { margin: .2rem 0; }
.v-wandern-liste li::marker { color: #e9c98a; }
.v-wandern-liste strong { color: #fff; }
.v-wandern-band .text-cap { color: #e9c98a; }
.v-wandern-band h2 { color: #fff; }
.v-wandern-band .v-btn-leise { border-color: #e9c98a; color: #e9c98a; }

/* Kachel auf der Startseite, die zur Themenseite führt */
a.v-wandern-band { display: block; text-decoration: none; }
a.v-wandern-band .v-wandern-pfeil { font-weight: 600; color: #e9c98a; }
a.v-wandern-band:hover .v-wandern-pfeil { text-decoration: underline; text-underline-offset: .25em; }

/* Häufige Fragen: aufklappbar, zunächst zu */
.v-frage {
  border-top: 1px solid rgba(185, 133, 47, .35);
}

.v-frage:last-of-type {
  border-bottom: 1px solid rgba(185, 133, 47, .35);
}

.v-frage summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 0;
  cursor: pointer;
  list-style: none;
}

.v-frage summary::-webkit-details-marker { display: none; }

.v-frage summary h3 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.15rem;
}

.v-frage summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid #b9852f;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1.55rem;
  text-align: center;
  color: #b9852f;
}

.v-frage[open] summary::after { content: "–"; }

.v-frage > p {
  margin: 0;
  padding: 0 0 1.2rem;
}


/* ---------- Gästeseite (gast.php, nur während des Aufenthalts – private/gast-lib.php, seit 14.10.2026) ----------
   Für beide Häuser gedacht; Rahmen src/vorlagen/gast-rahmen.html der jeweiligen Site. Am Handy zuerst. */
body.v-gast { background: var(--g-paper); }
.v-gast-leiste { padding: 1rem 0; border-bottom: 1px solid rgba(31, 46, 35, .08); background: #fff; }
.v-gast-leiste .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.v-gast-sprachen { display: flex; gap: .35rem; font-size: .875rem; font-weight: 600; }
.v-gast-sprachen a, .v-gast-sprachen span { padding: .3rem .6rem; border-radius: 2rem; border: 1px solid #d9d2c2; color: var(--g-forest); text-decoration: none; }
.v-gast-sprachen span { background: var(--g-moss); border-color: var(--g-moss); color: #fff; }
.v-gast-sprachen a:hover { border-color: var(--g-moss); color: var(--g-moss); }
.v-gast-main { padding: 2rem 0 3rem; }
.v-gast-main .container { max-width: 760px; }
.v-gast-kopf { margin-bottom: 1.75rem; }
.v-gast-kopf h1 { font-size: 1.85rem; margin: .25rem 0 .75rem; }
.v-gast-kicker { margin: 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--g-gold); }
.v-gast-karten { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 640px) { .v-gast-karten { grid-template-columns: 1fr 1fr; } }
.v-gast-karte { position: relative; padding: 1.25rem 1.25rem 1rem; background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .06); }
.v-gast-karte h2 { font-size: 1.2rem; margin: .35rem 0 .35rem; }
.v-gast-symbol { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: 50%; background: #e7efe3; color: var(--g-moss); font-size: 1.15rem; }
.v-gast-zeit { margin: 0 0 .5rem; font-family: 'Fraunces', Georgia, serif; font-size: 1.6rem; color: var(--g-forest); }
.v-gast-klein { font-size: .875rem; color: #6b706a; }
.v-gast-preisliste { list-style: none; padding: 0; margin: 0 0 .75rem; font-size: .9375rem; }
.v-gast-preisliste li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed #e6dfcf; }
.v-gast-preis { white-space: nowrap; color: var(--g-forest); font-weight: 600; }
.v-gast-tage h2, .v-gast-hausordnung h2 { font-size: 1.4rem; margin: 0 0 .25rem; }
.v-gast-tag { margin: 1rem 0; padding: 1rem 1.1rem; background: #fff; border-radius: 1rem; border-left: 4px solid #b4cfab; }
.v-gast-tag.zu { border-left-color: #e0d8c6; background: #fbf9f4; }
.v-gast-tag h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.v-gast-tag p { margin: 0 0 .25rem; }
.v-gast-schalter { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--g-forest); cursor: pointer; }
.v-gast-schalter input { width: 1.3rem; height: 1.3rem; accent-color: var(--g-moss); }
.v-gast-fr { display: grid; grid-template-columns: 1fr 1.6fr; gap: .75rem; margin: .6rem 0 .25rem 1.9rem; }
.v-gast-fr.aus { opacity: .45; }
.v-gast-form label { font-size: .8125rem; color: #6b706a; }
.v-gast-form select, .v-gast-form input[type=number], .v-gast-form textarea {
  display: block; width: 100%; margin-top: .2rem; padding: .55rem .7rem; border: 1px solid #d9d2c2; border-radius: .6rem; background: #fff; font-size: 1rem; color: var(--g-forest);
}
.v-gast-lunch { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin-top: .85rem; padding-top: .75rem; border-top: 1px dashed #e6dfcf; }
@media (min-width: 640px) { .v-gast-lunch { grid-template-columns: repeat(4, 1fr); } }
.v-gast-lunch label span { display: block; min-height: 2.4em; line-height: 1.2; }
.v-gast-notiz { display: block; margin: 1.25rem 0 1rem; }
.v-gast-form .v-btn { width: 100%; justify-content: center; }
.v-gast-meldung { padding: .85rem 1rem; border-radius: .75rem; margin-bottom: 1rem; }
.v-gast-meldung.ok { background: #e3efe0; color: #1f3d1c; }
.v-gast-meldung.warn { background: #f6e7c8; color: #5c3f0e; }
.v-gast-hausordnung { margin-top: 2.5rem; padding: 1.25rem; background: #fff; border-radius: 1rem; }
.v-gast-zwischen { font-size: 1.05rem; margin: 1.1rem 0 .4rem; }
.v-gast-kontakt { margin-top: 2rem; text-align: center; color: #6b706a; }
.v-gast-fuss { padding: 1.5rem 0 2rem; font-size: .8125rem; color: #8a8f86; text-align: center; }
.v-gast-fuss p { margin: 0 0 .25rem; }
.v-gast-fuss a { color: var(--g-moss); }
/* Vorschau für uns (angemeldet in der Verwaltung): Leiste oben, Formular gesperrt */
.v-gast-vorschau { margin: 0 0 1.5rem; padding: .85rem 1rem; border-radius: .75rem; background: #fdf1d6; border: 1px dashed #c99a45; color: #5c3f0e; font-size: .875rem; line-height: 1.7; }
.v-gast-vorschau a { color: #3e6b3a; font-weight: 600; }
.v-gast-gesperrt { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Reiter der Gästeseite (Willkommen · Frühstück & Lunchpaket · Sauna) – ganz oben, beim Scrollen sichtbar */
.v-gast-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: .35rem; margin: -2rem -12px 1.5rem; padding: .6rem 12px; background: var(--g-paper); border-bottom: 1px solid rgba(31, 46, 35, .08); overflow-x: auto; scrollbar-width: none; }
.v-gast-tabs a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .8rem; border-radius: 2rem; border: 1px solid #d9d2c2; background: #fff; color: var(--g-forest); font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.v-gast-tabs a.aktiv { background: var(--g-moss); border-color: var(--g-moss); color: #fff; }
.v-gast-tabs a:not(.aktiv):hover { border-color: var(--g-moss); color: var(--g-moss); }
/* Reiter (Lars, 16.10.2026: sechs Reiter): kurze Namen, umbrechen statt seitlich schieben – breit eine Reihe, am Handy drei je Reihe */
.v-gast-tabs { flex-wrap: wrap; overflow-x: visible; gap: .3rem; }
.v-gast-tabs a { padding: .5rem .6rem; gap: .3rem; }
@media (max-width: 699px) {
  .v-gast-tabs a { flex: 1 1 calc(33.333% - .3rem); padding: .45rem .4rem; font-size: .8125rem; }
}
@media (max-width: 420px) { .v-gast-tabs a { font-size: .78rem; } .v-gast-tabs a i { display: none; } }
.v-gast-willkommen { margin-bottom: 1.5rem; font-size: 1.0625rem; }
/* Wetter auf dem Reiter Willkommen (wetter-lib.php, Lars 16.10.2026) */
.v-gast-wetter { display: grid; grid-template-columns: 4.25rem 1fr; column-gap: 1rem; align-items: start; padding: 1rem 1.15rem; margin-bottom: 1.5rem; background: #fff; border: 1px solid #d9e1e8; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .06); color: var(--g-forest); }
.v-gast-wetter-bild { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.v-gast-wetter-bild i { display: inline-flex; width: 3.4rem; height: 3.4rem; align-items: center; justify-content: center; border-radius: 50%; background: #eef2f6; color: #4f6b86; font-size: 1.75rem; }
.v-gast-wetter-bild span { font-size: .75rem; font-weight: 600; color: #4f6b86; text-align: center; line-height: 1.2; }
.v-gast-wetter p { margin: 0; }
/* Jetzt, heute, morgen je eine Zeile mit etwas Luft dazwischen */
.v-gast-wetter-werte { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; color: #6b706a; }
.v-gast-wetter-werte b { display: inline-block; min-width: 4.2rem; }
.v-gast-wetter-werte b { font-weight: 600; color: var(--g-forest); }
.v-gast-wetter-jetzt { font-weight: 600; color: var(--g-forest); }
.v-gast-wetter-satz { margin-top: .35rem !important; font-style: italic; }
.v-gast-wetter-quelle { margin-top: .3rem !important; font-size: .75rem; }
.v-gast-wetter-quelle a { color: #8a8f86; }
/* Tipp für eine kleine Runde unten auf „Willkommen“ (gast-lib.php → ga_strecken_tipp, Daten aus strecken-lib.php st_tipp) */
.v-gast-tipp { margin: 0 0 1.5rem; }
.v-gast-tipp h2 { font-size: 1.35rem; margin: 0 0 .35rem; }
.v-gast-tipp-satz { color: #4a5249; margin: 0 0 1rem; }
.v-gast-tipp-karte { display: grid; grid-template-columns: 1fr; overflow: hidden; background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .06); }
@media (min-width: 640px) { .v-gast-tipp-karte { grid-template-columns: 40% 1fr; } }
.v-gast-tipp-bild { width: 100%; height: 100%; min-height: 10rem; max-height: 16rem; object-fit: cover; display: block; }
.v-gast-tipp-text { padding: 1rem 1.15rem 1.1rem; }
.v-gast-tipp-text h3 { font-size: 1.2rem; margin: .15rem 0 .35rem; }
.v-gast-tipp-text p { margin: 0 0 .5rem; font-size: .9375rem; }
.v-gast-tipp-fakten { color: #6b706a; font-weight: 600; }
.v-gast-tipp-zeichen i { margin-left: .35rem; color: var(--g-moss); }
.v-gast-tipp-links a { color: var(--g-moss); font-weight: 600; }
/* Reiter „Meine Minibar“ (gast-lib.php → ga_tab_minibar, Lars 16.10.2026): Sorte, Preis, Zähler − / + */
.v-gast-minibar ul { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.v-gast-minibar li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem 1rem; background: #fff; border: 1px solid #e3ddd0; border-radius: 1rem; }
.v-gast-minibar li.an { border-color: var(--g-moss); background: #f6faf4; }
.v-gast-mb-name { display: flex; flex-direction: column; min-width: 0; }
.v-gast-mb-name small { color: #6b706a; }
.v-gast-mb-zaehler { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.v-gast-mb-zaehler form { margin: 0; }
.v-gast-mb-zaehler button { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--g-moss); background: #fff; color: var(--g-moss); font-size: 1.35rem; line-height: 1; cursor: pointer; }
.v-gast-mb-zaehler button:disabled { border-color: #d9d2c2; color: #c3bdb0; cursor: default; }
.v-gast-mb-zaehler output { min-width: 1.6rem; text-align: center; font-size: 1.15rem; font-weight: 700; }
.v-gast-mb-summe { margin: 0 0 .5rem; text-align: right; font-size: 1.05rem; }
.v-gast-mb-hinweis { margin: 0 0 1.5rem; padding: .85rem 1rem; border-radius: 1rem; background: #fdf8ee; color: #6b5a2e; font-size: .9375rem; }
/* Reiter „Bei Regen“ (gast-lib.php → ga_tab_regen, Lars 16.10.2026) */
.v-gast-regen { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .75rem; }
.v-gast-regen li { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .75rem; align-items: start; padding: 1rem 1.1rem; background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .06); color: var(--g-forest); }
.v-gast-regen i { grid-row: span 2; display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: 50%; background: #eef2f6; color: #4f6b86; font-size: 1.1rem; }
.v-gast-regen span { font-size: .9375rem; color: #4a5249; }
.v-gast-regen li > * { min-width: 0; }
.v-gast-regen a { color: var(--g-moss); font-weight: 600; }
.v-gast-regen-spruch { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-left: 3px solid #9db3c6; font-family: var(--g-serif, Georgia, serif); font-style: italic; font-size: 1.0625rem; color: var(--g-forest); }
/* Reiter „TV-Ersatz“ (gast-lib.php → ga_tab_tv, Lars 16.10.2026): Karten je Video, Abspielfenster (dialog) mit Vollbild */
.v-gast-tv-zwischen { font-size: 1.35rem; margin: 1.25rem 0 .25rem; }
.v-gast-tv-unter { color: #6b706a; font-size: .9375rem; margin: 0 0 .75rem; }
.v-gast-tv-kat { margin-bottom: 1.5rem; }
.v-gast-tv-kat h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.v-gast-tv-liste { display: grid; gap: .75rem; }
@media (min-width: 640px) { .v-gast-tv-liste { grid-template-columns: 1fr 1fr; } }
.v-gast-tv-karte { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .85rem; align-items: center; width: 100%; padding: .6rem; text-align: left; font: inherit; background: #fff; border: 1px solid #e3ddd0; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .06); color: var(--g-forest); text-decoration: none; cursor: pointer; }
.v-gast-tv-karte:hover { border-color: var(--g-moss); }
.v-gast-tv-bild { display: block; aspect-ratio: 16 / 9; border-radius: .65rem; background: #e7e2d6 center / cover no-repeat; }
.v-gast-tv-bild.leer { display: flex; align-items: center; justify-content: center; color: #8a8f86; font-size: 1.5rem; }
.v-gast-tv-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.v-gast-tv-text strong { font-size: .95rem; line-height: 1.3; }
.v-gast-tv-text small { font-size: .78rem; color: #6b706a; }
.v-gast-tv-text em { font-style: normal; font-size: .8rem; font-weight: 600; color: var(--g-moss); }
/* Abschluss „Zum Einschlafen“: dunkle Nacht-Karte mit Mond */
.v-gast-tv-nacht { margin: 2rem 0 1.5rem; }
.v-gast-tv-nacht .v-gast-tv-karte { grid-template-columns: 3.4rem minmax(0, 1fr); padding: 1rem 1.15rem; background: linear-gradient(135deg, #1f2e23, #2c3b4a); border-color: #2c3b4a; color: #eef1ea; }
.v-gast-tv-nacht .v-gast-tv-text small { color: #c9d3c6; font-size: .875rem; }
.v-gast-tv-nacht .v-gast-tv-text em { color: #e6d39a; }
.v-gast-tv-mond { display: inline-flex; width: 3.4rem; height: 3.4rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #e6d39a; font-size: 1.5rem; }
.v-gast-tv-fenster { width: min(960px, 96vw); max-width: none; padding: 0; border: 0; border-radius: 1rem; background: #111; color: #eee; }
.v-gast-tv-fenster::backdrop { background: rgba(10, 14, 11, .8); }
.v-gast-tv-leiste { display: flex; gap: .5rem; align-items: center; padding: .55rem .75rem; }
.v-gast-tv-leiste strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.v-gast-tv-leiste button { border: 1px solid #555; background: transparent; color: #eee; border-radius: 2rem; padding: .3rem .75rem; font: inherit; font-size: .8rem; cursor: pointer; white-space: nowrap; }
.v-gast-tv-rahmen { position: relative; aspect-ratio: 16 / 9; background: #000; }
.v-gast-tv-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.v-gast-tv-rahmen:fullscreen { aspect-ratio: auto; }
/* Knopf zum Beenden – nur im Vollbild sichtbar, oben rechts, groß genug für Finger und TV-Fernbedienung (Fokus sichtbar) */
.v-gast-tv-raus { display: none; position: absolute; top: .75rem; right: .75rem; z-index: 2; padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 2rem; background: rgba(0, 0, 0, .6); color: #fff; font: inherit; font-size: .9rem; cursor: pointer; }
.v-gast-tv-raus:focus-visible { outline: 3px solid #cfe3c8; }
/* zwei Regeln: kennt ein Browser eine der Schreibweisen nicht, würde er sonst beide verwerfen */
.v-gast-tv-rahmen:fullscreen .v-gast-tv-raus { display: inline-flex; gap: .4rem; align-items: center; }
.v-gast-tv-rahmen:-webkit-full-screen .v-gast-tv-raus { display: inline-flex; gap: .4rem; align-items: center; }
.v-gast-tv-hinweis { margin: 0; padding: .5rem .75rem .7rem; font-size: .75rem; color: #aaa; }
.v-gast-tv-hinweis a { color: #cfe3c8; }
@media (max-width: 520px) { .v-gast-tv-leiste button { padding: .3rem .55rem; } }
.v-gast-wegweiser { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .v-gast-wegweiser { grid-template-columns: 1fr 1fr; } }
.v-gast-wegweiser a { display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .75rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border-radius: 1rem; box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .06); color: var(--g-forest); text-decoration: none; }
.v-gast-wegweiser a:hover { box-shadow: 0 .5rem 1.5rem rgba(31, 46, 35, .12); }
.v-gast-wegweiser i { grid-row: span 2; display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: 50%; background: #e7efe3; color: var(--g-moss); font-size: 1.1rem; }
.v-gast-wegweiser span { font-size: .875rem; color: #6b706a; }
/* Sauna */
.v-gast-sauna-info { margin-bottom: 1.5rem; }
.v-gast-sauna-meine, .v-gast-sauna-buchen { margin-bottom: 1.5rem; }
.v-gast-sauna-meine h2, .v-gast-sauna-buchen h2 { font-size: 1.4rem; margin: 0 0 .5rem; }
.v-gast-sauna-meine ul { list-style: none; padding: 0; margin: 0; }
.v-gast-sauna-meine li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; margin-bottom: .5rem; background: #fff; border-radius: .75rem; border-left: 4px solid var(--g-moss); }
.v-gast-sauna-meine form { margin: 0; }
.v-gast-link { border: 0; background: none; padding: 0; color: #a33a2c; text-decoration: underline; font-size: .875rem; cursor: pointer; }
.v-gast-sauna-personen { display: block; max-width: 16rem; margin-bottom: .5rem; }
.v-gast-sauna-tag { margin: .75rem 0; padding: .9rem 1rem; background: #fff; border-radius: 1rem; }
.v-gast-sauna-tag h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.v-gast-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .45rem; }
.v-gast-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 2.9rem; padding: .35rem .25rem; border-radius: .6rem; border: 1px solid #d9d2c2; font-size: .9375rem; font-weight: 600; line-height: 1.15; }
.v-gast-slot small { font-size: .6875rem; font-weight: 400; }
button.v-gast-slot.frei { background: #eef5ea; border-color: #b4cfab; color: #2a5126; cursor: pointer; }
button.v-gast-slot.frei:hover, button.v-gast-slot.frei:focus-visible { background: var(--g-moss); border-color: var(--g-moss); color: #fff; }
.v-gast-slot.belegt { background: #f4f1ea; color: #a39d90; border-style: dashed; }
.v-gast-slot.deins { background: var(--g-moss); border-color: var(--g-moss); color: #fff; }
.v-gast-slot.vorbei { background: transparent; color: #c9c4b8; border-color: #ece6d8; }