/* =====================================================================
   Responsive behaviour — target widths 1440 / 1280 / 1024 / 768 / 390 / 375
   (+ 320 reflow check, WCAG 1.4.10). Bootstrap tiers: lg 992, xl 1200.
   Layouts restructure — they are not just scaled down.
   ===================================================================== */

/* ≥1400: wide desktop — more breathing room */
@media (min-width: 1400px) {
  .rp-main { padding-inline: var(--rp-space-7); }
  .rp-bk-layout { grid-template-columns: minmax(0, 1fr) 24rem; }
}

/* 992–1199: small desktop / 1024 tablet landscape */
@media (max-width: 1199.98px) {
  .rp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-detail { grid-template-columns: minmax(0, 1fr) 17rem; }
}

/* <992: tablet portrait & phones — sidebar becomes off-canvas, summary moves to a bottom bar */
@media (max-width: 991.98px) {
  .rp-topbar { padding-inline: var(--rp-space-4); gap: var(--rp-space-2); }
  .rp-main { padding: var(--rp-space-5) var(--rp-space-4) var(--rp-space-7); }

  /* P7: the aside (status, history, payment) follows the main column in the DOM, and now on screen
     too — it used to jump above it, which made the visual order differ from the reading and focus
     order (WCAG 1.3.2 / 2.4.3, UI spec 8.1 rule 5). */
  .rp-detail { grid-template-columns: 1fr; }

  .rp-auth { grid-template-columns: 1fr; }
  .rp-auth__aside { display: none; }
  /* Admin sign-in without its navy panel: a slim navy-to-brand rule along the top keeps the
     platform team's screens recognisable at a glance. */
  .rp-auth--admin { position: relative; }
  .rp-auth--admin::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: 1;
    height: 4px;
    background: linear-gradient(90deg, #0a1534, var(--rp-brand-600));
  }

  .rp-bk-layout { grid-template-columns: 1fr; }
  .rp-summary { position: static; }
  .rp-bk-layout > .rp-summary-col { display: none; }
  .rp-selection-bar { display: flex; }
  .rp-bk-main { padding-bottom: var(--rp-space-5); }
  /* Keep focused/scrolled-to controls clear of the sticky selection bar (WCAG 2.4.11). */
  :root:has(.rp-selection-bar:not([hidden])) { scroll-padding-bottom: 6rem; }
}

/* <768: phones — tables become record cards, forms go single column */
@media (max-width: 767.98px) {
  /* A phone top bar has no room for the lockup beside the menu button, the language switcher and
     the account menu, so the portal label comes back as text in its place. */
  .rp-topbar__logo { display: none; }
  .rp-topbar__title { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  /* The authentication header carries the lockup, a portal label and the language switcher on one
     row. A phone has no room for all three, so the symbol stands in for the full lockup there. */
  .rp-auth__top .rp-brand__mark--venuza { width: 2.5rem; }
  .rp-auth__top .rp-brand__mark--venuza::before { background-image: url("/assets/brand/mark.png"); }
  /* The symbol has no wordmark, so the name comes back as text beside it. */
  .rp-brand:has(.rp-auth__top .rp-brand__mark--venuza) .rp-brand__title,
  .rp-auth__top .rp-brand .rp-brand__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  /* Vendor sign-in: the symbol, the name and the portal label stack as on the other auth pages. */
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top { margin-bottom: var(--rp-space-6); }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-brand { gap: var(--rp-space-3); }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-brand__mark--venuza { height: 2.5rem; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-brand__sub { max-width: none; padding-left: 0; border-left: 0; font-size: var(--rp-fs-sm); font-weight: var(--rp-fw-medium); color: var(--rp-text-muted); }
  /* Phones: the form starts at the top instead of floating mid-screen, so nothing jumps when the
     on-screen keyboard opens and the first field is never pushed below it. */
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__panel { justify-content: flex-start; padding-top: var(--rp-space-5); padding-bottom: var(--rp-space-6); }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form { margin-top: 0; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form h1 { font-size: 1.625rem; }
  /* One row for the symbol, the name and the switcher, down to 341 px and in every language: the
     portal label wraps inside its own column ("Plattform-/Administration") instead of pushing the
     switcher onto a line of its own. */
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top { flex-wrap: nowrap; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top .rp-brand { min-width: 0; flex: 0 1 auto; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top .rp-brand__name { min-width: 0; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top [data-language-switcher] { flex: none; margin-right: -0.5rem; }
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top .rp-langswitch__toggle { padding-inline: 0.5rem; }
  /* Result buttons (sign in again, back to log in, resend) go full width, like the form's. */
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__form .rp-state .btn,
  :is(.rp-auth--vendor, .rp-auth--admin) #verify-root .rp-cluster > .btn { width: 100%; }

  /* minmax(0, …): a plain 1fr track grows to its widest table (Reports, de/es at 320 px: UI-004). */
  .rp-grid--2,
  .rp-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .rp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rp-page-header { align-items: stretch; margin-bottom: var(--rp-space-5); }
  .rp-page-header__actions { width: 100%; }
  .rp-page-header__actions > .btn-primary { flex: 1 1 auto; }

  .rp-toolbar { padding: var(--rp-space-4); }
  .rp-card__header,
  .rp-card__body { padding-inline: var(--rp-space-4); }
  .rp-card { padding: var(--rp-space-4); }
  .rp-card.rp-card--flush { padding: 0; }
  .rp-dl { grid-template-columns: 1fr; gap: var(--rp-space-1); }
  .rp-dl dd { margin-bottom: var(--rp-space-3); }

  .rp-event-card { padding: var(--rp-space-4); }
  .rp-step { padding: var(--rp-space-4) var(--rp-space-4) var(--rp-space-5); }
  .rp-step__actions { flex-direction: column-reverse; }
  .rp-step__actions .btn { width: 100%; }
  .rp-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-slot__time { font-size: var(--rp-fs-base); }
  .rp-cal { max-width: none; }
  .rp-result__card { padding: var(--rp-space-6) var(--rp-space-4); }

  .rp-toast-region { right: var(--rp-space-3); left: var(--rp-space-3); bottom: calc(var(--rp-space-3) + 4.5rem); width: auto; }
  .rp-bars li { grid-template-columns: 1fr auto; }
  .rp-bars li .rp-meter__bar { grid-column: 1 / -1; order: 3; }
  .rp-codes { grid-template-columns: 1fr; }
}

/* The hero columns stack below 1200, so the text would land over the photographic half of the
   backdrop artwork. The artwork is dropped there — this file loads last, so it wins over the
   background declared in website.css. */
@media (max-width: 1199.98px) {
  .rp-hero { background-image: none; }
}

/* ≤400: 390 / 375 / 320 */
@media (max-width: 400px) {
  .rp-grid--4 { grid-template-columns: 1fr; }
  .rp-event-facts { flex-direction: column; }
  .rp-bk-vendor__name { max-width: 11rem; }
  .rp-stepper .form-control { width: 4rem; }
  .rp-tracker { grid-template-columns: 1fr; }
  .rp-auth__panel { padding: var(--rp-space-6) var(--rp-space-4); }
}

@media (max-width: 340px) {
  .rp-slots { grid-template-columns: 1fr; }
  /* 320 px (reflow): the switcher may finally move under the brand. */
  :is(.rp-auth--vendor, .rp-auth--admin) .rp-auth__top { flex-wrap: wrap; }
}

/* Narrow portal top bar: the language switcher keeps its globe and drops the language name, which
   stays in the button's accessible name. With the menu button, the portal title and the user menu
   already on the row, the full name is what pushes the bar past the viewport. */
@media (max-width: 575.98px) {
  .rp-topbar .rp-langswitch__current,
  .rp-topbar .rp-langswitch__caret { display: none; }
}

/* ---------------------------------------------------------------------
   Backend P4 responsive-first audit (360 / 390 / 768 / 1024 / 1280).
   --------------------------------------------------------------------- */

/* Target size (WCAG 2.5.8): a stand-alone text link — not one inside a sentence, which the
   criterion exempts — is at least 24 px tall. The box grows; the text does not move. */
.rp-target {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  min-height: 1.5rem;
}
/* The development launcher's lists of links (index.html) follow the same rule. */
.rp-bk-main li > a:only-child { display: inline-block; padding-block: 0.125rem; min-height: 1.5rem; }

/* 360 px: the website header holds the logo, the language switcher and the menu button on one row;
   a 360-px phone was 8 px short, which scrolled the whole page sideways (WCAG 1.4.10). */
@media (max-width: 399.98px) {
  .rp-site-header__inner { gap: var(--rp-space-2); }
  .rp-site-header .rp-brand__mark--venuza { width: min(11rem, 34vw); }
  /* 320 px: "Deutsch"/"Español" still pushed the menu button 5–13 px off screen (UI-001). */
  .rp-site-header__mobile .rp-langswitch__toggle { padding-inline: var(--rp-space-2); }
  /* The admin top bar (menu, "Admin" tag, portal name, language, account) was 11 px too wide. */
  .rp-topbar { gap: var(--rp-space-2); }
  .rp-topbar__title { min-width: 0; overflow-wrap: anywhere; }
  /* The sign-in header (symbol + portal name + language switcher) was 8 px too wide in German
     ("Anbieterportal" + "Deutsch"): the switcher may move under the name instead. */
  .rp-auth__top { flex-wrap: wrap; row-gap: var(--rp-space-2); }
  .rp-auth__form { min-width: 0; }
}

/* Record cards (tables below 768 px): a long unbroken value — a key, a list of placeholders, an
   e-mail address — wraps inside its card instead of widening the page. */
.rp-record__meta { grid-template-columns: auto minmax(0, 1fr); }
.rp-record__meta dd { min-width: 0; overflow-wrap: anywhere; }
/* Backend P5: a masked e-mail as the card title beside a long status ("Waiting for second approval"),
   or a badge among the details, was 27 px too wide at 360 px: the title and the badge wrap instead. */
.rp-record__title { min-width: 0; overflow-wrap: anywhere; }
.rp-record .rp-status { white-space: normal; max-width: 100%; }

/* =====================================================================
   P7 portal design — responsive behaviour of the signed-in portals
   (360 / 390 / 768 / 1024 / 1280 / 1440 and phone landscape). Scoped to
   `.rp-portal`, so it can follow the portal design layer's specificity.
   ===================================================================== */

/* Desktop: the step actions of the event wizard put Back on the left and Continue on the right. */
.rp-portal .rp-step__actions.rp-form-actions > span:empty { flex: 1 1 auto; }

/* <992: tablets and phones — off-canvas navigation, tighter gutters */
@media (max-width: 991.98px) {
  .rp-portal .rp-card { padding: var(--rp-space-5); }
  .rp-portal .rp-card.rp-card--flush { padding: 0; }
  .rp-portal :is(.rp-card__header, .rp-card__body, .rp-card__footer, .rp-toolbar, .rp-pagination-bar) { padding-inline: var(--rp-space-5); }
  .rp-portal .rp-chips { padding-inline: var(--rp-space-5); }
  .rp-portal .rp-card--flush .table > :not(caption) > * > :first-child { padding-left: var(--rp-space-5); }
  .rp-portal .rp-card--flush .table > :not(caption) > * > :last-child { padding-right: var(--rp-space-5); }
  .rp-portal .rp-settings__nav .nav { box-shadow: none; }
}

/* <768: phones */
@media (max-width: 767.98px) {
  .rp-portal { --rp-header-h: 3.5rem; }
  .rp-topbar__title { font-size: 0.9375rem; font-weight: var(--rp-fw-bold); line-height: 1.2; color: var(--rp-slate-900); min-width: 0; }
  /* Touch layouts: the menu button, the language switcher and the account menu are 44 px targets. */
  .rp-topbar > .btn-icon { width: var(--rp-target-touch); min-width: var(--rp-target-touch); min-height: var(--rp-target-touch); margin-left: -0.375rem; }
  .rp-topbar .rp-langswitch__toggle { min-height: var(--rp-target-touch); min-width: var(--rp-target-touch); --bs-btn-padding-x: 0.625rem; box-shadow: none; }
  .rp-usermenu { min-height: var(--rp-target-touch); padding-right: 0.5rem; box-shadow: none; }

  .rp-portal .rp-page-header { gap: var(--rp-space-4); }
  .rp-portal .rp-page-header__actions:empty { display: none; }
  .rp-portal .rp-page-header__actions > .btn { flex: 1 1 auto; min-height: var(--rp-target-touch); }

  .rp-portal .rp-card { padding: var(--rp-space-4); border-radius: 0.875rem; }
  .rp-portal .rp-card.rp-card--flush { padding: 0; }
  .rp-portal :is(.rp-card__header, .rp-card__body, .rp-card__footer, .rp-toolbar, .rp-pagination-bar) { padding-inline: var(--rp-space-4); }
  .rp-portal .rp-card__footer { border-radius: 0 0 0.875rem 0.875rem; }
  .rp-portal .rp-chips { padding-inline: var(--rp-space-4); }
  .rp-portal .rp-stat { padding: var(--rp-space-4); }
  .rp-portal .rp-stat__icon { width: 2.25rem; height: 2.25rem; }

  /* Details read label-over-value, with the hairline under each pair rather than inside it. */
  .rp-portal .rp-dl:not(.rp-dl--stacked) > dt { border-bottom: 0; padding-bottom: 0; }
  .rp-portal .rp-dl:not(.rp-dl--stacked) > dd { margin-bottom: 0; padding-top: 0.125rem; }

  /* Filters: one field per row, Apply / Clear side by side at full width. */
  .rp-portal .rp-filters-toggle { width: calc(100% - 2 * var(--rp-space-4)); min-height: var(--rp-target-touch); }
  .rp-portal .rp-toolbar .rp-field { flex-basis: 100%; }
  .rp-portal .rp-toolbar > .rp-cluster { width: 100%; }
  .rp-portal .rp-toolbar > .rp-cluster > .btn { flex: 1 1 0; min-height: var(--rp-target-touch); }
  .rp-portal .rp-pagination-bar { justify-content: center; text-align: center; }
  .rp-portal .rp-pagination-bar .page-link { min-width: var(--rp-target-touch); min-height: var(--rp-target-touch); }

  .rp-portal .rp-segmented { display: flex; width: 100%; }
  .rp-portal .rp-segmented > .btn { flex: 1 1 0; min-height: var(--rp-target-touch); }
  .rp-portal .rp-wizard-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-portal .rp-action-bar > .btn { flex: 1 1 calc(50% - var(--rp-space-2)); min-height: var(--rp-target-touch); }
  /* Settings sections wrap onto a second row instead of hiding behind a sideways scroll. */
  .rp-portal .rp-settings__nav .nav { padding: 0.25rem; flex-wrap: wrap; overflow: visible; }
  .rp-portal .rp-settings__nav .nav-link { flex: 1 1 auto; justify-content: center; }
  .rp-portal .rp-entity-card .rp-cluster > .btn { flex: 1 1 auto; min-height: var(--rp-target-touch); }

  /* Save / Continue stay in reach while a long form scrolls: the action row sticks to the bottom
     of the screen inside its form (UI spec 8.3), never taller than 20 % of the viewport, and the
     page keeps focused fields clear of it (WCAG 2.4.11). */
  /* Sticky only once the portal shell has rendered (the page script is running): before that the
     row stays where the markup puts it, so nothing can submit the form natively ahead of the script. */
  .rp-portal:has(.rp-topbar) .rp-form-actions { position: sticky; }
  .rp-portal .rp-form-actions {
    bottom: 0;
    z-index: 5;
    margin-inline: calc(-1 * var(--rp-space-4));
    padding: var(--rp-space-3) var(--rp-space-4) calc(var(--rp-space-3) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--rp-slate-200);
    box-shadow: 0 -10px 24px -16px rgba(15, 23, 42, 0.35);
  }
  .rp-portal .rp-form-actions > .btn { flex: 1 1 0; min-height: var(--rp-target-touch); }
  .rp-portal .rp-card > .rp-form-actions { margin-bottom: calc(-1 * var(--rp-space-4)); border-radius: 0 0 0.875rem 0.875rem; }
  .rp-portal .rp-step__actions.rp-form-actions { margin-top: var(--rp-space-5); padding-top: var(--rp-space-3); }
  .rp-portal .rp-step__actions.rp-form-actions > span:empty { display: none; }
  .rp-portal .rp-step__actions.rp-form-actions > .btn { flex: none; }
  :root:has(.rp-portal .rp-form-actions) { scroll-padding-bottom: 9rem; }

  .rp-portal .rp-onboard__actions { flex-direction: column-reverse; align-items: stretch; }
  .rp-portal .rp-onboard__forward { margin-left: 0; flex-direction: column-reverse; }
  .rp-portal .rp-onboard__actions .btn { width: 100%; min-height: var(--rp-target-touch); }
}

/* <576: the top bar holds the menu button, (admin) the "Admin" tag, the portal name, the language
   switcher and the account menu on one row down to 320 px in every language. The account menu
   becomes the avatar alone (its name stays in the button's accessible name and in the menu), and
   the portal name is the one item that wraps ("Plattform-/Administration"). */
@media (max-width: 575.98px) {
  .rp-topbar__title { flex: 1 1 auto; overflow-wrap: anywhere; }
  .rp-topbar__actions { flex: none; gap: var(--rp-space-1); }
  .rp-usermenu { width: var(--rp-target-touch); min-width: var(--rp-target-touch); padding: 0; justify-content: center; border-radius: 50%; }
  .rp-usermenu__caret { display: none; }
  .rp-portal-tag { flex: none; padding-inline: 0.5rem; letter-spacing: 0.04em; }
}

/* Phone landscape (short screens): the frosted top bar and the sticky actions give the content
   back its height. */
@media (max-height: 480px) and (orientation: landscape) {
  .rp-topbar { position: static; }
  .rp-portal:has(.rp-topbar) .rp-form-actions { position: static; box-shadow: none; }
  :root:has(.rp-portal .rp-form-actions) { scroll-padding-bottom: 0; }
}

/* QA 2026-10-23 (UI-003): long German and Spanish compounds ("reservierungsbasierte",
   "Zwei-Faktor-Authentifizierung") were wider than a 320-px column and scrolled the page sideways.
   A word that cannot fit breaks instead of overflowing; headings and short list items on phones may
   also hyphenate (the page language is always set on <html>, so the hyphenation is the right one). */
body { overflow-wrap: break-word; }
@media (max-width: 575.98px) {
  h1, h2, h3, h4, .rp-hero__points li, .rp-dl dt, .form-text { hyphens: auto; }
}

/* QA 2026-10-23 (UI-005): on phones the guest booking header squeezed the venue's name to "AB…" next
   to the language switcher and the contact link. Below 576 px the name gets its own row and wraps;
   the switcher and the contact link share the row under it (the header keeps its height). */
@media (max-width: 575.98px) {
  .rp-bk-header__inner { flex-wrap: wrap; row-gap: var(--rp-space-1); padding-block: var(--rp-space-2); }
  .rp-bk-vendor { flex: 1 1 100%; }
  .rp-bk-vendor__name { max-width: none; white-space: normal; overflow-wrap: anywhere; }
  .rp-bk-header__actions { flex: 1 1 100%; flex-wrap: nowrap; justify-content: space-between; }
  .rp-bk-header .rp-langswitch__toggle { padding-inline: var(--rp-space-2); }
  .rp-bk-help { min-width: 0; text-align: end; }
}

/* Phones: the week navigation (reservations calendar, event time slots) is a primary control, so its
   buttons get the 44-px touch height of the other phone controls (UI-012). */
@media (max-width: 767.98px) {
  .rp-week-nav .btn { min-height: var(--rp-target-touch); }
}