/* Layout block nutzerberichte_block (template-parts/components/nutzerberichte.php), also on Bestenliste
   placements (compact) and the Produktcheck. No reference page: box after eignung_box in 04-bausteine.html.
   An analysis, not a test: neutral label, running text instead of bars, no ticks or grades.
   Jan-Philipp 26.10.2026: fewer small labels, more vertical space, red line before the counter findings. */
.ur-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; display: grid; gap: 28px; }
.ur-head { display: grid; gap: 10px; justify-items: start; }
.ur-h { font-size: 22px; font-weight: 800; scroll-margin-top: 80px; }
h2.ur-h { font-size: 24px; }
.ur-scope { font-size: 14px; color: var(--ink-3); }
.ur-scope b { font-weight: 600; color: var(--ink-2); }
.ur-part h3, .ur-part h4 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.ur-part p { font-size: 16px; line-height: 1.6; }
.ur-part p + p { margin-top: 12px; }
.ur-part strong { font-weight: 700; }
.ur-counter, .ur-takeaway { border-left: 3px solid var(--brand); padding-left: 16px; }
.ur-counter { border-left-color: var(--neg); }
.ur-counter.is-pro { border-left-color: var(--pos); }
.ur-counter.is-gemischt { border-left-color: var(--ink-3); }
.ur-counts { border-top: 1px solid var(--line); padding-top: 36px; }
.ur-part.ur-counts p { font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.ur-counts b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }
.ur-counts h3, .ur-counts h4,
.ur-sources h3, .ur-sources h4 { font-family: var(--f-body); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ur-sources ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); display: grid; gap: 6px; }
.ur-sources a { color: inherit; text-underline-offset: 2px; }
.ur-limit { font-size: 14px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 16px; }

/* Teaser (articles, Bestenlisten; assets/js/nutzerberichte.js). The script sets --ur-cut (about three lines
   of the summary) on .ur-frame and .is-collapsed; without script the full box shows and the button stays hidden.
   The fade lies over the whole box, border included, and runs into the page background, so the box dissolves. */
.ur { scroll-margin-top: 88px; }
.ur-frame { position: relative; }
/* clip, not hidden: a hidden frame can still be scrolled (find in page), which would move the fade. */
.ur.is-ready .ur-frame { overflow: hidden; overflow: clip; transition: max-height .45s ease; }
.ur.is-collapsed .ur-frame { max-height: var(--ur-cut); }
.ur-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 150px; background: linear-gradient(to bottom, transparent, var(--bg) 72%); pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.ur.is-collapsed .ur-frame::after { opacity: 1; }
/* Room for the lower half of the button, which overlaps the box edge when the box is open. */
.ur.is-ready .ur-box { padding-bottom: 44px; }

/* Button (.btn .btn-dark): 44 px high, pulled up by half, so it sits on the edge. First only the three dots,
   which wave one after another when it scrolls into view (.is-intro, .is-wave), then the label fades in. */
.ur-toggle { position: relative; z-index: 1; display: flex; min-height: 44px; margin: -22px auto 0; padding-block: 0; }
.ur-toggle[hidden] { display: none; }
.ur-toggle-label { transition: opacity .25s ease; }
.ur-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.ur-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation-duration: .7s; animation-timing-function: ease-in-out; animation-iteration-count: 2; }
.ur-toggle.is-intro .ur-toggle-label { opacity: 0; }
.ur-toggle.is-intro .ur-dots { opacity: 1; }
/* The next dot starts when the previous one is almost at the top. Longhands only, so the delays stay. */
.ur-toggle.is-wave .ur-dots i { animation-name: ur-dot; }
.ur-dots i:nth-child(2) { animation-delay: .2s; }
.ur-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes ur-dot {
  0%, 70%, 100% { transform: translateY(0); }
  35% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .ur.is-ready .ur-frame, .ur-frame::after, .ur-toggle-label, .ur-dots { transition: none; }
  .ur-toggle.is-wave .ur-dots i { animation: none; }
}

/* Compact (Bestenliste placement): cream box under the pick. */
.ur-compact { margin-block: 28px 0; }
.ur-compact .ur-box { background: var(--bg); gap: 24px; }
.ur-compact .ur-h { font-size: 19px; }

@container page (min-width: 900px) {
  .ur-box { padding: 28px 32px; gap: 32px; }
  .ur.is-ready .ur-box { padding-bottom: 48px; }
  .ur-h { font-size: 24px; }
  h2.ur-h { font-size: 30px; }
}