/* Responsive safety net — generated, loaded last. Guarantees no horizontal
   overflow and readable, wrapping headings on every device from 320px up,
   without overriding the design on wider screens. */

/* No element may create a horizontal scrollbar. overflow-x: clip (not hidden)
   keeps position: sticky and off-canvas drawers working. */
html, body { max-width: 100%; overflow-x: clip; }

/* Media and embeds never exceed their container. */
img, svg, video, canvas, iframe, embed, object, figure, picture {
  max-width: 100%;
}
img, video, canvas { height: auto; }
pre, code, kbd, samp { overflow-x: auto; max-width: 100%; }

/* Headings and display lockups wrap instead of running off-screen. A
   white-space: nowrap that would push a headline off the edge is overridden;
   on wide screens the line still fits, so nothing wraps unnecessarily. */
h1, h2, h3, h4, h5, h6,
[class*="lockup"], [class*="display"], [class*="headline"], [class*="title"],
[class*="hero"] h1, [class*="hero"] h2 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}
[class*="lockup"], [class*="lockup"] > * { white-space: normal !important; }

/* Long unbroken strings (URLs, emails, ids) wrap rather than overflow. */
p, li, dd, dt, blockquote, figcaption, address, a, span, td, th {
  overflow-wrap: break-word;
}

/* Grid and flex children may shrink below their content so a single wide
   child cannot force the whole track past the viewport. */
[class*="grid"] > *, [class*="row"] > *, [class*="flex"] > *,
[class*="cols"] > *, [class*="columns"] > * { min-width: 0; }

/* Wide data tables scroll inside their own box instead of dragging the whole
   page sideways. The box is a wrapper this build adds around every table,
   because the other way — `table { display: block; overflow-x: auto }` — is
   not a scroll container at all: it takes the table out of table layout, the
   cells become blocks, and on a real cookie table at 390px the header cell
   came out 40px wide and 300px tall with the rows stacked on top of each
   other. Forty "text is painted over" defects on one page came from this
   rule, and the repair rounds were paid to chase them. */
/* One page becomes the next instead of blinking into it. A cross-document
   view transition is three lines and needs no script: the browser holds the
   old page's pixels, paints the new ones underneath and crossfades. Where it
   is not supported nothing at all happens, which is why it can be stamped on
   every site rather than asked for. Motion is a preference, so a visitor who
   has turned it down gets the plain navigation they asked for. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .28s;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.rise064 { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rise064 > table { min-width: max-content; }
@media (max-width: 48rem) {
  .rise064 > table { font-size: .94em; }
}
/* Inside the box, a table is a table. The design agent writes the same
   stacking trick for narrow screens — `table, tr, th, td { display: block }`
   — and writes it without the data-label pseudo-elements that make stacking
   readable, so the cookie table came out as 40-pixel columns three hundred
   pixels tall with the rows drawn over each other. Stacking has no job here
   anyway: the wrapper scrolls, so the table can keep its own shape. */
.rise064 > table,
.rise064 > table > thead, .rise064 > table > tbody,
.rise064 > table > tfoot, .rise064 > table tr,
.rise064 > table th, .rise064 > table td { display: revert; }

/* Cap the display scale on phones so no headline is bigger than the screen.
   These override the modular scale only where it is too large to fit. */
@media (max-width: 30rem) {
  :root {
    --ruhe-5d4: clamp(2.2rem, 9vw, 3rem);
    --ruhe-2d5: clamp(2rem, 8vw, 2.7rem);
    --ruhe-eb7: clamp(1.8rem, 7vw, 2.4rem);
    --ruhe-a17: clamp(1.55rem, 6vw, 2.05rem);
    --ruhe-4a6: clamp(1.35rem, 5vw, 1.8rem);
  }
}
@media (min-width: 30.01rem) and (max-width: 48rem) {
  :root {
    --ruhe-5d4: clamp(2.8rem, 8vw, 4.6rem);
    --ruhe-2d5: clamp(2.5rem, 7vw, 4rem);
    --ruhe-eb7: clamp(2.2rem, 6vw, 3.4rem);
  }
}

/* Touch targets stay usable. */
@media (pointer: coarse) {
  a.btn, button, [role="button"], .btn,
  input[type="submit"], input[type="button"] { min-height: 44px; }
}


/* Consent bar — bounded so it cannot cover the headline. */
.cookie-banner {
  max-height: 20vh;
  overflow: auto;
  top: auto;
  bottom: 0;
}
@media (max-width: 30rem) {
  .cookie-banner { max-height: 38vh; }
}