/* Haven — tokeni templata, scopovani na .sec-haven-referenzen. */

/* ============================================================
   DESIGN TOKENS — Template 8 "Haven"
   Niche variant: G — anxious patients / sedation dentistry
   >>> NEW variant, not in the original style guide. Rules and
       reasoning live in the BUILDER-LOG, §4d. <<<

   Register: quiet, unhurried, never selling. The page talks to
   someone who has been avoiding this for years.
   Olive and oat carry the page, muted sky is the only accent.
   Shape language: leaf (vesica) media masks + concentric rings.
   Change ONLY this file to re-skin the whole template.
   ============================================================ */

.sec-haven-referenzen {
  /* ---------- Color ---------- */
  --c-bg:          #F5F4EF;   /* warm oat, no pink cast */
  --c-bg-alt:      #EDEBE3;
  --c-white:       #FFFFFF;
  --c-surface:     #E3E5DA;   /* olive tint for cards / soft fills */

  --c-primary:     #45513F;   /* deep olive — 7.5:1 on --c-bg, safe for text */
  --c-primary-dk:  #2E3729;   /* headings, dark sections */
  --c-primary-lt:  #8B9682;
  --c-primary-08:  rgba(69, 81, 63, 0.08);
  --c-primary-14:  rgba(69, 81, 63, 0.14);

  --c-accent:      #8FB3C7;   /* muted sky — fills, icons, rings */
  --c-accent-dk:   #3E6379;   /* AA-safe sky for TEXT on light (5.8:1) */
  --c-accent-soft: #DCE8EF;
  --c-accent-tint: rgba(143, 179, 199, 0.24);

  --c-text:        #22271F;
  --c-text-muted:  #565C51;   /* 6.2:1 on --c-bg */
  --c-on-dark:     #F0F1EA;
  --c-on-dark-mu:  rgba(240, 241, 234, 0.76);

  --c-line:        rgba(34, 39, 31, 0.10);
  --c-line-strong: rgba(34, 39, 31, 0.20);
  --c-line-dark:   rgba(240, 241, 234, 0.22);

  --c-whatsapp:    #128C7E;
  --c-whatsapp-dk: #0E6F63;
  --c-star:        #C99A3C;

  /* No red or orange anywhere in this variant — for this audience those
     are not "alarm colours", they are a trigger. See BUILDER-LOG §4d. */

  /* ---------- Elevation — low and wide, nothing that pops ---------- */
  --sh-xs: 0 1px 2px rgba(34, 39, 31, 0.05);
  --sh-sm: 0 4px 16px -8px rgba(34, 39, 31, 0.16);
  --sh-md: 0 16px 36px -16px rgba(34, 39, 31, 0.24);
  --sh-lg: 0 30px 64px -22px rgba(34, 39, 31, 0.30);
  --sh-xl: 0 48px 96px -32px rgba(34, 39, 31, 0.36);

  /* ---------- Radius ---------- */
  --r-xs:  10px;
  --r-sm:  14px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-xl:  36px;
  --r-2xl: 52px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* Gallery tiles: 14px, inside the 10–15px band the brief asks for. */
  --r-gallery: 14px;

  /* Leaf (vesica) mask — the signature silhouette. Two opposite corners
     are wide, two are gently rounded: a leaf, never a pointed shape. */
  --r-leaf:     48% 14% 48% 14% / 48% 14% 48% 14%;
  --r-leaf-alt: 14% 48% 14% 48% / 14% 48% 14% 48%;

  /* ---------- Spacing — 8px base ---------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9: 128px;

  --section-y: clamp(68px, 9vw, 124px);
  --gutter:    clamp(20px, 5vw, 48px);
  --maxw:      1200px;

  /* ---------- Typography ---------- */
  --ff-display: "Urbanist", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.125rem, 0.45vw + 1.04rem, 1.3125rem);
  --fs-h4:   clamp(1.1875rem, 0.6vw + 1.05rem, 1.4375rem);
  --fs-h3:   clamp(1.4375rem, 1vw + 1.18rem, 1.875rem);
  --fs-h2:   clamp(1.9375rem, 2.3vw + 1.38rem, 3rem);
  --fs-h1:   clamp(2.375rem, 3.6vw + 1.4rem, 4.125rem);

  --lh-tight: 1.08;
  --lh-snug:  1.2;
  --lh-body:  1.66;   /* the longest line-height in the series: this copy
                         is read slowly, often by someone who is nervous */

  --ls-tight: -0.02em;
  --ls-label:  0.16em;

  /* ---------- Motion — everything here is slower than in T1–T7 ---------- */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast: 180ms;
  --t-base: 340ms;
  --t-slow: 760ms;

  /* ---------- Layout ---------- */
  --header-h: 80px;
  --z-header: 100;
  --z-mobilebar: 90;
  --z-menu: 95;
  --z-lightbox: 200;
}

@media (max-width: 900px) { .sec-haven-referenzen { --header-h: 66px; } }

/* Haven — reset i zajedničke primitive (base.css). */

/* ============================================================
   BASE — Template 8 "Haven"
   Signature: leaf-shaped media masks (.u-leaf) and concentric
   rings (.u-rings) as the recurring device. Both are curves
   only — nothing on this page has a corner you could catch a
   finger on, which is the whole point for this audience.
   ============================================================ */

.sec-haven-referenzen *, .sec-haven-referenzen *::before, .sec-haven-referenzen *::after { box-sizing: border-box; }

.sec-haven-referenzen {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

.sec-haven-referenzen {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-x: clip;
}

.sec-haven-referenzen img, .sec-haven-referenzen svg, .sec-haven-referenzen video { display: block; max-width: 100%; }
.sec-haven-referenzen img { height: auto; }

.sec-haven-referenzen h1, .sec-haven-referenzen h2, .sec-haven-referenzen h3, .sec-haven-referenzen h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--c-primary-dk);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  margin: 0;
  text-wrap: balance;
}
.sec-haven-referenzen h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; }
.sec-haven-referenzen h2 { font-size: var(--fs-h2); line-height: 1.12; }
.sec-haven-referenzen h3 { font-size: var(--fs-h3); }
.sec-haven-referenzen h4 { font-size: var(--fs-h4); }

.sec-haven-referenzen p { margin: 0; text-wrap: pretty; }
.sec-haven-referenzen ul, .sec-haven-referenzen ol { margin: 0; padding: 0; list-style: none; }

.sec-haven-referenzen a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.sec-haven-referenzen button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

.sec-haven-referenzen :focus-visible { outline: 3px solid var(--c-accent-dk); outline-offset: 3px; border-radius: var(--r-xs); }
.sec-haven-referenzen :focus:not(:focus-visible) { outline: none; }
.sec-haven-referenzen ::selection { background: var(--c-accent-soft); color: var(--c-primary-dk); }

/* ---------- Layout primitives ---------- */

.sec-haven-referenzen .u-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sec-haven-referenzen .u-section { position: relative; padding-block: var(--section-y); }
.sec-haven-referenzen .u-section--alt { background: var(--c-bg-alt); }

.sec-haven-referenzen .u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sec-haven-referenzen .u-skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 999;
  transform: translateY(-200%);
  background: var(--c-primary-dk); color: var(--c-white);
  padding: 12px 22px; border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 700;
}
.sec-haven-referenzen .u-skip-link:focus { transform: translateY(0); }

/* ============================================================
   DARK SCOPE — put .u-dark on any section that sits on the
   olive, and headings, paragraphs and labels are corrected in
   one place instead of per element. (BUILDER-LOG §4.)
   ============================================================ */
.sec-haven-referenzen .u-dark { color: var(--c-on-dark); }
.sec-haven-referenzen .u-dark h1, .sec-haven-referenzen .u-dark h2, .sec-haven-referenzen .u-dark h3, .sec-haven-referenzen .u-dark h4 { color: var(--c-on-dark); }
.sec-haven-referenzen .u-dark p { color: var(--c-on-dark-mu); }
.sec-haven-referenzen .u-dark .u-label { color: var(--c-accent); }
.sec-haven-referenzen .u-dark .u-label::before { background: var(--c-accent); }
.sec-haven-referenzen .u-dark .u-head p { color: var(--c-on-dark-mu); }

/* ---------- Eyebrow label + section head ---------- */

.sec-haven-referenzen .u-label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--c-accent-dk);
}
.sec-haven-referenzen .u-label::before {
  content: "";
  width: 10px; height: 10px; border-radius: var(--r-circle);
  border: 2px solid currentColor;
  flex: none;
}

.sec-haven-referenzen .u-head > * + * { margin-top: var(--sp-3); }
.sec-haven-referenzen .u-head--center { text-align: center; margin-inline: auto; }
.sec-haven-referenzen .u-head--center .u-label { justify-content: center; }
.sec-haven-referenzen .u-head h2 { max-width: 21ch; }
.sec-haven-referenzen .u-head--center h2 { margin-inline: auto; }
.sec-haven-referenzen .u-head p { color: var(--c-text-muted); font-size: var(--fs-lg); max-width: 60ch; }
.sec-haven-referenzen .u-head--center p { margin-inline: auto; }

/* ---------- Leaf (signature device) ---------- */

/* A media frame with two wide corners and two soft ones. Alternate
   .u-leaf and .u-leaf--alt down the page so the shape mirrors. */
.sec-haven-referenzen .u-leaf {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-leaf);
  background: var(--c-surface);
}
.sec-haven-referenzen .u-leaf--alt { border-radius: var(--r-leaf-alt); }
.sec-haven-referenzen .u-leaf :is(img, video) {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Concentric rings — background decoration, one per section at most. */
.sec-haven-referenzen .u-rings {
  border-radius: var(--r-circle);
  background:
    radial-gradient(circle, transparent 0 32%, var(--ring-c, var(--c-primary-14)) 32% 33%, transparent 33%),
    radial-gradient(circle, transparent 0 54%, var(--ring-c, var(--c-primary-14)) 54% 55%, transparent 55%),
    radial-gradient(circle, transparent 0 76%, var(--ring-c, var(--c-primary-14)) 76% 77%, transparent 77%),
    radial-gradient(circle, transparent 0 98%, var(--ring-c, var(--c-primary-14)) 98% 99%, transparent 99%);
}

/* ---------- Pills ---------- */

.sec-haven-referenzen .u-pill {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--pill-bg, var(--c-white));
  color: var(--pill-fg, var(--c-primary-dk));
  border: 1px solid var(--pill-bd, var(--c-line));
  font-family: var(--ff-display);
  font-size: var(--fs-sm); font-weight: 600;
}
.sec-haven-referenzen .u-pill--sky { --pill-bg: var(--c-accent-soft); --pill-bd: transparent; --pill-fg: var(--c-accent-dk); }
.sec-haven-referenzen .u-pill--olive { --pill-bg: var(--c-surface); --pill-bd: transparent; --pill-fg: var(--c-primary-dk); }
.sec-haven-referenzen .u-pill--ghost {
  --pill-bg: rgba(240, 241, 234, 0.14);
  --pill-bd: var(--c-line-dark);
  --pill-fg: var(--c-on-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sec-haven-referenzen .u-pill svg { width: 18px; height: 18px; flex: none; }

/* ---------- Stars ---------- */

.sec-haven-referenzen .u-stars { display: inline-flex; gap: 2px; }
.sec-haven-referenzen .u-stars svg { width: 17px; height: 17px; color: var(--c-star); }
.sec-haven-referenzen .u-stars--lg svg { width: 21px; height: 21px; }

/* ---------- Buttons ---------- */

.sec-haven-referenzen .u-btn {
  --btn-bg: var(--c-primary);
  --btn-fg: var(--c-white);
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px;
  padding: 15px 30px;
  border: 2px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-display);
  font-size: var(--fs-md); font-weight: 600;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.sec-haven-referenzen .u-btn svg { flex: none; width: 20px; height: 20px; }
/* Lift only, never a bounce: overshoot easing reads as "eager" and this
   page is not allowed to be eager. */
.sec-haven-referenzen .u-btn:hover { transform: translateY(-2px); }
.sec-haven-referenzen .u-btn:active { transform: translateY(0); transition-duration: 80ms; }

.sec-haven-referenzen .u-btn--solid { box-shadow: var(--sh-md); }
.sec-haven-referenzen .u-btn--solid:hover { --btn-bg: var(--c-primary-dk); box-shadow: var(--sh-lg); }

.sec-haven-referenzen .u-btn--line { --btn-bg: transparent; --btn-fg: var(--c-primary-dk); --btn-bd: var(--c-line-strong); }
.sec-haven-referenzen .u-btn--line:hover { --btn-bd: var(--c-primary); --btn-bg: var(--c-white); }

.sec-haven-referenzen .u-btn--sky { --btn-bg: var(--c-accent-soft); --btn-fg: var(--c-accent-dk); }
.sec-haven-referenzen .u-btn--sky:hover { --btn-bg: #CBDDE7; }

.sec-haven-referenzen .u-btn--white { --btn-bg: var(--c-white); --btn-fg: var(--c-primary-dk); box-shadow: var(--sh-md); }
.sec-haven-referenzen .u-btn--white:hover { --btn-bg: var(--c-bg-alt); }

.sec-haven-referenzen .u-btn--ghost { --btn-bg: rgba(240, 241, 234, 0.1); --btn-fg: var(--c-on-dark); --btn-bd: var(--c-line-dark); }
.sec-haven-referenzen .u-btn--ghost:hover { --btn-bg: rgba(240, 241, 234, 0.2); --btn-bd: rgba(240, 241, 234, 0.55); }

.sec-haven-referenzen .u-btn--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #fff; box-shadow: var(--sh-md); }
.sec-haven-referenzen .u-btn--wa:hover { --btn-bg: var(--c-whatsapp-dk); box-shadow: var(--sh-lg); }

.sec-haven-referenzen .u-btn--lg { min-height: 62px; padding: 19px 36px; font-size: var(--fs-lg); }
.sec-haven-referenzen .u-btn--block { width: 100%; }

/* ---------- Scroll reveal ---------- */

/* Hidden start state gated on .has-js (set by app.js) so a script
   failure can never leave a blank hole where content should be. */
.sec-haven-referenzen.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.sec-haven-referenzen.has-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sec-haven-referenzen { scroll-behavior: auto; }
  .sec-haven-referenzen *, .sec-haven-referenzen *::before, .sec-haven-referenzen *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .sec-haven-referenzen.has-js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .sec-haven-referenzen .site-head, .sec-haven-referenzen .mobile-bar, .sec-haven-referenzen .cta, .sec-haven-referenzen .scrub { display: none !important; }
  .sec-haven-referenzen { background: #fff; }
}

/* ============================================================
   MEDIA SLOTS — every image slot also takes a <video>

   Each slot rule is written as `:is(img,video)`, so swapping the
   tag is the whole job — sizing, crop and radius stay identical:

     <img   src="_shared/img/hero-bg.svg" width="2400" height="1400" alt="...">
     <video src="_shared/video/hero.mp4" poster="_shared/img/hero-bg.svg"
            width="2400" height="1400" data-inline muted loop playsinline
            aria-label="..."></video>

   `data-inline` hands the element to app.js, which plays it only
   while it is on screen, pauses it when the tab is hidden, adds a
   pause control (WCAG 2.2.2) and skips autoplay entirely under
   prefers-reduced-motion — the poster stays in that case.

   Keep width/height (or let the slot aspect-ratio do it) so the
   layout does not shift while the file loads.
   ============================================================ */

/* Baseline for slots that never sized their <img> explicitly. */
.sec-haven-referenzen video { width: 100%; height: auto; }

/* Parent of an inline video: only promoted when it is static, so a
   slot that already positions itself is left alone. */
.sec-haven-referenzen .has-inline-video { position: relative; }

.sec-haven-referenzen .u-mediactl {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-sm);
  color: var(--c-text);
  font-family: var(--ff-display);
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-base) var(--ease);
}
.sec-haven-referenzen .u-mediactl:hover { background: #fff; }
.sec-haven-referenzen .u-mediactl__ic { position: relative; width: 12px; height: 12px; flex: none; }
.sec-haven-referenzen .u-mediactl__ic::before, 
.sec-haven-referenzen .u-mediactl__ic::after {
  content: "";
  position: absolute; top: 0;
  width: 4px; height: 12px;
  border-radius: 1px;
  background: currentColor;
}
.sec-haven-referenzen .u-mediactl__ic::before { left: 0; }
.sec-haven-referenzen .u-mediactl__ic::after { right: 0; }

/* paused -> the icon becomes a play triangle */
.sec-haven-referenzen .u-mediactl[aria-pressed="true"] .u-mediactl__ic::before {
  left: 1px;
  width: 0; height: 0;
  border-radius: 0;
  background: none;
  border-left: 11px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.sec-haven-referenzen .u-mediactl[aria-pressed="true"] .u-mediactl__ic::after { opacity: 0; }

/* Small slots (avatars, thumbnails) do not get room for a label. */
.sec-haven-referenzen .u-mediactl--compact { padding: 0; width: 44px; justify-content: center; }
.sec-haven-referenzen .u-mediactl--compact .u-mediactl__tx { display: none; }

/* Sekcija referenzen. */

/* ============================================================
   SECTION: REFERENZEN
   One quote, read at full size, with the six faces underneath as
   the switcher. The quote box holds its height from the longest
   review so the avatars never jump when you change person.
   ============================================================ */

.sec-haven-referenzen .revs { overflow: hidden; }

.sec-haven-referenzen .revs__rings {
  position: absolute;
  top: -140px; right: -180px;
  width: 620px; height: 620px;
  --ring-c: rgba(69, 81, 63, 0.10);
  pointer-events: none;
}

.sec-haven-referenzen .revs__head h2 { max-width: 18ch; }

.sec-haven-referenzen .revs__stage {
  position: relative;
  max-width: 62rem;
  margin: clamp(32px, 4vw, 56px) auto 0;
}

/* ---------- Quote ---------- */

.sec-haven-referenzen .revs__quotes {
  display: grid;
  /* every quote sits in the same cell: no height jump on switch, and
     without JS they simply stack in document order */
  align-items: start;
}
.sec-haven-referenzen.has-js .revs__quotes > * { grid-area: 1 / 1; }

.sec-haven-referenzen .rq {
  margin: 0;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-md);
}
/* an author display would beat [hidden] — see BUILDER-LOG §4 */
.sec-haven-referenzen .rq[hidden] { display: none; }

.sec-haven-referenzen.has-js .rq {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base) var(--ease);
}
.sec-haven-referenzen.has-js .rq.is-on { opacity: 1; visibility: visible; }

.sec-haven-referenzen .rq__tx { margin: var(--sp-4) 0 0; }
.sec-haven-referenzen .rq__tx p {
  font-family: var(--ff-display);
  font-size: clamp(1.1875rem, 1vw + 1rem, 1.5rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--c-primary-dk);
}

.sec-haven-referenzen .rq__who {
  display: flex; align-items: center; gap: 14px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.sec-haven-referenzen .rq__av {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: var(--r-circle);
  background: var(--c-surface);
  color: var(--c-primary-dk);
  font-family: var(--ff-display);
  font-size: var(--fs-lg); font-weight: 700;
  flex: none;
}
.sec-haven-referenzen .rq__meta { display: flex; flex-direction: column; line-height: 1.35; }
.sec-haven-referenzen .rq__meta strong { font-family: var(--ff-display); font-size: var(--fs-md); color: var(--c-text); }
.sec-haven-referenzen .rq__meta small { font-size: var(--fs-sm); color: var(--c-text-muted); }
.sec-haven-referenzen .rq__g { width: 22px; height: 22px; margin-left: auto; flex: none; }

/* a missing star is drawn in grey, never left out */
.sec-haven-referenzen .u-stars .is-off { color: var(--c-line-strong); }

/* ---------- The six faces ---------- */

.sec-haven-referenzen .revs__pick { margin-top: var(--sp-5); }
.sec-haven-referenzen .revs__pick ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 1.6vw, 20px);
}
.sec-haven-referenzen .revs__pick button {
  display: grid; justify-items: center; gap: 6px;
  width: 84px;
  padding: 8px 4px;
  border-radius: var(--r-lg);
  color: var(--c-text-muted);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.sec-haven-referenzen .revs__pick button span {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: var(--r-circle);
  background: var(--c-surface);
  color: var(--c-primary);
  font-family: var(--ff-display);
  font-size: var(--fs-lg); font-weight: 700;
  border: 2px solid transparent;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.sec-haven-referenzen .revs__pick button small { font-size: var(--fs-xs); font-family: var(--ff-display); font-weight: 600; }
.sec-haven-referenzen .revs__pick button:hover span { border-color: var(--c-primary-lt); }
/* selected: filled avatar AND a heavier label — never colour alone */
.sec-haven-referenzen .revs__pick button[aria-pressed="true"] { color: var(--c-primary-dk); }
.sec-haven-referenzen .revs__pick button[aria-pressed="true"] span {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}

.sec-haven-referenzen .revs__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.sec-haven-referenzen .revs__foot strong { font-family: var(--ff-display); color: var(--c-text); }
.sec-haven-referenzen .revs__foot a {
  color: var(--c-accent-dk);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sec-haven-referenzen .revs__foot a:hover { color: var(--c-primary-dk); }

/* ---------- Responsive ---------- */

@media (max-width: 620px) {
  .sec-haven-referenzen .revs__pick button { width: 68px; }
  .sec-haven-referenzen .revs__pick button span { width: 46px; height: 46px; font-size: var(--fs-md); }
  .sec-haven-referenzen .rq { padding: var(--sp-4); }
}