button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button;-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* Sanftes Gleiten bei Anker-Sprüngen und programmatischen Scrolls;
 * respektiert die OS-Einstellung "Bewegung reduzieren". */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Scroll-Reveal: Klasse wird per JS angehängt (kein FOUC ohne JS);
   * is-visible löst das Hochgleiten an die Endposition aus. Der kleine
   * Delay lässt den Auto-Scroll erst ankommen, damit die Bewegung nicht
   * im Scrollen untergeht. */
  .revu-reveal {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s,
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
    /* Auto-Scroll zielt auf die noch um 48px versetzte Karte — ohne
     * Ausgleich gleitet sie am Ende über den oberen Rand hinaus und die
     * Headline verschwindet. 48px Versatz + 24px Luft. */
    scroll-margin-top: 72px;
  }

  /* Auch Sprünge, die direkt die Überschrift im Reveal-Block anvisieren
   * (z.B. appointmentHeading), brauchen den Versatz-Ausgleich. */
  .revu-reveal h2 {
    scroll-margin-top: 72px;
  }

  .revu-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

:root {
  --revu-accent-color: #698680;
  --revu-teaser-text-color: #9ca3af;
  --revu-success: #698680;
  --revu-error: #e30000;
  --revu-border-color: #9ca3af;
  --revu-heading-scale: 1.25;
  --revu-heading-transform: none;
  --revu-headline-nudge-left: 0px;
  --revu-headline-nudge-left-scale: 1;
  --revu-daily-booked-color: #a0d2fd;
  --revu-daily-booked-color-50: color-mix(in srgb, var(--revu-daily-booked-color, #a0d2fd) 50%, transparent);
  --revu-daily-blackout-color: transparent;
  --revu-daily-blackout-border-color: #b8c0cc;
  --font-size-button: 0.9375rem;
  --font-size-body-text: 1rem;
  --font-size-h1: 24px;
  --font-size-h2: 18px;
  --font-size-h3: 16px;
  --font-size-card-title: 0.9375rem;
  --revu-heading-font-weight: 600;
  --revu-body-font-weight: 400;
  --font-weight-light: 300;
  --font-weight-bold: 700;
  --container-padding-x: var(--revu-container-padding-x, 30px);
  --revu-hero-bg: none;
}

body[data-revu-body-size="medium"] {
  --font-size-button: 1rem;
  --font-size-body-text: 1rem;
}

body[data-revu-body-size="large"] {
  --font-size-button: 1.125rem;
  --font-size-body-text: 1rem;
}


[data-lastpass-root] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
}

body {
  margin: 0;
  line-height: 1.33;
  font-family: var(--revu-body-font, system-ui, sans-serif);
  font-weight: var(--revu-body-font-weight);
  background: var(--revu-bg-color);
  color: var(--revu-small-text);
  font-size: 1rem;
}


h1 {
  line-height: 1.12;
}

h2 {
  line-height: 1.2;
}

h3 {
  line-height: 1.2;
}

h4 {
  line-height: 1.25;
}

h5 {
  line-height: 1.3;
}

h6 {
  line-height: 1.33;
}

p {
  line-height: 1.33;
}

#bookingPageMain p {
  max-width: calc(16vw + 420px);
}

a {
  text-decoration-skip-ink: auto;
  color: var(--revu-link-color, #698680) !important;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible {
  text-decoration: none;
  outline-offset: 4px;
  outline: 2px solid var(--revu-link-color, #698680);
}

textarea {
  resize: vertical;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
}

select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  text-decoration: none;
  outline-offset: 0;
  outline: 2px solid var(--revu-link-color, #698680);
}

a:visited:not(.button):not(.primary-button):not(.secondary-button):not(.ghost-button) {
  color: inherit;
}

a:hover {
  color: var(--revu-headlines-labels-color, #0f172a) !important;
  text-decoration: none;
}

.ghost-button {
  border: none;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: var(--revu-heading-font-weight);
  background: transparent;
  cursor: pointer;
  color: var(--revu-link-color, #698680);
}

#openCustomerDataModalBtn {
  margin: 0;
}

body[data-revu-body-size="medium"] .ghost-button {
  font-size: 15px;
}

body[data-revu-body-size="large"] .ghost-button {
  font-size: 16px;
}

h1 {
  font-size: calc(var(--font-size-h1) * var(--revu-heading-scale) * var(--revu-h2-responsive-scale, 1));
  margin: 0.75rem 0;
  font-family: var(--revu-title-font, 'Roboto', sans-serif);
  font-weight: var(--revu-title-font-weight);
}

#headline {
  margin-left: calc(var(--revu-headline-nudge-left, 0) * var(--revu-headline-nudge-left-scale, 1));
  max-width: calc(100vw - 3rem);
}

h2 {
  font-size: calc(var(--font-size-h2) * var(--revu-heading-scale) * var(--revu-h2-responsive-scale, 1));
  margin: 0.5rem 0;
  padding: 1rem 0;
  font-family: var(--revu-heading-font, 'Roboto', sans-serif);
}

h3 {
  font-size: calc(var(--font-size-h3) * var(--revu-heading-scale) * var(--revu-h2-responsive-scale, 1));
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--revu-heading-font, 'Roboto', sans-serif);
}

h3 + p {
  margin-top: 0;
}

h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--revu-heading-font-weight);
  color: var(--revu-headlines-labels-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: var(--revu-heading-transform, none);
}

#bookingPageMain {
  max-width: var(--revu-container-max-width, 1200px);
  margin: 0 auto;
  padding: 32px var(--revu-container-padding-x, 30px) 48px;
  container-type: inline-size;
  container-name: revu-container;
}

#bookingPageHero {
  display: flex;
  margin-bottom: 24px;
}

#bookingPageHero.has-booking-headline {
  justify-content: space-between;
  align-items: center;
}

#bookingPageHero.no-booking-headline {
  align-items: start;
  justify-content: flex-end;
}

#bookingPageHero .hero-copy,
#hero > div {
  max-width: 50vw;
  min-width: 0;
}

.hero-lang-about {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.hero-lang-about.has-logo-adjacent {
  align-items: center;
  /*min-height: 68px;*/
}

@media (min-width: 1201px) {
  .hero-lang-about {
    gap: 24px;
  }
}

/* [breakpointLarge+1] Hero → PHP inline <style> in WorkspaceService.php */

#aboutLink {
  white-space: nowrap;
}

.language-select {
  min-width: 80px;
  border-radius: 99px;
  min-height: auto;
  padding: 8px 40px 8px 17px;
  font-size: 13px;
  font-weight: var(--revu-body-font-weight);
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='14' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.66663 10.0001C1.66663 5.39771 5.39759 1.66675 9.99996 1.66675C14.6023 1.66675 18.3333 5.39771 18.3333 10.0001C18.3333 14.6025 14.6023 18.3334 9.99996 18.3334C5.39759 18.3334 1.66663 14.6025 1.66663 10.0001ZM9.99996 3.33341L9.99104 3.33342L9.99139 3.33479C9.95963 3.34286 9.80535 3.40924 9.58085 3.74399C9.36709 4.06271 9.15088 4.53605 8.95932 5.15837C8.63433 6.21414 8.40896 7.60422 8.34913 9.16675H11.6508C11.591 7.60422 11.3656 6.21414 11.0406 5.15837C10.849 4.53605 10.6328 4.06271 10.4191 3.74399C10.1946 3.40924 10.0403 3.34286 10.0085 3.33479L10.0089 3.33342L9.99996 3.33341ZM11.6508 10.8334H8.34913C8.41119 12.4543 8.65137 13.8887 8.99546 14.9565C9.19753 15.5837 9.42283 16.0447 9.63919 16.3394C9.74591 16.4848 9.83696 16.5711 9.90386 16.6188C9.93619 16.6418 9.96 16.6537 9.97486 16.6598C9.98916 16.6656 9.99635 16.6665 9.99788 16.6666L9.99996 16.6667H10.0021C10.0036 16.6666 10.0108 16.6656 10.0251 16.6598C10.0399 16.6537 10.0637 16.6418 10.0961 16.6188C10.163 16.5711 10.254 16.4848 10.3607 16.3394C10.5771 16.0447 10.8024 15.5837 11.0045 14.9565C11.3485 13.8887 11.5887 12.4543 11.6508 10.8334ZM6.68134 9.16675C6.74185 7.46317 6.98634 5.90276 7.36641 4.66805C7.46726 4.34041 7.57976 4.02878 7.70432 3.7392C5.40381 4.58296 3.69765 6.65849 3.38487 9.16675H6.68134ZM3.38487 10.8334H6.68134C6.74405 12.5989 7.00439 14.2116 7.40911 15.4677C7.49847 15.745 7.59673 16.0109 7.70431 16.261C5.40381 15.4172 3.69765 13.3417 3.38487 10.8334ZM13.3186 10.8334H16.615C16.3023 13.3417 14.5961 15.4172 12.2956 16.261C12.4032 16.0109 12.5015 15.745 12.5908 15.4677C12.9955 14.2116 13.2559 12.5989 13.3186 10.8334ZM16.615 9.16675H13.3186C13.2581 7.46317 13.0136 5.90276 12.6335 4.66805C12.5327 4.34041 12.4202 4.02878 12.2956 3.7392C14.5961 4.58296 16.3023 6.65849 16.615 9.16675Z' fill='%23111827'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px top 45%;
  background-size: 16px;
  border: none;
  background-color: rgb(230, 230, 230);
}

body[data-revu-body-size="medium"] .language-select {
  font-size: 14px;
}

body[data-revu-body-size="large"] .language-select {
  font-size: 16px;
}

.brand {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--revu-small-text);
}

#brandLogo {
  width: auto;
  max-height: 68px;
  max-width: 320px;
  background: transparent;
  object-fit: contain;
  object-position: right center;
  border-radius: 0;
  margin-left: 16px;
  margin-right: 2px;
}

@media (max-width: 768px) {
  #brandLogo {
    max-width: 240px;
    max-height: 62px;
  }
  .template2 #bookingPageHero {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }
}

@media (max-width: 480px) {
  #brandLogo {
    max-width: 160px;
    max-height: 56px;
  }
  .template2 #bookingPageHero {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }
}

body.template2 #brandLogo, body.template3 #brandLogo {
  object-position: left center;
  margin-right: 16px;
  margin-left: -1px;
}

#brandHeadlineSection {
  margin: 3rem 0 2rem 0;
}

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
}
.modal-content {
  position: relative;
  background: linear-gradient(var(--revu-bg-color, #ffffff), var(--revu-bg-color, #ffffff)), #ffffff;
  color: var(--revu-headlines-labels-color, #0f172a);
  border-radius: 12px;
  padding: 32px 24px;
  max-width: 720px;
  width: 100%;
  z-index: 1001;
  max-height: calc(100vh - 48px);
  min-height: 80vh;
  overflow: auto;
}
#aboutModalContent a {
  font-size: var(--font-size-body-text, 16px);
  font-weight: var(--font-weight-bold);
}

html.modal-open,
body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.about-close-btn {
  top: 25px;
  right: 24px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: var(--revu-bg-color);
  color: var(--revu-small-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  backdrop-filter: blur(2px) saturate(120%);
}

.about-close-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.about-close-btn:hover {
  color: var(--revu-bg-color);
  background: var(--revu-small-text);
}

.about-close-btn:focus-visible {
  outline: 2px solid var(--revu-link-color);
  outline-offset: 2px;
}
.modal-body {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.modal-body,
.modal-body p,
.modal-body strong {
  color: var(--revu-headlines-labels-color, #0f172a);
}

/* Structured modal: header / scrollable body / footer */
.booking-modal-structured {
  width: min(768px, 100%);
  max-height: calc(100dvh - 64px);
  min-height: 360px ;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.booking-modal-header {
  height: auto;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: inherit;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.booking-modal-header-title {
  margin: 0;
  padding: 12px 12px 11px 0;
  font-size: calc(var(--font-size-h3) * var(--revu-heading-scale) * var(--revu-h2-responsive-scale, 1));
  font-weight: var(--revu-heading-font-weight);
  color: var(--revu-headlines-labels-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-modal-header .about-close-btn {
  position: static;
  flex-shrink: 0;
}

.booking-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  align-content: start;
}

.booking-modal-body,
.booking-modal-body p {
  color: var(--revu-small-text);
}
p > strong {
  color: var(--revu-headlines-labels-color);
}

.booking-modal-footer {
  height: 55px;
  min-height: 55px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: inherit;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  font-size: 13px;
}

.booking-modal-footer-link {
  color: var(--revu-headlines-labels-color, #0f172a);
  text-decoration: none;
  font-size: var(--font-size-body-text, 16px);
}

.booking-modal-footer-link:hover {
  
}

.about-image {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: var(--revu-teaser-border-radius, 12px);
  display: block;
}

#about-img-content {
  width: 100%;
  margin-bottom: 16px;
}

#about-img-content .about-image {
  max-height: 54vh;
  max-width: 960px;
  margin-top: clamp(2px, 2vw, 2rem);
  border-radius: var(--revu-teaser-border-radius, 12px);
}

#introTextContent > :first-child {
  margin-top: 0;
}

#intro {
  margin-top: clamp(2px, calc(1.5vw + .5rem), 2rem);
  margin-bottom: 2rem;
}

#intro p {
  line-height: 1.5;
  font-size: calc(18px * var(--revu-h2-responsive-scale, 1));
}

#aboutDescription {
  margin-top: 16px;
  padding-right: 48px;
  line-height: 1.33;
  color: var(--revu-small-text);
}

.card {
  background: none;
  border-radius: 0;
  padding: 16px 0 12px 0;
  margin-bottom: 16px;
  box-shadow: none;
  max-width: none;
}

.availability-day-separator {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 12px 0;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 12px;
}

/* Guest booking: two-row customer layout (email+phone, then first+last name) */
.grid.grid-customer-fields {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
}

.grid-customer-fields span, .invoice-address-section span {
  margin-top: 4px;
  margin-bottom: -6px;
}

@media (max-width: 720px) {
  .grid.grid-customer-fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .grid.grid-customer-fields {
    grid-template-columns: 1fr;
  }
}

/* Rechnungsanschrift: 3 Zeilen */
#invoiceAddressHeading {
  margin-bottom: 1rem;
}
.invoice-address-section {
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  margin-top: 12px;
}
.invoice-address-section.invoice-address-collapsed {
  max-height: 0;
  margin-top: 0;
}
.invoice-address-section:not(.invoice-address-collapsed) {
  max-height: fit-content;
}
.invoice-address-section .invoice-address-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}
.invoice-address-row-1 {
  grid-template-columns: minmax(140px, 1fr) minmax(160px, 1.5fr);
}
.invoice-address-row-3 {
  grid-template-columns: minmax(80px, 1fr) minmax(120px, 1.5fr) minmax(100px, 1fr);
}

#invoiceSectionWrap {
  margin-bottom: 36px;
  margin-top: 12px;
}

#invoiceBookerName {
  color: var(--revu-small-text);
  font-size: 1rem;
  margin: 12px 0 16px;
}

@media (max-width: 720px) {
  .invoice-address-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .invoice-address-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .invoice-address-row-1 { grid-template-columns: 1fr; }
}

.booking-mode-toggle {
  display: flex;
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--revu-border-color, #9ca3af);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  margin: 6px 0 18px;
}

.booking-mode-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: var(--revu-heading-font-weight);
  cursor: pointer;
  color: var(--revu-headlines-labels-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-mode-btn.is-active {
  background: var(--revu-link-color, #698680);
  color: #fff;
}

.booking-mode-btn:focus-visible {
  outline: 2px solid var(--revu-link-color);
  outline-offset: -2px;
}

.password-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.password-input-wrap input {
  width: auto;
  flex: 1;
  min-width: 0;
}

.password-toggle {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--revu-accent-color);
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}

.password-toggle:hover {
  filter: brightness(0.95);
}

.password-toggle.is-visible {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M4 4l16 16' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.password-toggle.login-back-btn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 447.243 447.243'%3E%3Cpath fill='%23ffffff' d='M420.361 192.229c-1.83-.297-3.682-.434-5.535-.41H99.305l6.88-3.2c6.725-3.183 12.843-7.515 18.08-12.8l88.48-88.48c11.653-11.124 13.611-29.019 4.64-42.4-10.441-14.259-30.464-17.355-44.724-6.914-1.152.844-2.247 1.764-3.276 2.754l-160 160c-12.504 12.49-12.515 32.751-.025 45.255l.025.025 160 160c12.514 12.479 32.775 12.451 45.255-.063.982-.985 1.899-2.033 2.745-3.137 8.971-13.381 7.013-31.276-4.64-42.4l-88.32-88.64c-4.695-4.7-10.093-8.641-16-11.68l-9.6-4.32h314.24c16.347.607 30.689-10.812 33.76-26.88 2.829-17.445-9.019-33.88-26.464-36.71z'/%3E%3C/svg%3E");
  background-size: 14px;
  flex-shrink: 0;
}

.login-forgot {
  display: inline-block;
  font-size: 15px;
  margin: 0 0 -4px;
}

.email-lookup-hint {
  display: block;
  font-size: 16px;
  color: var(--revu-headlines-labels-color);
  margin: 0 0 -6px;
  line-height: 1.5;
}

.email-lookup-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

#loginStep .email-lookup-actions {
  margin-top: 32px;
}

.logged-in-success {
  font-size: var(--font-size-h2);
  color: var(--revu-success);
  margin: 24px 0 20px 0;
  font-weight: var(--revu-body-font-weight);
  line-height: 1.5;
}

.logged-in-phone-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.logged-in-phone-field {
  margin: 0;
  min-width: 0;
}

.logged-in-phone-field input {
  width: 100%;
  height: 42px;
}

.phone-with-prefix {
  display: grid;
  grid-template-columns: minmax(86px, 104px) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.phone-dial-code-select {
  width: 100%;
  height: 42px;
  border-radius: 8px;
}

.phone-dial-code-input {
  width: 100%;
  height: 42px;
  border-radius: 8px;
}

.logged-in-profile-btn {
  margin-bottom: 6px;
  min-height: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--revu-border-color, #9ca3af);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: var(--revu-body-font);
}

.logged-in-profile-btn:hover {
  color: var(--revu-teaser-text-color);
  border-color: var(--revu-card-bg);
}

#customerDataModalTitle {
  margin: 16px 0 20px;
  padding-right: 48px;
}

#forgotPasswordModal .modal-content {
  max-width: 560px;
  min-height: auto;
}

#forgotPasswordModalTitle {
  margin: 16px 0 8px;
  padding-right: 48px;
}

.forgot-password-modal-body {
  gap: 10px;
}

.forgot-password-actions {
  margin-top: 8px;
}

#forgotPasswordSendBtn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

#customerDataModal .modal-content {
  max-width: 880px;
}

.customer-data-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  border: 1px solid var(--revu-border-color, #9ca3af);
  border-radius: 12px;
  padding: 6px;
  background: transparent;
}

.customer-data-tab {
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--revu-small-text);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  font-weight: var(--revu-body-font-weight);
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.customer-data-tab.is-active {
  background: var(--revu-card-bg) !important;
  color: var(--revu-teaser-text-color);
  box-shadow: none;
}

.customer-data-tab:hover {
  background: var(--revu-link-color);
  color: var(--revu-teaser-text-color);
}

.customer-data-tab:focus-visible {
  outline: 2px solid var(--revu-link-color, #698680);
  outline-offset: 1px;
}

/* [breakpointSmall+1] Customer-Data-Tabs → PHP inline <style> in WorkspaceService.php */

.customer-data-panel {
  display: none;
}

.customer-data-panel.is-active {
  display: block;
}

.customer-credentials-section {
  display: grid;
  gap: 10px;
}

.customer-credentials-section h4 {
  margin: 24px 0 2px;
  font-size: calc(0.85 * var(--font-size-h3) * var(--revu-heading-scale) * var(--revu-heading-responsive-scale, 1));
  font-family: var(--revu-body-font);
  color: var(--revu-small-text);
  text-transform: none;
  font-weight: var(--revu-heading-font-weight);
  line-height: 1.35;
}

.customer-data-subhint {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--revu-small-text) !important;
}

.customer-data-credentials-divider {
  border: 0;
  border-top: 1px solid var(--revu-border-color);
  margin: 18px 0 6px;
}

.customer-password-rules-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.customer-password-rules {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.customer-password-rule {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--revu-error);
}

.customer-password-rule.is-ok {
  color: var(--revu-success);
}

.customer-data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.customer-data-grid label {
  margin: 0;
}

.customer-data-grid label span {
  display: block;
  margin-top: 4px;
  margin-bottom: -6px;
}

.customer-data-grid label input,
.customer-data-grid label select {
  width: 100%;
}

.customer-data-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 24px;
}

.customer-data-actions.customer-data-actions-inline {
  margin-top: 6px;
}

.customer-data-actions .cta {
  width: auto;
  min-width: 150px;
  margin: 0;
}

.customer-data-actions .ghost-button {
  border: 1px solid var(--revu-border-color, #9ca3af);
  border-radius: 8px;
  min-height: 42px;
  color: inherit;
}

#customerDataCancelBtn:hover {
  color: var(--revu-teaser-text-color);
  border-color: var(--revu-card-bg);
}

#customerDataModal label {
  margin-bottom: 0;
}

#customerDataModal span {
  margin-bottom: -4px;
}

.customer-data-message {
  margin-top: 0;
  margin-bottom: 0;
}

.customer-data-message.is-success {
  color: var(--revu-success);
}

.customer-data-message.is-error {
  color: var(--revu-error);
}

.customer-bookings-wrap {
  display: grid;
  gap: 16px;
}

.customer-bookings-section {
  overflow-x: auto;
}

.customer-bookings-section-title {
  font-size: calc(0.85 * var(--font-size-h3) * var(--revu-heading-scale) * var(--revu-heading-responsive-scale, 1));
  font-weight: var(--revu-heading-font-weight);
  margin: 24px 0 8px;
  padding-left: 8px;
  color: var(--revu-small-text);
}

.customer-bookings-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}

.customer-bookings-col-workspace {
  width: 24%;
}

.customer-bookings-col-date {
  width: 34%;
}

.customer-bookings-col-usecase {
  width: 20%;
}

.customer-bookings-col-resource {
  width: 14%;
}

.customer-bookings-col-price {
  width: 8%;
}

.customer-bookings-usecase-cell {
  vertical-align: top;
}

.customer-bookings-usecase-resource-inline {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--revu-small-text);
}

.customer-bookings-usecase-resource-label {
  font-weight: var(--revu-heading-font-weight);
}

.customer-bookings-table th,
.customer-bookings-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: none;
  white-space: normal;
}

.customer-bookings-table th {
  font-size: 12px;
  font-weight: var(--revu-heading-font-weight);
  color: var(--revu-small-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--revu-border-color);
}

.customer-bookings-table td {
  padding-bottom: 0;
}

.customer-bookings-table tbody tr:not(.customer-bookings-meta-row):not(.customer-bookings-note-row) > td {
  vertical-align: top;
}

.customer-bookings-cards {
  display: none;
}

.customer-bookings-card {
  border: 1px solid var(--revu-border-color);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

.customer-bookings-card-row {
  display: grid;
  grid-template-columns: minmax(92px, auto) 1fr;
  gap: 10px;
  align-items: start;
  padding: 2px 0;
}

.customer-bookings-card-label {
  font-size: 11px;
  font-weight: var(--revu-heading-font-weight);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--revu-small-text);
}

.customer-bookings-card-value {
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

.customer-bookings-card-meta,
.customer-bookings-card-note {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--revu-small-text);
}

.customer-bookings-card-cancelled .customer-bookings-card-value {
  color: var(--revu-small-text);
  text-decoration: line-through;
}

/* [breakpointLarge] Booking-Tabelle → PHP inline <style> in WorkspaceService.php */

@media (max-width: 768px) {
  
  body:not(.template3) #languageSelect {
    height: 38px;
    width: 38px;
    overflow: hidden;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    color: transparent;
    background-position: center;
  }
  
  .customer-bookings-table {
    min-width: 0;
    table-layout: auto;
  }

  .customer-bookings-col-resource {
    display: none;
    width: auto;
  }

  .customer-bookings-col-date {
    width: 56%;
  }

  .customer-bookings-col-usecase {
    width: 44%;
  }

  .customer-bookings-table thead th.customer-bookings-resource-col,
  .customer-bookings-table tbody tr:not(.customer-bookings-meta-row):not(.customer-bookings-note-row) > td.customer-bookings-resource-col {
    display: none;
  }

  .customer-bookings-usecase-resource-inline {
    display: block;
  }
}

@media (max-width: 480px) {
  .customer-bookings-section {
    overflow: visible;
  }

  .customer-bookings-table {
    display: none;
  }

  .customer-bookings-cards {
    display: grid;
    gap: 10px;
  }
}

.customer-bookings-row-cancelled td {
  color: var(--revu-small-text);
  text-decoration: line-through;
}

.customer-bookings-meta-row td,
.customer-bookings-note-row td {
  text-decoration: none !important;
  border-bottom: 1px solid var(--revu-border-color);
}

.customer-bookings-meta-cell,
.customer-bookings-note-cell {
  white-space: normal !important;
  font-size: 12px;
  color: var(--revu-small-text);
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}

#loginPasswordLabel {
  margin-bottom: 6px;
  font-size: 16px;
  color: var(--revu-small-text);
}

.email-lookup-actions .cta {
  margin: 0;
}

.post-booking-register {
  margin-top: 0;
}
.post-booking-divider {
  margin: 30px 0;
  border: none;
  border-top: 1px solid var(--revu-border-color, #9ca3af);
}

.post-booking-register h3 {
  font-size: 16px;
  margin: 0 0 6px;
}

.post-booking-hint {
  display: block;
  font-size: 16px;
  color: var(--revu-small-text);
  margin: 0 0 6px;
  line-height: 1.5;
}

#bookingOtherFields {
  margin-bottom: 28px;
}

#loggedInBookingOtherFields {
  margin-bottom: 42px;
}

#loggedInBookingOtherLabel {
  margin-top: 4px;
}

.booking-message-wrap {
  margin: 30px 0;
}

.booking-message-wrap label {
  display: block;
}

.booking-message-wrap textarea {
  width: 100%;
  min-height: 60px;
  resize: vertical;
}

.booking-agb-wrap {
  margin-top: 24px;
  margin-bottom: 12px;
}

.appointment-grid {
  display: grid;
  grid-template-columns: minmax(280px, 327px) minmax(280px, 1fr);
  column-gap: 48px;
  row-gap: 16px;
  align-items: start;
}

.appointment-fields {
  display: grid;
  gap: 10px;
  margin-top: -8px;
}

.appointment-fields label {
  display: block;
}

.appointment-fields label span {
  display: block;
  margin-top: 4px;
  margin-bottom: 0;
}


.appointment-fields label select,
.appointment-fields label input {
  width: 100%;
}

.daily-checkin-info {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--revu-small-text);
}

#dailyRequestedChangeoverLabel input {
  max-width: 220px;
}

.appointment-grid.badge-layout {
  grid-template-columns: 1fr;
}

.appointment-grid.daily-layout {
  margin-top: -24px;
  grid-template-columns: 1fr;
  column-gap: 0;
}

.appointment-fields.daily-layout {
  margin-top: 0;
  grid-template-columns: minmax(220px, 1fr);
}

.appointment-fields.badge-layout {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  align-items: end;
  gap: 16px;
}

.appointment-fields.badge-layout .price-display {
  margin: 0 0 8px;
  padding: 0;
}

.appointment-cta-wrap {
  grid-column: 1 / -1;
  display: none;
}

.appointment-cta-wrap .cta {
  width: 100%;
  margin-top: 0;
}

.appointment-cta-hint {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--revu-small-text);
  white-space: pre-line;
}

.offer-selection-hint {
  margin-top: -24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--revu-small-text);
  white-space: pre-line;
}

.badge-layout #offerSelectionHint {
  margin: 6px 0 24px;
  white-space: nowrap;
  overflow: visible;
  width: fit-content;
}

.selection-hint {
  margin: 8px 2px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--revu-small-text);
  white-space: pre-line;
}

#resourceSelectionHint {
  margin-top: -6px;
  max-width: 400px;
}

#resourceDeferredOnsiteBtn {
  font-size: 15px;
  margin-top: 22px;
  font-weight: var(--font-weight-bold);
}

.price-display {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--revu-small-text);
  margin: 4px 0 8px;
  padding: 8px 0;
}

#resourceSelectionSummary.price-display {
  margin: 6px 2px 6px;
  padding: 0;
}

.price-display .daily-price-summary-main {
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.35;
}

.price-display .daily-price-summary-sub {
  margin-top: 4px;
  font-size: 13px;
  font-weight: var(--revu-body-font-weight);
  line-height: 1.45;
  color: var(--revu-small-text);
}

#datePickerContainer {
  display: grid;
  gap: 8px;
  align-content: start;
}

.hourly-no-availability-notice {
  display: none;
  padding: 12px 14px;
  border: 1px solid var(--revu-border-color, #9ca3af);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--revu-small-text);
  font-size: 15px;
  line-height: 1.4;
}

#datePickerContainer.daily-range-mode {
  gap: 16px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
}

.daily-range-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.daily-range-panel {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--revu-link-color, #698680) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--revu-border-color, #9ca3af) 50%, transparent);
}

.daily-range-panel.is-inactive {
  opacity: 0.56;
}

.daily-range-panel.is-inactive .daily-range-calendar {
  pointer-events: none;
}

.daily-range-panel.is-inactive .daily-range-title {
  color: var(--revu-small-text);
}

.daily-range-calendar {
  min-width: 0;
}

.daily-range-panel .date-nav {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}

.daily-range-panel .date-nav > div {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  color: var(--revu-headlines-labels-color);
}

.daily-range-panel .daily-calendar-nav-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--revu-link-color, #698680);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

.daily-range-panel .daily-calendar-nav-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}

.daily-range-panel .daily-calendar-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.daily-range-panel .daily-calendar-nav-btn:focus-visible {
  outline: 2px solid var(--revu-link-color, #698680);
  outline-offset: 2px;
}

.daily-range-title {
  /* font-size: 17px; */
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--revu-headlines-labels-color);
  margin: 0 0 4px;
}

.daily-range-calendar .date-calendar {
  margin-bottom: 0;
  margin-top: 8px;
  width: 100%;
  gap: 7px;
}

.daily-range-calendar .date-calendar .day-cell {
  padding: 10px 6px;
  font-size: 14px;
}

.daily-range-calendar .date-calendar .day-header {
  font-size: 12px;
  color: var(--revu-small-text);
}

.appointment-jump-spacer {
  height: 300px;
  grid-column: 1 / -1;
}

#dateCalendar:not(.is-hidden) {
  display: block;
}

#datePickerContainer.daily-range-mode #dateCalendar,
#datePickerContainer.badge-mode #dateCalendar {
  display: none !important;
}

#vemidoText, #link2website {
  color: var(--revu-link-color, #698680);
}

#vemidoText > a, #link2website > a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}

#datePickerContainer.badge-mode {
  padding: 8px 12px 0;
  border: 1px solid color-mix(in srgb, var(--revu-link-color) 25%, var(--revu-bg-color));
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.08);
  margin-bottom: 12px;
}

#dateBadgeScroller {
  position: relative;
  display: grid;
  gap: 6px;
}

.badge-month-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

select.badge-month-sticky {
  position: relative;
  left: 0;
  z-index: 3;
  width: max-content;
  max-width: 100%;
  padding: 6px 24px;
  min-height: auto;
  margin: 2px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--revu-link-color) 50%, var(--revu-bg-color));
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  letter-spacing: 0.015rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

select.badge-month-sticky:hover {
  background-color: color-mix(in srgb, var(--revu-link-color) 25%, var(--revu-bg-color));
  border-color: color-mix(in srgb, var(--revu-link-color) 25%, var(--revu-bg-color));
}

select.badge-month-sticky:focus {
  outline: 2px solid var(--revu-link-color, #698680);
  outline-offset: 1px;
}

.badge-scroll-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  margin-right: -1px;
}

.badge-scroll-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.badge-scroll-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.badge-scroll-btn:hover:not(:disabled) {
  background: #e5e7eb;
}

.badge-scroll-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.date-badges {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
}

.date-badges.has-sticky-month .badge-month {
  display: none;
}

.date-badge-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 60px;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.date-badge-wrap.month-sep {
  margin-left: 18px;
}

.badge-month {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #475569;
}

.date-badge-wrap.month-sep::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 10px;
  width: 1px;
  height: 42px;
  background: gray;
}

.badge-mode .date-badges {
  gap: 12px;
  padding: 12px 4px;
  scrollbar-width: thin;
}

.date-badge {
  width: 55px;
  height: 55px;
  padding: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--revu-link-color) 25%, var(--revu-bg-color));
  border: none;
  text-align: center;
  cursor: pointer;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 2px;
  font-family: Lato;
}

.date-badge .badge-day {
  line-height: 1.1;
  margin-top: -2px;
}

.date-badge .badge-weekday {
  font-size: 12px;
  line-height: 1;
}

.date-badge.selected .badge-weekday,
.date-badge.today .badge-weekday {
  color: #fff;
}

.date-badge:hover:not(.disabled):not(.out-of-range) {
  background: var(--revu-link-color, #698680);
  border-color: var(--revu-link-color, #698680);
  color: #fff;
}

.date-badge.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.date-badge.selected {
  background: var(--revu-link-color, #698680);
  color: #fff;
  border-color: var(--revu-link-color, #698680);
}

.date-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
  margin-bottom: 12px;
}

.date-calendar + .date-nav {
  margin-top: 8px;
}

.date-calendar .day-header {
  font-size: 13px;
  text-align: center;
  color: var(--revu-headlines-labels-color);
  font-weight: 700;
}

.date-calendar .day-cell {
  font-family: "Lato", sans-serif;
  padding: 10px 8px;
  border: none;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  font-size: 14px;
  font-weight: 400;
  color: #000;
}

.date-calendar .day-cell.daily-day-cell.daily-half-morning-booked {
  background-color: #fff;
  background-image: linear-gradient(135deg, var(--revu-daily-booked-color, #a0d2fd) 0 50%, transparent 50% 100%);
}

.date-calendar .day-cell.daily-day-cell.daily-half-afternoon-booked {
  background-color: #fff;
  background-image: linear-gradient(135deg, transparent 0 50%, var(--revu-daily-booked-color, #a0d2fd) 50% 100%);
}

.date-calendar .day-cell.daily-day-cell.daily-full-booked {
  background-color: var(--revu-daily-booked-color, #a0d2fd);
  color: #000;
}

.date-calendar .day-cell.daily-day-cell.daily-blackout {
  background-color: var(--revu-daily-blackout-color, transparent);
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: red !important;
}

.date-calendar .day-cell:hover:not(.disabled):not(.out-of-range) {
  background: var(--revu-link-color, #698680);
  border-color: var(--revu-link-color, #698680);
  color: #fff;
}

.date-calendar .day-cell.daily-day-cell.daily-half-morning-booked:hover:not(.disabled):not(.out-of-range),
.date-calendar .day-cell.daily-day-cell.daily-half-afternoon-booked:hover:not(.disabled):not(.out-of-range),
.date-calendar .day-cell.daily-day-cell.daily-full-booked:hover:not(.disabled):not(.out-of-range),
.date-calendar .day-cell.daily-day-cell.daily-blackout:hover:not(.disabled):not(.out-of-range) {
  color: var(--revu-headlines-labels-color);
  border-color: var(--revu-border-color, #9ca3af);
}

/* Daily Mode: Tage zwischen An- und Abreise – vollflächig mit Selektionsfarbe */
.daily-range-calendar .day-cell.daily-in-range {
  background: var(--revu-link-color, #698680) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  opacity: 1 !important;
}

/* Daily Mode: Hover – vollflächig mit Selektionsfarbe, überschreibt alle Füllungen */
.daily-range-calendar .day-cell:hover:not(.disabled):not(.out-of-range) {
  background: var(--revu-link-color, #698680) !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
}

.date-calendar .day-cell.daily-day-cell.daily-half-morning-booked:hover:not(.disabled):not(.out-of-range) {
  background-color: #fff;
  background-image: linear-gradient(135deg, var(--revu-daily-booked-color, #a0d2fd) 0 50%, transparent 50% 100%);
}

.date-calendar .day-cell.daily-day-cell.daily-half-afternoon-booked:hover:not(.disabled):not(.out-of-range) {
  background-color: #fff;
  background-image: linear-gradient(135deg, transparent 0 50%, var(--revu-daily-booked-color, #a0d2fd) 50% 100%);
}

.date-calendar .day-cell.daily-day-cell.daily-full-booked:hover:not(.disabled):not(.out-of-range) {
  background-color: var(--revu-daily-booked-color, #a0d2fd);
}

.date-calendar .day-cell.daily-day-cell.daily-blackout:hover:not(.disabled):not(.out-of-range) {
  background-color: var(--revu-daily-blackout-color, transparent);
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: red !important;
}

.date-calendar .day-cell.disabled {
  color: color-mix(in srgb, var(--revu-link-color, #698680) 24%, #ddd);
  cursor: not-allowed;
  font-weight: 300;
  background: #fff9;
}

.date-calendar .day-cell.daily-day-cell.daily-blackout.disabled {
  opacity: 0.75;
}

.date-calendar .day-cell.placeholder {
  opacity: 0;
  border: none;
  padding: 0;
  pointer-events: none;
}

.date-calendar .day-cell.out-of-range {
  opacity: 0;
  pointer-events: none;
}

.date-badge.out-of-range {
  opacity: 0;
  pointer-events: none;
}

.date-calendar .day-cell.selected {
  background: var(--revu-link-color, #698680);
  color: #fff;
  border: none;
  font-weight: 700;
}

/* Daily Mode: Start-/Endtag vollflächig markieren (statt Diagonale) –
   gerade mobil, wenn beide Kalendarien untereinander liegen, klarer */
.daily-range-calendar .day-cell.daily-arrival-selected,
.daily-range-calendar .day-cell.daily-departure-selected {
  background-color: var(--revu-link-color, #698680) !important;
  color: #fff !important;
  outline: 2px solid red;
  outline-offset: 1px;
}

.daily-range-calendar .day-cell.daily-arrival-selected {
  background-image: none;
  opacity: 1 !important;
}

.daily-range-calendar .day-cell.daily-departure-selected {
  background-image: none;
  opacity: 1 !important;
}

/* Daily Mode: Ausgewählt + Belegt – Auswahl gewinnt visuell (vollflächige
   Markierung wie oben); die Belegungs-Info bleibt über den Tooltip erhalten */
.daily-range-calendar .day-cell.daily-arrival-selected.daily-half-morning-booked,
.daily-range-calendar .day-cell.daily-arrival-selected.daily-half-afternoon-booked,
.daily-range-calendar .day-cell.daily-arrival-selected.daily-full-booked,
.daily-range-calendar .day-cell.daily-departure-selected.daily-half-morning-booked,
.daily-range-calendar .day-cell.daily-departure-selected.daily-half-afternoon-booked,
.daily-range-calendar .day-cell.daily-departure-selected.daily-full-booked {
  background-color: var(--revu-link-color, #698680) !important;
  background-image: none !important;
  color: #fff;
  border: none;
}

/* ── calendar_2 (Zwei-Klick-Auswahl) ─────────────────────────────── */

/* Aussen liegende Pfeile: der jeweils innere Nav-Button wird unsichtbar,
   behält aber seinen Platz, damit der Monatstitel zentriert bleibt */
.daily-calendar-nav-btn.is-invisible {
  visibility: hidden;
  pointer-events: none;
}

/* Statuszeile über beiden Kalendarien (Grid-Kind: volle Breite) */
.daily-variant-2 .daily-two-click-status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  font-size: 15px;
  padding: 2px 4px;
}

.daily-variant-2 .daily-two-click-step {
  color: var(--revu-muted-color, #64748b);
}

.daily-variant-2 .daily-two-click-step.is-active {
  color: var(--revu-link-color, #698680);
  font-weight: 700;
}

.daily-variant-2 .daily-two-click-summary {
  font-weight: 700;
}

/* In calendar_2 ersetzen Statuszeile + Markierungen die Panel-Titel
   "Start"/"Ende" von calendar_1 */
.daily-variant-2 .daily-range-title {
  display: none;
}

/* Hover-Vorschau des provisorischen Zeitraums (abgeschwächte Linkfarbe) */
.daily-range-calendar .day-cell.daily-hover-range:not(.daily-arrival-selected):not(.daily-departure-selected) {
  background-color: color-mix(in srgb, var(--revu-link-color, #698680) 30%, #fff) !important;
}

/* Mindestaufenthalt nach dem Erstklick dezent dimmen */
.daily-range-calendar .day-cell.daily-min-stay-dim:not(.daily-arrival-selected) {
  opacity: 0.35;
}

/* calendar_2 mobil (Kalendarien untereinander): beide Pfeile am OBEREN
   Kalender, der untere bekommt keine — sonst läge "vor" erst unterhalb
   des ersten Kalenders */
@media (max-width: 680px) {
  .daily-variant-2 #dailyStartCalendar .daily-calendar-nav-btn.is-invisible {
    visibility: visible;
    pointer-events: auto;
  }
  .daily-variant-2 #dailyEndCalendar .daily-calendar-nav-btn {
    visibility: hidden;
    pointer-events: none;
  }
}

.date-calendar .day-cell.daily-day-cell.daily-half-morning-booked.selected,
.date-calendar .day-cell.daily-day-cell.daily-half-afternoon-booked.selected,
.date-calendar .day-cell.daily-day-cell.daily-full-booked.selected,
.date-calendar .day-cell.daily-day-cell.daily-blackout.selected {
  color: var(--revu-headlines-labels-color);
  border-color: var(--revu-headlines-labels-color, #0f172a);
}

.date-calendar .day-cell.daily-day-cell.daily-half-morning-booked.selected {
  background-color: #fff;
  background-image: linear-gradient(135deg, var(--revu-daily-booked-color, #a0d2fd) 0 50%, transparent 50% 100%);
}

.date-calendar .day-cell.daily-day-cell.daily-half-afternoon-booked.selected {
  background-color: #fff;
  background-image: linear-gradient(135deg, transparent 0 50%, var(--revu-daily-booked-color, #a0d2fd) 50% 100%);
}

.date-calendar .day-cell.daily-day-cell.daily-full-booked.selected {
  background-color: var(--revu-daily-booked-color, #a0d2fd);
}

.date-calendar .day-cell.daily-day-cell.daily-blackout.selected {
  background-color: var(--revu-daily-blackout-color, transparent);
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: red !important;
}



label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--revu-headlines-labels-color);
}

label.inline-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.inline-checkbox.booking-invoice-wrap {
  margin-top: 0;
}

label.inline-checkbox input {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}

.booking-agb-wrap input[type="checkbox"]:focus-visible,
.booking-agb-wrap input[type="checkbox"].is-agb-focus-highlight {
  outline: 2px solid var(--revu-link-color, #698680);
  outline-offset: 2px;
  border-radius: 4px;
}

label.inline-checkbox .inline-text {
  display: block;
  font-size: 14px;
  white-space: normal;
  word-break: normal;
  margin-top: 2px;
  margin-bottom: 3px;
}

span#invoiceWishedLabel {
  margin-top: 3px;
}

label.inline-checkbox a {
  display: inline;
  white-space: normal;
}

label.inline-checkbox #bookingAgbPrefix,
label.inline-checkbox #bookingAgbSuffix,
label.inline-checkbox #agbLink {
  display: inline;
}

input, select {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 16px;
  line-height: 1.3;
  color: #000;
  background: #fff;
}

select {
  min-height: 42px;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}

textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--revu-border-color, #9ca3af);
  font-size: 16px !important;
  line-height: 1.3 !important;
  background: #fff;
  font-family: var(--revu-body-font, system-ui, sans-serif);
}

.is-hidden {
  display: none;
}

.use-case-grid {
  display: grid;
  gap: 12px;
  justify-content: start;
  justify-items: start;
  align-items: stretch;
}

/* Reihen-Raster (ohne Karussell): Karten in einer Zeile gleich hoch — justify-items:start sonst oft nur Inhaltsbreite */
.use-case-grid:not(.is-carousel) > .use-case-card {
  justify-self: stretch;
  align-self: stretch;
  width: auto;
  min-width: 0;
  min-height: 0;
}

/* Raster ohne Karussell: Bildbereich nach unten drücken, wenn die Kartenhöhe von der Rasterzeile gestreckt wird */
.use-case-grid:not(.is-carousel) > .use-case-card .use-case-card-image-wrap {
  margin-top: auto;
}

/*
 * Einheitliche Titelhöhe pro Rasterzeile (ohne Karussell): min-height setzt booking.js nach Messung.
 */
.use-case-grid:not(.is-carousel) .use-case-card-title.use-case-card-title--grid-equalized {
  box-sizing: border-box;
}

#useCaseGrid {
  grid-template-columns: repeat(auto-fill, min(calc(var(--revu-usecase-grid-fraction, 50%) - 12px), var(--revu-usecase-grid-max, 297px)));
}

#resourceGrid {
  grid-template-columns: repeat(auto-fill, min(calc(var(--revu-resource-grid-fraction, 50%) - 12px), var(--revu-resource-grid-max, 297px)));
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.carousel-controls {
  display: inline-flex;
  gap: 6px;
}

.carousel-nav-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--revu-link-color, #698680);
  border: 1px solid var(--revu-border-color, #9ca3af);
  border-radius: 38px;
  color: transparent;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  user-select: none;
}

.carousel-nav-btn:hover:not(:disabled) {
  filter: brightness(0.95);
}

.carousel-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-nav-btn.js-carousel-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5L7 10l5.5 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.carousel-nav-btn.js-carousel-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 4.5L13 10l-5.5 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.use-case-grid.is-carousel {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: calc(100vw - ((100vw - (var(--revu-container-max-width) - (2 * var(--revu-container-padding-x, 30px)))) * 0.5));
}

html.revu-preview-embed,
body.revu-preview-embed {
  overflow-x: hidden;
}

body.revu-preview-embed .use-case-grid.is-carousel {
  width: 100% !important;
  max-width: 100%;
}

.use-case-grid.is-carousel::-webkit-scrollbar {
  display: none;
}

.use-case-grid.is-carousel > * {
  scroll-snap-align: start;
}

/* Karussell = Flex-Zeile: ohne height:auto bleibt height:100% der Karte oft inhaltsbasiert → unterschiedliche Höhen */
.use-case-grid.is-carousel .use-case-card {
  flex: 0 0 300px;
  width: 300px;
  max-width: 300px;
  align-self: stretch;
  height: auto;
  min-height: 0;
}

.use-case-grid .use-case-card-image {
  transition: transform 0.9s ease-in-out;
}

.use-case-grid.is-carousel .use-case-card-title {
  background: transparent;
  position: relative;
}

/*
 * Einheitliche Titelhöhe im Karussell: Klasse setzt booking.js nach Messung;
 * Pixelwert als CSS-Variable am jeweiligen Grid (nicht am Titel), Fallback 240px.
 * Override z. B.: #useCaseGrid.is-carousel { --revu-carousel-equal-title-min-height: 200px !important; }
 */
.use-case-grid.is-carousel .use-case-card-title.use-case-card-title--carousel-equalized {
  min-height: var(
    --revu-carousel-equal-title-min-height,
    var(--revu-teaser-title-area-min-height, 240px)
  );
}

.use-case-grid.is-carousel .use-case-card-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--revu-headlines-labels-color, #0f172a);
  border-radius: inherit;
  z-index: -1;
  transition: filter 0.9s ease-in-out;
}

.use-case-grid.is-carousel .use-case-card.selected .use-case-card-title {
  background: var(--revu-link-color, #698680);
}

.use-case-grid.is-carousel .use-case-card:hover,
.use-case-grid.is-carousel .use-case-card:focus-visible {
  box-shadow: var(--revu-teaser-box-shadow, 0 4px 8px rgba(15, 23, 42, 0.12));
  transform: none;
}

.use-case-card:has(.use-case-card-image):hover .use-case-card-image,
.use-case-card:has(.use-case-card-image):focus-visible .use-case-card-image {
  transform: scale(1.05);
}

.use-case-card:hover .use-case-card-title::before,
.use-case-card:focus-visible .use-case-card-title::before {
  filter: brightness(0.88);
}

.use-case-card.selected:hover,
.use-case-card.selected:focus-visible {
  box-shadow: var(--revu-teaser-box-shadow, 0 4px 8px rgba(15, 23, 42, 0.12));
  transform: none;
}

/* Teaser-Struktur „Spalten” + Carousel: 480px nur ab breakpointLarge+1 */
/* [breakpointLarge+1] Spalten-Karussell → PHP inline <style> in WorkspaceService.php */

/* [breakpointLarge] Container-Padding + Karussell → PHP inline <style> in WorkspaceService.php */

/* [breakpointLarge] Heading-Scale + Grid-Fraction → PHP inline <style> in WorkspaceService.php */

@media (max-width: 768px) {
  input,
  select {
    font-size: 16px;
  }
  
  :root { --container-padding-x: calc(var(--revu-container-padding-x, 30px) * 0.65); }

  .appointment-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
}

@media (max-width: 680px) {
  .template3 #bookingPageHero .hero-copy {
    flex-basis: 100%;
    max-width: none;
    margin-top: 12px
  }
  body.template3 #languageSelect {
    height: 38px;
    width: 38px;
    overflow: hidden;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    color: transparent;
    background-position: center;
  }
  .daily-range-picker {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .daily-range-panel {
    padding: 14px 16px;
  }
  #datePickerContainer.badge-mode {
   padding: 2px 6px 0;
  }
 
  :root { --container-padding-x: calc(var(--revu-container-padding-x, 30px) * 0.5); }
  
  #bookingPageMain {
    padding: 20px calc(var(--revu-container-padding-x, 30px) * 0.5) 30px;
  }
  .use-case-grid.is-carousel {
    width: calc(100vw - calc(var(--revu-container-padding-x, 30px) * 0.5));
  }
}

@media (max-width: 420px) {
  
  :root { --container-padding-x: calc(var(--revu-container-padding-x, 30px) * 0.4); } 
  
  #bookingPageMain {
    padding: 18px calc(var(--revu-container-padding-x, 30px) * 0.4) 24px;
  }
  .use-case-grid.is-carousel {
    width: calc(100vw - calc(var(--revu-container-padding-x, 30px) * 0.4));
  }
  .template2 #vemidoText {
    display: none;
  }
  
}

/* Einspalt-Layout: Karten füllen den Container */
@container revu-container (max-width: calc(2 * var(--revu-usecase-grid-min, 200px) + 12px)) {
  #useCaseGrid .use-case-card {
    max-width: 100%;
  }
}
@container revu-container (max-width: calc(2 * var(--revu-resource-grid-min, 200px) + 12px)) {
  #resourceGrid .use-case-card {
    max-width: 100%;
  }
}

#useCaseGrid .use-case-card {
  max-width: var(--revu-usecase-grid-max, 297px);
}

#resourceGrid .use-case-card {
  max-width: var(--revu-resource-grid-max, 297px);
}

.use-case-card {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
  /* Voller Rahmen um die ganze Karte in der Tenant-Linienfarbe (Design-Einstellung
     "Rahmen/Linie"). Ein/Aus erfolgt allein über die Farbe: transparent = keine Linie.
     Bewusst am Karten-Element (nicht am Body-Wrap), damit Header + Body einen
     durchgehenden Rahmen bilden statt eines oben offenen Halb-Rahmens. */
  border: 1px solid var(--revu-border-color, #9ca3af);
  box-sizing: border-box;
  border-radius: var(--revu-teaser-border-radius, 12px);
  background: var(--revu-card-bg, transparent);
  color: var(--revu-teaser-text-color, #fff);
  box-shadow: var(--revu-teaser-box-shadow, 0 4px 8px rgba(15, 23, 42, 0.12));
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.use-case-card h2,
.use-case-card h3 {
  color: inherit;
}

.use-case-card-title {
  display: block;
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  background: var(--revu-card-bg, transparent);
  color: var(--revu-teaser-text-color, #fff);
  padding: 10px 12px;
  border-radius: var(--revu-teaser-title-radius, 12px 12px 0 0);
  position: relative;
}

.use-case-card-title h2 {
  padding: 2px 0 4px 0;
  margin: 2px 0;
  font-size: calc(var(--font-size-card-title, 15px) * var(--revu-heading-scale) * ((1 + var(--revu-h2-responsive-scale, 1)) / 2));
  font-weight: var(--revu-heading-font-weight);
  font-family: var(--revu-heading-font, 'Roboto', sans-serif);
} 

/* ÖB: aufeinanderfolgende Absätze */
p + p {
  margin-top: auto;
}

.use-case-card-body {
  padding: 0;
  line-height: 1.42;
  font-size: calc(14px * ((1 + var(--revu-h2-responsive-scale, 1)) / 2));
  color: var(--revu-teaser-text-color);
  margin: 2px 0 12px 0;
  border: none;
  border-radius: 0;
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
}

body[data-revu-body-size="medium"] .use-case-card-body {
  font-size: calc(15px * ((1 + var(--revu-h2-responsive-scale, 1)) / 2));
  line-height: 1.45;
}

body[data-revu-body-size="large"] .use-case-card-body {
  font-size: calc(16px * ((1 + var(--revu-h2-responsive-scale, 1)) / 2));
  line-height: 1.48;
}

/* Spalten-Modus: Body/Hinweis als Teil des Titels */
body.teaser-layout-columns .use-case-card-title .use-case-card-body-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: 12px 0 0 0;
}

body.teaser-layout-columns .use-case-card-title .use-case-card-body {
  margin: 0 0 12px 0;
  padding: 0;
  color: var(--revu-teaser-text-color);
  border: none;
  flex: none;
}

body.teaser-layout-columns .use-case-card-title:has(.use-case-card-body-wrap:not(:empty)) {
  /*min-height: var(--revu-teaser-title-area-min-height, 240px);*/
  display: flex;
  flex-direction: column;
}

body.teaser-layout-columns.teaser-layout-columns-image-first .use-case-card {
  flex-direction: row-reverse;
}

body.teaser-layout-columns.teaser-layout-columns-image-first .use-case-card-title {
  padding: 11px 13px 14px 20px;
  border-radius: 0 var(--revu-teaser-border-radius, 12px) var(--revu-teaser-border-radius, 12px) 0;
}

.use-case-card-image-wrap {
  overflow: hidden;
  display: block;
  line-height: 0;
}

/* Use-Case-Teaser: Swiper (mehrere Bilder), Navigation unten rechts */
.use-case-teaser-swiper-wrap {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.use-case-teaser-swiper {
  width: 100%;
  height: var(--revu-usecase-teaser-img-h, 180px);
  overflow: hidden;
  box-sizing: border-box;
}

.use-case-teaser-swiper .swiper-wrapper {
  box-sizing: border-box;
}

/* Äusseres Use-Case-Karussell: horizontales Scrollen dem äusseren Band überlassen (Teaser nur Pfeile / Tastatur) */
#useCaseGrid.is-carousel .use-case-teaser-swiper {
  touch-action: pan-y;
}

.use-case-teaser-swiper .swiper-slide {
  width: 100%;
  max-width: 100%;
  height: var(--revu-usecase-teaser-img-h, 180px);
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#useCaseGrid .use-case-teaser-swiper .use-case-card-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
}

.use-case-teaser-swiper .swiper-button-prev,
.use-case-teaser-swiper .swiper-button-next {
  top: auto;
  bottom: 11px;
  margin-top: 0;
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: var(--revu-link-color, #698680);
  border: none;
  color: transparent;
}

.use-case-teaser-swiper .swiper-button-prev::after,
.use-case-teaser-swiper .swiper-button-next::after {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.use-case-teaser-swiper .swiper-button-prev {
  display: none;
}

.use-case-teaser-swiper .swiper-button-next {
  right: 11px;
  left: auto;
}

.use-case-teaser-swiper .swiper-button-disabled {
  opacity: 0.35;  
  pointer-events: none;
}

.use-case-teaser-swiper .swiper-button-prev:hover,
.use-case-teaser-swiper .swiper-button-next:hover {
  background: #000;
}

.use-case-teaser-swiper .swiper-button-prev:hover::after,
.use-case-teaser-swiper .swiper-button-next:hover::after {
  color: #fff;
}

.use-case-card-image {
  display: block;
  width: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  box-shadow: none;
}

#useCaseGrid .use-case-card-image {
  height: var(--revu-usecase-teaser-img-h, 180px);
}

#resourceGrid .use-case-card-image {
  height: var(--revu-resource-teaser-img-h, 360px);
}

/* Standard-Teaser: gemeinsamer Kasten für Beschreibung + Link (direktes Kind der Karte, unter dem Bild) */
.use-case-card > .use-case-card-body-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  padding: 10px 12px 10px 13px;
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
}

/* Leerer Platzhalter (nur fürs Flex-Stretching): kein sichtbarer Zusatzkasten */
.use-case-card > .use-case-card-body-wrap:empty {
  padding: 0;
  border: none;
  border-radius: 0;
}

.use-case-card > .use-case-card-body-wrap:has(+ .use-case-card-price) {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.use-case-card > .use-case-card-body-wrap + .use-case-card-price {
  margin: 0;
  padding: 8px 12px 12px;
}

.use-case-card-body-wrap .use-case-card-body {
  flex: 1;
  min-height: 0;
}

/* Event-Buchungsmodus: Meta-Block (Datum/Preis/Plätze) unter dem Titel.
   Hatte bisher gar keine Regel -> kein Padding (Text klebte am Rand, linksbündig
   zum Kartenrand statt zum Titel) und die Spans liefen als Fliesstext ineinander.
   Spiegelt nun das horizontale Padding des Standard-Body-Wraps und stapelt die Angaben. */
.use-case-card > .event-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 12px 12px 13px;
  font-size: calc(14px * ((1 + var(--revu-h2-responsive-scale, 1)) / 2));
  line-height: 1.42;
  color: var(--revu-teaser-text-color);
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
}

.event-card-price {
  font-weight: 600;
}

.use-case-card-price {
  padding: 8px 12px 12px;
  font-size: 12px;
  color: var(--revu-small-text);
  display: block;
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
}

.use-case-card-link {
  margin: 8px 12px 8px;
  padding: 0;
  font-size: 13px;
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
  color: inherit;
}

.use-case-card-body-wrap .use-case-card-link {
  margin: 0;
  margin-top: auto;
  margin-bottom: 4px !important;
}

.use-case-more-info-link {
  color: inherit !important;
  text-decoration: underline;
  text-decoration-color: currentColor;
  display: inline;
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
}

.use-case-more-info-link:hover {
  color: inherit !important;
  opacity: 0.85;
}

.use-case-more-info-link:visited {
  color: inherit !important;
}

body.teaser-layout-columns .use-case-card-title .use-case-card-link {
  margin: 0;
  margin-top: auto;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

body.teaser-layout-columns .use-case-card-title .use-case-more-info-link {
  color: inherit !important;
}

body.teaser-layout-columns .use-case-card-title .use-case-more-info-link:hover {
  color: inherit !important;
  opacity: 1;
}

/* [breakpointLarge+1] Spalten-Layout → PHP inline <style> in WorkspaceService.php */

.day-cell.today:not(.selected),
.date-badge.today:not(.selected) {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Daily Mode: Heute mit Buchung – schwarzer Hintergrund, weisse Schrift, Buchungsfarbe 50% transparent */
.date-calendar .day-cell.today.daily-day-cell.daily-half-morning-booked,
.date-calendar .day-cell.today.daily-day-cell.daily-half-morning-booked.selected {
  background-color: #000;
  color: #fff;
  border-color: #000;
  background-image: linear-gradient(135deg, var(--revu-daily-booked-color-50) 0 50%, transparent 50% 100%);
}

.date-calendar .day-cell.today.daily-day-cell.daily-half-afternoon-booked,
.date-calendar .day-cell.today.daily-day-cell.daily-half-afternoon-booked.selected {
  background-color: #000;
  color: #fff;
  border-color: #000;
  background-image: linear-gradient(135deg, transparent 0 50%, var(--revu-daily-booked-color-50) 50% 100%);
}

.date-calendar .day-cell.today.daily-day-cell.daily-full-booked,
.date-calendar .day-cell.today.daily-day-cell.daily-full-booked.selected {
  background-color: #000;
  color: #fff;
  border-color: #000;
  background-image: linear-gradient(var(--revu-daily-booked-color-50), var(--revu-daily-booked-color-50));
}

.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 16px;
  color: var(--revu-headlines-labels-color);
  font-weight: var(--revu-heading-font-weight);
}

.date-nav button {
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--revu-link-color, #698680);
  border: none;
  border-radius: 32px;
  color: transparent;
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
  user-select: none;
}

.date-nav button:hover:not(:disabled) {
  filter: brightness(0.95);
}

.date-nav button:disabled {
  opacity: 0.35;
  cursor: default;
}

.date-nav button.calendar-prev,
#calendarPrev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5L7 10l5.5 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.date-nav button.calendar-next,
#calendarNext {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.5 4.5L13 10l-5.5 5.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}



.use-case-grid.is-carousel .use-case-card:focus-visible, .use-case-card.selected:focus-visible, .use-case-card:focus-visible, .use-case-grid.is-carousel .use-case-card.selected:focus-visible {
  outline: 2px solid var(--revu-link-color, #698680);
  outline-offset: 4px;
}

.use-case-grid.is-carousel {
  padding: 6px;
  left: -6px;
  position: relative;
}

.use-case-card.selected .use-case-card-title {
  background: color-mix(in srgb, var(--revu-link-color, #698680) 7%, var(--revu-card-bg, #ffffff));
}

.use-case-card.selected .use-case-card-title::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 12px;
  width: 24px;
  height: 24px;
  /* background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' enable-background='new 0 0 24 24' viewBox='0 0 24 24'><g><path fill='%23ffffff' d='m9.707 19.121c-.187.188-.442.293-.707.293s-.52-.105-.707-.293l-5.646-5.647c-.586-.586-.586-1.536 0-2.121l.707-.707c.586-.586 1.535-.586 2.121 0l3.525 3.525 9.525-9.525c.586-.586 1.536-.586 2.121 0l.707.707c.586.586.586 1.536 0 2.121z'/></g></svg>"); */
}

.use-case-card.selected {
  background: color-mix(in srgb, var(--revu-link-color, #698680) 7%, var(--revu-card-bg, #ffffff));
}

.use-case-empty {
  font-size: 14px;
  color: #475569;
}

.slot {
  display: inline-block;
  margin: 4px 6px 4px 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--revu-border-color, #9ca3af);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
}

.cta {
  background: var(--revu-link-color, #698680);
  color: #fff;
  border: none;
  padding: 12px 20px;
  width: 100%;
  border-radius: 8px;
  font-weight: var(--revu-heading-font-weight);
  cursor: pointer;
  font-size: var(--font-size-button);
  margin-top: 16px;
}

.cta:hover {
  filter: brightness(0.95);
}

.message {
  margin-top: 8px;
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: var(--revu-heading-font-weight);
}
.message.is-error {
  color: var(--revu-error);
}

#customerFormMessage {
  margin-top: 8px;
  color: var(--revu-error);
}

.booking-confirmation {
  border-color: transparent;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}
.booking-confirmation h2 {
  color: var(--revu-headlines-labels-color, #333);
}
.booking-confirmation strong {
  color: var(--revu-headlines-labels-color);
}
.booking-confirmation-number {
  margin: 0 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.confirmation-message {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  white-space: pre-line;
}

.details-item {
  font-size: 14px;
  margin-bottom: 6px;
}

#vemidoText, #link2website {
  margin-top: 0;
  text-align: left;
  font-size: 12px;
  color: #475569;
}



/* [breakpointSmall] Mobil-Layout → PHP inline <style> in WorkspaceService.php */

@media (max-width: 480px) {
  
  #bookingPageHero .hero-copy,
  #hero > div {
    max-width: 55vw;
  }
  
  body.template1 #aboutLink {
    padding-right: 1px;
  }
  
  .modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
  }

  .modal-content,
  #forgotPasswordModal .modal-content,
  #customerDataModal .modal-content {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100dvw !important;
    min-width: 100dvw !important;
    max-width: 100dvw !important;
    border-radius: 0 !important;
    padding: 16px;
  }

  .booking-modal-structured {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    width: 100dvw !important;
    min-width: 100dvw !important;
    max-width: 100dvw !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .about-close-btn {
    top: 20px;
    right: 20px;
    width: 24px;
    height: 24px;
  }

  body.template1[data-revu-multilang="false"] #brandLogo {
    display: none !important;
  }

  body.template1[data-revu-multilang="false"] #bookingPageHero .ghost-button {
    padding: 1px;
  }

  .hero-lang-about {
    display: flex;
    flex-direction: column;
    align-items: flex-end !important;
    gap: 12px 6px;
  }

  #useCaseGrid .use-case-card,
  #resourceGrid .use-case-card {
    max-width: none;
  }

  label {
    font-size: 13px;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .confirmation-message {
    font-size: 14px;
  }

  .details-item {
    font-size: 13px;
  }

  .use-case-card-price {
    font-size: 11px;
  }
}

/* Body size: medium (Designeinstellung) */
body[data-revu-body-size="medium"] .appointment-cta-hint {
  font-size: 16px;
}

body[data-revu-body-size="medium"] .offer-selection-hint {
  font-size: 16px;
}
body[data-revu-body-size="medium"] label {
  font-size: 15px;
}
body[data-revu-body-size="medium"] label.inline-checkbox .inline-text {
  font-size: 15px;
}
body[data-revu-body-size="medium"] label.inline-checkbox input {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
}
body[data-revu-body-size="medium"] .cta {
  font-size: 16px;
}
body[data-revu-body-size="medium"] .message {
  font-size: 16px;
}
body[data-revu-body-size="medium"] .date-nav {
  font-size: 18px;
}
body[data-revu-body-size="medium"] .daily-range-panel .date-nav > div {
  font-size: 18px;
}
body[data-revu-body-size="medium"] .date-calendar .day-header {
  font-size: 14px;
}
body[data-revu-body-size="medium"] .date-calendar .day-cell {
  font-size: 15px;
}

body[data-revu-body-size="medium"] .brand {
  font-size: 14px;
  letter-spacing: 0.16em;
}

/* Body size: large (Designeinstellung) */
body[data-revu-body-size="large"] .appointment-cta-hint {
  font-size: 18px;
}
body[data-revu-body-size="large"] .offer-selection-hint {
  font-size: 18px;
}
body[data-revu-body-size="large"] label {
  font-size: 16px;
}
body[data-revu-body-size="large"] label.inline-checkbox .inline-text {
  font-size: 16px;
}
body[data-revu-body-size="large"] label.inline-checkbox input {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
}
body[data-revu-body-size="large"] .cta {
  font-size: 18px;
}
body[data-revu-body-size="large"] .message {
  font-size: 18px;
}
body[data-revu-body-size="large"] .date-nav {
  font-size: 20px;
}
body[data-revu-body-size="large"] .date-calendar .day-header {
  font-size: 16px;
}
body[data-revu-body-size="large"] .date-calendar .day-cell {
  font-size: 16px;
}

body[data-revu-body-size="large"] .brand {
  font-size: 16px;
  letter-spacing: 0.12em;
}

body[data-revu-body-size="large"] #aboutDescription,
body[data-revu-body-size="large"] p {
  font-size: 18px;
}

body[data-revu-body-size="large"] .price-display {
  font-size: 22px;
}

/* Template 3: hero-copy unter Logo bei schmalen Viewports */
@media (max-width: 768px) {
  .template3 #bookingPageHero {
    flex-wrap: wrap;
  }
}

/* Template 2 spezifische Regeln */

.template2 #bookingPageMain, .template2 #hero, .template2 #bookingPageHero {
  max-width: var(--revu-container-max-width, 1200px);
  margin: 0 auto;
  padding-top: 12px;
  container-type: inline-size;
  container-name: revu-container;
  padding-bottom: 12px;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
  position: static;
}

.template2 #bookingPageMain {
  padding-bottom: 48px;
  padding-top: 32px;
}

.template2 > header {
  background-color: var(--revu-card-bg);
  background-image: var(--revu-hero-bg);
  background-size: cover;
  background-position: 50% 20%;
  background-repeat: no-repeat;  
  margin-bottom: 24px;
  height: 42vh;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

body.template2[has-hero-slider] > header {
  background-image: none;
}

.template2 > header > .hero-image-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.template2 .hero-image-slider-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.template2 .hero-image-slide {
  min-width: 0;
  height: 100%;
  background-position: 50% 20%;
  background-size: cover;
  background-repeat: no-repeat;
}

.template2 .hero-image-slider-count-2 {
  --revu-hero-slide-total: 3;
}

.template2 .hero-image-slider-count-3 {
  --revu-hero-slide-total: 4;
}

.template2 .hero-image-slider-count-2 .hero-image-slider-track {
  width: 300%;
  animation: revuHeroSliderHorizontal2 15s linear infinite;
}

.template2 .hero-image-slider-count-3 .hero-image-slider-track {
  width: 400%;
  animation: revuHeroSliderHorizontal3 22.5s linear infinite;
}

.template2 .hero-image-slider-count-2 .hero-image-slide,
.template2 .hero-image-slider-count-3 .hero-image-slide {
  flex: 0 0 calc(100% / var(--revu-hero-slide-total));
}

.template2 > header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 42%, rgba(255,255,255,0.16) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

body.template2[has-hero-slider] > header::after {
  display: none;
}

.template2 > header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, 0.12) 68%,
    rgba(0, 0, 0, 0.24) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.template2 > header > * {
  position: relative;
  z-index: 2;
}

.template2 #hero > div {
  max-width: none;
  bottom: calc(12px + 2vh);
  position: absolute;
  color: #fff;
  z-index: +1;
}

@media (orientation: portrait) {
  .template2 > header {
    height: 64vh;
  }
}

.template2 #bookingPageMain {
  padding-top: 0;
}

.template2 #bookingPageHero {
  background-color: #fff;
  max-width: none !important;
  padding-top: 10px;
  padding-bottom: 14px;
  line-height: 1;
  backdrop-filter: blur(7px);
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(15, 23, 42, 0.25) 0 16px 32px -24px;
}

body.template2[has-hero-bg] #bookingPageHero {
  background-color: #fff9;
}

@keyframes revuHeroSliderHorizontal2 {
  0%, 42% {
    transform: translateX(0);
  }
  50%, 92% {
    transform: translateX(-33.333333%);
  }
  100% {
    transform: translateX(-66.666667%);
  }
}

@keyframes revuHeroSliderHorizontal3 {
  0%, 28% {
    transform: translateX(0);
  }
  33.333%, 61% {
    transform: translateX(-25%);
  }
  66.666%, 94% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-75%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .template2 .hero-image-slider-track {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .template2 #bookingPageHero {
    /*display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "vemido actions";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;*/
  }

  .template2 #brandName {
    grid-area: brand;
  }

  .template2 #vemidoText, .template2 #link2website {
    grid-area: vemido;
    text-align: left;
    justify-self: start;
  }

  .template2 #bookingPageHeroActions {
    grid-area: actions;
    justify-self: end;
    align-self: center;
    flex-direction: row !important;
    align-items: center !important;
  }

}

/* Invoice address – required-field error highlight */
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--revu-error);
}

#createAccountMessage .message {
  color: var(--revu-success);
  font-size: larger;
}

/* ──────────────────────────────────────────────────────────────
 * Embedded-iframe overrides
 * When the booking page is rendered inside an iframe (e.g. on a
 * SiteBuilder site), viewport-relative heights would create a
 * feedback loop with the outer auto-resizing iframe. Replace vh
 * values with fixed sizes so body.scrollHeight reflects the true
 * content height.
 * Also hide the redundant booking-page hero nav (logo / language
 * select / about link) because the outer SiteBuilder site already
 * provides its own site header — otherwise two near-identical
 * header bars stack on top of each other.
 * ────────────────────────────────────────────────────────────── */
html.revu-embedded body.template2 > header {
  max-height: 340px;
}
/* `hide-header` wird vom Inline-IIFE der Booking-Page nur dann auf <html>
 * gesetzt, wenn das umschliessende iframe explizit die Klasse `hide-header`
 * traegt — das ist beim SiteBuilder-Booking-Template der Fall, NICHT bei
 * generischen iframe-Embeds (z.B. Modalbox auf vemido.com/de/beispiele).
 * Dort wo der aeussere Kontext keinen eigenen Header liefert, bleibt der
 * Booking-Header somit sichtbar. */
html.hide-header #bookingPageHero {
  display: none;
}

/* Submit-Overlay: Lade-Spinner zwischen Klick auf "Buchen" und dem Erscheinen
   der Buchungsbestaetigung (waehrend der synchrone Mailversand laeuft). */
.revu-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.revu-submit-overlay.is-active {
  display: flex;
}

.revu-submit-spinner {
  width: 46px;
  height: 46px;
  border: 4px solid color-mix(in srgb, var(--revu-link-color, #698680) 25%, transparent);
  border-top-color: var(--revu-link-color, #698680);
  border-radius: 50%;
  animation: revuSubmitSpin 0.8s linear infinite;
}

.revu-submit-overlay-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--revu-link-color, #698680);
  font-family: var(--revu-body-font, 'Roboto', sans-serif);
  text-align: center;
}

@keyframes revuSubmitSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .revu-submit-spinner { animation-duration: 1.8s; }
}