/*
 * Ragaz Inc. — child theme of Hummingbird (PrestaShop 9.2)
 *
 * Stage black, flight-case graphite and brushed aluminium; the rental brochure's amber is the one
 * accent (actions, focus, cue lights). Barlow Condensed for display type, Barlow for text.
 * Motion is stage-like: a sweeping beam and a follow-spot in the hero, gear racked in on scroll,
 * VU meters on the rack units. Everything still and readable with prefers-reduced-motion.
 *
 * Loaded after Hummingbird's theme.css. Hummingbird's own rules sit in CSS layers, so these
 * unlayered rules win without !important; Bootstrap 5.3 dark mode (<html data-bs-theme="dark">)
 * and its CSS variables carry most colours.
 */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root,
[data-bs-theme=dark] {
  --rz-black: #000;
  --rz-ink: #0a0a0b;          /* footer / deep panels */
  --rz-case: #18191c;         /* flight-case graphite: raised surfaces */
  --rz-case-2: #212226;
  --rz-case-edge: #2c2e33;
  --rz-rail: #a9aeb6;         /* brushed aluminium: secondary text */
  --rz-paper: #f2f1ec;        /* text */
  --rz-amber: #e3962f;        /* brochure amber: the only accent */
  --rz-amber-hot: #ffb54d;
  --rz-amber-glow: rgba(227, 150, 47, .35);
  --rz-amber-ink: var(--rz-amber);  /* amber as text colour; darker in light mode */
  --rz-field-bg: #0f1012;           /* form fields */
  --rz-field-edge: #34363c;
  --rz-magenta: #c2369b;      /* stage-light colours, used only inside light effects */
  --rz-blue: #3b5bff;
  --rz-font-text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rz-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --rz-radius: 4px;
  --rz-radius-lg: 14px;
  --rz-ease: cubic-bezier(.2, .7, .1, 1);
  --rz-header-h: 8.5rem;
  --rz-section: clamp(3rem, 5vw, 4.75rem);  /* vertical rhythm between page sections */

  --bs-body-bg: var(--rz-black);
  --bs-body-bg-rgb: 0, 0, 0;
  --bs-body-color: var(--rz-paper);
  --bs-body-color-rgb: 242, 241, 236;
  --bs-body-font-family: var(--rz-font-text);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-emphasis-color: #fff;
  --bs-secondary-color: var(--rz-rail);
  --bs-secondary-bg: var(--rz-case);
  --bs-tertiary-bg: #111214;
  --bs-border-color: #303238;
  --bs-border-radius: var(--rz-radius);
  --bs-border-radius-sm: var(--rz-radius);
  --bs-border-radius-lg: var(--rz-radius-lg);
  --bs-primary: var(--rz-amber);
  --bs-primary-rgb: 227, 150, 47;
  --bs-link-color: var(--rz-amber-ink);
  --bs-link-color-rgb: 227, 150, 47;
  --bs-link-hover-color: var(--rz-amber-hot);
  --bs-link-hover-color-rgb: 255, 181, 77;
  --bs-heading-color: #fff;
  --bs-focus-ring-color: rgba(227, 150, 47, .5);
}

/* Light mode (switch in the header, ragaz.js; saved per visitor). The content turns to paper; the
   stage stays dark: header, footer, hero, photo tiles, the rack and the Events page carry
   data-bs-theme="dark", which re-applies the tokens above to them. */
:root[data-rz-theme="light"] {
  --rz-black: #f4f2ec;
  --rz-ink: #e8e5dc;
  --rz-case: #fff;
  --rz-case-2: #f8f6f1;
  --rz-case-edge: #d9d4c8;
  --rz-rail: #5a5d63;
  --rz-paper: #17181b;
  --rz-amber-ink: #9a5300;
  --rz-amber-glow: rgba(227, 150, 47, .28);
  --rz-field-bg: #fff;
  --rz-field-edge: #cfc9bc;

  --bs-body-bg: var(--rz-black);
  --bs-body-bg-rgb: 244, 242, 236;
  --bs-body-color: var(--rz-paper);
  --bs-body-color-rgb: 23, 24, 27;
  --bs-emphasis-color: #000;
  --bs-secondary-color: var(--rz-rail);
  --bs-secondary-bg: #ebe7de;
  --bs-tertiary-bg: #efece4;
  --bs-border-color: #d3cec2;
  --bs-heading-color: #0c0d0f;
  --bs-link-color: var(--rz-amber-ink);
  --bs-link-color-rgb: 154, 83, 0;
  --bs-link-hover-color: #7a4100;
  --bs-link-hover-color-rgb: 122, 65, 0;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rz-header-h) + 1rem); }
body {
  font-family: var(--rz-font-text);
  background: var(--rz-black);
  color: var(--rz-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Fine film grain over everything: keeps large black areas from looking flat */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, .h1, .h2, .h3, .rz-section-title {
  font-family: var(--rz-font-display);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.01em;
  color: var(--bs-heading-color);
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(2.75rem, 6vw + .5rem, 6rem); }
h2, .h2 { font-size: clamp(2rem, 2.8vw + .9rem, 3.5rem); }
h3, .h3 { font-size: clamp(1.35rem, 1vw + 1rem, 1.85rem); font-weight: 700; line-height: 1.1; }
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--rz-font-text); font-weight: 600; color: var(--bs-heading-color); }
/* Section headings that Hummingbird sizes down with .h4 (e.g. "Kein Konto?") stay display type */
:is(h1, h2, h3).h4 { font-family: var(--rz-font-display); font-weight: 700; font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); line-height: 1.1; }
p, li { max-width: 72ch; }
::selection { background: var(--rz-amber); color: #000; }
a { text-underline-offset: .2em; text-decoration-thickness: 1px; transition: color .2s var(--rz-ease); }
:focus-visible { outline: 3px solid var(--rz-amber); outline-offset: 3px; }
img { max-width: 100%; }

/* scrollbar */
* { scrollbar-color: #3a3c42 #0b0b0c; }

/* Hummingbird uses light utility surfaces in places; here they are graphite */
.bg-light, .bg-white, .bg-body-tertiary { background-color: var(--rz-case) !important; color: var(--rz-paper); }
.text-dark, .text-black { color: var(--rz-paper) !important; }
.card { --bs-card-bg: var(--rz-case); --bs-card-border-color: var(--rz-case-edge); }
.form-control, .form-select {
  --bs-body-bg: var(--rz-field-bg);
  border-color: var(--rz-field-edge);
  border-radius: var(--rz-radius);
}
.form-control:focus, .form-select:focus { border-color: var(--rz-amber); box-shadow: 0 0 0 .2rem var(--rz-amber-glow); }

/* ---------- Buttons: amber is the cue light ---------- */
.btn {
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .02em;
  border-radius: var(--rz-radius);
  padding: .6rem 1.35rem;
  transition: transform .25s var(--rz-ease), box-shadow .25s var(--rz-ease), background-color .2s, color .2s, border-color .2s;
}
.btn-lg { font-size: 1.3rem; padding: .8rem 1.7rem; }
.btn-primary {
  --bs-btn-color: #000;
  --bs-btn-bg: var(--rz-amber);
  --bs-btn-border-color: var(--rz-amber);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--rz-amber-hot);
  --bs-btn-hover-border-color: var(--rz-amber-hot);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c97f1d;
  --bs-btn-active-border-color: #c97f1d;
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #6e5534;
  --bs-btn-disabled-border-color: #6e5534;
}
.btn-primary:hover { box-shadow: 0 10px 30px -8px var(--rz-amber-glow), 0 0 0 1px var(--rz-amber-hot); transform: translateY(-2px); }
.btn-outline-primary,
.btn-outline-light {
  --bs-btn-color: var(--rz-paper);
  --bs-btn-border-color: rgba(242, 241, 236, .45);
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: var(--rz-paper);
  --bs-btn-hover-border-color: var(--rz-paper);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: var(--rz-paper);
  backdrop-filter: blur(6px);
}
.btn-outline-primary:hover, .btn-outline-light:hover { transform: translateY(-2px); }

/* ---------- Header: glass that sits over the hero on the home page ---------- */
/* The glass sits on a ::before layer, not on .header itself: backdrop-filter on the header would
   make it the containing block of the fixed full-screen mobile menu inside it and clip the menu
   to the header's height. */
.header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  transition: border-color .35s var(--rz-ease);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: saturate(140%) blur(18px);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  transition: opacity .35s var(--rz-ease);
}
#index .header {
  position: fixed;
  inset: 0 0 auto 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, 0));
  border-bottom-color: transparent;
}
#index .header::before { opacity: 0; }
html.rz-scrolled #index .header { border-bottom-color: rgba(255, 255, 255, .06); }
html.rz-scrolled #index .header::before { opacity: 1; }
.header-top, .header-bottom { background: transparent; }
.header-top {
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  font-size: .9375rem;
  color: var(--rz-rail);
}
.header-top__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.header-top__right { display: flex; align-items: center; gap: .5rem; }
.header-top a { color: var(--rz-paper); text-decoration: none; }
.header-top a:hover { color: var(--rz-amber-ink); }
.header-bottom__row { min-height: 5.25rem; }
.rz-logo { display: block; line-height: 0; transition: transform .4s var(--rz-ease); }
.rz-logo:hover { transform: rotate(-2deg) scale(1.03); }
.rz-logo img { width: 9.5rem; height: auto; }
@media (min-width: 992px) { .rz-logo img { width: 11rem; } }
.header-block__badge { background: var(--rz-amber); color: #000; font-weight: 700; }

/* Main menu: condensed labels with an amber cue line that draws in */
.ps-mainmenu__tree { flex-wrap: nowrap; }
.ps-mainmenu__tree-link {
  position: relative;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: .015em;
  color: var(--rz-paper);
  white-space: nowrap;
}
.ps-mainmenu__tree-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15rem;
  height: 2px;
  background: var(--rz-amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--rz-ease);
}
.ps-mainmenu__tree-item:hover > .ps-mainmenu__tree-item-wrapper .ps-mainmenu__tree-link::after,
.ps-mainmenu__tree-link:focus-visible::after { transform: scaleX(1); }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  #_desktop_ps_searchbar .ps-searchbar { width: 13rem; min-width: 0; }
  .rz-logo img { width: 9.5rem; }
}

/* Mega menu: a dark glass panel; shop categories as image cards */
.submenu {
  background: rgba(8, 8, 9, .94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid rgba(255, 255, 255, .06);
  border-bottom: 1px solid var(--rz-case-edge);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8);
}
.submenu__left-item {
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: var(--rz-radius);
}
.submenu__left-item[aria-selected="true"] { color: var(--rz-amber-ink); background: var(--rz-case); }
/* Hummingbird shows the active panel (display: grid) and hides the others; only the layout changes */
.submenu__right-items:has(.rz-menu-card) {
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 1rem;
}
.submenu__right-items:has(.rz-menu-card) > ul { display: contents; }
.submenu__right-items:has(.rz-menu-card) li { list-style: none; max-width: none; }
.rz-menu-card {
  display: grid;
  gap: .6rem;
  text-decoration: none;
  color: var(--rz-paper);
}
.rz-menu-card__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--rz-radius-lg);
  background: radial-gradient(120% 90% at 50% 20%, #f4f3ef, #d9d7d0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.rz-menu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 10%;
  transition: transform .5s var(--rz-ease);
}
.rz-menu-card:hover .rz-menu-card__media img { transform: scale(1.08); }
.rz-menu-card__label { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; }
.rz-menu-card:hover .rz-menu-card__label { color: var(--rz-amber-ink); }
/* A menu without sub-entries (Über Uns): one row of photo cards, the contact in amber */
.rz-submenu--cards .container { padding-block: 1.5rem 1.75rem; }
.rz-menu-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.25rem, 1fr));
  gap: clamp(.6rem, 1vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rz-menu-tiles li { max-width: none; }
.rz-menu-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  padding: .9rem;
  overflow: hidden;
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  background: var(--rz-case);
  color: #fff;
  text-decoration: none;
  isolation: isolate;
}
.rz-menu-tile__media { position: absolute; inset: 0; z-index: -1; }
.rz-menu-tile__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.85); transition: transform .6s var(--rz-ease), filter .4s; }
.rz-menu-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .88)); }
.rz-menu-tile:hover .rz-menu-tile__media img,
.rz-menu-tile:focus-visible .rz-menu-tile__media img { transform: scale(1.06); filter: none; }
.rz-menu-tile__label { min-width: 0; font-family: var(--rz-font-display); font-weight: 700; font-size: clamp(1rem, .5vw + .7rem, 1.2rem); line-height: 1.05; hyphens: auto; overflow-wrap: anywhere; }
.rz-menu-tile:hover .rz-menu-tile__label { color: var(--rz-amber-hot); }
.rz-menu-tile:focus-visible { outline: 2px solid var(--rz-amber); outline-offset: 2px; }
.rz-menu-tile--contact { border-color: transparent; background: var(--rz-amber); color: #000; transition: background-color .3s; }
.rz-menu-tile--contact:hover { background: var(--rz-amber-hot); }
.rz-menu-tile--contact:hover .rz-menu-tile__label { color: #000; }
.rz-menu-tile--contact:focus-visible { outline-color: #fff; }

/* ---------- Hero ---------- */
#index .page-content--home { padding: 0; }
#index .wrapper { padding-top: 0; }
.rz-hero {
  --mx: 70%;
  --my: 35%;
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  overflow: hidden;
  padding-top: var(--rz-header-h);
  background: var(--rz-black);
}
.rz-hero__stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.rz-hero__img {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1.12);
  filter: saturate(1.15) contrast(1.05);
  transition: transform 2.4s var(--rz-ease);
  animation: rz-kenburns 26s ease-in-out 2.4s infinite alternate;
}
.rz-hero.is-ready .rz-hero__img { transform: scale(1.02); }
@keyframes rz-kenburns { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
.rz-hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 20% 85%, rgba(0, 0, 0, .7), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .15) 35%, rgba(0, 0, 0, .9) 100%);
}
/* Two moving-head beams sweeping across the stage, and a follow-spot on the pointer */
.rz-hero__beam {
  position: absolute;
  top: -20%;
  width: 34vmax;
  height: 140%;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(18px);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity 1.6s var(--rz-ease) .6s;
}
.rz-hero__beam--a { left: 8%; background: linear-gradient(180deg, rgba(227, 150, 47, .55), transparent 75%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: rz-sweep-a 11s ease-in-out infinite alternate; }
.rz-hero__beam--b { right: 6%; background: linear-gradient(180deg, rgba(194, 54, 155, .45), transparent 75%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); animation: rz-sweep-b 13s ease-in-out infinite alternate; }
.rz-hero.is-ready .rz-hero__beam { opacity: .7; }
@keyframes rz-sweep-a { from { transform: rotate(-22deg); } to { transform: rotate(16deg); } }
@keyframes rz-sweep-b { from { transform: rotate(20deg); } to { transform: rotate(-14deg); } }
.rz-hero__spot {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(22rem 22rem at var(--mx) var(--my), rgba(255, 236, 200, .16), transparent 70%);
  mix-blend-mode: screen;
}
.rz-hero__content { position: relative; z-index: 3; padding-block: 2rem 2.5rem; }
.rz-hero__content h1 {
  max-width: 13ch;
  margin-bottom: 1.25rem;
  font-size: clamp(3rem, 7.4vw + .4rem, 7.5rem);
  line-height: .9;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .35);
}
.rz-hero__content p {
  font-size: clamp(1.125rem, .5vw + 1rem, 1.4rem);
  max-width: 44ch;
  color: rgba(242, 241, 236, .92);
}
.rz-hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
/* Load sequence: headline, then text, then actions. Pure CSS, so it runs from the first paint
   without waiting for the deferred script. The headline only rises and is never invisible: it is the
   largest element in view (LCP), and a fade-in would delay it. */
.rz-hero__content > * { animation: rz-rise-in 1s var(--rz-ease) both; }
.rz-hero__content > :first-child { animation-name: rz-rise; }
.rz-hero__content > :nth-child(2) { animation-delay: .18s; }
.rz-hero__content > :nth-child(3) { animation-delay: .32s; }
@keyframes rz-rise { from { transform: translateY(28px); } }
@keyframes rz-rise-in { from { opacity: 0; transform: translateY(28px); } }
.rz-hero__facts {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 2rem;
  list-style: none;
  margin: 0 auto;
  padding: 1.25rem calc(var(--bs-gutter-x, 1.5rem) * .5) 2rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: var(--rz-rail);
  font-size: .975rem;
  animation: rz-fade 1.2s var(--rz-ease) .55s both;
}
.rz-hero__facts li { max-width: none; }
.rz-hero__facts strong { display: block; color: #fff; font-family: var(--rz-font-display); font-size: 1.35rem; font-weight: 700; }

/* ---------- Brand marquee ---------- */
.rz-marquee {
  position: relative;
  overflow: hidden;
  padding-block: 1.6rem;
  border-block: 1px solid var(--rz-case-edge);
  background: var(--rz-ink);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rz-marquee__track { display: flex; width: max-content; animation: rz-marquee 48s linear infinite; }
.rz-marquee:hover .rz-marquee__track { animation-play-state: paused; }
.rz-marquee__list { display: flex; gap: 3.5rem; margin: 0; padding: 0 1.75rem; list-style: none; }
.rz-marquee__list li { max-width: none; }
.rz-marquee__list a, .rz-marquee__list li > span {
  font-family: var(--rz-font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2vw + 1rem, 2.6rem);
  text-transform: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--bs-body-color-rgb), .5);
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s, -webkit-text-stroke-color .3s;
}
.rz-marquee__list a:hover, .rz-marquee__list a:focus-visible { color: var(--rz-amber-ink); -webkit-text-stroke-color: var(--rz-amber); }
.rz-marquee__list { align-items: center; }
/* White logo files (migrate/brand-logos.php); size per logo comes from the width/height attributes */
.rz-marquee__logo { display: flex; align-items: center; height: 3.4rem; }
.rz-marquee__logo img {
  display: block;
  width: auto;
  height: var(--h);
  max-width: none;
  opacity: .62;
  transition: opacity .3s, filter .3s;
}
.rz-marquee__logo:hover img, .rz-marquee__logo:focus-visible img { opacity: 1; filter: drop-shadow(0 0 14px var(--rz-amber-glow)); }
@media (max-width: 767.98px) {
  .rz-marquee__logo img { height: calc(var(--h) * .8); }
}
@keyframes rz-marquee { to { transform: translateX(-50%); } }

/* ---------- Section titles ---------- */
.rz-section-title { font-size: clamp(2.25rem, 3.4vw + .8rem, 4rem); margin-bottom: 1.75rem; }
.rz-section-title a { color: inherit; text-decoration: none; }
.rz-section-title a:hover { color: var(--rz-amber-ink); }
.section-title, .ps-featuredproducts .section-title { font-family: var(--rz-font-display); font-weight: 800; font-size: clamp(2.25rem, 3.4vw + .8rem, 4rem); }

/* ---------- Rack units: the category navigation, as devices in a 19-inch rack ----------
 * No frame of its own: every unit is a whole device (front panel + rack ears with screws), so the
 * rack builds up unit by unit as they slide in (scroll reveal, staggered); its LED switches on
 * once it is in. */
.rz-rack { margin-block: var(--rz-section); overflow-x: clip; }
.rz-rack__units { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rz-rack__unit {
  --ear: clamp(1.15rem, 2.2vw, 1.9rem);
  position: relative;
  max-width: none;
  padding-inline: var(--ear);
  border-radius: 4px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2c2e34 0%, #1e2025 46%, #151619 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .75),
    0 18px 32px -22px rgba(0, 0, 0, .95);
  transition: box-shadow .4s var(--rz-ease);
}
/* Rack ears: brushed aluminium, two screws each */
.rz-rack__unit::before,
.rz-rack__unit::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--ear);
  background:
    radial-gradient(circle at 50% 1.35rem, #e3e6ea 0 .14rem, #4a4e55 .16rem .27rem, rgba(0, 0, 0, .45) .29rem .33rem, transparent .35rem),
    radial-gradient(circle at 50% calc(100% - 1.35rem), #e3e6ea 0 .14rem, #4a4e55 .16rem .27rem, rgba(0, 0, 0, .45) .29rem .33rem, transparent .35rem),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 2px),
    linear-gradient(90deg, #5f646c, #c3c8cf 42%, #8a8f97 70%, #5f646c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .5);
}
.rz-rack__unit::before { left: 0; border-radius: 4px 0 0 4px; }
.rz-rack__unit::after { right: 0; border-radius: 0 4px 4px 0; }
.rz-rack__unit:has(.rz-rack__link:hover),
.rz-rack__unit:has(.rz-rack__link:focus-visible) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 0, 0, .75),
    0 0 0 1px rgba(227, 150, 47, .35),
    0 24px 50px -26px var(--rz-amber-glow);
}
/* Power LED in the panel's corner */
.rz-rack__link::before {
  content: "";
  position: absolute;
  top: 1.45rem;
  left: clamp(.55rem, 1.2vw, 1rem);
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #3b2a10;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .8);
  transition: background-color .4s, box-shadow .4s;
}
.rz-rack__unit.rz-in .rz-rack__link::before,
.rz-rack__unit:not(.rz-reveal) .rz-rack__link::before {
  background: var(--rz-amber);
  box-shadow: 0 0 8px 1px var(--rz-amber-glow);
  transition-delay: calc(var(--rz-i, 0) * 110ms + .55s);
}
.rz-rack__link:hover::before, .rz-rack__link:focus-visible::before { background: #ffd08a; box-shadow: 0 0 14px 3px var(--rz-amber-glow); transition-delay: 0s; }
.rz-rack__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) .4rem;
  color: #fff;
  text-decoration: none;
}
.rz-rack__name {
  font-family: var(--rz-font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw + .5rem, 3.75rem);
  line-height: 1;
  transition: color .25s, transform .45s var(--rz-ease);
}
.rz-rack__count { display: flex; align-items: center; gap: .9rem; color: var(--rz-rail); font-size: .9375rem; white-space: nowrap; }
/* VU meter: 10 LEDs that come alive when the unit is pointed at */
.rz-rack__count::before {
  content: "";
  width: 4.8rem;
  height: .55rem;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #3ddc84 0 58%, var(--rz-amber) 58% 82%, #ff4657 82% 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  opacity: .22;
  clip-path: inset(0 70% 0 0);
  transition: opacity .3s;
}
.rz-rack__link:hover .rz-rack__count::before,
.rz-rack__link:focus-visible .rz-rack__count::before { opacity: 1; animation: rz-vu 1.1s steps(1, end) infinite; }
@keyframes rz-vu {
  0% { clip-path: inset(0 40% 0 0); } 12% { clip-path: inset(0 22% 0 0); } 25% { clip-path: inset(0 55% 0 0); }
  37% { clip-path: inset(0 12% 0 0); } 50% { clip-path: inset(0 35% 0 0); } 62% { clip-path: inset(0 5% 0 0); }
  75% { clip-path: inset(0 48% 0 0); } 87% { clip-path: inset(0 18% 0 0); }
}
.rz-rack__link:hover .rz-rack__name,
.rz-rack__link:focus-visible .rz-rack__name { color: var(--rz-amber-ink); transform: translateX(.4rem); }
.rz-rack__sub {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0 clamp(1rem, 3vw, 2.5rem) 1.4rem;
  max-width: none;
}
.rz-rack__sub a { color: var(--rz-rail); text-decoration: none; font-size: .975rem; }
.rz-rack__sub a:hover { color: var(--rz-paper); text-decoration: underline; }
.rz-rack__unit:not(:has(.rz-rack__sub)) .rz-rack__link { padding-bottom: 1.5rem; }

/* ---------- Product cards (templates/catalog/_partials/miniatures/product.tpl) ---------- */
.ps-featuredproducts, .featured-products { margin-block: var(--rz-section); }
.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 2vw, 1.5rem);
}
@media (min-width: 768px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.products > * { width: auto; max-width: none; padding: 0; margin: 0; }
.product-miniature { height: 100%; }
.product-miniature__inner,
.product-miniature .card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: .5rem;
  background: var(--rz-case);
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  transition: border-color .3s, box-shadow .45s var(--rz-ease);
}
.product-miniature__inner:hover,
.product-miniature__inner:focus-within {
  border-color: rgba(227, 150, 47, .55);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95), 0 18px 50px -34px var(--rz-amber-glow);
}
/* Product photos are shot on white: they sit on a softly lit light stage */
.product-miniature__top { position: relative; }
.product-miniature__image-container,
.product-miniature .product-miniature__image-link {
  display: block;
  border-radius: calc(var(--rz-radius-lg) - .35rem);
  background: radial-gradient(120% 90% at 50% 12%, #faf9f6, #dddbd4);
  overflow: hidden;
  outline: 0;
}
.product-miniature__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply;
  transition: transform .8s var(--rz-ease);
}
.product-miniature__inner:hover .product-miniature__image { transform: scale(1.05); }
.product-miniature__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .5rem .75rem;
  flex: 1;
  padding: .9rem .5rem .4rem;
}
.product-miniature__infos { display: flex; flex-direction: column; gap: .25rem; min-width: 0; height: 100%; }
.rz-card__brand { color: var(--rz-amber-ink); font-size: .8rem; font-weight: 600; }
.product-miniature__title,
.product-miniature__title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, .5vw + .9rem, 1.2rem);
  line-height: 1.2;
  color: var(--rz-paper);
  text-decoration: none;
  margin-bottom: auto;
}
.product-miniature__title:focus-visible { outline: none; }
.product-miniature__inner:has(.product-miniature__title:focus-visible) { outline: 2px solid var(--rz-amber); outline-offset: 3px; }
.product-miniature__prices { margin-top: .6rem; }
.product-miniature__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; }
.rz-card__unit { font-family: var(--rz-font-text); font-weight: 400; font-size: .8rem; color: var(--rz-rail); }
.product-miniature__price,
.product__current-price,
.product-price { font-family: var(--rz-font-display); font-weight: 700; color: var(--bs-heading-color); font-size: 1.3rem; }
.product-miniature__actions { position: relative; z-index: 2; width: auto; }
.product-miniature__form { display: block; margin: 0; }
.rz-card__go {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--rz-case-edge);
  border-radius: 999px;
  background: var(--rz-ink);
  color: var(--rz-paper);
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--rz-ease);
}
.rz-card__go .material-icons { font-size: 1.3rem; }
.product-miniature__inner:hover .rz-card__go,
.rz-card__go:hover, .rz-card__go:focus-visible { background: var(--rz-amber); border-color: var(--rz-amber); color: #000; }
.rz-card__go:active { transform: scale(.94); }
.product-miniature .quantity-button, .product-miniature__quickview-button, .product-miniature__variants { display: none; }
.product-flags { position: absolute; z-index: 1; top: .6rem; left: .6rem; }
.product-flags .badge, .product-flag { font-family: var(--rz-font-display); font-weight: 700; letter-spacing: .02em; border-radius: 999px; }
@media (max-width: 575.98px) {
  .product-miniature__bottom { grid-template-columns: minmax(0, 1fr); padding-inline: .35rem; }
  .product-miniature__actions { position: absolute; z-index: 2; right: .9rem; top: calc(100% - 3.6rem); }
  .product-miniature__prices { padding-right: 3rem; }
  .rz-card__go { width: 2.5rem; height: 2.5rem; }
}

/* ---------- Teasers ---------- */
.rz-teasers {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-block: var(--rz-section);
}
@media (min-width: 768px) { .rz-teasers { grid-template-columns: 1fr 1fr; } }
.rz-teaser {
  position: relative;
  display: block;
  min-height: 26rem;
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
  color: var(--rz-paper);
  text-decoration: none;
  isolation: isolate;
}
.rz-teaser__media { position: absolute; inset: 0; z-index: -1; }
.rz-teaser__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--rz-ease); }
.rz-teaser__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9) 100%); }
.rz-teaser:hover .rz-teaser__img { transform: scale(1.07); }
.rz-teaser__body { position: absolute; inset: auto 0 0 0; padding: 2rem; }
.rz-teaser__body h2 { font-size: clamp(2rem, 2vw + 1rem, 3rem); margin-bottom: .5rem; }
.rz-teaser__body p { margin: 0 0 1rem; color: rgba(242, 241, 236, .85); }
.rz-teaser__more,
.rz-hub__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--rz-amber-ink);
}
.rz-teaser__more::after,
.rz-hub__more::after { content: ""; width: 1.6rem; height: 2px; background: currentColor; transition: width .4s var(--rz-ease); }
.rz-teaser:hover .rz-teaser__more::after,
.rz-hub__tile:hover .rz-hub__more::after { width: 2.8rem; }

/* ---------- Editor content (products, categories, CMS) ----------
 * Legacy texts carry inline white backgrounds, black text and Arial from the old WYSIWYG editor;
 * they are neutralised here instead of rewriting every description. */
.rich-text *:not(img):not(svg):not(svg *):not(video):not(iframe) {
  background-color: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
}
.rich-text a { color: var(--rz-amber-ink) !important; }
/* …but headings keep the display face, and old fixed sizes (8pt spans) follow the page */
.rich-text.rich-text :is(h1, h2, h3, h4) { font-family: var(--rz-font-display) !important; font-weight: 800; line-height: 1.1; }
.rich-text.rich-text [style*="font-size"] { font-size: inherit !important; line-height: inherit !important; }
.rich-text h2, .rich-text h3 { color: var(--bs-heading-color) !important; margin-top: 2rem; }
.rich-text h2 { font-size: clamp(1.8rem, 1.6vw + 1rem, 2.6rem); }
.rich-text h3 { font-size: clamp(1.35rem, .8vw + 1rem, 1.75rem); }
.rich-text img { max-width: 100%; height: auto; border-radius: var(--rz-radius-lg); }
.rich-text ul { padding-left: 1.2rem; }
.rich-text li::marker { color: var(--rz-amber-ink); }
.rich-text table {
  width: 100%;
  max-width: 44rem;
  margin-block: 1rem 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
  font-size: .975rem;
}
.rich-text th, .rich-text td { padding: .65rem 1rem; border-bottom: 1px solid var(--rz-case-edge) !important; vertical-align: top; text-align: left; }
.rich-text tr:last-child > * { border-bottom: 0 !important; }
.rich-text th, .rich-text td:first-child { color: var(--rz-rail) !important; font-weight: 500; width: 42%; }
.rich-text tr:nth-child(even) > * { background: rgba(var(--bs-emphasis-color-rgb), .03) !important; }
.product__description-short { font-size: 1.05rem; color: var(--rz-rail); }

/* ---------- Home: about text + FAQ (migrate/content/customtext.html: intro + body) ---------- */
.rz-about { margin-block: var(--rz-section); }
.rz-about .ps-customtext, .rz-about .ps-customtext > .container { padding: 0; max-width: none; background: transparent; color: var(--rz-paper); }
.rz-about .ps-customtext > .container { display: grid; gap: 2.5rem clamp(3rem, 6vw, 6rem); }
@media (min-width: 992px) {
  .rz-about .ps-customtext > .container { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .rz-about__intro { position: sticky; top: calc(var(--rz-header-h) + 2rem); }
}
.rz-about__intro h2 { font-size: clamp(2.4rem, 3.4vw + 1rem, 4.25rem); line-height: .98; margin-bottom: 1.5rem; }
.rz-about__intro p { color: var(--rz-rail); font-size: 1.08rem; }
.rz-about__intro p:first-of-type { color: var(--rz-paper); font-size: 1.2rem; }
.rz-about__body > h2:first-child { margin-top: 0; }
.rz-about h2 { font-size: clamp(2rem, 2.6vw + 1rem, 3.5rem); margin-top: 2.5rem; }
.rz-about h2:first-child { margin-top: 0; }
.rz-about ul { padding-left: 1.2rem; }
.rz-about li::marker { color: var(--rz-amber-ink); }
.rz-about details {
  border-top: 1px solid var(--rz-case-edge);
  padding-block: 1.1rem;
}
.rz-about details:last-of-type { border-bottom: 1px solid var(--rz-case-edge); }
.rz-about summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, .6vw + 1.1rem, 1.6rem);
  color: var(--bs-heading-color);
}
.rz-about summary::-webkit-details-marker { display: none; }
.rz-about summary::after {
  content: "";
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  background:
    linear-gradient(var(--rz-amber), var(--rz-amber)) center / 100% 2px no-repeat,
    linear-gradient(var(--rz-amber), var(--rz-amber)) center / 2px 100% no-repeat;
  transition: transform .35s var(--rz-ease);
}
.rz-about details[open] summary::after { transform: rotate(135deg); }
.rz-about summary:hover { color: var(--rz-amber-ink); }
.rz-about details p { margin: .75rem 0 0; color: rgba(var(--bs-body-color-rgb), .85); }

/* ---------- Pickup points ---------- */
.rz-pickup { margin-block: var(--rz-section); }
.rz-pickup__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.rz-pickup__store {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--rz-radius-lg);
  background:
    linear-gradient(180deg, var(--rz-case-2), var(--rz-case)),
    var(--rz-case);
  border: 1px solid var(--rz-case-edge);
}
.rz-pickup__store::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rz-amber), transparent);
}
.rz-pickup__body { padding: 1.5rem 1.75rem 1.75rem; }
/* A single pickup point: map and address side by side, not a map across the whole page */
@media (min-width: 768px) {
  .rz-pickup__store:only-child { flex-direction: row; }
  .rz-pickup__store:only-child .rz-pickup__map { flex: 1 1 60%; aspect-ratio: auto; min-height: 22rem; }
  .rz-pickup__store:only-child .rz-pickup__body { flex: 1 1 40%; align-self: center; padding: 2rem 2.25rem; }
}
/* Map picture: OpenStreetMap darkened to the theme; the pin and the call to action sit on top */
.rz-pickup__map { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.rz-pickup__map-link { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; }
.rz-pickup__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55);
  transition: transform .8s var(--rz-ease), filter .4s;
}
.rz-pickup__map-link:hover img, .rz-pickup__map-link:focus-visible img {
  transform: scale(1.06);
  filter: invert(1) hue-rotate(180deg) brightness(1) contrast(.9) saturate(.7);
}
.rz-pickup__map-link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55)); pointer-events: none; }
.rz-pickup__map-link:focus-visible { outline: 2px solid var(--rz-amber); outline-offset: -4px; }
.rz-pickup__pin {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -.55rem 0 0 -.55rem;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--rz-amber);
  box-shadow: 0 0 0 6px rgba(227, 150, 47, .3), 0 6px 16px rgba(0, 0, 0, .6);
}
.rz-pickup__pin::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--rz-amber);
  animation: rz-ping 2.4s var(--rz-ease) infinite;
}
@keyframes rz-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.rz-pickup__map-cta {
  position: absolute;
  z-index: 1;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: var(--rz-amber);
  color: #000;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .8);
  transition: transform .3s var(--rz-ease);
}
.rz-pickup__map-cta::before { content: "directions"; font-family: "Material Icons"; font-weight: 400; font-size: 1.15rem; line-height: 1; }
.rz-pickup__map-link:hover .rz-pickup__map-cta { transform: translateY(-2px); }
.rz-pickup__attribution {
  position: absolute;
  z-index: 1;
  right: .4rem;
  bottom: .3rem;
  padding: .05rem .35rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, .6);
  color: var(--rz-rail);
  font-size: .68rem;
  text-decoration: none;
}
.rz-pickup__attribution:hover { color: #fff; }
.rz-pickup__name { font-size: 1.6rem; margin-bottom: .9rem; }
.rz-pickup__address { font-style: normal; font-size: 1.15rem; margin-bottom: .5rem; }
.rz-pickup__note { color: var(--rz-rail); }
.rz-pickup__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }
.rz-pickup__emergency { margin-top: 1.5rem; color: var(--rz-rail); }
.rz-pickup__emergency a { font-weight: 600; }

/* ---------- Product page ---------- */
.product__left .product-cover, .product__images, .product__cover, .product-cover {
  background: radial-gradient(120% 90% at 50% 15%, #f7f6f2, #d6d4cd);
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
}
.product__left img { mix-blend-mode: multiply; }
.product__name, h1.product__name { font-size: clamp(2.4rem, 3vw + 1rem, 4rem); }
@media (min-width: 992px) {
  .product__right { position: sticky; top: calc(var(--rz-header-h) + 1rem); align-self: start; }
}
.rz-rental {
  margin-block: 1.5rem;
  padding: 1.4rem 1.5rem 1.2rem;
  border-radius: var(--rz-radius-lg);
  background: linear-gradient(135deg, rgba(227, 150, 47, .12), rgba(227, 150, 47, 0) 60%), var(--rz-case);
  border: 1px solid rgba(227, 150, 47, .35);
}
.rz-rental__title { font-size: 1.6rem; margin-bottom: .6rem; }
.rz-rental__list { padding-left: 1.1rem; margin-bottom: .75rem; }
.rz-rental__list li { margin-bottom: .3rem; }
.rz-rental__list li::marker { color: var(--rz-amber-ink); }
.rz-rental__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }
/* Delivery promotion (migrate/delivery-promo.php), at the rental box and before the carrier choice */
.rz-rental__promo,
.rz-rental-period__promo {
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  border-left: 3px solid var(--rz-amber);
  border-radius: 0 var(--rz-radius) var(--rz-radius) 0;
  background: rgba(227, 150, 47, .12);
  color: var(--rz-paper);
}
.rz-rental__promo strong,
.rz-rental-period__promo strong { color: var(--rz-amber-ink); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--rz-case-edge); --bs-accordion-active-bg: transparent; --bs-accordion-active-color: var(--rz-amber-ink); }
.accordion-button { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.35rem; }

/* ---------- Category pages (templates/catalog/_partials/category-header.tpl) ---------- */
.category-header, .block-category { margin-bottom: 2rem; }
.category__description, .category-description { color: rgba(var(--bs-body-color-rgb), .88); max-width: 68ch; }
.rz-cat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem);
}
.rz-cat .page-title-section, .rz-cat h1 { margin-bottom: 1rem; }
.rz-cat__cover {
  justify-self: end;
  width: min(100%, 26rem);
  aspect-ratio: 1;
  border-radius: var(--rz-radius-lg);
  background: radial-gradient(110% 90% at 50% 12%, #faf9f6, #d9d6ce);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06);
  overflow: hidden;
}
.rz-cat__cover img { width: 100%; height: 100%; object-fit: contain; padding: 9%; mix-blend-mode: multiply; }
.rz-cat__subs:empty { display: none; }
@media (min-width: 992px) {
  .rz-cat--with-cover { grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); }
  .rz-cat__subs { grid-column: 1 / -1; }
}
@media (max-width: 991.98px) { .rz-cat__cover { display: none; } }
/* Subcategories as chips; one scrolling row on phones */
.subcategory__list:not(.subcategory__list--with-images) { display: flex; flex-wrap: wrap; gap: .5rem; }
.subcategory__list:not(.subcategory__list--with-images) .subcategory__link {
  display: inline-flex;
  align-items: center;
  padding: .55rem 1rem;
  border: 1px solid var(--rz-case-edge);
  border-radius: 999px;
  background: var(--rz-case);
  color: var(--rz-paper);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .25s, color .25s, background-color .25s;
}
.subcategory__list:not(.subcategory__list--with-images) .subcategory__link:hover,
.subcategory__list:not(.subcategory__list--with-images) .subcategory__link:focus-visible { border-color: var(--rz-amber); color: var(--rz-amber-ink); }
@media (max-width: 767.98px) {
  .subcategory__list:not(.subcategory__list--with-images) {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--bs-gutter-x, .75rem));
    padding: .1rem var(--bs-gutter-x, .75rem) .5rem;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .subcategory__list::-webkit-scrollbar { display: none; }
}
/* Long intro text: shortened on phones (ragaz.js adds the toggle) */
.rz-more--clamped { position: relative; max-height: 9.5rem; overflow: hidden; }
.rz-more--clamped::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4.5rem;
  background: linear-gradient(transparent, var(--bs-body-bg, #000));
  pointer-events: none;
}
.rz-more__toggle {
  margin-top: .5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rz-amber-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.products__selection { align-items: center; margin-bottom: 1.25rem; }
.left-column .block-categories, .left-column .facet, #search_filters {
  background: var(--rz-case);
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  padding: 1rem 1.25rem;
}

/* ---------- CMS pages ---------- */
.page-content--cms { max-width: 46rem; }
.rz-cms { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rz-section) 3rem; }
.rz-cms--wide { display: block; }
.rz-cms--wide .page-content--cms { max-width: none; }
.rz-cms__aside { display: flex; flex-direction: column; gap: 1.5rem; max-width: 30rem; }
.rz-toc { display: none; }
@media (min-width: 1200px) {
  .rz-cms:not(.rz-cms--wide) { grid-template-columns: minmax(0, 46rem) minmax(17rem, 21rem); justify-content: space-between; }
  .rz-cms__aside { position: sticky; top: calc(var(--rz-header-h) + 2rem); align-self: start; }
  .rz-toc:not([hidden]) { display: block; }
}
.rz-toc__title { margin-bottom: .6rem; color: var(--rz-rail); font-size: .9rem; }
.rz-toc__list { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--rz-case-edge); }
.rz-toc__link {
  display: block;
  margin-left: -1px;
  padding: .4rem 0 .4rem 1rem;
  border-left: 2px solid transparent;
  color: var(--rz-rail);
  text-decoration: none;
  line-height: 1.3;
  transition: color .2s, border-color .2s;
}
.rz-toc__link:hover { color: var(--rz-paper); }
.rz-toc__link[aria-current] { border-left-color: var(--rz-amber); color: var(--bs-heading-color); }
#content h2[id] { scroll-margin-top: calc(var(--rz-header-h) + 1.5rem); }
.page-content--cms > p:first-child { font-size: 1.2rem; color: var(--rz-paper); }
/* ---------- Über Uns (ragazinc hub.tpl): the pages as photo tiles, contact as the closing band ---------- */
.rz-hub__lead { max-width: 46rem; margin: 0 0 2rem; font-size: 1.2rem; color: var(--rz-paper); }
.rz-hub {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: var(--rz-section);
}
.rz-hub__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 19rem;
  border-radius: var(--rz-radius-lg);
  overflow: hidden;
  background: var(--rz-case);
  text-decoration: none;
  isolation: isolate;
}
.rz-hub__tile--feature { min-height: 27rem; }
.rz-hub__tile--text { border: 1px solid var(--rz-case-edge); }
.rz-hub__tile:focus-visible { outline: 3px solid var(--rz-amber); outline-offset: 3px; }
.rz-hub__media { position: absolute; inset: 0; z-index: -1; }
.rz-hub__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) brightness(.9);
  transition: transform 1.2s var(--rz-ease), filter .6s;
}
.rz-hub__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .5) 52%, rgba(0, 0, 0, .92) 100%); }
.rz-hub__tile:hover .rz-hub__media img,
.rz-hub__tile:focus-visible .rz-hub__media img { transform: scale(1.06); filter: none; }
.rz-hub__body { display: block; padding: 1.5rem 1.5rem 1.4rem; }
.rz-hub__title { margin: 0 0 .45rem; font-size: clamp(1.85rem, 1.2vw + 1.2rem, 2.4rem); line-height: 1; color: #fff; }
.rz-hub__tile--feature .rz-hub__title { font-size: clamp(2.5rem, 3vw + 1rem, 4.25rem); }
.rz-hub__text { display: block; max-width: 34rem; margin-bottom: .9rem; font-size: .98rem; line-height: 1.5; color: rgba(242, 241, 236, .84); }
.rz-hub__tile--feature .rz-hub__text { font-size: 1.1rem; }
.rz-hub__tile--text .rz-hub__title { color: var(--bs-heading-color); }
.rz-hub__tile--text .rz-hub__text { color: var(--rz-rail); }
.rz-hub__tile--contact { min-height: 14rem; background: var(--rz-amber); transition: background-color .3s; }
.rz-hub__tile--contact:hover { background: var(--rz-amber-hot); }
.rz-hub__tile--contact:focus-visible { outline-color: #fff; }
.rz-hub__tile--contact .rz-hub__title { color: #000; }
.rz-hub__tile--contact .rz-hub__text { color: #2b1b06; }
.rz-hub__tile--contact .rz-hub__more { color: #000; }
.rz-hub__tile--wide .rz-hub__media img { object-position: center 40%; }
@media (min-width: 768px) {
  .rz-hub { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .rz-hub__tile--feature { grid-column: 1 / -1; }
}
/* Two columns: a last tile that would stand alone takes the full row */
@media (min-width: 768px) and (max-width: 991.98px) {
  .rz-hub__tile:nth-child(even):last-of-type { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
  .rz-hub { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(17.5rem, auto); }
  .rz-hub__tile { grid-column: span 2; min-height: 0; }
  .rz-hub__tile--feature { grid-column: span 4; grid-row: span 2; }
  .rz-hub__tile--wide { grid-column: 1 / -1; min-height: 21rem; }
  .rz-hub__tile--wide .rz-hub__body { padding: 2rem 2.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rz-hub__media img { transition: none; }
  .rz-hub__tile:hover .rz-hub__media img { transform: none; }
}

/* ---------- Referenzen (ragazinc references.tpl): the logos are the page ---------- */
.rz-refs__intro, .rz-events__intro { max-width: 60ch; margin-bottom: 1.5rem; font-size: clamp(1.1rem, .4vw + 1rem, 1.3rem); color: var(--rz-paper); }
.rz-filter__count { margin-left: .3rem; font-family: var(--rz-font-text); font-weight: 500; font-size: .85em; opacity: .7; }
.rz-refs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 1.6vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) { .rz-refs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rz-refs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rz-ref { max-width: none; }
.rz-ref[hidden] { display: none; }
.rz-ref__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  background: var(--rz-case);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s, transform .45s var(--rz-ease), box-shadow .45s var(--rz-ease);
}
a.rz-ref__card:hover, a.rz-ref__card:focus-visible {
  border-color: rgba(227, 150, 47, .6);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .95), 0 18px 50px -36px var(--rz-amber-glow);
}
/* Logos are made for white: each sits large on a white plate */
.rz-ref__plate { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 9% 13%; background: #fff; }
.rz-ref__plate img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; transition: transform .6s var(--rz-ease); }
a.rz-ref__card:hover .rz-ref__plate img { transform: scale(1.05); }
.rz-ref__body { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem 1.2rem; }
.rz-ref__name { font-family: var(--rz-font-display); font-weight: 700; font-size: clamp(1.15rem, .6vw + 1rem, 1.4rem); line-height: 1.1; color: var(--bs-heading-color); }
a.rz-ref__card .rz-ref__name::after { content: "↗"; margin-left: .35em; font-family: var(--rz-font-text); font-weight: 400; font-size: .75em; color: var(--rz-rail); transition: color .25s; }
a.rz-ref__card:hover .rz-ref__name::after { color: var(--rz-amber-ink); }
.rz-ref__text { font-size: .9rem; line-height: 1.4; color: var(--rz-rail); }
.rz-refs__suppliers { margin-top: var(--rz-section); }
@media (max-width: 575.98px) {
  .rz-ref__body { padding: .75rem .8rem .9rem; }
  .rz-ref__text { font-size: .82rem; }
}

/* Galerie (ragaz.js initGallery): album chips, albums with their first photos, lightbox */
.rz-gallery__nav {
  position: sticky;
  z-index: 3;
  top: calc(var(--rz-header-h) - 1px);
  display: flex;
  gap: .5rem;
  margin: 0 calc(-1 * var(--bs-gutter-x, .75rem)) 1rem;
  padding: .75rem var(--bs-gutter-x, .75rem);
  overflow-x: auto;
  scrollbar-width: none;
  background: linear-gradient(180deg, var(--bs-body-bg, #000) 70%, transparent);
}
.rz-gallery__nav::-webkit-scrollbar { display: none; }
.rz-gallery__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .45rem;
  padding: .45rem .95rem;
  border: 1px solid var(--rz-case-edge);
  border-radius: 999px;
  background: var(--rz-case);
  color: var(--rz-paper);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.rz-gallery__chip:hover, .rz-gallery__chip:focus-visible { border-color: var(--rz-amber); color: var(--rz-amber-ink); }
.rz-gallery__chip-count { font-size: .8rem; color: var(--rz-rail); }
.rz-gallery__album { margin-block: 1.5rem 3rem; scroll-margin-top: 4rem; } /* + the html scroll-padding (header): clears the chip bar */
.rz-gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin-bottom: 1rem; }
.rz-gallery__title { margin: 0; font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem); }
.rz-gallery__count { color: var(--rz-rail); }
/* The page text is a .rich-text block: its list indent and markers must not reach the photo grid */
.rz-gallery .rz-gallery__grid {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 576px) { .rz-gallery .rz-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .rz-gallery .rz-gallery__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; } }
.rz-gallery__grid li { max-width: none; margin: 0; }
.rz-gallery__grid li::marker { content: none; }
.rz-gallery__grid li[hidden] { display: none; }
.rz-gallery__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--rz-radius);
  overflow: hidden;
  background: var(--rz-case);
  aspect-ratio: 1;
  cursor: zoom-in;
}
.rz-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--rz-ease), filter .3s; }
.rz-gallery__item:hover img, .rz-gallery__item:focus-visible img { transform: scale(1.06); filter: saturate(1.2); }
.rz-gallery__item:focus-visible { outline: 2px solid var(--rz-amber); outline-offset: 2px; }
/* Flyers come in every format: shown whole, portrait tiles */
.rz-gallery__album--flyers .rz-gallery__item { aspect-ratio: 4 / 5; background: var(--rz-case); }
.rz-gallery__album--flyers .rz-gallery__item img { object-fit: contain; }
.rz-gallery__more {
  display: block;
  margin: 1rem auto 0;
  padding: .7rem 1.4rem;
  border: 1px solid var(--rz-case-edge);
  border-radius: 999px;
  background: var(--rz-case);
  color: var(--rz-paper);
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  transition: border-color .2s, color .2s;
}
.rz-gallery__more:hover, .rz-gallery__more:focus-visible { border-color: var(--rz-amber); color: var(--rz-amber-ink); }

/* Overlays (gallery photo, archive story) */
.rz-lightbox, .rz-story {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 3.75rem 1rem 1rem;
  border: 0;
  background: rgba(0, 0, 0, .95);
  color: var(--rz-paper);
}
.rz-lightbox[open], .rz-story[open] { animation: rz-fade .35s var(--rz-ease); }
@keyframes rz-fade { from { opacity: 0; } to { opacity: 1; } }
.rz-lightbox::backdrop, .rz-story::backdrop { background: rgba(0, 0, 0, .8); }
.rz-lightbox__figure { display: grid; place-items: center; height: 100%; margin: 0; }
.rz-lightbox__img { max-width: 100%; max-height: calc(100dvh - 7rem); object-fit: contain; opacity: 0; transition: opacity .25s; }
.rz-lightbox__img.is-loaded { opacity: 1; }
.rz-lightbox__caption { display: flex; justify-content: center; gap: .75rem; margin-top: .75rem; color: var(--rz-rail); text-align: center; }
.rz-lightbox__album { color: var(--rz-paper); font-weight: 600; }
.rz-lightbox__nav, .rz-lightbox__close, .rz-story__close {
  position: absolute;
  border: 0;
  border-radius: 50%;
  background: var(--rz-case);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  transition: background-color .2s, color .2s;
}
.rz-lightbox__nav { top: 50%; transform: translateY(-50%); }
.rz-lightbox__nav--prev { left: .75rem; }
.rz-lightbox__nav--next { right: .75rem; }
.rz-lightbox__close, .rz-story__close { top: .6rem; right: .75rem; }
.rz-lightbox__nav:hover, .rz-lightbox__close:hover, .rz-story__close:hover { background: var(--rz-amber); color: #000; }
.rz-story__body {
  display: grid;
  gap: 2rem;
  max-width: 68rem;
  margin: 0 auto;
  align-items: start;
}
@media (min-width: 900px) { .rz-story__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rz-story__flyer { width: 100%; border-radius: var(--rz-radius-lg); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9); }
.rz-story__text h3:first-child { margin-top: 0; font-size: clamp(2rem, 2vw + 1rem, 3rem); }

/* ---------- Events & Archiv ---------- */
.rz-events__jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2.5rem;
}
.rz-events__jump a, .rz-filter__btn {
  padding: .45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(242, 241, 236, .25);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
  color: var(--rz-paper);
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.rz-events__jump a:hover, .rz-filter__btn:hover { border-color: var(--rz-amber); color: var(--rz-amber-ink); }
.rz-filter__btn[aria-pressed="true"] { background: var(--rz-amber); border-color: var(--rz-amber); color: #000; }
.rz-events__section { margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.rz-events__lead { color: var(--rz-rail); font-size: 1.15rem; }
/* Line-up: the acts as a festival poster, lit like a stage */
.rz-lineup__poster {
  position: relative;
  overflow: hidden;
  padding: clamp(2.25rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4.5rem);
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  background:
    radial-gradient(55% 45% at 12% 0%, rgba(194, 54, 155, .3), transparent 70%),
    radial-gradient(50% 45% at 92% 6%, rgba(59, 91, 255, .24), transparent 70%),
    radial-gradient(70% 50% at 50% 112%, rgba(227, 150, 47, .2), transparent 70%),
    var(--rz-ink);
  text-align: center;
}
.rz-lineup__tier + .rz-lineup__tier { margin-top: clamp(2rem, 4vw, 3.25rem); padding-top: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid rgba(255, 255, 255, .08); }
.rz-lineup__label { margin: 0 0 1rem; font-family: var(--rz-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; color: var(--rz-amber-ink); }
.rz-lineup__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: .15em;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-family: var(--rz-font-display);
  line-height: 1.15;
}
/* Spacing is each name's own margin; the dot sits in that space, out of the flow, so hiding it at a
   line end (ragaz.js) never changes the wrapping */
.rz-lineup__names li { position: relative; max-width: none; margin: 0 .55em; }
.rz-lineup__names li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -.67em;
  width: .24em;
  height: .24em;
  margin-top: -.1em;
  border-radius: 50%;
  background: var(--rz-amber);
}
.rz-lineup__names li.is-line-end::after { display: none; }
.rz-lineup__tier--residents .rz-lineup__names { font-size: clamp(2.4rem, 6vw, 5.5rem); font-weight: 800; line-height: 1; color: #fff; }
/* The two founders on the first line, the other residents always on their own line below */
.rz-lineup__tier--residents li:nth-child(n + 3) { order: 2; font-size: .42em; font-weight: 700; color: var(--rz-paper); }
.rz-lineup__tier--residents .rz-lineup__names::after { content: ""; order: 1; flex-basis: 100%; height: .12em; }
.rz-lineup__tier--residents li:nth-child(2)::after { display: none; }
.rz-lineup__tier--international .rz-lineup__names { font-size: clamp(1.25rem, 2.2vw, 2.1rem); font-weight: 700; color: var(--rz-paper); }
.rz-lineup__tier--national .rz-lineup__names { font-size: clamp(1rem, 1.2vw, 1.3rem); font-weight: 600; color: var(--rz-rail); }
.rz-lineup__story { max-width: 62ch; margin: 1.75rem auto 0; text-align: center; font-size: 1.05rem; color: var(--rz-rail); }
/* Locations: venue chips; the ones with a website link out */
.rz-venues { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.rz-venues li { max-width: none; }
.rz-venue {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1rem;
  border: 1px solid var(--rz-case-edge);
  border-radius: 999px;
  background: var(--rz-case);
  font-weight: 500;
  color: var(--rz-rail);
  text-decoration: none;
}
.rz-venue--link { color: var(--rz-paper); transition: border-color .25s, color .25s; }
.rz-venue--link::after { content: "↗"; font-size: .85em; color: var(--rz-amber-ink); }
.rz-venue--link:hover, .rz-venue--link:focus-visible { border-color: var(--rz-amber); color: var(--rz-amber-ink); }
.rz-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.25rem 1.75rem; }
.rz-archive {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.rz-archive__item { max-width: none; }
.rz-archive__item[hidden] { display: none; }
.rz-archive__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
  background: none;
  color: inherit;
  cursor: pointer;
}
.rz-archive__media {
  display: block;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border-radius: var(--rz-radius-lg);
  background: var(--rz-case);
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .9);
}
.rz-archive__media { position: relative; }
.rz-archive__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--rz-ease), filter .3s; }
.rz-archive__cue {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(8px);
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s var(--rz-ease);
}
.rz-archive__open:hover .rz-archive__cue, .rz-archive__open:focus-visible .rz-archive__cue { opacity: 1; transform: none; }
@media (hover: none) { .rz-archive__cue { display: none; } }
.rz-archive__open:hover .rz-archive__media img,
.rz-archive__open:focus-visible .rz-archive__media img { transform: scale(1.06) rotate(-.6deg); filter: saturate(1.2); }
.rz-archive__meta { display: grid; gap: .2rem; padding: .85rem .1rem 0; }
.rz-archive__year { font-family: var(--rz-font-display); font-weight: 700; color: var(--rz-amber-ink); }
.rz-archive__title { font-weight: 600; line-height: 1.3; }
.rz-events__gallery {
  display: grid;
  gap: .4rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--rz-radius-lg);
  text-decoration: none;
  color: var(--rz-paper);
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(194, 54, 155, .35), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(227, 150, 47, .3), transparent 60%),
    var(--rz-case);
  border: 1px solid var(--rz-case-edge);
}
.rz-events__gallery-label { font-family: var(--rz-font-display); font-weight: 800; font-size: clamp(2.5rem, 4vw + 1rem, 4.5rem); color: #fff; line-height: 1; }
.rz-events__gallery:hover .rz-events__gallery-label { color: var(--rz-amber-ink); }

/* Contact and stores: details open, no empty opening-hours table (as in the legacy theme) */
.rz-contact { margin-bottom: 1rem; }
.rz-contact .footer-block__title, .rz-contact [data-bs-toggle="collapse"] { display: none; }
.rz-contact .collapse { display: block !important; }
.rz-contact .ps-contactinfo__infos { font-style: normal; font-size: 1.15rem; }
.page-content--stores .store__additional-infos { display: block !important; }
.page-content--stores .store__toggle,
.page-content--stores .store__opening-times,
.page-content--stores .accordion-item.border-0:has(.store__opening-times) { display: none !important; }
.page-content--stores .store { border-radius: var(--rz-radius-lg); background: var(--rz-case); border-color: var(--rz-case-edge); }
.page-content--stores .store__name { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.5rem; color: var(--bs-heading-color); }

/* ---------- Contact band + footer ---------- */
.rz-cta {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 8rem);
  background:
    radial-gradient(50% 120% at 85% 10%, rgba(227, 150, 47, .28), transparent 60%),
    radial-gradient(40% 100% at 10% 100%, rgba(194, 54, 155, .22), transparent 60%),
    var(--rz-ink);
  border-top: 1px solid var(--rz-case-edge);
}
.rz-cta__title { font-size: clamp(3rem, 7vw + .5rem, 7.5rem); max-width: 14ch; line-height: .9; margin-bottom: 1.25rem; }
.rz-cta__text { font-size: clamp(1.1rem, .5vw + 1rem, 1.35rem); color: rgba(242, 241, 236, .85); max-width: 50ch; }
.rz-cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.footer {
  background: var(--rz-ink);
  color: var(--rz-rail);
}
.footer__before { border-top: 1px solid var(--rz-case-edge); }
.footer a { color: var(--rz-paper); text-decoration: none; }
.footer a:hover { color: var(--rz-amber-ink); }
.footer .footer-block__title, .footer .h4, .footer h4 { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.35rem; color: #fff; }
.copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.25rem;
  padding-block: 1.5rem;
  color: var(--rz-rail);
  font-size: .9375rem;
  border-top: 1px solid var(--rz-case-edge);
}
.copyright a { color: var(--rz-rail); }

/* ---------- Scroll reveals (classes set by ragaz.js; nothing hidden without JS) ---------- */
.rz-reveal { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .9s var(--rz-ease), transform 1s var(--rz-ease); transition-delay: calc(var(--rz-i, 0) * 70ms); }
.rz-reveal.rz-in { opacity: 1; transform: none; }
/* Rack units slide in from the side, like gear going into the rack */
/* Rack units slide in from the right, one after the other, as if pushed into the rack */
.rz-rack__unit.rz-reveal {
  transform: translate3d(22%, 0, 0);
  transition: opacity .7s var(--rz-ease), transform 1s cubic-bezier(.16, .84, .24, 1), box-shadow .4s var(--rz-ease);
  transition-delay: calc(var(--rz-i, 0) * 110ms);
}
.rz-rack__unit.rz-reveal.rz-in { transform: none; }
/* Titles rise in with a cue line drawing underneath (no clip-path: a fully clipped element never
   counts as visible for IntersectionObserver, so it would never be revealed) */
.rz-section-title.rz-reveal, .section-title.rz-reveal { transform: translate3d(0, 18px, 0); }
.rz-section-title, .ps-featuredproducts .section-title { position: relative; padding-bottom: .9rem; }
.rz-section-title::after, .ps-featuredproducts .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 4.5rem;
  height: 3px;
  background: var(--rz-amber);
  transform-origin: left;
  transition: transform 1s var(--rz-ease) .3s;
}
.rz-section-title.rz-reveal::after, .section-title.rz-reveal::after { transform: scaleX(0); }
.rz-section-title.rz-reveal.rz-in::after, .section-title.rz-reveal.rz-in::after { transform: scaleX(1); }

/* ---------- Motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .rz-hero__content > *, .rz-hero__facts { opacity: 1; transform: none; }
  .rz-hero__beam { opacity: .45; }
  .rz-marquee__track { flex-wrap: wrap; width: auto; }
  .rz-marquee__list[aria-hidden="true"] { display: none; }
}

/* ---------- Contact page: form + details side by side ---------- */
.rz-contact-page { display: grid; gap: 2.5rem; margin-bottom: 2rem; }
@media (min-width: 992px) { .rz-contact-page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.rz-contact-page__form .contact-form {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--rz-radius-lg);
  background: var(--rz-case);
  border: 1px solid var(--rz-case-edge);
}
.rz-contact-page__info { padding-top: .5rem; }

/* ---------- Preview bar (RAGAZ_PREVIEW, only on neu.ragaz-inc.ch) ---------- */
.rz-preview-bar {
  padding: .45rem 1rem;
  background: var(--rz-amber);
  color: #000;
  font-weight: 600;
  font-size: .9375rem;
  text-align: center;
}

/* ---------- Mobile menu ---------- */
.menu--mobile .menu__link {
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--rz-paper);
}
.menu--mobile .menu__title { font-family: var(--rz-font-display); font-weight: 800; font-size: 2rem; color: var(--rz-amber-ink); }
.menu--mobile .menu__toggle-child { color: var(--rz-amber-ink); }

/* Contact page: contactform shows its messages in the form; the page-wide copy of them goes */
body#contact:has(.contact-form .alert) #notifications { display: none; }

/* ---------- Contact form captcha (ALTCHA widget, contactform.tpl) ---------- */
.rz-captcha { margin-block: .5rem 1.25rem; }
altcha-widget {
  --altcha-max-width: 100%;
  --altcha-border-width: 1px;
  --altcha-border-radius: var(--bs-border-radius, .375rem);
  --altcha-color-base: var(--rz-ink);
  --altcha-color-border: var(--rz-case-edge);
  --altcha-color-border-focus: var(--rz-amber);
  --altcha-color-text: var(--rz-paper);
  --altcha-color-error-text: #ff6b6b;
  --altcha-color-active: var(--rz-amber);
  --altcha-color-footer-bg: var(--rz-case);
  display: block;
}

/* ---------- Quantity stepper (components/qty-input.tpl): one pill, never wrapped ---------- */
.quantity-button__group.input-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: auto;
  height: 3rem;
  overflow: hidden;
  border: 1px solid var(--rz-case-edge);
  border-radius: 999px;
  background: var(--rz-ink);
  transition: border-color .2s, box-shadow .2s;
}
.quantity-button__group .btn {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  color: var(--rz-paper);
  transition: background-color .2s, color .2s;
}
.quantity-button__group .btn:hover { background: rgba(227, 150, 47, .14); color: var(--rz-amber-ink); }
.quantity-button__group .btn .material-icons { font-size: 1.2rem; }
.quantity-button__group .form-control {
  flex: 0 0 2.8rem;
  width: 2.8rem;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0 !important;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: var(--rz-font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bs-heading-color);
}
.quantity-button__group .form-control:focus { box-shadow: none; background: transparent; }
.quantity-button__group:focus-within { border-color: var(--rz-amber); box-shadow: 0 0 0 3px var(--rz-amber-glow); }

/* ---------- Product: duration buttons with their price (ragaz.js) ---------- */
.product-variant__radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.product-variant__radio .btn.rz-duration {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  min-width: 6.4rem;
  padding: .55rem .85rem;
  border-color: var(--rz-case-edge);
  border-radius: 10px;
  background: var(--rz-case);
  color: var(--rz-paper);
  text-align: left;
  line-height: 1.15;
}
.rz-duration__price { font-family: var(--rz-font-text); font-weight: 400; font-size: .8rem; color: var(--rz-rail); }
.product-variant__radio .btn.rz-duration:hover { border-color: rgba(227, 150, 47, .6); }
.product-variant__radio .btn-check:checked + .btn.rz-duration {
  border-color: var(--rz-amber);
  background: rgba(227, 150, 47, .12);
  color: var(--bs-heading-color);
  box-shadow: inset 0 0 0 1px var(--rz-amber);
}
.product-variant__radio .btn-check:checked + .btn.rz-duration .rz-duration__price { color: var(--rz-amber-hot); }
.product-variant__radio .btn-check:focus-visible + .btn.rz-duration { outline: 2px solid var(--rz-amber); outline-offset: 2px; }
@media (max-width: 575.98px) {
  .product-variant__radios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-variant__radio .btn.rz-duration { width: 100%; min-width: 0; }
}

/* ---------- Product: buy bar on phones and tablets (ragaz.js) ---------- */
.rz-buybar {
  position: fixed;
  z-index: 1030;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem max(1rem, env(safe-area-inset-left)) calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(10, 10, 11, .92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--rz-case-edge);
  transform: translateY(110%);
  transition: transform .35s var(--rz-ease);
}
.rz-buybar.is-visible { transform: none; }
.rz-buybar__info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rz-buybar__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .85rem; color: var(--rz-rail); }
.rz-buybar__price { font-family: var(--rz-font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.rz-buybar__button { flex: none; }
@media (min-width: 992px) { .rz-buybar { display: none; } }
@media (prefers-reduced-motion: reduce) { .rz-buybar { transition: none; } }

/* ---------- Product: description beside the advice card ---------- */
.product__bottom { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(2rem, 4vw, 4rem); margin-top: var(--rz-section); }
.product__bottom-left, .product__bottom-right { width: auto; max-width: none; padding: 0; }
@media (min-width: 992px) {
  .product__bottom { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); align-items: start; }
  .product__bottom-right { position: sticky; top: calc(var(--rz-header-h) + 1.5rem); }
}
.product__description { max-width: 72ch; }
.product__description table { width: 100%; max-width: none; }
.rz-aside {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rz-case-edge);
  border-radius: var(--rz-radius-lg);
  background: radial-gradient(120% 80% at 100% 0%, rgba(227, 150, 47, .14), transparent 60%), var(--rz-case);
}
.rz-aside__title { font-size: 1.6rem; margin-bottom: .5rem; }
.rz-aside__text { color: var(--rz-rail); }
.rz-aside__actions { display: flex; flex-direction: column; gap: .6rem; margin-block: 1.1rem; }
.rz-aside__actions .btn { width: 100%; }
.rz-aside__links { display: flex; flex-direction: column; gap: .35rem; margin: 0; }

/* ---------- Product: rental availability note (templates/catalog/_partials/product-add-to-cart.tpl) ---------- */
.rz-availability-note { color: var(--rz-rail); }
.rz-availability-note .product__availability-icon { color: var(--rz-amber-ink); }
/* Same note in the cart lines (no template block there): info icon instead of the warning triangle.
   Bootstrap's layered .text-warning !important outranks unlayered !important, so its colour variable
   is changed instead */
.product-line__item-availability-message.text-warning {
  --bs-warning-rgb: 169, 174, 182;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.product-line__item-availability-message.text-warning .material-icons { width: auto; font-size: 0; }
.product-line__item-availability-message.text-warning .material-icons::before { content: "info"; font-size: 1.05rem; color: var(--rz-amber-ink); }
/* Bootstrap's .bg-light stays white in dark mode (the "Kundenkonto" box after a guest order):
   its colour variable is changed, as the layered !important can't be overridden */
.bg-light { --bs-light-rgb: 24, 25, 28; border: 1px solid var(--rz-case-edge); }
/* Order confirmation: the headline sits in the success box, not page-sized */
body#order-confirmation h1 { font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem); }
/* Checkout: no marketing band between the steps and the legal links */
body#checkout .rz-cta { display: none; }

/* ---------- Checkout: rental period ---------- */
.rz-rental-period {
  margin-bottom: 1.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: var(--rz-radius-lg);
  border: 1px solid rgba(227, 150, 47, .45);
  background: linear-gradient(135deg, rgba(227, 150, 47, .12), rgba(227, 150, 47, 0) 60%), var(--rz-case);
}
.rz-rental-period__title { float: left; width: 100%; margin-bottom: .4rem; padding: 0; font-family: var(--rz-font-display); font-weight: 800; font-size: 1.6rem; color: var(--bs-heading-color); }
.rz-rental-period__title + * { clear: left; }
.rz-rental-period__hint { max-width: 62ch; color: var(--rz-rail); }
.rz-rental-period__fields { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); align-items: start; }
.rz-rental-period__field { display: grid; gap: .35rem; font-weight: 600; }
.rz-rental-period input[type="date"] { color-scheme: dark; }
/* Return: calculated, not an input — shown as a read-out */
.rz-rental-period__result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem;
  min-height: calc(1.5em + .75rem + 2px);
  padding: .375rem .75rem;
  border: 1px dashed var(--rz-case-edge);
  border-radius: var(--bs-border-radius, .375rem);
  background: rgba(0, 0, 0, .25);
  font-weight: 400;
  color: var(--rz-rail);
}
.rz-rental-period__result strong { font-weight: 700; color: var(--bs-heading-color); }
.rz-rental-period__after { color: var(--rz-rail); }
.rz-rental-period__returns { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.rz-rental-period__lines { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; font-size: .9rem; }
.rz-rental-period__lines li { padding: .3rem .75rem; border: 1px solid var(--rz-case-edge); border-radius: 999px; background: var(--rz-ink); color: var(--rz-rail); }
.rz-rental-period__duration { color: var(--rz-amber-ink); font-weight: 600; }

/* ---------- Page transitions (View Transitions API; browsers without it navigate as before) ----------
 * Pages cross-fade; the photo of the product card that was opened morphs into the product page
 * cover (ragaz.js names the clicked card's image rz-product). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
::view-transition-group(rz-product) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .7, .1, 1); }
.product__carousel .carousel-item.active img { view-transition-name: rz-product; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- Light mode details (tokens at the top) ---------- */
.rz-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}
.rz-theme-toggle .material-icons { font-size: 1.25rem; }
.rz-theme-toggle:hover { color: var(--rz-amber-ink); }
.rz-theme-toggle:focus-visible { outline: 2px solid var(--rz-amber); outline-offset: 3px; border-radius: var(--rz-radius); }
.header-top__right .rz-theme-toggle { margin-right: 1.5rem; }
:root[data-rz-theme="light"] .rz-rental-period input[type="date"] { color-scheme: light; }
/* The header glass over a light page would turn grey: nearly solid black instead */
:root[data-rz-theme="light"] .header::before { background: rgba(8, 8, 9, .96); }
:root[data-rz-theme="light"] .product-variant__radio .btn-check:checked + .btn.rz-duration .rz-duration__price { color: var(--rz-amber-ink); }
/* The map picture without the dark filter; the brand logos (white files) turn black */
:root[data-rz-theme="light"] .rz-pickup__map img { filter: saturate(.9); }
:root[data-rz-theme="light"] .rz-pickup__map-link:hover img,
:root[data-rz-theme="light"] .rz-pickup__map-link:focus-visible img { filter: none; }
:root[data-rz-theme="light"] .rz-marquee img { filter: brightness(0); opacity: .78; }
/* The Events page keeps its stage look as one dark panel */
:root[data-rz-theme="light"] .rz-events { padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--rz-radius-lg); background: var(--bs-body-bg); color: var(--bs-body-color); }