/* GENERATED by tools/lib/consent.js from site-src/css/consent.css -- do not edit. */

:root {
  --crs-border: #3a3a3a;
  --crs-card-border: #505050;
  --crs-container: 1480px;
  --crs-font: "Rajdhani", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --crs-gutter: 60px;
  --crs-gutter-mobile: 20px;
  --crs-measure: 27rem;
  --crs-radius: 5px;
  --crs-red: #de0b14;
  --crs-red-text: #ff4d55;
  --crs-red-wash: rgba(222, 11, 20, 0.15);
  --crs-space-l: 2rem;
  --crs-space-m: 1.25rem;
  --crs-space-s: 0.75rem;
  --crs-space-xs: 0.5rem;
  --crs-step--1: 0.875rem;
  --crs-step-0: 1rem;
  --crs-step-2: clamp(1.75rem, 1.75rem + 0.25 * (100vw - 48rem) / 27, 2rem);
  --crs-surface: #1d1d1d;
  --crs-text: #ffffff;
  --crs-text-muted: #a8a8a7;
  --crs-weight-bold: 600;
  --crs-weight-light: 300;
  --crs-weight-medium: 500;
}

/* ---------- Consent (#244) ----------

   The cookie choice, on every page, generated and mirrored alike, and ONLY when
   content/tracking.json names a container. Served as /assets/consent.css with
   the tokens it reads prepended by tools/lib/consent.js, because a mirrored page
   loads neither tokens.css nor event.css. Every selector is `.consent…` or
   `[data-consent-open]`: names the vendor's stylesheets never use.

   A bottom panel, not a wall: no overlay, the page stays readable and
   scrollable, and while the panel is open the page gets its height as bottom
   padding so the footer is never hidden underneath it.

   The three buttons are ONE style. Accept and refuse carry equal weight (EDPB
   guidelines 03/2022, Belgian DPA cookie guidance), so neither may be the red
   fill while the other is a text link -- which is exactly what the previous
   vendor's banner did (80x38 px button against a 13px link). */

.consent,
.consent *,
.consent *::before,
.consent *::after { box-sizing: border-box; }

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1000;
  /* At most three quarters of the screen, then it scrolls inside itself -- the
     settings layer is taller than a 640px phone can show next to the page. dvh
     where it exists, so the browser's own toolbar is not counted as room.
     The buttons stay in view while it scrolls (.consent__actions is sticky). */
  max-height: 75vh;
  max-height: 75dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Whatever gets focus or is scrolled into view inside the panel stops above
     the sticky button row, not under it (WCAG 2.4.11). consent.js measures the
     row; 0 when it is static. */
  scroll-padding-bottom: calc(var(--consent-actions-h, 0px) + 8px);
  /* The banded surface, not the raised one: the title is the site's red, which
     measures 2.73:1 on #2d2d2d and fails the 3:1 large-text rule the shared
     heading rule relies on. #1d1d1d puts it above the page's own 3.08:1. */
  background: var(--crs-surface);
  border-top: 1px solid var(--crs-card-border);
  color: var(--crs-text);
  font-family: var(--crs-font);
  font-weight: var(--crs-weight-light);
  font-size: var(--crs-step-0);
  line-height: 1.5;
  text-align: left;
  letter-spacing: normal;
}
.consent[hidden] { display: none; }

.consent__inner {
  max-width: var(--crs-container);
  margin-inline: auto;
  /* No bottom padding: the sticky button row carries its own, so it sits flush
     with the bottom edge while the panel scrolls behind it. */
  padding: var(--crs-space-m) var(--crs-gutter-mobile) 0;
}
@media (min-width: 60rem) {
  .consent__inner { padding-inline: var(--crs-gutter); }
}

/* EVERY ELEMENT BELOW STATES WHAT IT LOOKS LIKE. On a mirrored page the vendor's
   reset reaches into the panel by element name -- `p`, `label`, `legend`,
   `button` at line-height 1, labels as blocks with an 8px margin, the legend
   bold and uppercase, and every checkbox shrunk to 1x1px behind the page. A
   property left to inheritance renders one way on our pages and another on
   theirs; test/consent.test.js checks every property the vendor sets on those
   elements is set here too. */

/* The site's one heading rule, restated: a mirrored page does not load
   event.css, so `h1, h2, h3` from there never reaches this h2. Same colour,
   case, weight, size and line height as every other h2 -- not a variant. */
.consent__title {
  margin: 0 0 var(--crs-space-xs);
  color: var(--crs-red);
  font-family: var(--crs-font);
  font-weight: var(--crs-weight-medium);
  font-size: var(--crs-step-2);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: normal;
}
.consent__title:focus { outline: none; }
.consent__title:focus-visible { outline: 2px solid var(--crs-text); outline-offset: 3px; }

.consent__text {
  max-width: var(--crs-measure);
  margin: 0 0 var(--crs-space-s);
  padding: 0;
  border: 0;
  font-family: var(--crs-font);
  font-style: normal;
  color: var(--crs-text);
  font-size: var(--crs-step-0);
  font-weight: var(--crs-weight-light);
  line-height: 1.5;
}
.consent a {
  color: var(--crs-text);
  font-weight: inherit;   /* the vendor's stylesheet bolds links on the mirrored pages */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent__settings[hidden] { display: none; }
.consent__categories {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  width: auto;
  font-family: var(--crs-font);
  font-style: normal;
  font-size: var(--crs-step-0);
  font-weight: var(--crs-weight-light);
  line-height: 1.5;
}
.consent__legend {
  padding: 0;
  margin: 0 0 var(--crs-space-xs);
  border: 0;
  color: var(--crs-text-muted);
  font-family: var(--crs-font);
  font-size: var(--crs-step--1);
  /* 14px muted text at 300 is a hairline in Rajdhani; 500 reads at that size.
     #a8a8a7 on #1d1d1d measures 7.08:1. */
  font-weight: var(--crs-weight-medium);
  font-style: normal;
  line-height: 1.5;
  text-transform: none;
}
.consent__category {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--crs-space-s);
  align-items: start;
  /* Side by side on a wide screen the three share one height; without this the
     shorter ones spread their spare height between label and description. */
  align-content: start;
  padding: var(--crs-space-xs) 0;
  border-top: 1px solid var(--crs-border);
  max-width: 40rem;
}
.consent__category input[type="checkbox"] {
  position: static;
  top: auto;
  left: auto;
  z-index: auto;
  opacity: 1;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  padding: 0;
  outline: 0;
  appearance: auto;
  accent-color: var(--crs-red);
  cursor: pointer;
}
.consent__category input[type="checkbox"]:disabled { cursor: default; }
.consent__category label {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--crs-text);
  font-family: var(--crs-font);
  font-size: var(--crs-step-0);
  font-weight: var(--crs-weight-bold);
  font-style: normal;
  line-height: 1.5;
  vertical-align: baseline;
  transition: none;
  cursor: pointer;
}
.consent__category input:disabled + label { cursor: default; }
/* "Always on": muted and small, so at 500 for the same reason as the legend. */
.consent__state {
  margin-left: var(--crs-space-xs);
  color: var(--crs-text-muted);
  font-weight: var(--crs-weight-medium);
  font-size: var(--crs-step--1);
}
/* What each category does is body copy, so it is the body copy's colour: grey
   at 300 on #1d1d1d passed the ratio (7.08:1) and still read as a whisper. The
   label above it carries the hierarchy by weight (600), not by greying this. */
.consent__desc {
  grid-column: 2;
  margin: 0;
  padding: 0;
  color: var(--crs-text);
  font-size: var(--crs-step-0);
  font-weight: var(--crs-weight-light);
  line-height: 1.4;
}

/* Three equal buttons, and nothing that ranks them (EDPB 03/2022: refusing as
   easy as accepting). On a phone they stack, full width: no width holds the
   longest locale's three labels in one row (DE "Alle akzeptieren" is 125px of
   the ~110 a third of 350px leaves), and two-plus-one left "Settings" alone
   under the first as if it were the lesser choice. From 40rem one row, every
   column as wide as the widest label in the locale (1fr over max-content).

   Sticky at the bottom of the panel, on its surface, so when the settings layer
   scrolls inside a short phone the choice stays in view. */
.consent__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--crs-space-xs);
  max-width: 40rem;
  padding-block: var(--crs-space-s) var(--crs-space-m);
  background: var(--crs-surface);
}
@media (min-width: 40rem) {
  .consent__actions {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: max-content;
    max-width: 100%;
  }
}
.consent__button {
  display: block;
  width: 100%;
  margin: 0;
  /* 10px block makes 44px, the smallest target a thumb hits first time, three
     of them stacked in 148px. 12px inline, not the site's 20px, so a row of
     three stays narrow on a tablet. */
  padding: 10px 12px;
  background: transparent;
  border: 1px solid var(--crs-red-text);
  border-radius: var(--crs-radius);
  color: var(--crs-text);
  font-family: var(--crs-font);
  font-weight: var(--crs-weight-light);
  font-size: var(--crs-step-0);
  font-style: normal;
  line-height: 1.5;
  vertical-align: baseline;
  letter-spacing: normal;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Stated, because the vendor's stylesheet transitions every property of a
     button on the mirrored pages -- the focus ring included, which then grows in. */
  transition: background-color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .consent__button { transition: none; }
}
.consent__button[hidden] { display: none; }
/* Hover only where there is a real pointer. On a touch screen :hover sticks to
   whatever sits under the last tap -- and "Save choices" appears in exactly the
   cell "Settings" was tapped in, so it came up red-filled, the one button that
   looked recommended. :active is the touch feedback instead: it lasts as long
   as the finger, on the button the finger is on. With a mouse the same thing
   happens when the panel is narrow (the cells stack), so consent.js holds the
   hover off (data-hover="off") until the pointer next moves. */
@media (hover: hover) and (pointer: fine) {
  .consent:not([data-hover="off"]) .consent__button:hover { background: var(--crs-red-wash); }
}
.consent__button:active { background: var(--crs-red-wash); }
/* The keyboard ring is the site's (white, as on the booking and account forms),
   and outside the button: never a fill and never red, so it cannot be read as
   a selected or preferred option -- a red ring on a red-bordered button read as
   a heavier border. White on #1d1d1d is 16.9:1. */
.consent__button:focus-visible,
.consent a:focus-visible,
.consent__category input:focus-visible,
[data-consent-open]:focus-visible {
  outline: 2px solid var(--crs-text);
  outline-offset: 3px;
}
.consent__button:focus:not(:focus-visible) { outline: none; }

/* Announced, not shown: "your choice has been saved". */
.consent-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* While the panel is open the page ends above it. */
html.consent-open body { padding-bottom: var(--consent-height, 0); }

/* "Cookie settings" in the footer: a button, because it opens something, that
   looks like the terms link beside it. Hidden until consent.js runs. */
[data-consent-open] {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-decoration: underline;
  cursor: pointer;
}
[data-consent-open][hidden] { display: none; }
/* Ours sits in .site-footer__bottom beside the terms link: its colour by
   inheritance, its weight and decoration stated to match (measured: 600, none). */
.site-footer__consent {
  padding-block: 4px;
  font-weight: var(--crs-weight-bold);
  text-decoration: none;
}
.site-footer__consent:hover { text-decoration: underline; }

/* On a wide screen the first layer puts the choice beside the explanation
   rather than under it, so the panel takes a third of the height it would
   otherwise. */
@media (min-width: 64rem) {
  .consent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title actions" "text actions";
    column-gap: var(--crs-space-l);
    align-items: start;
    padding-bottom: var(--crs-space-m);
  }
  .consent__title { grid-area: title; }
  .consent__text { grid-area: text; margin-bottom: 0; }
  .consent__actions { grid-area: actions; align-self: center; position: static; padding-block: 0; }

  /* The settings layer (consent.js sets data-layer) is one column: the three
     categories side by side across the full width, the buttons in one row
     under them, left-aligned with them -- not the categories in the left half
     and the buttons up in the right corner over an empty quarter. */
  .consent[data-layer="settings"] .consent__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "text" "settings" "actions";
    padding-bottom: 0;
  }
  .consent[data-layer="settings"] .consent__settings { grid-area: settings; margin-top: var(--crs-space-s); }
  .consent[data-layer="settings"] .consent__categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--crs-space-l);
  }
  .consent[data-layer="settings"] .consent__category { max-width: none; }
  .consent[data-layer="settings"] .consent__actions {
    align-self: start;
    justify-self: start;
    position: sticky;
    padding-block: var(--crs-space-m);
  }
}

/* A short screen -- a phone in landscape, or 400% zoom (320x256 CSS px) -- has
   no room for a sticky row: stacked, it would fill the whole 75dvh panel and
   nothing above it could be read. The buttons then simply end the panel. */
@media (max-height: 30rem) {
  .consent .consent__actions,
  .consent[data-layer="settings"] .consent__actions { position: static; }
}