/* Handtuch Held Hotel Web — operational shell in the family house. Warm paper,
   deep ink, the red-white towel stripe as the structural family marker, calm
   operational green accents. Dense tabular layout, hairline edges, mono
   diagnostic values. No raster assets. */

:root {
  --paper: #faf7f1;
  --card: #fffdf8;
  --ink: #16323a;
  --ink-strong: #0e2229;
  --ink-soft: #4c6a71;
  --line: rgba(22, 50, 58, 0.18);
  --line-strong: rgba(22, 50, 58, 0.42);
  --green: #2e5b44;
  --green-strong: #24493a;
  --denied: #8a2926;
  --state-anonymous: #7a8b8f;
  --state-customer: #b05a00;
  --state-staff: #2e5b44;
  --towel-red: #c8432f;
  --towel-white: #fffdf8;
  --stripe: repeating-linear-gradient(
    90deg,
    var(--towel-red) 0 1.1rem,
    var(--towel-white) 1.1rem 2.2rem
  );
  --turquoise: #178582;
  --turquoise-strong: #0f605d;
  --turquoise-soft: #e4f1ee;
  --sun: #c96f22;
  --sun-strong: #9e5618;
  --sun-soft: #faeedd;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --focus: var(--green);
  --header-tag-color: var(--green-strong);
  --line-control: rgba(22, 50, 58, 0.55);
  --control-h: 2.75rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* One family marker: the towel stripe opens every Handtuch Held page. */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--stripe);
}

/* Session-dependent regions render into main after load. Keeping main at least
   one viewport tall keeps the footer below the fold, so revealing them never
   moves visible content. */
main { min-height: 100vh; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 60;
  padding: 0.6rem 1rem;
  background: var(--ink-strong);
  color: var(--paper);
  border-radius: 2px;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; }

/* A clicked login link outside the header stays visibly marked until the
   same-tab navigation completes — the departure is intentional, never abrupt. */
.is-departing { opacity: 0.72; }

/* --- Header ------------------------------------------------------------------------ */

/* biome-ignore-start lint/complexity/noImportantStyles: the byte-identical shared-header block cannot carry inline suppressions; its reduced-motion rule must beat the global reset to keep the language reveal */
/* === shared-header:start === */
/* One header contract for Guest Web and Hotel Web. Keep this block
   byte-identical in both apps (server tests compare it). Geometry never
   depends on label length: brand left, tools pinned right, tabs on their
   own row; below 60rem a 56 px bar with an overlay menu. */

html { scrollbar-gutter: stable; }

html[data-i18n-pending] body {
  visibility: hidden;
  animation: hh-i18n-reveal 0s linear 1.5s forwards;
}

@keyframes hh-i18n-reveal { to { visibility: visible; } }

.site-header {
  --header-pad: clamp(1.25rem, 4vw, 3rem);
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand tools" "nav nav";
  column-gap: 1rem;
  padding-inline: var(--header-pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.5;
}

.site-header-bar,
.site-menu { display: contents; }

.site-header .brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  block-size: 3.25rem;
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-header .brand-mark {
  flex: none;
  width: 2.1rem;
  height: 0.8rem;
  background: repeating-linear-gradient(90deg, var(--towel-red) 0 1.05rem, var(--towel-white) 1.05rem 2.1rem);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.site-header .brand-tag {
  margin: 0;
  padding: 0.14rem 0.42rem;
  border: 1px solid var(--line-strong);
  color: var(--header-tag-color, var(--ink-soft));
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-nav {
  grid-area: nav;
  display: flex;
  gap: 0.25rem;
  block-size: 2.75rem;
  margin-inline-start: -0.7rem;
  overflow-x: auto;
}

.site-nav a {
  display: flex;
  align-items: center;
  padding-inline: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--towel-red); }
.site-nav a:focus-visible { outline-offset: -3px; }

.site-tools {
  grid-area: tools;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  block-size: 3.25rem;
}

.site-header .nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.5rem;
  padding: 0.35rem 1rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-header .nav-signin:hover { background: rgba(22, 50, 58, 0.07); }
.site-header .is-departing { opacity: 0.72; }

.site-header .lang-picker {
  display: inline-flex;
  align-items: stretch;
  gap: 0.15rem;
  block-size: 2.5rem;
  margin: 0;
  padding: 0.2rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
}

.site-header .lang-option {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.site-header .lang-option:hover { color: var(--ink); background: rgba(22, 50, 58, 0.07); }
.site-header .lang-option[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.site-menu-toggle { display: none; }

@media (max-width: 59.99rem) {
  .site-header { display: block; padding-inline: 0; }

  .site-header-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    block-size: 3.5rem;
    padding-inline: var(--header-pad);
  }

  .site-header .brand {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 0.5rem;
    align-items: center;
    justify-content: start;
    block-size: auto;
    font-size: 1rem;
  }

  .site-header .brand-mark { grid-row: 1 / span 2; width: 1.8rem; height: 0.7rem; }

  .site-header .brand-tag {
    grid-column: 2;
    padding: 0;
    border: 0;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
    line-height: 1.2;
  }

  html.js .site-menu-toggle {
    display: inline-grid;
    place-items: center;
    flex: none;
    margin-inline-start: auto;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .site-menu-icon,
  .site-menu-icon::before,
  .site-menu-icon::after {
    display: block;
    inline-size: 1.1rem;
    block-size: 2px;
    background: currentColor;
    content: "";
  }

  .site-menu-icon { position: relative; }
  .site-menu-icon::before { position: absolute; top: -6px; left: 0; }
  .site-menu-icon::after { position: absolute; top: 6px; left: 0; }
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon { background: transparent; }
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon::before { top: 0; transform: rotate(45deg); }
  .site-menu-toggle[aria-expanded="true"] .site-menu-icon::after { top: 0; transform: rotate(-45deg); }

  .site-menu {
    display: grid;
    gap: 1rem;
    padding: 0.5rem var(--header-pad) 1.25rem;
    background: var(--card);
    border-top: 1px solid var(--line);
  }

  html.js .site-menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px rgba(22, 50, 58, 0.16);
  }

  html.js .site-menu:not([data-open]) { display: none; }

  .site-nav { grid-area: auto; display: grid; gap: 0; block-size: auto; margin-inline-start: 0; overflow: visible; }
  .site-nav a { min-block-size: 3rem; padding-inline: 0.75rem; border-bottom: 1px solid var(--line); }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--towel-red); }
  .site-tools { grid-area: auto; display: grid; justify-content: stretch; gap: 0.75rem; block-size: auto; }
  .site-header .nav-signin { min-block-size: 2.75rem; }
  .site-header .lang-picker { justify-self: start; block-size: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-i18n-pending] body { animation: hh-i18n-reveal 0s linear 1.5s forwards !important; }
}
/* === shared-header:end === */
/* biome-ignore-end lint/complexity/noImportantStyles: end of the shared-header block */

/* --- Intro ------------------------------------------------------------------ */

.page-intro {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3.4rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.kicker {
  margin: 0 0 0.8rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green-strong);
}

.page-intro h1 {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 54rem;
}

/* Entry row: live session status beside the explicit login CTA. */

/* The CTA keeps the first column, so session updates in the status (checking,
   login copy, hidden once the membership resolves) never move it. */
.entry-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem 1.4rem;
  margin: 1.4rem 0 0;
}

.entry-status { grid-column: 2; grid-row: 1; align-self: center; margin: 0; }

.entry-cta { grid-column: 1; grid-row: 1; margin: 0; }

@media (max-width: 30em) {
  .entry-row { grid-template-columns: minmax(0, 1fr); }
  .entry-status { grid-column: 1; grid-row: 2; }
}

.entry-login-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.35rem;
  background: var(--green-strong);
  border: 1px solid var(--green-strong);
  border-radius: 2px;
  color: var(--card);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.entry-login-cta:hover {
  background: var(--green);
  border-color: var(--green);
}

/* --- Operational grid --------------------------------------------------------- */

.ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: start;
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

.panel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.4rem 1.5rem 1.5rem;
}

/* The stripe stays the brand mark — a small, structural top edge. */
.panel::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--stripe);
  opacity: 0.9;
}

.panel h2 {
  margin: 0.3rem 0 0.4rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.panel-note {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* --- Session states ------------------------------------------------------------- */

.context-region { min-height: 4rem; }

.context-region > p:first-child { margin-top: 0; }
.context-region > p:last-child { margin-bottom: 0; }

.context-loading { color: var(--ink-soft); font-style: italic; }

.session-state {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.entry-status .session-state { margin-bottom: 0.3rem; }

.session-state::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--state-anonymous);
}

.st-customer::before { background: var(--state-customer); }
.st-staff::before { background: var(--state-staff); }
.st-denied::before,
.st-error::before { background: var(--denied); }

.st-denied,
.st-error { color: var(--denied); }

/* Login-required is an invitation, not an error — the operational green marker. */
.st-login::before { background: var(--green-strong); }

.state-copy { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.state-error { margin: 0.2rem 0 0; color: var(--denied); }

.session-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.2rem;
  margin: 0.9rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.session-facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.18rem;
}

.session-facts dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.state-link {
  display: inline-block;
  margin-top: 0.85rem;
  font-weight: 700;
  color: var(--green-strong);
  text-underline-offset: 4px;
}

/* --- Membership states and embedded chooser ----------------------------------- */

.st-invite::before { background: var(--state-anonymous); }

.st-unavailable { color: var(--state-customer); }
.st-unavailable::before { background: var(--state-customer); }

.hotel-chooser { margin: 0 0 0.8rem; }

.hotel-chooser label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hotel-chooser select { max-width: 100%; }

.hotel-chooser select:disabled { opacity: 0.6; }

.state-button {
  display: inline-block;
  min-height: var(--control-h);
  margin-top: 0.85rem;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 700;
  color: var(--card);
  background: var(--green-strong);
  border: 1px solid var(--green-strong);
  border-radius: 2px;
  cursor: pointer;
}

.state-button:hover { background: var(--green); border-color: var(--green); }

/* --- Access list ------------------------------------------------------------------ */

.panel-access { padding: 0; }

.panel-access h2 { padding: 1.3rem 1.4rem 0.9rem; margin: 0; }

.access-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.access-row {
  border-top: 1px solid var(--line);
  padding: 0.95rem 1.4rem;
}

.access-row a {
  font-weight: 700;
  color: var(--green-strong);
  text-decoration: none;
}

.access-row a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.access-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --- Footer ---------------------------------------------------------------------- */

.site-footer {
  max-width: 74rem;
  margin: clamp(2.4rem, 5vw, 4rem) auto 0;
  padding: 1.3rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-footer p { margin: 0 0 0.5rem; }

/* Footer links keep a target of at least 24 px. */
.site-footer a {
  display: inline-block;
  padding-block: 0.2rem;
  color: var(--green-strong);
  font-weight: 600;
  line-height: 1.4;
}

.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.footer-links a { color: var(--ink); font-weight: 600; }

/* Maker line: the product is built and run by Das Digitale Momentum. */
.footer-maker { margin-top: 0.75rem; font-size: 0.85rem; }
.footer-maker + .footer-maker { margin-top: 0.25rem; }

/* --- Responsive -------------------------------------------------------------------- */

@media (max-width: 48em) {
  .ops-grid { grid-template-columns: minmax(0, 1fr); }

  /* Stacked panels: while the staff context connects, reserve the height of
     the settled staff facts so the access panel below does not jump. */
  .context-region:has(> .context-loading) { min-height: 17rem; }
}

@media (prefers-reduced-motion: reduce) {
  /* biome-ignore lint/complexity/noImportantStyles: the reduced-motion reset must override every component transition and animation */
  * { transition: none !important; animation: none !important; }
}

/* --- Hotel setup surface -------------------------------------------------------
   Dense operational area in the same house: cards with hairline edges, one
   accent color per section (green details, turquoise water/layout, green
   groups, sun slots, towel-red offers), towel stripe only in the setup head.
   No raster assets, no inline styles — every decoration lives here. */

/* biome-ignore lint/complexity/noImportantStyles: attribute-driven hiding must always win over layout display */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Setup shell --------------------------------------------------------------- */

.setup-shell {
  max-width: 74rem;
  margin: 0 auto;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.25rem, 4vw, 2.5rem) 0;
}

/* While the setup loads, reserve a viewport of height so the follow-up and
   operations regions below do not jump when the setup body arrives. */
#setup-region:has(.setup-loading) { min-height: 100vh; }

.setup-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 2.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 1.3rem 1.5rem 1.2rem;
  position: relative;
}

.setup-head::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--stripe);
  opacity: 0.9;
}

.setup-head-copy { max-width: 40rem; }

.setup-head .kicker { margin-bottom: 0.5rem; }

.setup-title {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.setup-lede { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.setup-head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.setup-badge {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.setup-badge-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 0.4rem;
}

.setup-badge strong { color: var(--ink); font-size: 0.95rem; }

.setup-role {
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.2rem 0.6rem;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--green-strong);
  background: var(--card);
}

.setup-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.2rem 0.75rem;
  max-width: 24rem;
}

.setup-nav a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.25rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.setup-nav a:hover { color: var(--turquoise-strong); border-bottom-color: var(--turquoise); }

/* One note component for role and member hints in setup, follow-up and
   operations. Sun marks restrictions and warnings only. */
.setup-readonly-note,
.followup-member-note,
.operations-member-note {
  margin: 1rem 0;
  padding: 0.7rem 1rem;
  background: var(--sun-soft);
  border: 1px solid var(--sun);
  border-left-width: 4px;
  border-radius: 2px;
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.9rem;
}

/* The save bar closes the setup region and sticks to the viewport bottom while
   any part of the setup is on screen, so Save stays in reach while editing. */
.setup-savebar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.2rem;
  padding: 0.7rem 0;
  background: var(--card);
  border-top: 1px solid var(--line-strong);
}

.setup-dirty {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sun-strong);
}

.setup-dirty::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.45rem;
  background: var(--sun);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.btn-primary {
  padding: 0.55rem 1.4rem;
  background: var(--green-strong);
  border: 1px solid var(--green-strong);
  color: var(--card);
}

.btn-primary:hover:not(:disabled) { background: var(--green); border-color: var(--green); }

.btn-outline {
  padding: 0.55rem 1.4rem;
  background: transparent;
  border: 1px solid var(--green-strong);
  color: var(--green-strong);
  text-decoration: none;
}

.btn-outline:hover:not(:disabled) { background: var(--turquoise-soft); }

/* Pressed toggles (the current add-on state) stay focusable and read as selected. */
.btn-outline[aria-pressed="true"],
.btn-outline[aria-pressed="true"]:hover:not(:disabled) {
  background: var(--green-strong);
  border-color: var(--green-strong);
  color: var(--card);
}

.btn-add {
  margin-top: 0.7rem;
  padding: 0.45rem 0.95rem;
  background: transparent;
  border: 1.5px dashed var(--turquoise-strong);
  color: var(--turquoise-strong);
}

.btn-add:hover:not(:disabled) { background: var(--turquoise-soft); border-style: solid; }

.btn-add-sub { margin-top: 0.5rem; padding: 0.3rem 0.7rem; font-size: 0.85rem; }

.btn-remove {
  padding: 0.35rem 0.7rem;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.btn-remove:hover:not(:disabled) { border-color: var(--denied); color: var(--denied); }

/* --- Status and alerts ----------------------------------------------------------- */

.setup-status { min-height: 1.4rem; margin-top: 0.9rem; }

.setup-status-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
}

.setup-status-line::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  background: var(--state-anonymous);
}

.setup-loading { color: var(--ink-soft); font-style: italic; }
.setup-loading::before { background: var(--turquoise); }

.setup-saving { color: var(--turquoise-strong); }
.setup-saving::before { background: var(--turquoise); }

.setup-saved { color: var(--green-strong); }
.setup-saved::before { background: var(--green-strong); }

.setup-dirtyline { color: var(--sun-strong); }
.setup-dirtyline::before { background: var(--sun); }

.setup-empty-note-banner { color: var(--ink-soft); }
.setup-empty-note-banner::before { background: var(--state-anonymous); }

/* In the save bar the live status sits left of the dirty marker and Save. The
   dirty line repeats the visible marker, so it stays for assistive technology only. */
.setup-savebar .setup-status { flex: 1 1 12rem; min-height: 0; margin: 0; }

.setup-savebar .setup-dirtyline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.setup-alert {
  /* Load and save failures render here, outside the setup body, so a failed
     load is never hidden with it. A failed save scrolls here, clear of the
     sticky save bar. */
  scroll-margin-top: 1rem;
  scroll-margin-bottom: 6rem;
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;
  background: #fdf2f0;
  border: 1px solid var(--denied);
  border-left-width: 4px;
}

.setup-alert-title {
  margin: 0 0 0.25rem;
  font-weight: 800;
  color: var(--denied);
}

.setup-alert p { margin: 0.2rem 0; font-size: 0.92rem; }

.setup-alert .btn { margin-top: 0.55rem; }

.setup-login-link {
  display: inline-block;
  margin-top: 0.55rem;
  padding: 0.45rem 0.9rem;
  color: var(--card);
  text-decoration: none;
}

.setup-issues { margin: 0.5rem 0 0; padding-left: 1.1rem; }

.setup-issues li { margin: 0.15rem 0; font-size: 0.88rem; }

.setup-issues-title { list-style: none; margin-left: -1.1rem; font-weight: 700; }

/* --- Setup cards ------------------------------------------------------------------- */

.setup-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  padding: 1.2rem 0 0;
}

.setup-card {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 1.25rem 1.4rem 1.4rem;
  min-inline-size: 0;
}

.setup-card legend {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.setup-card legend span:first-child {
  border-bottom: 3px solid var(--green-strong);
  padding-bottom: 0.15rem;
}

.card-layout legend span:first-child { border-bottom-color: var(--turquoise); }
.card-groups legend span:first-child { border-bottom-color: var(--green); }
.card-slots legend span:first-child { border-bottom-color: var(--turquoise-strong); }
.card-offers legend span:first-child { border-bottom-color: var(--towel-red); }
.card-authiane legend span:first-child,
.card-authiane h3 { border-bottom-color: var(--ink); }

.count-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 0.05rem 0.4rem;
}

.setup-card-desc {
  margin: 0.35rem 0 1.1rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  max-width: 52rem;
}

.setup-subhead {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.4rem 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-strong);
}

/* --- Hotel details form ---------------------------------------------------------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.95rem 1.4rem;
}

.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.field-wide { grid-column: 1 / -1; }

.field label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* One control system for setup, bulk and import tools, the offer matrix,
   operations filters, the follow-up period, the booking detail and the hotel
   chooser: body font, one minimum height and a border with at least 3:1
   contrast. :where() keeps the specificity at zero so layout rules can still
   size individual controls. */
:where(
  .field input,
  .field textarea,
  .setup-row input,
  .setup-row select,
  .row-grid input,
  .bulk-grid input,
  .bulk-grid select,
  .import-controls select,
  .catalog-select,
  .operations-field input,
  .operations-field select,
  .followup-field input,
  .operations-detail select,
  .operations-detail textarea,
  .hotel-chooser select,
  .slot-time input[type="time"]
):where(:not([type="checkbox"], [type="radio"], [type="color"])) {
  min-height: var(--control-h);
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line-control);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.3;
}

:where(
  .field input,
  .field textarea,
  .setup-row input,
  .setup-row select,
  .row-grid input,
  .bulk-grid input,
  .bulk-grid select,
  .import-controls select
):where(:not([type="checkbox"], [type="radio"], [type="color"])) {
  width: 100%;
}

::placeholder { color: var(--ink-soft); opacity: 1; }

.field textarea { resize: vertical; }

:where(.field, .setup-row, .row-grid, .bulk-grid, .import-controls, .slot-row, .offer-matrix) :is(input, select, textarea):disabled {
  opacity: 0.72;
  background: var(--paper);
}

.field-hint {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.color-pair { display: flex; align-items: stretch; gap: 0.5rem; }

.color-pair input[type="color"] {
  inline-size: 3.2rem;
  block-size: var(--control-h);
  padding: 0.15rem;
  border: 1px solid var(--line-control);
  border-radius: 2px;
  background: var(--card);
}

.color-pair input[type="text"] { flex: 1; }

.field-switch {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.8rem;
  align-items: center;
}

.field-switch .field-hint { grid-column: 1 / -1; }

/* Switch control shared by booking flag and slot toggles. */
.switch {
  appearance: none;
  inline-size: 2.6rem;
  block-size: 1.45rem;
  margin: 0;
  border: 1px solid var(--line-control);
  border-radius: 999px;
  background: var(--paper);
  position: relative;
  cursor: pointer;
  flex: none;
}

.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: var(--ink-soft);
  transition: transform 120ms ease, background-color 120ms ease;
}

.switch:checked { background: var(--turquoise-soft); border-color: var(--turquoise-strong); }

.switch:checked::after {
  transform: translateX(1.15rem);
  background: var(--turquoise-strong);
}

.field-switch .switch:checked { background: var(--green); border-color: var(--green-strong); }
.field-switch .switch:checked::after { background: var(--towel-white); }

/* --- Pools / layout ----------------------------------------------------------------- */

.pool-stack { display: grid; gap: 1rem; }

.setup-pool,
.setup-group {
  border: 1px solid var(--line);
  border-left: 4px solid var(--turquoise);
  background: var(--card);
  padding: 0.95rem 1.1rem 1.05rem;
}

.setup-group { border-left-color: var(--green); }

.setup-pool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.7rem;
}

.setup-pool-title {
  margin: 0;
  font-size: 1rem;
  font-family: var(--display);
}

.row-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1rem;
}

.sublist { margin-top: 0.9rem; }

.sublist-title {
  margin: 0 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.sublist-empty,
.setup-empty-note {
  margin: 0.3rem 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: 2px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.setup-row {
  display: grid;
  gap: 0.5rem;
  align-items: start;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}

/* Row actions line up with the controls, not with the labels above them. */
.setup-row > .btn-remove { align-self: end; }

.row-sector { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) auto; }

.row-unit {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) 5rem minmax(0, 1.3fr) auto;
}

.row-offer {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1.6fr) auto;
}

.row-addon { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1.5fr) auto; }

.row-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }

.row-field input,
.row-field select { min-width: 0; }

.row-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (min-width: 56.01em) {
  /* The remove action stays on the first line next to the unit fields. */
  .row-unit > .btn-remove { grid-row: 1; grid-column: -2; }

  /* Wide rows read as a table: the first row of each list names the columns,
     later rows keep their labels for assistive technology only. */
  .sublist > .setup-row ~ .setup-row > .row-field > .row-label,
  .offer-stack > .setup-row ~ .setup-row > .row-field > .row-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }
}

/* --- Layout preview (pure SVG, no raster) --------------------------------------------- */

.pool-preview { margin: 0.9rem 0 0; }

.pool-preview-title {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pv-plot {
  display: block;
  width: 100%;
  max-height: 11rem;
  background: linear-gradient(180deg, var(--turquoise-soft), var(--card));
  border: 1px solid var(--line);
  border-radius: 2px;
}

.pv-frame { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }

.pv-dot { fill: var(--turquoise-strong); stroke: var(--towel-white); stroke-width: 0.7; }

.pool-preview-empty { margin: 0; color: var(--ink-soft); font-size: 0.8rem; }

/* --- Groups ------------------------------------------------------------------------------ */

.group-stack { display: grid; gap: 1rem; margin-bottom: 0.4rem; }

.member-box {
  margin: 0.8rem 0 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0.6rem 0.8rem 0.8rem;
  min-inline-size: 0;
  columns: 14rem;
  column-gap: 1.4rem;
}

.member-box legend {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0.35rem;
}

.member-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.2rem 0;
  break-inside: avoid;
}

.member-option input { flex: none; width: 1rem; height: 1rem; accent-color: var(--green-strong); }

/* --- Time slots --------------------------------------------------------------------------- */

.slot-stack { display: grid; gap: 0.7rem; }

.slot-row {
  display: grid;
  grid-template-columns: 0.45rem minmax(0, 1fr) auto;
  gap: 0.3rem 0.9rem;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.7rem 0.9rem;
}

.slot-mark { align-self: stretch; width: 0.45rem; border-radius: 2px; }

.slot-row[data-slot-code="am"] .slot-mark { background: var(--turquoise); }
.slot-row[data-slot-code="pm"] .slot-mark { background: var(--turquoise-strong); }
.slot-row[data-slot-code="full_day"] .slot-mark { background: var(--stripe); }

.slot-toggle {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
}

.slot-name { font-size: 0.95rem; }

.slot-times { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }

.slot-time {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- Offers ---------------------------------------------------------------------------------- */

.offer-stack { margin-bottom: 0.4rem; }

/* --- Authiane links ---------------------------------------------------------------------------- */

.authiane-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.authiane-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border: 1px solid var(--line);
  border-bottom: 3px solid var(--green-strong);
  background: var(--card);
  padding: 0.85rem 1rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.authiane-link:hover {
  border-bottom-color: var(--turquoise);
  background: var(--turquoise-soft);
}

.authiane-link strong { font-size: 0.95rem; }

.authiane-path {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* --- Responsive setup ---------------------------------------------------------------------------- */

@media (max-width: 56em) {
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .row-grid { grid-template-columns: minmax(0, 1fr); }
  .authiane-links { grid-template-columns: minmax(0, 1fr); }
  .row-unit,
  .row-sector,
  .row-offer,
  .row-addon {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .row-addon > .row-field:nth-child(3) { grid-column: 1 / -1; }
  .setup-row > .btn-remove { justify-self: start; }
  .setup-nav { justify-content: flex-start; max-width: none; }
  .setup-head-meta { align-items: flex-start; }
}

@media (max-width: 30em) {
  .slot-row { grid-template-columns: 0.45rem minmax(0, 1fr); }
  .slot-times { grid-column: 1 / -1; }
  .row-unit,
  .row-sector,
  .row-offer,
  .row-addon { grid-template-columns: minmax(0, 1fr); }
  .setup-savebar { justify-content: stretch; }
  .setup-savebar .btn { flex: 1 1 100%; }
}

/* --- Task areas: Anlage bauen → Angebote verknüpfen → Prüfen & speichern ---- */

.setup-task {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  background: rgba(255, 253, 248, 0.6);
  padding: 1.1rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.task-head {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.task-step {
  margin: 0;
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--green-strong);
  background: var(--card);
  color: var(--green-strong);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  border-radius: 999px;
}

.task-build .task-step { border-color: var(--turquoise-strong); color: var(--turquoise-strong); }
.task-offers .task-step { border-color: var(--towel-red); color: var(--towel-red); }

.task-head-copy { min-width: 0; }

.task-title {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ink-strong);
}

.task-desc { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

.task-body {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  border: 0;
}

/* --- Advanced coordinate disclosure -------------------------------------------------------------- */

.unit-advanced { margin-top: 0.35rem; border: 1px dashed var(--line); padding: 0.35rem 0.6rem; }

/* The coordinate disclosure takes its own full-width line, so its fields and
   visible labels never squeeze into a narrow column. */
.row-unit > .unit-advanced { grid-column: 1 / -1; }

.unit-advanced summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--ink-soft);
  list-style-position: inside;
}

.unit-advanced summary:hover { color: var(--turquoise-strong); }

.unit-advanced[open] summary { color: var(--turquoise-strong); }

.unit-advanced .row-grid { max-width: 24rem; margin-top: 0.5rem; }

/* --- Bulk unit creation ---------------------------------------------------------------------------- */

.tool-box {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: var(--turquoise-soft);
  padding: 0.7rem 0.9rem;
}

/* biome-ignore lint/style/noDescendingSpecificity: .tool-box and .unit-advanced are separate, never nested disclosures, so their summary rules never match the same element */
.tool-box summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink-strong);
  list-style-position: inside;
}

.tool-box summary:hover { color: var(--turquoise-strong); }

.tool-box[open] summary { margin-bottom: 0.6rem; }

.tool-box .setup-card-desc { margin-top: 0.2rem; }

.bulk-panel,
.import-panel { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.6rem; }

.bulk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
}

.bulk-preview,
.import-preview {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.7rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bulk-summary-title { margin: 0; font-weight: 700; }

.bulk-summary-list,
.import-rows {
  margin: 0;
  padding-left: 1.1rem;
  max-height: 14rem;
  overflow-y: auto;
}

.bulk-summary-list li,
.import-rows li { margin: 0.15rem 0; font-size: 0.88rem; font-family: var(--mono); }

.import-rows li { font-family: inherit; }

.panel-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* --- Table-paste (TSV) import --------------------------------------------------------------------- */

.import-controls { display: flex; flex-direction: column; gap: 0.7rem; }

.import-mode-box {
  border: 1px solid var(--line);
  background: var(--card);
  padding: 0.6rem 0.8rem;
  margin: 0;
}

.import-mode-box legend { font-size: 0.85rem; color: var(--ink-soft); padding: 0 0.3rem; }

.import-mode-option {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  font-size: 0.9rem;
  margin: 0.25rem 0;
  cursor: pointer;
}

.import-mode-option input { margin-top: 0.2rem; }

.import-replace-warn {
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 4px solid var(--denied);
  background: rgba(138, 41, 38, 0.08);
  color: var(--denied);
  font-size: 0.88rem;
  font-weight: 600;
}

.import-text {
  width: 100%;
  min-height: 7rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-control);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}

.import-preview-title { margin: 0; font-weight: 700; }

.import-totals { margin: 0; font-size: 0.9rem; font-weight: 600; }

.import-row-new { color: var(--green-strong); }
.import-row-update { color: var(--turquoise-strong); }
.import-row-skip { color: var(--ink-soft); }
.import-row-error { color: var(--denied); }

/* --- Offer matrix (resource × slot) --------------------------------------------------------------- */

.catalog-status-host { margin: 0 0 0.8rem; }
.catalog-status { margin: 0; padding: 0.55rem 0.7rem; border-radius: 2px; font-size: 0.87rem; }
.catalog-status-loading { background: var(--turquoise-soft); }
.catalog-status-ready { background: #e7f0eb; color: var(--green-strong); }
.catalog-status-unavailable { background: var(--sun-soft); color: var(--sun-strong); }
.catalog-retry { margin-top: 0.5rem; }

.catalog-choice { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; width: 100%; }
.catalog-select { width: 100%; min-width: 12rem; }
.catalog-facts, .catalog-warning { margin: 0; font-size: 0.76rem; line-height: 1.35; }
.catalog-facts { color: var(--ink-soft); }
.catalog-warning { color: var(--denied); font-weight: 650; }

.offer-matrix-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.offer-matrix {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.88rem;
}

.offer-matrix th,
.offer-matrix td {
  border: 1px solid var(--line);
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}

.offer-matrix thead th {
  background: var(--turquoise-soft);
  color: var(--ink-strong);
  font-size: 0.82rem;
}

.offer-matrix tbody th {
  font-weight: 600;
  background: var(--card);
  min-width: 11rem;
}

.matrix-cell { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; min-width: 9rem; }

.matrix-toggle { width: 1.15rem; height: 1.15rem; accent-color: var(--green-strong); }

.matrix-sku { width: 100%; }

.matrix-mapping-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.matrix-mapping-list-compat {
  border-left: 3px solid var(--sun-strong);
  padding-left: 0.45rem;
}

.matrix-compat-label {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

.matrix-mapping {
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
}

.matrix-remove-mapping {
  flex: 0 0 auto;
  padding-inline: 0.45rem;
}

.offer-dangling {
  margin-top: 0.8rem;
  border: 1px dashed var(--sun-strong);
  background: var(--sun-soft);
  padding: 0.7rem 0.9rem;
}

.dangling-title { margin: 0 0 0.2rem; font-weight: 700; color: var(--sun-strong); }

.dangling-desc { margin: 0 0 0.5rem; font-size: 0.87rem; color: var(--ink-soft); }

.dangling-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }

.dangling-item {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
}

/* --- Review summary -------------------------------------------------------------------------------- */

.review-summary { min-height: 1rem; }

.review-summary-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
}

.review-summary-list dt { font-size: 0.8rem; color: var(--ink-soft); }

.review-summary-list dd { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--ink-strong); }

@media (max-width: 56em) {
  .bulk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .task-head { gap: 0.6rem; }
}

@media (max-width: 30em) {
  .bulk-grid { grid-template-columns: minmax(0, 1fr); }
  .matrix-cell { min-width: 8rem; }
}

/* --- Commercial follow-up: period, fixed payout table, refund states --------------------
    Restrained operational styling on the existing catalog/matrix vocabulary;
    the wide fixed report stays scrollable instead of squeezing the shell. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.followup-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  margin: 1rem 0;
}

.followup-field { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }

.followup-field input { min-width: 10rem; }

.followup-status-line { margin: 0 0 0.8rem; padding: 0.55rem 0.7rem; border-radius: 2px; font-size: 0.87rem; }

.followup-status-line:empty { margin: 0; padding: 0; }

.followup-status-loading { background: var(--turquoise-soft); }

.followup-status-error { background: var(--sun-soft); color: var(--sun-strong); }

.followup-status-ok { background: #e7f0eb; color: var(--green-strong); }

/* The fixed report scrolls sideways: a leading-edge shadow appears once it has
   scrolled, and the sticky action column carries its own edge shadow. */
.followup-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(250, 247, 241, 0)) left center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22, 50, 58, 0.24), rgba(22, 50, 58, 0)) left center / 0.75rem 100% no-repeat scroll;
}

.followup-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; white-space: nowrap; }

/* biome-ignore lint/style/noDescendingSpecificity: follow-up cells and the setup offer matrix are separate tables; .offer-matrix thead th never matches them */
.followup-table th,
.followup-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(22, 50, 58, 0.12);
}

.followup-table thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* Cancellation stays reachable while the amounts scroll underneath. */
.followup-table th:last-child,
.followup-table td:last-child {
  position: sticky;
  right: 0;
  background: var(--paper);
  box-shadow: -12px 0 12px -12px rgba(22, 50, 58, 0.45);
}

.followup-number { text-align: right; }

.followup-action { min-width: 14rem; }

.followup-cancel { margin-right: 0.4rem; }

.followup-badge {
  display: inline-block;
  margin: 0.15rem 0.25rem 0.15rem 0;
  padding: 0.1rem 0.5rem;
  border-radius: 2px;
  font-size: 0.72rem;
  background: var(--turquoise-soft);
  color: var(--ink-strong);
}

.followup-badge-completed,
.followup-badge-succeeded,
.followup-badge-cancelled { background: #e7f0eb; color: var(--green-strong); }

.followup-badge-exception,
.followup-badge-failed { background: var(--sun-soft); color: var(--sun-strong); }

.followup-demo-note { margin-top: 0.9rem; }

.followup-demo-note a {
  color: var(--green-strong);
  font-weight: 600;
  text-underline-offset: 4px;
}

/* --- Hotel day operations: plan + list from one projection, booking detail ------
    Restrained operational styling on the existing catalog/follow-up vocabulary.
    Statuses always carry text labels — colour is never the only signal. */

.operations-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
  margin: 1rem 0;
}

.operations-field { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }

.operations-field input,
.operations-field select { min-width: 10rem; }

.operations-status-line { margin: 0 0 0.8rem; padding: 0.55rem 0.7rem; border-radius: 2px; font-size: 0.87rem; }

.operations-status-line:empty { margin: 0; padding: 0; }

.operations-status-loading { background: var(--turquoise-soft); }

.operations-status-error { background: var(--sun-soft); color: var(--sun-strong); }

.operations-status-ok { background: #e7f0eb; color: var(--green-strong); }

/* Landing on /hotel/operations scrolls here; keep the kicker and stripe in view. */
#operations-title { scroll-margin-top: 3.5rem; }

.operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.2rem;
  align-items: start;
  margin: 0 0 1.2rem;
}

.operations-plan-panel,
.operations-list-panel { min-width: 0; }

/* Operations headings share the setup task title style. */
.operations-plan-panel h3,
.operations-list-panel h3,
.operations-exceptions-wrap h3 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink-strong);
}

.operations-plan-wrap,
.operations-list-wrap { max-width: 100%; overflow-x: auto; }

/* A wide plan scrolls inside its panel; edge shadows show that more tiles follow. */
.operations-plan-wrap {
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(250, 247, 241, 0)) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgba(250, 247, 241, 0)) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(22, 50, 58, 0.24), rgba(22, 50, 58, 0)) left center / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22, 50, 58, 0.24), rgba(22, 50, 58, 0)) right center / 0.75rem 100% no-repeat scroll;
}

.operations-plan { border-collapse: collapse; font-size: 0.78rem; }

.operations-plan td {
  padding: 0.2rem;
  border: 1px dashed rgba(22, 50, 58, 0.14);
  vertical-align: top;
}

.operations-plan-gap { min-width: 1.1rem; min-height: 1.1rem; background: transparent; }

.operations-plan-tile {
  display: grid;
  gap: 0.25rem;
  min-width: 7rem;
  min-height: 2.8rem;
  padding: 0.45rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 2px;
  background: var(--card);
  align-content: start;
}

.operations-plan-code { font-family: var(--mono); font-size: 0.75rem; white-space: nowrap; }

.operations-plan-action { padding-inline: 0.7rem; }

/* Status by form as well as colour: solid green frame (free), dashed turquoise
   frame (held), filled turquoise (booked), red hatching (blocked). */
.operations-plan-tile-free { border-color: var(--green); }

.operations-plan-tile-held { border-style: dashed; border-color: var(--turquoise-strong); }

.operations-plan-tile-booked { border-color: var(--turquoise-strong); background: var(--turquoise-soft); }

.operations-plan-tile-blocked {
  border-color: var(--denied);
  background:
    repeating-linear-gradient(135deg, rgba(200, 67, 47, 0.18) 0 0.3rem, rgba(200, 67, 47, 0) 0.3rem 0.65rem),
    var(--card);
}

.operations-plan-empty,
.operations-exceptions-empty,
.operations-history-empty { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.operations-list { border-collapse: collapse; width: 100%; font-size: 0.85rem; }

/* biome-ignore lint/style/noDescendingSpecificity: operations cells and the setup offer matrix are separate tables; .offer-matrix thead th never matches them */
.operations-list th,
.operations-list td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid rgba(22, 50, 58, 0.12);
}

.operations-list thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.operations-resource-name { display: block; font-weight: 600; }

.operations-resource-kind,
.operations-resource-code { display: block; font-size: 0.78rem; color: var(--ink-soft); }

.operations-mono { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; }

.operations-badge {
  display: inline-block;
  margin: 0.1rem 0.25rem 0.1rem 0;
  padding: 0.1rem 0.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 0.72rem;
  background: var(--turquoise-soft);
  color: var(--ink-strong);
}

.operations-plan-tile .operations-badge { justify-self: start; }

.operations-badge-free { background: #e7f0eb; border-color: var(--green); color: var(--green-strong); }

.operations-badge-held { background: var(--card); border-style: dashed; border-color: var(--turquoise-strong); color: var(--turquoise-strong); }

.operations-badge-booked { background: var(--turquoise-strong); border-color: var(--turquoise-strong); color: var(--card); }

.operations-badge-blocked { background: rgba(200, 67, 47, 0.14); border-color: var(--denied); color: var(--denied); }

.operations-badge-addon-open { background: var(--turquoise-soft); }

.operations-badge-addon-fulfilled { background: #e7f0eb; color: var(--green-strong); }

.operations-badge-addon-cancelled { background: rgba(200, 67, 47, 0.14); color: var(--denied); }

.operations-actions button,
.operations-plan-action { min-height: var(--control-h); }

.operations-detail {
  margin: 0 0 1.2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
  display: grid;
  gap: 0.9rem;
  scroll-margin-top: 1rem;
}

.operations-detail-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--ink-strong);
}

.operations-detail h4 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.operations-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.25rem 0.9rem;
  margin: 0;
  font-size: 0.88rem;
}

.operations-facts dt { color: var(--ink-soft); }

.operations-facts dd { margin: 0; }

.operations-moved-note {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 2px;
  background: var(--sun-soft);
  color: var(--sun-strong);
  font-size: 0.87rem;
}

.operations-note-label,
.operations-move-label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--ink-soft); }

.operations-note-input { min-width: min(16rem, 100%); }

.operations-note-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.4rem 0 0; }

.operations-addon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(22, 50, 58, 0.08);
}

.operations-addon-label { font-weight: 600; }

.operations-addon-controls { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }

.operations-move-row { display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem; margin: 0.4rem 0 0; }

.operations-move-label { flex: 1 1 16rem; min-width: 0; }

.operations-move-select { width: 100%; max-width: 100%; }

.operations-links {
  padding: 0.8rem;
  border-radius: 2px;
  background: var(--turquoise-soft);
}

.operations-links-once { margin: 0 0 0.6rem; font-weight: 600; }

.operations-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0.3rem 0 0;
}

.operations-links-label { min-width: 8rem; font-size: 0.85rem; color: var(--ink-strong); }

.operations-links-value { flex: 1 1 14rem; }

.operations-history-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

.operations-history-item { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; font-size: 0.85rem; }

.operations-history-action { font-weight: 600; }

.operations-history-actor,
.operations-history-time { color: var(--ink-soft); }

.operations-exception-group { margin: 0 0 0.9rem; }

.operations-exception-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

.operations-exception-item { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.85rem; }

.operations-exception-error { color: var(--sun-strong); }

@media (max-width: 56em) {
  .operations-grid { grid-template-columns: minmax(0, 1fr); }

  /* Narrow viewports keep every tile and action on screen: plan rows wrap
     instead of scrolling a coordinate grid wider than the viewport. The
     renderer sets explicit table roles, so the table semantics survive. */
  .operations-plan-wrap { overflow-x: visible; background: none; }

  .operations-plan,
  .operations-plan tbody { display: block; }

  .operations-plan tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--line);
  }

  .operations-plan td { display: block; padding: 0; border: 0; }

  .operations-plan td.operations-plan-gap { display: none; }
}

@media (max-width: 30em) {
  .operations-controls { flex-direction: column; align-items: stretch; }

  .operations-field input,
  .operations-field select { min-width: 0; width: 100%; }

  .operations-facts { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }

  /* List rows become cards with a full-width action. */
  .operations-list,
  .operations-list tbody { display: block; }

  .operations-list thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .operations-list tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--line);
  }

  .operations-list th,
  .operations-list td { padding: 0; border: 0; }

  .operations-actions button { width: 100%; }

  .followup-action { min-width: 9rem; white-space: normal; }
}

/* --- Typography: line breaks ------------------------------------------------------- */

/* Same rule set as Guest Web, for every page, language and width (320 to
   1920 px). :where() keeps it at zero specificity, so component rules keep
   winning, and the text-wrap-style longhand leaves text-wrap-mode alone, so
   the nowrap report tables keep their cells on one line. Running text avoids
   a lone word in its last line. */
:where(p, li, dd, td, th, address) {
  text-wrap-style: pretty;
  hyphens: manual;
}

/* German running text hyphenates long words (12+ characters, 5 on each side;
   Chromium counts trailing punctuation, so 10 4 4 still split "Zeit-druck,")
   below 768 px only; from 768 px nothing hyphenates on its own. Display text,
   titles, the access rows (they name Handtuch Held, and Chromium hyphenates
   across no-break spaces) and the footer never do. */
@media (max-width: 767.98px) {
  :where(p, li):where(:lang(de)):where(:not(.lede, .setup-lede, .kicker, .panel-note, .task-desc, .setup-card-desc, .session-state, [class*="title"], .access-row, .site-footer *)) {
    hyphens: auto;
    hyphenate-limit-chars: 12 5 5;
  }
}

/* Display text balances its lines and never hyphenates on its own. */
:where(h1, h2, h3, h4, legend, .kicker, .lede, .setup-lede, .panel-note, .task-desc, .setup-card-desc, .session-state, figcaption) {
  text-wrap-style: balance;
  hyphens: manual;
}

/* Controls never hyphenate; a long label that has to wrap on a narrow phone
   wraps into two balanced lines, never with one word alone. */
:where(button, .btn, .entry-login-cta, .access-row a) {
  text-wrap-style: balance;
  hyphens: manual;
}

/* Footer links and the maker name never wrap inside their label. */
.footer-links a,
.footer-maker a { white-space: nowrap; }