:root {
  color-scheme: light;
  --public-brand: #6f1d38;
  --public-brand-dark: #491226;
  --public-gold: #b68a38;
  --public-ink: #2d211d;
  --public-muted: #6c5c54;
  --public-canvas: #fbf6ee;
  --public-surface: #fffdf9;
  --public-border: #e4d6c3;
  --public-radius: 1rem;
  --public-shadow: 0 1rem 3rem rgb(67 29 39 / 10%);
  --public-header-height: 4.5rem;
}

* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: calc(var(--public-header-height) + 1rem);
}
/* Der dunkle Footer schließt jede Seite am unteren Rand ab. Ohne diese
   Spalte bliebe auf großen Bildschirmen unter kurzen Seiten (Fehlerseite,
   leere Artikelliste) ein heller Streifen stehen. svh statt vh: steht die
   Seite genau eine Bildschirmhöhe hoch, rollt sie nicht, und die
   Browserleisten blenden nicht aus. Alles, was Skripte direkt an den Body
   hängen, ist fest positioniert und nimmt an dieser Spalte nicht teil. */
.public-shell-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  min-width: 320px;
  color: var(--public-ink);
  background: var(--public-canvas);
  font-family:
    Inter,
    "Noto Sans",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  line-height: 1.55;
}
.public-shell-body img {
  max-width: 100%;
}
.public-skip-link {
  position: fixed;
  z-index: 200;
  inset: 0.5rem auto auto 0.5rem;
  transform: translateY(-200%);
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--public-brand-dark);
  border-radius: 0.5rem;
}
.public-skip-link:focus {
  transform: none;
}
.public-shell-body :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #1479c9;
  outline-offset: 3px;
}
.public-shell-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--public-header-height);
  border-bottom: 1px solid rgb(111 29 56 / 14%);
  background: rgb(255 253 249 / 96%);
  backdrop-filter: blur(14px);
}
.public-shell-header__inner {
  min-height: var(--public-header-height);
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 clamp(0.45rem, 2vw, 2rem);
  display: flex;
  align-items: center;
  gap: clamp(0.35rem, 1.2vw, 1.2rem);
}
.public-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--public-brand);
  text-decoration: none;
}
.public-brand img {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}
.public-brand__copy {
  min-width: 0;
  display: grid;
  line-height: 1;
}
.public-brand__title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.42rem;
  font-weight: 700;
}
.public-brand__tagline {
  margin-top: 0.18rem;
  color: var(--public-muted);
  font-size: 0.66rem;
  white-space: nowrap;
}
.public-desktop-nav {
  display: none;
}
.public-language-switcher {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0.1rem;
}
.public-language-switcher--desktop {
  display: none;
}
.public-language-link {
  position: relative;
  width: 2rem;
  min-height: 2.5rem;
  display: grid;
  place-items: center;
  border: 2px solid transparent;
  border-radius: 0.55rem;
}
.public-language-link img {
  width: 1.38rem;
  height: 0.88rem;
  border: 1px solid rgb(0 0 0 / 18%);
  object-fit: cover;
}
.public-language-link[aria-current="page"] {
  border-color: var(--public-brand);
  background: #f7eaf0;
}
.public-language-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  bottom: 0.19rem;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 50%;
  background: var(--public-brand);
}
.public-shell-header .public-desktop-cta {
  display: none;
}
.public-mobile-menu {
  position: static;
  margin-left: auto;
}
.public-menu-button {
  display: grid;
  place-items: center;
  width: 3rem;
  min-height: 3rem;
  padding: 0;
  color: var(--public-brand-dark);
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-radius: 0.75rem;
  cursor: pointer;
  list-style: none;
}
.public-menu-button::-webkit-details-marker {
  display: none;
}
.public-menu-button__icon {
  display: grid;
  gap: 0.3rem;
  width: 1.35rem;
}
.public-menu-button__icon span {
  display: block;
  height: 2px;
  background: currentcolor;
  border-radius: 999px;
}
.public-mobile-menu[open] .public-menu-button__icon span:nth-child(1) {
  transform: translateY(0.4rem) rotate(45deg);
}
.public-mobile-menu[open] .public-menu-button__icon span:nth-child(2) {
  opacity: 0;
}
.public-mobile-menu[open] .public-menu-button__icon span:nth-child(3) {
  transform: translateY(-0.4rem) rotate(-45deg);
}
.public-mobile-menu__panel {
  position: absolute;
  z-index: 110;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100svh - var(--public-header-height));
  overflow-y: auto;
  padding: 1rem max(1rem, env(safe-area-inset-right))
    calc(1rem + env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  background: var(--public-surface);
  border-bottom: 1px solid var(--public-border);
  box-shadow: 0 1rem 2rem rgb(67 29 39 / 14%);
}
.public-mobile-menu__navigation {
  display: grid;
  gap: 0.25rem;
}
.public-mobile-menu__navigation > a:not(.public-book-button) {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0.65rem 0.75rem;
  color: var(--public-ink);
  text-decoration: none;
  border-radius: 0.65rem;
}
.public-mobile-menu__navigation
  > a[aria-current="page"]:not(.public-book-button) {
  color: var(--public-brand);
  background: #f7eaf0;
  font-weight: 700;
}
.public-mobile-menu__navigation .public-book-button {
  margin-top: 0.5rem;
  min-height: 3rem;
}
.public-mobile-menu__languages {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--public-border);
}
.public-mobile-menu__languages .public-language-link {
  display: flex;
  gap: 0.55rem;
  width: auto;
  min-height: 3rem;
  padding: 0.45rem 0.65rem;
  color: var(--public-ink);
  text-decoration: none;
}
.public-mobile-menu__languages .public-language-link img {
  flex: none;
}
.public-book-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--public-brand);
  border: 1px solid var(--public-brand);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.public-book-button:hover {
  background: var(--public-brand-dark);
}
.public-voucher-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  color: var(--public-brand-dark);
  background: transparent;
  border: 1px solid var(--public-brand);
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.public-voucher-button:hover {
  color: #fff;
  background: var(--public-brand-dark);
}
.public-gift-icon {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
}
.public-main {
  flex: 1 0 auto;
  min-height: 60svh;
}
.public-content-page,
.public-article-list-page,
.public-error-page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 5rem) 0;
}
.public-content-page--prose {
  width: min(100% - 2rem, 48rem);
}
.public-eyebrow {
  margin: 0 0 0.5rem;
  color: var(--public-brand);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.public-shell-body h1,
.public-shell-body h2,
.public-shell-body h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--public-brand-dark);
}
.public-shell-body h1 {
  margin: 0;
  font-size: clamp(2.15rem, 7vw, 4.8rem);
  line-height: 1.02;
}
.public-shell-body h2 {
  line-height: 1.12;
}
.public-lead {
  max-width: 42rem;
  color: var(--public-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}
.public-prose {
  max-width: 44rem;
  margin-top: 2rem;
}
.public-prose p {
  margin: 0 0 1.15rem;
}
.public-home-hero {
  width: min(100% - 2rem, 84rem);
  margin-inline: auto;
  padding: 1.5rem 0 0;
  display: grid;
  gap: 1.35rem;
}
.public-home-hero__copy {
  display: grid;
  align-content: center;
  justify-items: start;
}
.public-home-hero .public-lead {
  margin: 0.75rem 0 1rem;
}
.public-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.public-home-hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: var(--public-radius);
  object-fit: cover;
  object-position: 50% 50%;
  box-shadow: var(--public-shadow);
}

/* Das Home-Medium ist redaktionell als Querformat definiert. height:auto
   hebt den Presentational Hint des img-Attributs auch auf Desktop auf; erst
   dadurch bestimmt das einheitliche 16:9-Verhaeltnis die echte Geometrie.
   Mobile, Tablet und Zweispalten-Desktop zeigen denselben Ausschnitt. */
.public-home-section {
  width: min(100% - 2rem, 84rem);
  margin-inline: auto;
  padding: clamp(2.5rem, 6vw, 5rem) 0 0;
}
.public-home-section[id] {
  scroll-margin-top: calc(var(--public-header-height) + 1rem);
}
.public-home-voucher {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem 1rem;
  align-items: center;
  width: min(100% - 2rem, 84rem);
  margin: clamp(1.5rem, 4vw, 3rem) auto 0;
  padding: clamp(1.15rem, 3vw, 2rem);
  color: var(--public-ink);
  background: linear-gradient(135deg, #fffdf9 0%, #f5e8d8 100%);
  border: 1px solid #dbc39a;
  border-radius: var(--public-radius);
  box-shadow: 0 0.75rem 2rem rgb(67 29 39 / 8%);
}
.public-home-voucher__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--public-brand);
  background: #fff;
  border: 1px solid #dbc39a;
  border-radius: 50%;
}
.public-home-voucher__icon .public-gift-icon {
  width: 1.65rem;
  height: 1.65rem;
}
.public-home-voucher__copy {
  min-width: 0;
}
.public-home-voucher__copy h2 {
  margin: 0;
  font-size: clamp(1.55rem, 4vw, 2.35rem);
}
.public-home-voucher__copy > p:not(.public-eyebrow) {
  margin: 0.45rem 0 0;
  max-width: 54rem;
}
.public-home-voucher__values {
  color: var(--public-brand-dark);
}
.public-home-voucher__values span,
.public-home-voucher__status {
  color: var(--public-muted);
}
.public-home-voucher > .public-voucher-button {
  grid-column: 1 / -1;
  min-height: 3rem;
}
.public-voucher-button--solid {
  color: #fff;
  background: var(--public-brand);
}
.public-card-grid,
.public-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
/* Massagekarten stehen einspaltig, bis ab 1100 px zwei Spalten Platz haben.
   Dieselbe Grenze nimmt public-layout-a11y.spec.ts fuer die Buendigkeit an. */
.public-card-grid--services {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1100px) {
  .public-card-grid--services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.public-service-card,
.public-team-card,
.public-article-card {
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--public-border);
  border-radius: var(--public-radius);
  background: var(--public-surface);
  box-shadow: 0 0.5rem 1.5rem rgb(67 29 39 / 6%);
}
.public-service-card,
.public-team-card {
  display: flex;
  flex-direction: column;
}
.public-service-card > .public-book-button,
.public-team-card > .public-book-button {
  align-self: flex-start;
  margin-top: auto;
}
/* --- Teamkarte -----------------------------------------------------------

   Die Karte gliedert sich in Profilbereich (Portrait + Identitaet),
   Spezialitaetenliste und Buchungsknopf. Das Portrait bleibt in jeder Breite
   deutlich schmaler als die Karte; frueher wuchs es mit auto-fit auf die
   gesamte Inhaltsbreite. */
.public-team-card {
  gap: 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}
.public-team-card__profile {
  display: grid;
  grid-template-columns: clamp(6.5rem, 30vw, 8.5rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.public-team-card__media {
  overflow: hidden;
  border: 1px solid var(--public-border);
  border-radius: 0.85rem;
  background: var(--public-canvas);
  box-shadow: 0 0.35rem 1rem rgb(67 29 39 / 8%);
}
/* height: auto hebt den Presentational Hint aus dem HTML-Attribut height auf.
   Ohne diese Zeile bliebe die Attributhoehe als feste Darstellungshoehe aktiv
   und aspect-ratio waere wirkungslos - derselbe Fehler wie beim Startseiten-
   Hero und den Massagekarten. */
.public-team-card__portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
}
/* Der Textbereich steht neben einem Portrait fester Breite und wird dadurch
   schmal. Lange Woerter - im Deutschen, Tschechischen und Russischen die
   Regel, bei starker Textvergroesserung erst recht - muessen deshalb brechen
   duerfen, sonst laufen sie aus der Karte. */
.public-team-card__identity {
  min-width: 0;
  overflow-wrap: break-word;
}
/* Der Anzeigename bleibt ungetrennt: eine automatische Silbentrennung wuerde
   Eigennamen zerschneiden ("Pradab-wong"). Die Groesse skaliert stattdessen
   mit dem Viewport, damit der Name auch neben dem Portrait Platz findet. */
.public-team-card__name {
  margin: 0.15rem 0 0;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
  hyphens: manual;
}
.public-team-card__ornament {
  display: block;
  margin: 0.55rem 0 0.75rem;
  color: var(--public-gold);
}
.public-team-card__ornament svg {
  display: block;
  width: min(100%, 7.5rem);
  height: auto;
}
.public-team-card__bio {
  max-width: 44ch;
  margin: 0;
  color: var(--public-muted);
  hyphens: auto;
}
.public-team-languages {
  margin-top: 0.9rem;
}
.public-team-languages__title {
  margin: 0 0 0.4rem;
  color: var(--public-muted);
  font-size: 0.82rem;
  font-weight: 600;
}
.public-team-languages__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-team-languages__list li {
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--public-border);
  border-radius: 999px;
  background: var(--public-canvas);
  font-size: 0.82rem;
}
.public-team-specialties {
  padding-top: 0.25rem;
  border-top: 1px solid var(--public-border);
}
.public-team-specialties__title {
  margin: 0.75rem 0 0.6rem;
  overflow-wrap: break-word;
  color: var(--public-ink);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.public-team-specialties__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Feiner Rahmen und ruhige Flaeche: die Chips sind Information, keine
   Primaeraktion und duerfen nicht wie ein Knopf wirken. */
.public-team-specialty {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  max-width: 100%;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--public-border);
  border-radius: 999px;
  background: var(--public-canvas);
  font-size: 0.85rem;
  line-height: 1.35;
}
.public-team-specialty__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--public-brand);
  fill: none;
  stroke: currentcolor;
}
.public-team-specialty__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.public-team-specialty__link {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
.public-team-card > .public-book-button--block {
  /* margin-top: auto aus der Basisregel bleibt erhalten und haelt die Knoepfe
     einer Rasterzeile auf einer Linie (public-layout-a11y.spec.ts).
     3rem sichert die geforderten 48 px Mindesthoehe. */
  align-self: stretch;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  gap: 0.6rem;
}
@media (min-width: 520px) {
  .public-team-card__profile {
    grid-template-columns: clamp(9.5rem, 22vw, 13.75rem) minmax(0, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 960px) {
  .public-team-card__profile {
    grid-template-columns: clamp(13.75rem, 18vw, 16.25rem) minmax(0, 1fr);
    gap: 1.75rem;
  }
}
/* Ein einzelnes Profil darf die Karte breit machen, aber nie mehr als zwei
   Karten nebeneinander stehen. minmax(min(100%, 16rem), 1fr) aus dem
   allgemeinen Raster liess bei einem Profil die Karte und damit das Portrait
   auf die volle Inhaltsbreite wachsen. */
@media (min-width: 760px) {
  .public-team-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 1.5rem;
  }
}
.public-service-card h2,
.public-service-card h3,
.public-team-card h2,
.public-team-card h3 {
  margin-bottom: 0.35rem;
}
.public-home-editorial {
  padding-top: clamp(2rem, 5vw, 4rem);
}
.public-home-contact {
  display: grid;
  gap: 0 2rem;
}
.public-home-contact .public-prose {
  margin-top: 1rem;
}
.public-content-booking-cta {
  margin-top: 1.5rem;
}
.public-home-final {
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.public-final-cta {
  margin-top: 2rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--public-radius);
  background: #f1e2d2;
}
.public-booking-mount {
  width: min(100% - 1rem, 84rem);
  margin: 0 auto;
}
.public-mobile-actions {
  display: none;
}
@media (max-width: 959px) {
  .public-menu-open {
    overflow: hidden;
  }
  .public-mobile-actions {
    position: fixed;
    z-index: 120;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0.65rem max(0.75rem, env(safe-area-inset-right))
      calc(0.65rem + env(safe-area-inset-bottom))
      max(0.75rem, env(safe-area-inset-left));
    background: rgb(255 253 249 / 96%);
    border-top: 1px solid var(--public-border);
    box-shadow: 0 -0.5rem 1.5rem rgb(67 29 39 / 12%);
    backdrop-filter: blur(14px);
  }
  .public-mobile-actions > a {
    min-width: 0;
    min-height: 3rem;
    padding-inline: 0.65rem;
    line-height: 1.2;
  }
  .public-mobile-actions > a:only-child {
    grid-column: 1 / -1;
  }
  .public-shell-enhanced
    .public-mobile-actions[data-public-sticky-observe]:not(.is-visible) {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
  }
  .public-shell-body--mobile-actions .public-shell-footer {
    padding-bottom: calc(var(--public-footer-padding-bottom) + 5rem);
  }
  .public-has-booking-card .public-mobile-actions {
    display: none;
  }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 959px) {
  .public-mobile-actions {
    transition:
      opacity 160ms ease,
      transform 160ms ease;
  }
}
/* ---------------------------------------------------------------------------
   Fußzeile

   Vollflächiger dunkler Abschluss in Bordeaux, Gold und Creme. Mobil steht
   alles zentriert untereinander; ab 768 px stehen Marke und Direktaktionen
   nebeneinander, ab 1024 px bilden Navigation und Copyright eine gemeinsame
   untere Zeile.

   Die Regeln greifen ausschließlich über eigene Klassen. Elementselektoren
   wie ".public-shell-footer p" oder ".public-shell-footer button" erreichten
   sonst auch den PWA-Hinweis, dessen Mount in der Fußzeile liegt. Aus
   demselben Grund trägt die Fußzeile weder transform noch filter,
   backdrop-filter oder contain: jede dieser Eigenschaften machte sie zum
   umgebenden Block des fest positionierten PWA-Hinweises.

   Kontrast auf dem hellsten Ton des Verlaufs (#6f1d38): Creme 10:1, die
   gedämpfte Schrift 6,6:1, die Metazeile 5,6:1. Gold (#b68a38, 3,5:1) trägt
   deshalb nur Logo, Symbole und Unterstreichung, keinen kleinen Text.
   --------------------------------------------------------------------------- */
.public-shell-footer {
  --public-footer-text: #fbf3e8;
  --public-footer-muted: rgb(251 243 232 / 78%);
  --public-footer-subtle: rgb(251 243 232 / 70%);
  --public-footer-line: rgb(251 243 232 / 18%);
  --public-footer-border: rgb(251 243 232 / 28%);
  --public-footer-surface: rgb(251 243 232 / 6%);
  --public-footer-surface-hover: rgb(251 243 232 / 11%);
  --public-footer-focus: #e4c27a;
  /* Der untere Innenabstand steht als Variable bereit, weil der Fußraum der
     Buchungserinnerung (unten) auf ihn aufsetzt. */
  --public-footer-padding-bottom: calc(
    1.75rem + env(safe-area-inset-bottom, 0px)
  );
  padding: 2.75rem max(1rem, env(safe-area-inset-right, 0px))
    var(--public-footer-padding-bottom)
    max(1rem, env(safe-area-inset-left, 0px));
  color: var(--public-footer-text);
  background-color: var(--public-brand-dark);
  background-image: linear-gradient(
    180deg,
    var(--public-brand) 0%,
    var(--public-brand-dark) 100%
  );
}
.public-shell-footer__inner {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  text-align: center;
}
.public-shell-footer__brand {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  min-width: 0;
  max-width: 100%;
}
.public-shell-footer__brand-link {
  display: inline-grid;
  justify-items: center;
  gap: 0.7rem;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  color: var(--public-footer-text);
  text-decoration: none;
  border-radius: 0.75rem;
}
.public-shell-footer__logo {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}
.public-shell-footer__brand-copy {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  line-height: 1.1;
}
.public-shell-footer__brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.public-shell-footer__tagline {
  color: var(--public-footer-muted);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}
.public-shell-footer__city {
  margin: 0;
  color: var(--public-footer-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
/* Zwei gleich breite Aktionen. Steht nur eine bereit, nimmt sie die Mitte
   ein, statt als halbe Zeile am Rand zu hängen. Ohne Aktion rendert das
   Template den Bereich gar nicht. */
.public-shell-footer__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: min(100%, 27rem);
}
.public-shell-footer__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.65rem 0.85rem;
  color: var(--public-footer-text);
  text-align: start;
  text-decoration: none;
  border: 1px solid var(--public-footer-border);
  border-radius: 0.9rem;
  background: var(--public-footer-surface);
}
.public-shell-footer__action:only-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: min(100%, 16rem);
}
.public-shell-footer__action:hover {
  border-color: var(--public-gold);
  background: var(--public-footer-surface-hover);
}
.public-shell-footer__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--public-gold);
}
/* minmax(0, 1fr) und overflow-wrap: anywhere lassen die Spalte auch bei
   starker Textvergrößerung unter das längste Wort schrumpfen. Mit
   break-word bliebe die Mindestbreite des Rasters das längste Wort, und die
   Kachel liefe aus dem Bild. */
.public-shell-footer__action-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.1rem;
  min-width: 0;
  max-width: 100%;
}
.public-shell-footer__action-label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.public-shell-footer__action-detail {
  color: var(--public-footer-muted);
  font-size: 0.8rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* Der Mount erzeugt nie eigenen Inhalt im Fluss: er ist leer oder hält den
   fest positionierten Hinweis. Als Rasterelement belegte er trotzdem einen
   Abstand. */
.public-shell-footer__pwa {
  display: contents;
}
.public-shell-footer__navigation {
  width: 100%;
  min-width: 0;
}
.public-shell-footer__navigation ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-shell-footer__navigation li {
  display: flex;
  min-width: 0;
  max-width: 100%;
}
/* Links und optionale Schaltflächen in der Fußzeile sehen gleich aus:
   textartige Navigationseinträge, keine Primärknöpfe. Die doppelte Klasse
   schlägt die Einzelklassenregeln der später geladenen Stylesheets und die
   Elementregeln von styles.css auf der Buchungsinsel, unabhängig von der
   Ladereihenfolge. */
.public-shell-footer .public-shell-footer__navigation :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  max-width: 100%;
  margin: 0;
  padding: 0 0.15rem;
  color: var(--public-footer-text);
  background: none;
  border: 0;
  border-radius: 0.3rem;
  box-shadow: none;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: rgb(182 138 56 / 80%);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
  appearance: none;
}
.public-shell-footer .public-shell-footer__navigation :is(a, button):hover {
  text-decoration-color: currentcolor;
}
.public-shell-footer__meta {
  width: 100%;
  padding-top: 1.25rem;
  color: var(--public-footer-subtle);
  border-top: 1px solid var(--public-footer-line);
  font-size: 0.82rem;
  line-height: 1.5;
}
.public-shell-footer__copyright {
  margin: 0;
}
/* Der globale blaue Fokusring erreicht auf Bordeaux nur 2,4:1. Gleiche
   Spezifität, spätere Regel: in der Fußzeile gilt das helle Gold (6,4:1). */
.public-shell-footer :is(a, button):focus-visible {
  outline: 3px solid var(--public-footer-focus);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .public-shell-footer__action {
    transition:
      background-color 160ms ease,
      border-color 160ms ease;
  }
}
@media (max-width: 349px) {
  .public-shell-footer__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Zwei Aktionen nebeneinander: Symbol über dem Text. So bekommt die
   Beschriftung die volle Kachelbreite und bricht auch auf schmalen Telefonen
   und in langen Übersetzungen ausgewogen um. */
@media (min-width: 350px) and (max-width: 767px) {
  .public-shell-footer__action:not(:only-child) {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.6rem;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .public-shell-footer {
    --public-footer-padding-bottom: calc(
      2rem + env(safe-area-inset-bottom, 0px)
    );
    padding-top: 3.5rem;
    padding-inline: max(2rem, env(safe-area-inset-left, 0px))
      max(2rem, env(safe-area-inset-right, 0px));
  }
  /* Marke und Aktionen bilden die obere Zeile, Navigation und Copyright die
     untere. Der Pseudoblock erzwingt den Umbruch dazwischen und zieht die
     Trennlinie. So hängt die Breite der unteren Zeile nicht an der Breite
     der Aktionen, und die Reihenfolge im Dokument bleibt die
     Lesereihenfolge. Passt eine Zeile nicht, bricht ihr rechtes Element um
     und bleibt rechtsbündig. */
  .public-shell-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    text-align: start;
  }
  .public-shell-footer__inner::before {
    content: "";
    order: 1;
    flex: 0 0 100%;
    margin-top: 1.5rem;
    border-top: 1px solid var(--public-footer-line);
  }
  .public-shell-footer__brand {
    flex: 1 1 15rem;
    justify-items: start;
  }
  .public-shell-footer__brand-link {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 1rem;
    padding: 0.25rem;
  }
  /* Der Ort steht bündig unter Markenname und Tagline: Logobreite, Abstand
     und Innenabstand des Markenlinks. */
  .public-shell-footer__city {
    padding-inline-start: 4.75rem;
  }
  .public-shell-footer__actions {
    grid-template-columns: none;
    grid-auto-columns: 13rem;
    grid-auto-flow: column;
    width: auto;
    margin-inline-start: auto;
  }
  .public-shell-footer__action {
    justify-content: flex-start;
  }
  .public-shell-footer__action:only-child {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
  .public-shell-footer__navigation {
    order: 2;
    flex: 1 1 auto;
    width: auto;
  }
  .public-shell-footer__navigation ul {
    justify-content: flex-start;
    column-gap: 1.75rem;
  }
  .public-shell-footer .public-shell-footer__navigation :is(a, button) {
    text-align: start;
  }
  .public-shell-footer__meta {
    order: 2;
    flex: 0 0 auto;
    width: auto;
    margin-inline-start: auto;
    padding-top: 0;
    border-top: 0;
  }
  .public-shell-footer__copyright {
    display: flex;
    align-items: center;
    min-height: 3rem;
  }
}
.public-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (min-width: 390px) {
  .public-brand__tagline {
    display: block;
  }
  .public-language-switcher {
    gap: 0.2rem;
  }
}
@media (max-width: 389px) {
  .public-brand__tagline {
    display: none;
  }
}
@media (max-width: 359px) {
  :root {
    --public-header-height: 4.25rem;
  }
  .public-shell-header__inner {
    padding-inline: 0.32rem;
    gap: 0.12rem;
  }
  .public-brand img {
    width: 2rem;
    height: 2rem;
  }
  .public-brand__title {
    font-size: 1.2rem;
  }
  .public-language-link {
    width: 2rem;
  }
  .public-language-switcher {
    gap: 0;
  }
}
/* Logo, fuenf Navigationsziele, vier Sprachflaggen und Buchungs-CTA passen
   erst ab dem bestehenden Desktop-Zweispalten-Breakpoint ohne Ueberlauf in
   eine Zeile. Bis 1099 px bleibt deshalb die kompakte Menuekopfzeile aktiv. */
@media (min-width: 1100px) {
  .public-shell-header__inner {
    gap: 1.25rem;
  }
  .public-brand {
    min-width: 12.5rem;
  }
  .public-brand img {
    width: 3rem;
    height: 3rem;
  }
  .public-brand__title {
    font-size: 1.65rem;
  }
  .public-brand__tagline {
    font-size: 0.7rem;
  }
  .public-desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.65rem, 1.4vw, 1.4rem);
  }
  .public-language-switcher--desktop {
    display: flex;
  }
  .public-mobile-menu {
    display: none;
  }
  .public-desktop-nav a {
    padding: 0.65rem 0.2rem;
    color: var(--public-ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .public-desktop-nav a[aria-current="page"] {
    color: var(--public-brand);
    box-shadow: inset 0 -3px var(--public-brand);
    font-weight: 700;
  }
  .public-language-switcher {
    margin-left: auto;
  }
  .public-shell-header .public-desktop-cta {
    display: inline-flex;
    white-space: nowrap;
  }
  .public-home-hero {
    padding-top: 2.5rem;
    grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  }
  .public-home-voucher {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .public-home-voucher > .public-voucher-button {
    grid-column: auto;
    min-width: 12rem;
  }
  .public-home-contact {
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
    align-items: start;
  }
  .public-home-contact .public-prose {
    margin-top: 0;
  }
  .public-content-booking-cta {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Massagekarte
   --------------------------------------------------------------------------- */
.public-service-card {
  gap: 0.85rem;
  padding: 0.9rem 0.9rem 1rem;
}
.public-service-card__image {
  width: 100%;
  /* Ohne height:auto wird das HTML-Attribut height als feste Hoehe verwendet
     und aspect-ratio bleibt wirkungslos. */
  height: auto;
  /* Ein Verhaeltnis fuer alle Breiten: die Karte sieht auf dem Telefon und auf
     dem Desktop gleich aus, dort stehen nur mehrere nebeneinander. Die Bilder
     liegen als 3:1 vor; ohne Cover-Beschnitt bleiben Koepfe, Haende, Beine,
     Fuesse und der Detailkreis auch mobil vollstaendig sichtbar. */
  aspect-ratio: 3 / 1;
  border-radius: 0.75rem;
  object-fit: cover;
}
.public-service-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.public-service-card__head h2,
.public-service-card__head h3 {
  margin: 0;
  color: var(--public-brand);
  font-size: clamp(1.4rem, 3.4vw, 1.75rem);
  line-height: 1.12;
}
.public-service-card__mark {
  flex: none;
  color: var(--public-gold);
  opacity: 0.75;
}
.public-service-card__mark svg,
.public-service-card__mark-image {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
}
.public-service-card__mark-image {
  object-fit: contain;
}
.public-service-card__lead {
  margin: 0;
  color: var(--public-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.public-variant-list {
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.85rem;
  list-style: none;
  border: 1px solid var(--public-border);
  border-radius: 0.75rem;
  background: var(--public-canvas);
}
.public-variant-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-top: 1px dashed var(--public-border);
}
.public-variant-list li:first-child {
  border-top: 0;
}
.public-variant-list__label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--public-ink);
  font-size: 0.95rem;
}
.public-variant-list__icon {
  flex: none;
  color: var(--public-gold);
}
.public-variant-list strong {
  color: var(--public-ink);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.public-service-card > .public-book-button--block {
  /* margin-top: auto aus der Basisregel bleibt erhalten und haelt die Knoepfe
     einer Rasterzeile auf einer Linie (public-layout-a11y.spec.ts). */
  align-self: stretch;
  justify-content: center;
  width: 100%;
  gap: 0.6rem;
}
.public-book-button__arrow {
  font-size: 1.1em;
  line-height: 1;
}
/* Der Verweis auf die Massagenseite traegt erst, wenn es auch eine Navigation
   gibt. Unterhalb von 960 px existiert keine, deshalb stehen dort alle Karten. */
.public-services-more {
  display: none;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0 1.25rem;
  color: var(--public-brand);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--public-border);
  border-radius: 999px;
}
.public-services-more:hover {
  border-color: var(--public-brand);
}
@media (min-width: 960px) {
  .public-home
    .public-card-grid--services
    > .public-service-card:nth-child(n + 7) {
    display: none;
  }
  .public-services-more {
    display: inline-flex;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .public-service-card__image {
    transition: transform 320ms ease;
  }
  .public-service-card:hover .public-service-card__image {
    transform: scale(1.015);
  }
}

.public-service-card > .public-services-more {
  display: inline-flex;
  align-self: flex-start;
  min-height: 3rem;
  margin-top: 0.5rem;
}
.public-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  color: var(--public-muted);
  font-size: 0.95rem;
}
.public-breadcrumbs a {
  color: var(--public-brand);
  font-weight: 700;
}
.public-service-detail {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
.public-service-detail__intro {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.public-service-detail__image {
  width: 100%;
  max-height: 34rem;
  object-fit: cover;
  border-radius: 1.25rem;
}
.public-service-detail__booking,
.public-service-detail__sections > section,
.public-service-detail__faqs,
.public-service-detail__team,
.public-service-detail__final {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--public-border);
  border-radius: 1.25rem;
  background: var(--public-surface);
}
.public-service-detail__booking h2,
.public-service-detail__sections h2,
.public-service-detail__faqs h2,
.public-service-detail__team h2,
.public-service-detail__final h2 {
  margin-top: 0;
}
.public-service-detail__sections {
  display: grid;
  gap: 1rem;
}
.public-service-detail__sections p,
.public-service-detail__faqs p {
  white-space: pre-line;
}
.public-service-detail__faqs > section + section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--public-border);
}
.public-service-detail__faqs h3 {
  margin-bottom: 0.5rem;
}
.public-service-detail__final {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
.public-service-detail__final h2 {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .public-service-detail__intro {
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.75fr);
  }
  .public-service-detail__booking {
    position: sticky;
    top: 6rem;
  }
  .public-service-detail__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------------------
   Studioangaben: Anschrift, Telefon, Anfahrt und freigegebene Öffnungszeiten
   (ADR-0038, ADR-0039).

   Es gibt hier bewusst keinen eingebetteten Kartenrahmen: „Route öffnen“ ist
   ein ausschließlich nutzerinitiierter ausgehender Link. Beim Seitenaufruf
   wird kein Drittanbieterinhalt geladen.
--------------------------------------------------------------------------- */
.public-studio-contact {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.public-studio-contact__block {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}
.public-studio-contact__title {
  margin: 0;
  color: var(--public-brand);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.public-studio-address {
  display: grid;
  gap: 0.1rem;
  font-style: normal;
}
.public-studio-address__line {
  display: block;
  overflow-wrap: anywhere;
}
/* Bedienelemente der Kernaktionen sind mindestens 48 px hoch und tragen einen
   sichtbaren Fokus (CLAUDE.md §6). Keine Funktion hängt an :hover. */
.public-studio-route,
.public-studio-phone,
.public-studio-email {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.5rem;
  overflow-wrap: anywhere;
  color: var(--public-brand);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.public-studio-route {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0 1.1rem;
  text-decoration: none;
  border: 1px solid var(--public-border);
  border-radius: 999px;
}
.public-studio-route:hover,
.public-studio-route:focus-visible {
  border-color: var(--public-brand);
}
.public-studio-route:focus-visible,
.public-studio-phone:focus-visible,
.public-studio-email:focus-visible {
  outline: 3px solid var(--public-brand);
  outline-offset: 3px;
}
.public-studio-hours {
  margin-top: 1.75rem;
}
.public-studio-hours__notice {
  margin: 0.35rem 0 0;
  font-weight: 600;
}
.public-studio-hours__week,
.public-studio-hours__exceptions {
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}
.public-studio-hours__day {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--public-border);
}
.public-studio-hours__day:last-child {
  border-bottom: 0;
}
.public-studio-hours__name {
  min-width: 0;
  font-weight: 600;
}
/* Der heutige Tag trägt eine zusätzliche Textmarke. Die Hervorhebung ist damit
   nicht allein farblich und bleibt bei Farbfehlsichtigkeit lesbar. */
.public-studio-hours__today {
  color: var(--public-brand);
  font-weight: 700;
}
.public-studio-hours__value {
  min-width: 0;
  text-align: right;
}
.public-studio-hours__exceptions-title {
  margin: 1.25rem 0 0;
  font-size: 1rem;
}
@media (min-width: 760px) {
  .public-studio-contact {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1.5rem 2rem;
  }
}

/* ---------------------------------------------------------------------------
   Statuskarte „Meine Buchung“ (ADR-0040 §5)

   Sie erscheint auf jeder öffentlichen Seite, also auch auf den
   servergerenderten Inhaltsseiten ohne React-CSS. Die Regeln stehen deshalb
   hier und nicht in web/src/styles.css.

   Grundsätze: nicht modal, kein Fokusraub, Farbe nie als einziges Merkmal,
   Bedienflächen mindestens 48 Pixel, kein horizontaler Überlauf ab 320 Pixel.
   --------------------------------------------------------------------------- */
.public-booking-memory-mount {
  --public-card-accent: #4a4038;
  --public-card-surface: #f4f1ec;
}
.booking-status-card__host:empty {
  display: none;
}
.booking-status-card__announce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.booking-status-card,
.booking-status-card__toggle {
  position: fixed;
  z-index: 150;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  left: max(0.75rem, env(safe-area-inset-left));
  max-width: 26rem;
  margin-left: auto;
  color: var(--public-ink);
  background: var(--public-surface);
  border: 1px solid var(--public-border);
  border-left: 5px solid var(--public-card-accent);
  border-radius: var(--public-radius);
  box-shadow: var(--public-shadow);
}
.booking-status-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  /* Bei 200 Prozent Textzoom oder sehr langen Übersetzungen wächst die Karte
     über den Bildschirm hinaus. Sie scrollt dann in sich selbst, statt den
     Inhalt darunter unerreichbar zu machen. */
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.booking-status-card--warning {
  --public-card-accent: #8a6100;
  --public-card-surface: #fff5e0;
}
.booking-status-card--success {
  --public-card-accent: #1c6b3c;
  --public-card-surface: #e8f5ec;
}
.booking-status-card--danger {
  --public-card-accent: #a3222b;
  --public-card-surface: #fdeceb;
}
.booking-status-card--neutral {
  --public-card-accent: #4a4038;
  --public-card-surface: #f4f1ec;
}
.booking-status-card__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--public-muted);
}
.booking-status-card__status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 0;
  font-weight: 700;
}
/* Das Symbol trägt Form und Farbe, der Text daneben die Aussage. Wer Farben
   nicht unterscheidet, liest denselben Zustand vollständig im Text. */
.booking-status-card__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: #fff;
  background: var(--public-card-accent);
  border-radius: 50%;
  font-size: 0.9rem;
  line-height: 1;
}
.booking-status-card__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.booking-status-card__when {
  margin: 0;
  min-width: 0;
  color: var(--public-muted);
  overflow-wrap: anywhere;
}
.booking-status-card__stale {
  margin: 0;
  padding: 0.35rem 0.5rem;
  color: var(--public-ink);
  background: var(--public-card-surface);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.booking-status-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.booking-status-card :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.55rem 0.9rem;
  border-radius: 0.6rem;
  font: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.booking-status-card__open {
  flex: 1 1 9rem;
  color: #fff;
  background: var(--public-brand);
  border: 1px solid var(--public-brand);
}
.booking-status-card__minimize,
.booking-status-card__more,
.booking-status-card__forget {
  color: var(--public-brand-dark);
  background: transparent;
  border: 1px solid var(--public-border);
}
.booking-status-card__more {
  justify-self: start;
}
.booking-status-card__forget {
  justify-self: start;
  border-style: dashed;
}
.booking-status-card__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--public-border);
  list-style: none;
}
.booking-status-card__item {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}
.booking-status-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: auto;
  left: auto;
  padding: 0.6rem 1rem;
  color: var(--public-brand-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
/* Solange eine feste Karte sichtbar ist, bekommt das Dokument zusätzlichen
   Fußraum. Sonst verdeckt die Karte Footerlinks oder die Absendeschaltfläche,
   statt sie nur zu überlagern. Den genauen Wert misst das Skript an der
   gerenderten Karte; der Rückfallwert greift nur, falls die Messung ausfällt.

   Der Raum liegt im Footer selbst, auf seinem eigenen unteren Innenabstand,
   und nicht als Polster unter dem Body. Die Fußzeile ist das letzte Element
   im Fluss, Dokumenthöhe und Scrollweg bleiben deshalb gleich; der Raum trägt
   aber die Footerfarbe, und unter dem dunklen Footer bleibt kein heller
   Streifen. */
.public-has-booking-card .public-shell-footer {
  padding-bottom: calc(
    var(--public-footer-padding-bottom) +
      var(--public-booking-card-space, 16rem)
  );
}
@media (min-width: 640px) {
  /* Nur die grosse Karte bekommt eine feste Breite. Die minimierte
     Schaltflaeche bleibt so schmal wie ihr Text. */
  .booking-status-card {
    left: auto;
    width: min(26rem, calc(100vw - 2rem));
  }
  .public-has-booking-card .public-shell-footer {
    padding-bottom: calc(
      var(--public-footer-padding-bottom) +
        var(--public-booking-card-space, 13rem)
    );
  }
}
@media (prefers-reduced-motion: no-preference) {
  .booking-status-card {
    animation: booking-status-card-in 180ms ease-out;
  }
}
@keyframes booking-status-card-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}