/* ==========================================================================
   Psyvita – Unified Design System & Responsive Stylesheet
   Desktop-First & Pixel-Refined for Mobile, Tablet & Desktop
   Breakpoints: 479px (small-phone exceptions); 599px (small phones); 600–820px (tablet); 820px/821px (mobile/desktop cascade boundary); 1180px (tablet layout).
   Z-index ladder: 1–5 video layers; 30 header; 40 panels; 50 scrim; 60 modals; 100 nav-sub; 120 sidebar scrim; 130 drawer; 140 app overlay.
   PHP runtime contract: includes/advisor-filters.php sets --filter-order and
   --filter-option-rows inline; the former is consumed below, the latter by
   includes/prototype-settings.php.
   ========================================================================== */

/* Design tokens: one source of truth for color, radius, and layout width.
   Map these to CSS variables or a token module first when porting to Next.js. */
:root {
  /* Brand Palette */
  --ink: #1c1d22;
  --muted: #64646e;
  --faint: #8a8a94;
  --bg: #f5f5f8;
  --header: #4c4d68;
  --header-hover: #3f4058;
  --green: #1e7e52;
  --green-soft: #8dc8a4;
  --green-hover: #176843;
  --green-tint: rgba(30, 126, 82, 0.12);
  --red: #c53030;
  --lav: #eee7f4;
  --lav-hover: #e3d9ec;
  --lav-text: #484352;
  
  /* Menu & Filter Surfaces */
  --surface: #f8f7fb;
  --menu-surface: #fef7ff;
  --menu-soft: #f3edf7;
  --menu-primary: #6750a4;
  --chip-surface: #e8def8;
  --chip-on: #625b71;
  --chip-ink: #4a4459;
  --chip-dark: rgba(76, 77, 104, 0.7);
  
  /* Neutral & Structure */
  --white: #ffffff;
  /* Scrollbar palette */
  --scrollbar-thumb: #cdc5d6;
  --scrollbar-thumb-hover: #b3a8bf;
  --scrollbar-thumb-subtle: #d5cddd;
  /* White alpha ladder for dark surfaces */
  --white-a10: rgba(255, 255, 255, 0.1);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a14: rgba(255, 255, 255, 0.14);
  --white-a15: rgba(255, 255, 255, 0.15);
  --white-a16: rgba(255, 255, 255, 0.16);
  --white-a18: rgba(255, 255, 255, 0.18);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a24: rgba(255, 255, 255, 0.24);
  --white-a25: rgba(255, 255, 255, 0.25);
  --white-a30: rgba(255, 255, 255, 0.3);
  --white-a40: rgba(255, 255, 255, 0.4);
  --white-a70: rgba(255, 255, 255, 0.7);
  --white-a75: rgba(255, 255, 255, 0.75);
  --white-a78: rgba(255, 255, 255, 0.78);
  --white-a80: rgba(255, 255, 255, 0.8);
  --white-a90: rgba(255, 255, 255, 0.9);
  --white-a95: rgba(255, 255, 255, 0.95);
  /* Derived and repeated surfaces */
  --menu-primary-tint: rgba(103, 80, 164, 0.08);
  --focus-ring: rgba(76, 77, 104, 0.15);
  --photo-placeholder: #e8e8ed;
  --black-a75: rgba(0, 0, 0, 0.75);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.12);
  --border: #ddd8e4;
  --border-subtle: #eae6f0;
  --shadow-card: 0 4px 16px -2px rgba(20, 20, 35, 0.06), 0 1px 3px 0 rgba(20, 20, 35, 0.04);
  --shadow-pop: 0 12px 32px -4px rgba(20, 20, 35, 0.12), 0 4px 12px -2px rgba(20, 20, 35, 0.08);
  --radius-card: 24px;
  --radius-btn: 100px;
  --radius-pill: 999px;
  --page-pad: 80px;
  --max-width: 1440px;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: content-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

.dd-panel::-webkit-scrollbar-thumb,
.advfilter::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-subtle);
  background-clip: content-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.22;
}

/* Keyboard-only bypass link. It occupies no layout space and becomes visible
   only while focused, so the logo remains the first visual page element. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform 0.12s ease;
}
.skip-link:focus-visible,
html[data-focus-modality="keyboard"] .skip-link:focus {
  transform: translateY(0);
}

/* Pointer- and script-triggered focus stays visually neutral. The high-
   contrast ring appears for keyboard focus: native `:focus-visible` is the
   base; the JS modality also covers a keyboard-opened dialog moving focus
   into its first field. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus:not(:focus-visible) {
  outline: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
html[data-focus-modality="keyboard"]
  :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #1d1d1f;
  scroll-margin-block: 24px;
}
/* Editable fields use their existing `:focus-within` surface or border state
   instead of drawing a second ring inside the designed field container.
   Browsers treat editable fields as always focus-visible, so this must
   cover both selectors above. */
:is(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="password"], input[type="number"],
    select, textarea):focus-visible,
html[data-focus-modality="keyboard"]
  :is(input:not([type]), input[type="text"], input[type="search"], input[type="email"],
      input[type="tel"], input[type="url"], input[type="password"], input[type="number"],
      select, textarea):focus {
  outline: none;
  box-shadow: none;
}

/* Motion is optional decoration. Users requesting reduced motion receive the
   same states without animated travel, spinning, or smooth transitions. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
/* Every plain link gets an underline on hover unless it is a structural or
   button-like element (buttons, chips, card photos, nav items, back FAB …). */
a:hover:not(
  .btn,
  .chip,
  .back-fab,
  .teaser,
  .b-card-photo,
  .b-card-type,
  .b-card-name,
  .link-arrow,
  .link-arrow-danger,
  .form-error-summary a,
  .contact-facts .contact-link-list a,
  .sg-nav-item a,
  .nav-links a,
  .nav-links a *,
  [class*="tab-"]
):not([class*="btn"]):not([class*="chip"]) {
  text-decoration: underline;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

ul, ol {
  list-style: none;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
  width: 100%;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */

.site-header {
  background: var(--header);
  color: var(--white);
  position: relative;
  z-index: 30;
}

/* Top navigation bar: logo left, links right. */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px var(--page-pad) 0;
  max-width: var(--max-width);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.logo svg {
  display: block;
}

/* Desktop link list with hover submenus. */
.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 400;
  opacity: 0.92;
  white-space: nowrap;
  padding: 6px 0;
  transition: opacity 0.15s;
}

.nav-links a:hover {
  opacity: 0.7;
  text-decoration: none;
}
.nav-links a.active {
  font-weight: 400;
  opacity: 1;
}

/* Desktop navigation group and compact locale selector. */
.navbar-desktop {
  display: flex;
  align-items: center;
  gap: 28px;
}
/* ==========================================================================
   Language Dropdown Selector (Extensible, Calm Header Style)
   ========================================================================== */
.lang-dropdown {
  position: relative;
  display: inline-flex;
}

.lang-dropdown-trigger {
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
  opacity: 0.95;
}

.lang-dropdown-trigger:hover,
.lang-dropdown:hover .lang-dropdown-trigger,
.lang-dropdown:focus-within .lang-dropdown-trigger,
.lang-dropdown.open .lang-dropdown-trigger {
  background: var(--white-a12);
  opacity: 1;
}

.lang-dropdown-trigger img,
.lang-dropdown-item img,
.sidebar-language-switcher img {
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.lang-caret {
  transition: transform 0.2s ease;
  opacity: 0.85;
}

.lang-dropdown:hover .lang-caret,
.lang-dropdown:focus-within .lang-caret,
.lang-dropdown.open .lang-caret {
  transform: rotate(180deg);
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 145px;
  background: var(--white);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 32px rgba(15, 16, 25, 0.18);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.lang-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.lang-dropdown:hover .lang-dropdown-menu,
.lang-dropdown:focus-within .lang-dropdown-menu,
.lang-dropdown.open .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--header);
  text-decoration: none !important;
  transition: background 0.12s ease, color 0.12s ease;
}

.lang-dropdown-item:hover {
  background: var(--surface, #f8f7fb);
  color: var(--ink);
}

.lang-dropdown-item.active {
  font-weight: 400;
  background: var(--lav, #eaeef8);
  color: var(--header);
}

.lang-dropdown-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lang-dropdown-item.disabled:hover {
  background: transparent;
}

.nav-caret {
  transition: transform 0.18s ease;
  display: inline-flex;
  align-items: center;
}
.nav-links .has-sub:hover .nav-caret {
  transform: rotate(180deg);
}

/* Hover dropdown panel; the ::before extends the hover path over the gap. */
.nav-sub {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 20px;
  background: var(--menu-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  color: var(--ink);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav-sub.nav-sub-wide {
  width: 420px;
}

.nav-sub::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}

.nav-links .has-sub:hover .nav-sub,
.nav-links .has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Topic chips and "show all" link inside a dropdown panel. */
.nav-sub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.nav-sub-chips .chip {
  font-size: 13px;
  padding: 7px 16px;
  opacity: 1;
}
.nav-sub-chips .chip-green:hover {
  background: var(--green);
}
/* chip-lav (--lav) is nearly invisible on the --menu-soft dropdown surface;
   use the stronger chip tokens inside the panel. */
.nav-sub-chips .chip-lav {
  background: var(--chip-surface);
  color: var(--chip-ink);
}
.nav-sub-chips .chip-lav:hover {
  background: var(--menu-primary);
  color: var(--white);
}

.nav-sub .nav-sub-all {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  opacity: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-sub .nav-sub-all:hover {
  text-decoration: underline;
}

.site-header-slim .navbar {
  padding-top: 36px;
  padding-bottom: 36px;
}

/* Hamburger toggle; the spans morph into an X when expanded. */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobile Navigation Drawer (Off-Canvas)
   ========================================================================== */

/* Dimmed backdrop behind the drawer. */
.sidebar-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 16, 25, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-scrim.show {
  opacity: 1;
  pointer-events: auto;
}

/* Slide-in panel from the left edge. */
.sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--header);
  color: var(--white);
  z-index: 130;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}
.sidebar-drawer.open {
  transform: translateX(0);
}

/* Drawer header with logo and close button. */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--white-a12);
}

.sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--white);
  background: var(--white-a10);
  transition: background 0.15s;
}
.sidebar-close:hover {
  background: var(--white-a20);
}

/* Scrollable link list; submenus expand in place via .has-sub.open. */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  /* The drawer is a vertical navigation surface; submenu chips must never
     create a second, horizontal scroll axis. */
  overflow-x: hidden;
  padding: 16px 0;
}
.sidebar-nav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 400;
  color: var(--white-a90);
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: var(--white-a14);
  color: var(--white);
  font-weight: 400;
  text-decoration: none;
}
.sidebar-nav .nav-arrow {
  opacity: 0.5;
  transition: transform 0.15s, opacity 0.15s;
  display: flex;
  align-items: center;
}
.sidebar-nav a:hover .nav-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.sidebar-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidebar-nav .sidebar-row a {
  flex: 1;
}

/* Caret button that expands a submenu without navigating. */
.sidebar-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--white-a75);
  transition: background 0.15s, color 0.15s;
}
.sidebar-sub-toggle:hover {
  background: var(--white-a12);
  color: var(--white);
}
.has-sub.open .sidebar-sub-toggle .nav-caret {
  transform: rotate(180deg);
}

.sidebar-sub {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 16px 12px;
}
.has-sub.open .sidebar-sub {
  display: flex;
}

.sidebar-nav .sidebar-sub a {
  display: inline-flex;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  background: var(--white-a12);
}
.sidebar-nav .sidebar-sub a:hover {
  background: var(--white-a24);
}
.sidebar-nav .sidebar-sub a.sidebar-sub-all {
  flex-basis: 100%;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 10px 4px 2px;
  border-top: 1px solid var(--white-a18);
  border-radius: 0;
  background: transparent;
  font-weight: 400;
}
.sidebar-nav .sidebar-sub a.sidebar-sub-all:hover {
  background: transparent;
  opacity: 0.75;
}

/* Drawer footer: primary action plus trust note. */
.sidebar-footer {
  padding-top: 18px;
  border-top: 1px solid var(--white-a12);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sidebar-language-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-left: -6px;
  padding: 2px 0;
}
.sidebar-language-switcher a,
.sidebar-language-switcher span.disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border: none;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.sidebar-language-switcher a:hover {
  opacity: 0.85;
  transform: scale(1.08);
}
.sidebar-language-switcher a.active {
  opacity: 1;
  transform: scale(1.12);
}
.sidebar-language-switcher img {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.sidebar-language-switcher span.disabled {
  opacity: 0.25;
  cursor: not-allowed;
  filter: grayscale(0.7);
}
.btn-full {
  width: 100%;
  justify-content: center;
}
.sidebar-trust {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--white-a80);
  justify-content: center;
}
.sidebar-trust svg {
  color: var(--green-soft);
}

/* Locks page scrolling while the drawer is open. */
body.drawer-open {
  overflow: hidden;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

/* Centered page hero: headline, lead, trust badges. */
.hero {
  text-align: center;
  padding: 110px var(--page-pad) 64px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero h1 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.18;
  margin-bottom: 14px;
  letter-spacing: -0.015em;
}

.hero .hero-sub {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 400;
  opacity: 0.92;
  max-width: 820px;
  margin: 0 auto;
}

/* Compact quality signals below the headline. */
.trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 400;
}
.badge svg {
  flex-shrink: 0;
  color: var(--green-soft);
}

/* Hero search with the suggestion dropdown layered under the field. */
.hero-search {
  margin: 36px auto 0;
  max-width: 580px;
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.hero-search-field {
  position: relative;
  flex: 1;
}

.hero-search input {
  width: 100%;
  height: 54px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 24px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  outline: none;
  box-shadow: var(--shadow-soft);
  transition: background 0.15s;
}
/* Mirrors the listing search bar's focus feedback with the same palette:
   that bar rests on var(--lav) and turns white, this one does the reverse. */
.hero-search input:focus {
  background: var(--lav);
}

.hero-search input::placeholder {
  color: var(--muted);
}

.hero-search .btn {
  border-radius: var(--radius-pill);
  padding: 0 32px;
  font-size: 16px;
  height: 54px;
  box-shadow: var(--shadow-soft);
}

.hero-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 8px 0;
  z-index: 40;
  display: none;
  text-align: left;
  color: var(--ink);
  overflow: hidden;
}

.hero-search-results.open {
  display: block;
}

.hero-search-results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--ink);
}
.hero-search-results a:hover {
  background: var(--lav);
}

.hero-search-results img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

.hero-search-results .hit-sub {
  color: var(--muted);
  font-size: 12px;
  display: block;
}
.hero-search-results .suggest-item {
  color: var(--ink);
}
.hero-search-results .suggest-person img {
  width: 34px;
  height: 34px;
}

/* --------------------------------------------------------------------------
   Homepage Full-Bleed Hero Banner (Edge-to-edge photo with ultra-soft dissolve)
   -------------------------------------------------------------------------- */
.hero.hero-home-banner {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  /* No overflow clipping here: the search autocomplete must escape the banner.
     The shifted photo is clipped inside .hero-home-bg instead. */
  min-height: 480px;
  display: flex;
  /* Top-aligned so the container's padding-top directly sets the
     navigation-to-content gap instead of being halved by centering. */
  align-items: flex-start;
  background: var(--header);
}

/* Background image spanning all the way to the far right edge of the screen */
.hero-home-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60%;
  max-width: 1200px;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-home-bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-home-bg .hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 30%;
  display: block;
  /* Seamless wide dissolve on the left into brand background */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.7) 38%, black 65%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.7) 38%, black 65%);
}

.hero-bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* The top layer dissolves the photo's upper edge into the header band above. */
  background: linear-gradient(to bottom, var(--header) 0, rgba(76, 77, 104, 0) 90px),
              linear-gradient(to right, var(--header) 0%, rgba(76, 77, 104, 0.5) 25%, transparent 60%);
  pointer-events: none;
}

/* On the banner home page the navigation moves close to the browser edge;
   the saved space goes into the gap between navigation and hero content.
   The bottom padding keeps a visible band of the dark header color between
   the navigation and the start of the hero photo. */
.site-header:has(.hero-home-banner) .navbar {
  padding-top: 22px;
  padding-bottom: 44px;
}

/* Content container centered with standard padding */
.hero-home-container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 136px var(--page-pad) 52px;
  position: relative;
  z-index: 2;
}

.hero-home-content {
  max-width: 620px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--green-soft);
  margin-bottom: 14px;
}

.hero-home-banner h1 {
  font-size: 46px;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 18px;
  letter-spacing: -0.015em;
  color: var(--white);
}

.hero-home-banner .hero-sub {
  font-size: 19px;
  line-height: 1.48;
  color: rgba(255, 255, 255, 0.94);
  margin: 0 0 28px 0;
  max-width: 560px;
}

/* Actions: Wizard CTA vs. Search */
.hero-actions {
  margin-top: 24px;
}

.hero-action-wizard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.btn-hero-wizard {
  /* Same footprint as the classic-search input so toggling does not shift layout. */
  width: 100%;
  max-width: 430px;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  padding: 16px 36px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.btn-hero-wizard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  background: var(--green-hover);
}

.btn-hero-wizard svg {
  /* Arrow trails the label, matching the forward nudge on hover. */
  order: 1;
  color: var(--white);
  transition: transform 0.15s ease;
}

.btn-hero-wizard:hover svg {
  transform: translateX(3px);
}

.hero-toggle-wrap {
  margin-top: 4px;
}

.hero-toggle-link {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-toggle-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* The search icon carries a hardcoded dark stroke; follow the link color here. */
.hero-toggle-link svg :is(circle, path) {
  stroke: currentColor;
}

.hero-toggle-link:hover {
  color: var(--white);
}

.hero-action-search {
  animation: heroActionFadeIn 0.25s ease-out;
}

.hero-action-search .hero-search {
  margin: 0 0 10px 0;
  max-width: 560px;
}

@keyframes heroActionFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Buttons & Chips
   ========================================================================== */

/* Base button; variants only swap colors, sizing comes from .btn-sm. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  padding: 14px 26px;
  min-height: 52px;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.08s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: scale(0.98);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn-sm {
  min-height: 42px;
  padding: 8px 18px;
  font-size: 14px;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn-green {
  background: var(--green);
  color: var(--white);
}
.btn-green:hover {
  background: var(--green-hover);
}
.btn-green:disabled:hover {
  background: var(--green);
}

/* Trust Section prominent wide CTA */
.btn-trust-cta {
  padding: 16px 52px;
  font-size: 16px;
  min-width: 340px;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(30, 126, 82, 0.22);
  margin-top: 8px;
}
.btn-trust-cta:hover {
  box-shadow: 0 8px 24px rgba(30, 126, 82, 0.35);
  transform: translateY(-2px);
}
.btn-trust-cta svg {
  /* Arrow trails the label, matching the forward nudge on hover. */
  order: 1;
  transition: transform 0.15s ease;
}
.btn-trust-cta:hover svg {
  transform: translateX(4px);
}

.btn-lav {
  background: var(--lav);
  color: var(--lav-text);
  font-weight: 500;
}
.btn-lav:hover {
  background: var(--lav-hover);
}

.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--white-a70);
  color: var(--white);
}
.btn-ghost:hover {
  background: var(--white-a10);
}

/* Pill chip used for links and filter toggles. */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.chip-green {
  background: var(--green-soft);
  color: var(--white);
}
.chip-dark {
  background: var(--chip-dark);
  color: var(--white);
}
.chip-lav {
  background: var(--lav);
  color: var(--lav-text);
}

/* Wrap of clickable topic chips. */
.chip-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip-links .chip {
  font-size: 14px;
  padding: 8px 18px;
  background: var(--lav);
  color: var(--lav-text);
}
.chip-links .chip:hover,
.chip-links .chip.active {
  background: var(--header);
  color: var(--white);
}

.link-underline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  color: var(--ink);
}
.link-underline:hover {
  opacity: 0.7;
}

/* Circular back-to-listing button. */
.back-fab {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.back-fab:hover {
  background: var(--lav);
  border-color: var(--lav-hover);
}
.back-fab svg {
  display: block;
}

/* ==========================================================================
   Filter Bar (Listing & Advisor Search)
   ========================================================================== */

/* Rendered only inside <noscript>: a complete server-backed fallback without
   changing the JavaScript-enhanced filter layout. */
.filters-nojs {
  margin: 36px 0 12px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--white);
}
.filters-nojs-head h2,
.filters-nojs-head p {
  margin: 0;
}
.filters-nojs-head p {
  margin-top: 5px;
  color: var(--muted);
}
.filters-nojs-search {
  display: grid;
  gap: 7px;
  margin-top: 20px;
  font-weight: 700;
}
.filters-nojs-search input {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font: inherit;
}
.filters-nojs details {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.filters-nojs summary {
  cursor: pointer;
  font-weight: 800;
}
.filters-nojs-options,
.filters-nojs-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px 18px;
  margin-top: 14px;
}
.filters-nojs-options label,
.filters-nojs-accepting {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.filters-nojs-options input,
.filters-nojs-accepting input {
  margin-top: 3px;
}
.filters-nojs-options strong,
.filters-nojs-groups fieldset {
  grid-column: 1 / -1;
}
.filters-nojs-groups fieldset {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.filters-nojs-groups legend {
  padding: 0 5px;
  font-weight: 800;
}
.filters-nojs-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
  padding-top: 36px;
  padding-bottom: 12px;
  position: relative;
}

/* Back link beside the filter bar on taxonomy pages. */
.filter-back {
  flex: 0 0 auto;
  height: 54px;
}

.filters-with-back .search-bar {
  margin-left: auto;
}

.filters-without-challenge .filter-fab {
  margin-left: 0;
}

/* Free-text search field with clear button; suggestions render below. */
.search-bar {
  flex: 1 1 0;
  max-width: 360px;
  background: var(--lav);
  border-radius: 28px;
  height: 54px;
  display: flex;
  align-items: center;
  padding: 0 18px 0 22px;
  gap: 10px;
  position: relative;
  transition: background 0.15s, box-shadow 0.15s;
}
.search-bar:focus-within {
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.search-bar input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--lav-text);
}
.search-bar input:focus,
.search-bar input:focus-visible,
.dd-search input:focus,
.dd-search input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.search-bar input::placeholder {
  color: var(--lav-text);
  opacity: 0.85;
}

.search-bar .search-clear {
  display: none;
  padding: 6px;
  color: var(--lav-text);
}
.search-bar.has-value .search-clear {
  display: inline-flex;
}
.search-bar.has-value .search-icon {
  display: none;
}
.search-bar .search-icon {
  color: var(--lav-text);
  display: inline-flex;
  align-items: center;
}

/* Dropdown trigger shell; the panel positions itself below this wrapper. */
.filter-dd {
  position: relative;
  flex: 1 1 0;
  max-width: 360px;
}
.filter-dd:has(.dd-panel.open) {
  z-index: 60;
}

.filter-dd-toggle {
  width: 100%;
  background: var(--lav);
  border-radius: 28px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 22px;
  font-size: 15px;
  color: var(--lav-text);
  transition: background 0.15s;
}
.filter-dd-toggle:hover {
  background: var(--lav-hover);
}
.filter-dd-toggle .dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-dd-toggle .dd-count {
  background: var(--header);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: 8px;
  margin-right: 6px;
}
/* Wrapper keeping the count badge and chevron vertically centered. */
.filter-dd-toggle .dd-count-wrap {
  display: flex;
  align-items: center;
}
.filter-dd-toggle .dd-arrow {
  flex-shrink: 0;
}

/* Round advanced-filter trigger with its count badge. */
.filter-fab {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--header);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: background 0.15s, transform 0.08s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.filter-fab:hover {
  background: var(--header-hover);
}
.filter-fab:active {
  transform: scale(0.96);
}
.filter-fab-count {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 2px solid var(--bg);
  border-radius: var(--radius-pill);
  background: #e4e4e8;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.filter-fab-count[hidden] {
  display: none;
}

/* Clear-all row; spans the full bar width when filters are active. */
.filters-actions {
  flex: 0 0 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
  margin-bottom: 2px;
  padding-left: 14px;
}
.filters-actions[hidden] {
  display: none;
}
.filters-clear-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 2px 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--menu-primary);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.filters-clear-all:hover {
  background: none;
  color: var(--ink);
}
.filters-clear-all svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Dropdown Panels */
/* Absolute popover under a trigger; .two-col adapts on desktop. */
.dd-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--menu-surface);
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  padding: 8px 0;
  z-index: 40;
  display: none;
  overflow: hidden;
}
.dd-region-group + .dd-region-group {
  margin-top: 5px;
}
.dd-region-special {
  border-top: 1px solid rgba(42, 34, 60, 0.14);
  margin-top: 9px !important;
  padding-top: 7px;
}
.dd-item.dd-heading {
  cursor: default;
}
.dd-item.dd-heading:hover {
  background: transparent;
}
#challenge-panel .dd-item.dd-group {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  padding-top: 10px;
  padding-bottom: 6px;
}
#challenge-panel .dd-challenge-group + .dd-challenge-group {
  margin-top: 2px;
}
#challenge-panel .dd-item.is-active-category {
  /* Original token var(--primary-dark) was undefined; color therefore inherited. */
  color: inherit;
}
#challenge-panel .dd-item.is-current-topic {
  background: var(--green-tint);
  font-weight: 500;
}
/* The region picker contains long official lists, so it needs a denser rhythm. */
.dd-panel.two-col {
  padding: 6px 0;
}
.dd-panel.two-col .dd-search {
  height: 36px;
  margin: 3px 12px 5px;
}
.dd-panel.two-col .dd-item {
  padding-top: 3px;
  padding-right: 12px;
  padding-bottom: 3px;
  gap: 12px;
  line-height: 1.25;
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
}
.dd-panel.two-col .dd-item > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#challenge-panel.two-col .dd-item.dd-group,
#challenge-panel.two-col .dd-item.dd-group > span {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.dd-panel.two-col .dd-item.dd-group + .dd-item.dd-group {
  margin-top: 2px;
}
.dd-panel.two-col .dd-item.dd-sub + .dd-item.dd-group {
  margin-top: 4px;
}
.dd-panel.two-col .dd-region-group + .dd-region-group {
  margin-top: 3px;
}
.dd-panel.open {
  display: block;
}

.mobile-sheet-head,
.mobile-sheet-foot {
  display: none;
}

/* Inline search that filters a panel's rows while typing. */
.dd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 40px;
  margin: 4px 12px 8px;
  padding: 0 14px;
  background: var(--lav);
  border-radius: 100px;
  transition: background 0.15s, box-shadow 0.15s;
}
.dd-search:focus-within {
  background: var(--white);
  box-shadow: var(--shadow-soft);
}
.dd-search svg {
  flex-shrink: 0;
  color: var(--muted);
}
.dd-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
.dd-search input::placeholder {
  color: var(--muted);
}

/* Rows hidden by the inline search or without a live result. */
.dd-item[hidden] {
  display: none;
}
.dd-region-empty {
  display: none !important;
}
.dd-region-group:not(:has(.dd-item:not([hidden]))),
.dd-challenge-group:not(:has(.dd-item:not([hidden]))) {
  display: none;
}
.dd-empty {
  padding: 12px 18px;
  font-size: 14px;
  color: var(--muted);
}

/* One selectable row: group heading, sub-item, or checkbox label. */
.dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 18px;
  font-size: 15px;
  line-height: 1.45;
  cursor: pointer;
  white-space: nowrap;
}
.dd-item:hover {
  background: var(--menu-primary-tint);
}
.dd-item.dd-group {
  color: var(--ink);
  font-weight: 700;
}
#region-panel .dd-item.dd-group,
#challenge-panel .dd-item.dd-group {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
#challenge-panel .dd-item.dd-sub,
#region-panel .dd-item.dd-sub {
  font-size: 15px;
}
.dd-item.dd-group + .dd-item.dd-group {
  margin-top: 4px;
}
.dd-item.dd-sub + .dd-item.dd-group {
  margin-top: 8px;
}
.dd-item.dd-sub {
  padding-left: 28px;
  color: var(--lav-text);
  font-weight: 400;
}
/* The dash is presentation, not data: the chips variant of the panels
   (prototype-settings.php) removes it without touching the markup. */
.dd-item.dd-sub > span::before {
  content: '– ';
}
.dd-region-special .dd-item,
.dd-item.dd-online {
  padding-left: 18px;
  color: var(--ink);
  font-weight: 400;
}
.dd-region-special .dd-item > span::before,
.dd-item.dd-online > span::before {
  content: none !important;
}

/* Custom checkbox shared by dropdowns and the advanced filter. */
.dd-item input[type="checkbox"],
.advfilter-check input[type="checkbox"],
.form-consent input[type="checkbox"],
.no-results-filter-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--menu-primary);
  border-radius: 4px;
  flex-shrink: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  background: var(--white);
  transition: background 0.12s, border-color 0.12s;
}
.dd-item input[type="checkbox"]:checked,
.advfilter-check input[type="checkbox"]:checked,
.form-consent input[type="checkbox"]:checked,
.no-results-filter-toggle:checked {
  background: var(--menu-primary);
  border-color: var(--menu-primary);
}
.dd-item input[type="checkbox"]:checked::before,
.advfilter-check input[type="checkbox"]:checked::before,
.form-consent input[type="checkbox"]:checked::before,
.no-results-filter-toggle:checked::before {
  content: "";
  width: 9px;
  height: 7px;
  background: var(--white);
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0, 38% 68%);
}

/* Suggest Panel */
/* Dropdown under the search bar with grouped topic and advisor hits. */
.suggest-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--menu-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  padding: 6px 0;
  z-index: 40;
  display: none;
  overflow: hidden;
}
.suggest-panel.open {
  display: block;
}
.suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 18px;
  font-size: 14px;
  color: var(--ink);
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.suggest-item:hover {
  background: var(--menu-primary-tint);
}
.suggest-item.suggest-topic {
  display: flex;
  align-items: center;
  gap: 10px;
}
.suggest-kind {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--green-tint);
  /* Original token var(--green-dark) was undefined; color therefore inherited. */
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.suggest-topic-copy {
  min-width: 0;
  font-weight: 500;
}
.suggest-topic .hit-sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}
.suggest-sep {
  height: 1px;
  background: #e2dbe6;
  margin: 6px 0;
}
.suggest-item.suggest-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.suggest-person img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.suggest-person-photo {
  position: relative;
  flex: 0 0 36px;
}
.suggest-person > span:nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}
/* Compact form of the shared Premium marker inside search suggestions. */
.suggest-focus-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: var(--radius-pill);
  background: var(--green-soft);
  color: var(--white);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.suggest-person .hit-sub {
  display: block;
  font-size: 12px;
  color: var(--muted);
}
.suggest-all {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.suggest-loading,
.suggest-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  font-size: 14px;
  color: var(--muted);
}

/* Cross-reference: .spinner and .grid-spinner are near-duplicates kept separate deliberately (0.6s vs 0.7s). */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--lav);
  border-top-color: var(--header);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Advanced Filter Overlay */
/* Wide popover or mobile bottom sheet with grouped chip toggles. */
.advfilter {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 920px;
  max-width: calc(100vw - 32px);
  background: var(--white);
  border-radius: 28px;
  box-shadow: var(--shadow-pop);
  padding: 18px 26px;
  z-index: 60;
  display: none;
}
.advfilter.open {
  display: flex;
  flex-direction: column;
}
.advfilter-head {
  display: none;
}
.advfilter-body {
  min-height: 0;
}

.advfilter-close {
  position: absolute;
  top: 18px;
  right: 26px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--header);
  color: var(--white);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}
.advfilter-close:hover {
  background: var(--header-hover);
}

/* One labeled group of mutually combinable chips. */
.advfilter-group {
  margin-bottom: 8px;
}
.advfilter-group .group-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 6px;
}

/* Toggleable filter chip; "all" resets the group. */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.chip-toggle {
  border-radius: var(--radius-pill);
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 500;
  background: var(--chip-surface);
  color: var(--chip-ink);
  transition: background 0.12s, color 0.12s;
}
.chip-toggle:hover {
  background: #ded2f0;
}
.chip-toggle.selected {
  background: var(--chip-on);
  color: var(--white);
}

.advfilter-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  margin-top: 6px;
  font-size: 14px;
  cursor: pointer;
}

.advfilter-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 8px;
  flex-shrink: 0;
  background: var(--white);
}
.filter-match-count {
  margin-right: auto;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
/* Reset controls in the filter panels are plain text links, never buttons
   and never underlined. */
.advfilter-foot .reset-link,
.mobile-sheet-foot .sheet-btn-reset {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--menu-primary);
  text-decoration: none;
}
.advfilter-foot .reset-link:hover,
.mobile-sheet-foot .sheet-btn-reset:hover {
  background: none;
  color: var(--ink);
}

/* ==========================================================================
   Advisor Cards (.b-card) & Card Grid
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.b-card {
  background: var(--white);
  border-radius: var(--radius-card);
  isolation: isolate;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.35s ease;
}
.b-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}

/* Portrait photo with a subtle zoom on card hover. */
.b-card-photo {
  display: block;
  height: 300px;
  overflow: hidden;
  position: relative;
  background: var(--photo-placeholder);
}
.b-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
/* Shared Premium marker; each surface owns only its placement and shape. */
.focus-badge,
.detail-focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  background: var(--green-soft, #8dc8a4);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(42, 34, 60, 0.18);
}
.focus-badge svg,
.detail-focus-badge svg {
  flex: 0 0 auto;
}
/* Card variant overlays the portrait at its right edge. */
.focus-badge {
  position: absolute;
  z-index: 1;
  top: 18px;
  right: 0;
  padding: 0 18px 0 15px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
}
.b-card:hover .b-card-photo img {
  transform: scale(1.03);
}

/* Card content; the description flexes so the footer always sits at the bottom. */
.b-card-body {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Advisor name, role, region, and teaser text. */
.b-card-name {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--ink);
}

.b-card-title {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 12px;
  min-height: 42px;
}

.b-card-region {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

/* Compact delivery formats keep region and consultation channel separate. */
.b-card-formats {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px 14px;
  min-height: 42px;
  margin: 0 0 14px;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.b-card-formats li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.b-card-formats svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: var(--muted);
}

.b-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 24px;
  flex: 1;
}

/* Footer with media hint and profile link. */
.b-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  margin-top: auto;
}
.b-card-foot .link-underline {
  font-size: 15px;
  font-weight: 600;
  margin-left: auto;
}

/* Audio/video availability labels. */
.media-badges {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.media-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.media-badge svg {
  flex-shrink: 0;
  color: var(--green);
}

/* "Not accepting clients" notice above the card body. */
.status-closed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  align-self: flex-start;
}
.status-closed::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}

/* Infinite-loading sentinel row below the grid. */
.grid-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 0 60px;
  min-height: 60px;
  font-size: 14px;
  color: var(--muted);
}
.grid-more.done {
  display: none;
}
.grid-more.has-error {
  flex-wrap: wrap;
}
.grid-more.has-error .grid-spinner {
  display: none;
}
.grid-more-retry {
  min-height: 40px;
}
.grid-more-retry[hidden] {
  display: none;
}
/* See .spinner above; near-duplicate kept separate deliberately for its 0.7s animation. */
.grid-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--lav);
  border-top-color: var(--header);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Crawlable fallback and direct navigation for paginated listings. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 64px;
}
.pagination[hidden] {
  display: none;
}
.pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--lav);
  border-radius: var(--radius-pill);
  /* Original token var(--text) was undefined; color therefore inherited. */
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.pagination-link[hidden] {
  display: none;
}
.pagination-ellipsis {
  min-width: 24px;
  text-align: center;
  color: var(--muted);
}
.pagination-ellipsis[hidden] {
  display: none;
}
.pagination-link:hover,
.pagination-link:focus-visible,
.pagination-link.active {
  border-color: var(--header);
  background: var(--header);
  color: var(--white);
}
.pagination-direction {
  padding-inline: 18px;
}

.region-directory {
  margin: -24px 0 72px;
}

.region-directory h2 {
  margin: 0 0 16px;
  color: var(--header);
  font-size: 24px;
  font-weight: 500;
}

.region-directory .coach-chips {
  gap: 10px;
  margin: 0;
}

.region-directory .coach-chips .chip {
  padding: 7px 14px;
  font-size: 13px;
  text-decoration: none;
}

/* Full-width recovery state inside the advisor grid. */
.no-results {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 28px 0 52px;
  padding: 34px 38px 36px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  text-align: left;
}

.no-results-heading {
  display: flex;
  align-items: center;
  gap: 14px;
}

.no-results-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: var(--green-tint);
}

.no-results-icon svg {
  width: 21px;
  height: 21px;
}

.no-results h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
}

.no-results-copy {
  max-width: 820px;
  margin: 14px 0 0 60px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}

.no-results-summary {
  min-width: 0;
  margin: 24px 0 0 60px;
  padding: 0;
  border: 0;
}

.no-results-filter-row {
  display: grid;
  grid-template-columns: 20px minmax(110px, 150px) minmax(0, 1fr);
  align-items: start;
  gap: 12px 18px;
  padding: 5px 0;
}

.no-results-filter-row:not(.is-fixed) {
  cursor: pointer;
}

.no-results-filter-toggle {
  margin: 2px 0 0;
}

.no-results-filter-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--menu-primary) 28%, transparent);
  outline-offset: 3px;
}

.no-results-filter-spacer {
  width: 17px;
  height: 17px;
}

.no-results-filter-name {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.no-results-filter-value {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.no-results-filter-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 24px 0 0 60px;
}

.no-results-reset {
  margin: 0;
  text-decoration: none;
}

.no-results-filter-count {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .no-results {
    margin: 18px auto 34px;
    padding: 22px 18px 24px;
  }

  .no-results-heading {
    align-items: center;
    gap: 10px;
  }

  .no-results-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .no-results-icon svg {
    width: 18px;
    height: 18px;
  }

  .no-results h2 {
    font-size: 18px;
    line-height: 1.25;
  }

  .no-results-copy {
    margin-top: 10px;
    margin-left: 0;
    font-size: 14px;
    line-height: 1.5;
  }

  .no-results-summary {
    margin-left: 0;
    margin-top: 14px;
  }

  .no-results-filter-row {
    grid-template-columns: 20px 86px minmax(0, 1fr);
    gap: 8px 10px;
    padding: 4px 0;
  }

  .no-results-filter-actions {
    margin-left: 0;
    margin-top: 18px;
    align-items: stretch;
    flex-direction: column;
  }

  .no-results-reset {
    width: 100%;
    justify-content: center;
    min-height: 46px;
    padding: 11px 18px;
  }
}

/* Coach Card variation */
/* Compact home-page variant with topic chips instead of the region block. */
.coach-grid {
  padding-top: 24px;
  padding-bottom: 12px;
}
.coach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.coach-chips .chip {
  font-size: 12px;
  padding: 4px 12px;
}
.coach-chips .chip:hover {
  background: var(--header);
  color: var(--white);
}
/* Calm uppercase type label on cards — same style as the blog teaser category. */
.b-card-type {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--menu-primary);
  margin-bottom: 8px;
}
a.b-card-type:hover {
  text-decoration: none;
}
.b-card-meta {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 16px;
}

/* ==========================================================================
   Detail Page (Berater:innen Profil)
   ========================================================================== */

/* Page header with back link, name, and subtitle. */
.detail-top {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding-top: 44px;
  margin-bottom: 8px;
}

.detail-back {
  position: static;
  flex-shrink: 0;
  margin-top: 8px;
}

/* Detail variant attaches flush to the facts panel like the card-photo badge. */
.detail-focus-badge {
  position: absolute;
  z-index: 1;
  top: 30px;
  right: 0;
  padding: 0 18px 0 15px;
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  align-self: flex-start;
  margin-bottom: 12px;
}

.detail-head h1 {
  font-size: 48px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.detail-head .detail-advisor-type {
  margin-top: 12px;
  color: var(--menu-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-transform: uppercase;
}
.detail-head .subtitle {
  font-size: 20px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.35;
}

/* Two-column profile layout: content left, sticky sidebar right. */
.detail-main {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(300px, 360px);
  gap: 56px;
  padding-top: 36px;
  align-items: start;
}

/* Hero card with portrait and key facts side by side. */
.detail-hero-card {
  background: var(--white);
  border-radius: 40px 20px 20px 40px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: minmax(380px, 500px) minmax(0, 1fr);
  overflow: hidden;
  min-height: 380px;
}

/* Portrait column of the hero card. */
.detail-hero-card .photo {
  position: relative;
  min-height: 380px;
  background: var(--photo-placeholder);
}
.detail-hero-card .photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Facts column with labeled rows. */
.detail-hero-card .facts {
  position: relative;
  padding: 36px 36px 30px;
  font-size: 15px;
  display: flex;
  flex-direction: column;
}

.facts-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.facts ul {
  margin-bottom: 24px;
}
.facts ul:last-child {
  margin-bottom: 0;
}
.contact-facts .facts > .facts-label:not(:first-child) {
  margin-top: 22px;
}

/* Small supporting note and CTA row inside a .facts sidebar. */
.facts-note {
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 0;
  line-height: 1.5;
}
.facts-cta {
  margin-top: 20px;
}
.facts-cta .link-underline {
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.facts li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
  line-height: 1.4;
  font-size: 15px;
}
.facts li:last-child {
  margin-bottom: 0;
}
.facts li svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted);
}
.facts .addr {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
}

.media-links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.media-links .link-underline {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Same green media icons as .media-badge on the listing card. */
.media-links .link-underline svg {
  color: var(--green);
  flex-shrink: 0;
}

/* The CTA sits directly on the page background without a white surface. */
.detail-cta {
  position: sticky;
  top: 40px;
}

.detail-cta h3 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
}
.detail-cta .cta-label {
  font-size: 13px;
  font-weight: 700;
  margin-top: 20px;
}
.detail-cta .cta-text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 4px;
}
.detail-cta .btn {
  margin-top: 20px;
}
.detail-cta .status-closed {
  margin-top: 18px;
  margin-bottom: 0;
}
/* The repeated profile CTA is a mobile end cap. Desktop uses the configured
   sticky contact surface instead, so both actions never compete on screen. */
.detail-cta-repeat {
  display: none;
}

/* Server-side configuration can make each surface static independently. */
.surface-profile.surface-desktop-static .detail-main > .detail-cta,
.surface-blog.surface-desktop-static .article-aside,
.surface-content.surface-desktop-static .contact-facts {
  position: static;
}
/* Availability indicator in the booking sidebar. */
.accepts {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 500;
  margin-top: 14px;
}

/* Generic profile content section with muted heading. */
.section {
  padding-top: 48px;
}
.section > h2 {
  font-size: 30px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 20px;
}
.section > *:last-child {
  margin-bottom: 0;
}
/* Portrait paragraphs. The text arrives as separate lines, so each one is its
   own element instead of a preserved line break. */
.body-text {
  font-size: 16px;
  line-height: 1.55;
  max-width: 820px;
  color: var(--ink);
  margin-bottom: 16px;
}

.body-text:last-child { margin-bottom: 0; }

/* Bullets, against the global `ul { list-style: none }` reset. */
.portrait-list {
  max-width: 820px;
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: disc;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}

.portrait-list li { margin-bottom: 4px; }
.portrait-list li::marker { color: var(--green-soft); }

/* Group label above chips or lists; text-transform is intentionally not uppercase. */
.sub-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 12px;
}

/* Read-only chip group (topics, languages, methods). */
.chip-block {
  margin-bottom: 28px;
}
.chip-block:last-child {
  margin-bottom: 0;
}
.chip-block .chip-row {
  max-width: 720px;
  row-gap: 10px;
}

/* Education and training history with green dot markers. */
.edu-list {
  font-size: 15px;
  line-height: 1.6;
}
.edu-list li {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
}
.edu-list li::before {
  content: "•";
  color: var(--green);
  font-weight: bold;
}

/* Desktop reads the competence labels, chips, and info items larger; mobile
   keeps its compact sizes from the base rules above. */
/* Deliberate breakpoint exception; keep after the base rules it overrides. */
@media (min-width: 821px) {
  .sub-label {
    font-size: 15px;
  }
  .chip-block .chip {
    font-size: 15px;
    padding: 8px 18px;
  }
  .info-cards .info-card li {
    font-size: 15px;
  }
}

/* Three practical-info cards (languages, formats, audience). */
.info-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 838px;
  margin-bottom: 0;
}
.info-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 26px 22px;
}
.info-card.tint {
  background: #edf7f1;
}
.info-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ink);
}
.info-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 10px;
}
.info-card li:last-child {
  margin-bottom: 0;
}
.info-card li svg {
  color: var(--green);
  flex-shrink: 0;
}
/* Mini flag icon in front of a language name. */
.language-flag {
  flex: 0 0 24px;
  width: 24px;
  height: 18px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(28, 29, 34, 0.1);
}

/* Fee table: service, duration, price. */
.price-table {
  width: 100%;
  max-width: 838px;
  border-collapse: collapse;
  font-size: 16px;
}

.price-table tr {
  background: var(--white);
}
.price-table tr:nth-child(even) {
  background: #fafafa;
}

.price-table td {
  padding: 8px 24px;
  border-bottom: 1px solid #ececec;
}

.price-table td:nth-child(2) {
  width: 140px;
  color: var(--muted);
}
.price-table td:nth-child(3) {
  width: 160px;
  font-weight: 600;
}

.detail-pricing .table-responsive {
  margin-bottom: 14px;
}

/* Booking link below the fee table. */
.detail-book-link {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 32px;
  font-size: 16px;
  font-weight: 500;
}

.detail-pricing > .sub-label {
  margin-bottom: 12px;
}

.detail-pricing > .chip-block {
  margin-top: 36px;
  margin-bottom: 0;
}

.detail-book-link + .chip-block {
  margin-top: 0;
}

.detail-pricing > .chip-block .sub-label {
  margin-bottom: 12px;
}

/* Insurance coverage note under the pricing block. */
.insurance-note {
  font-size: 15px;
  color: var(--ink);
  margin-top: 14px;
  max-width: 720px;
  line-height: 1.5;
}

/* Without a booking link, preserve the same section separation that follows
   the link on profiles accepting new appointments. */
.detail-pricing > .table-responsive + .insurance-note {
  margin-top: 46px;
}

.insurance-disclaimer {
  margin: 12px 0 0;
}

.section-pad-bottom {
  padding-bottom: 80px;
}

/* Video Card & YouTube Facade */
/* Poster-first video card; the player loads on the first click. */
.video-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin-top: 28px;
  display: block;
  cursor: pointer;
  background: #000;
}
.video-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-card .play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.65) 100%);
  transition: background 0.2s, transform 0.2s;
  z-index: 1;
}
.video-card:hover .play {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 40%, var(--black-a75) 100%);
}
.video-card .play svg {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-card:hover .play svg {
  transform: scale(1.08);
}
.video-card .caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  text-align: center;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  z-index: 2;
}
.video-card.wide {
  width: 100%;
  max-width: 680px;
}

/* Portrait audio player */
/* Card with cover art, title, and custom progress controls. */
.audio-card {
  width: 100%;
  max-width: 520px;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-card);
}
.audio-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.audio-art {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 17px;
  object-fit: cover;
  object-position: center 35%;
  background: var(--lav);
}
.audio-kicker {
  display: block;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.audio-card h3 {
  margin-top: 2px;
  font-size: 17px;
  line-height: 1.3;
}
.audio-card-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}
/* Native fallback audio; hidden once JavaScript enhances the card. */
.audio-native {
  width: 100%;
  margin-top: 16px;
}
.audio-card.is-enhanced .audio-native {
  display: none;
}
/* Custom controls revealed only after enhancement. */
.audio-controls {
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.audio-controls:not([hidden]) {
  display: flex;
}
/* Round play/pause button with swapped icons. */
.audio-play {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--green);
  transition: background 0.15s ease, transform 0.15s ease;
}
.audio-play [hidden] {
  display: none;
}
.audio-play:hover {
  background: var(--green-hover);
  transform: scale(1.04);
}
.audio-play:focus-visible,
.audio-progress:focus-visible {
  outline: 3px solid var(--green-tint);
  outline-offset: 3px;
}
/* Progress track with elapsed and remaining time below. */
.audio-track {
  position: relative;
  min-width: 0;
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.audio-progress {
  width: 100%;
  height: 5px;
  display: block;
  accent-color: var(--green);
  cursor: pointer;
}
.audio-time {
  position: absolute;
  top: calc(50% + 8px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* Deliberate breakpoint exception; keep after the base rules it overrides. */
@media (max-width: 479px) {
  .audio-card { padding: 16px; border-radius: 20px; }
  .audio-art { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
}
/* Active player state: iframe fills the card, custom controls on top. */
.video-card.yt-active {
  aspect-ratio: 16 / 9;
  cursor: default;
  border-radius: 20px;
}
.video-card.yt-active iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
/* Auto-hiding control bar over the playing video. */
.yt-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(to top, var(--black-a75) 0%, rgba(0, 0, 0, 0.3) 70%, transparent);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  border-radius: 0 0 20px 20px;
}
.yt-controls.visible,
.video-card.yt-active:hover .yt-controls,
.video-card.yt-active:focus-within .yt-controls {
  opacity: 1;
  pointer-events: auto;
}
/* Replay overlay replacing YouTube's recommendation grid. */
.yt-end-screen {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background-color: #1d1d1f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.yt-end-screen.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.yt-replay {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--white-a95);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
}
.yt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white-a20);
  color: var(--white);
  cursor: pointer;
}
.yt-time, .yt-duration {
  font-size: 12px;
  font-weight: 500;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.yt-progress {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--white-a25);
  cursor: pointer;
}
.yt-progress-buf {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 3px;
  background: var(--white-a30);
}
.yt-progress-bar {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: 3px;
  background: var(--green);
}
.yt-progress-seek {
  position: absolute;
  inset: -6px 0;
  width: 100%;
  height: 18px;
  opacity: 0;
  cursor: pointer;
  appearance: none;
}

/* ==========================================================================
   Contact & Inquiry Page
   ========================================================================== */

.contact-wrap {
  display: grid;
  grid-template-columns: minmax(0, 820px) minmax(300px, 360px);
  gap: 40px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 60px;
}

.contact-card {
  background: var(--white);
  border-radius: 40px 20px 20px 40px;
  box-shadow: var(--shadow-card);
  padding: 32px 36px 28px;
  width: 100%;
}

.contact-closed-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  margin: 16px 0 28px;
}

/* Who the message goes to. Sits where the profile puts its CTA column and repeats the profile's location list, so the two pages read the same. */
.contact-facts {
  position: sticky;
  top: 40px;
}
.contact-facts h3 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--muted);
}
.contact-facts-name {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin-top: 20px;
}
.contact-facts-titles {
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  margin-top: 4px;
}
.contact-facts .facts {
  margin-top: 20px;
  font-size: 15px;
}
/* Contact details and table-of-contents links share the sidebar shell but not
   the same typographic role. Keep their list classes explicit. */
.contact-facts .contact-link-list a {
  font-weight: 400;
  text-decoration: none;
}
.contact-facts .contact-link-list a:hover {
  text-decoration: none;
}

/* Two-column row of form fields; collapses to one column on mobile. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

/* Labeled input, select, or textarea with focus ring. */
.form-field {
  margin-bottom: 18px;
}
.required-mark {
  margin-left: 2px;
  color: var(--red);
}
.form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-field input,
.form-field select {
  height: 48px;
}

.form-field select {
  padding-right: 36px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--header);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-field textarea {
  min-height: 100px;
  resize: vertical;
}
.form-field .textarea-tall {
  min-height: 160px;
}

/* Privacy and crisis guidance next to the advisor inquiry message field. */
.form-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: -4px 0 22px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--menu-primary);
  border-radius: 12px;
  background: var(--surface, #f8f7fb);
  color: var(--ink);
}
.form-safety-icon {
  flex: 0 0 20px;
  margin-top: 2px;
  color: var(--menu-primary);
}
.form-safety-note h2 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
}
.form-safety-note p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
}
.form-safety-note a {
  display: inline-flex;
  margin-top: 2px;
  color: var(--menu-primary);
  font-size: 14px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.form-safety-note a:hover {
  text-decoration-thickness: 2px;
}

/* Required single-choice contact preference on advisor inquiries. */
.contact-preference {
  border: 0;
  padding: 0;
  min-width: 0;
}
.contact-preference legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 8px;
}
.contact-choice-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.contact-preference .field-error {
  width: 100%;
  margin-top: 12px;
}
.form-field .contact-choice {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}
.form-field .contact-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--menu-primary);
  border-radius: 50%;
  background: var(--white);
  box-shadow: none;
}
.form-field .contact-choice input[type="radio"]:checked {
  border-width: 5px;
}
.form-field .contact-choice input[type="radio"]:focus-visible {
  outline: 2px solid var(--menu-primary);
  outline-offset: 2px;
  box-shadow: none;
}
.contact-preference .field-hint {
  margin: 0 0 10px;
}
.form-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.form-consent-row label {
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}
.form-consent .field-error {
  margin-top: 10px;
  padding-left: 27px;
  align-items: flex-start;
  line-height: 1.45;
}
.form-field.form-consent {
  margin-bottom: 20px;
}
.form-field.form-consent input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 2px 0 0;
  padding: 0;
  border-radius: 4px;
  box-shadow: none;
}
.form-consent a {
  color: var(--menu-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-consent a:hover {
  text-decoration-thickness: 2px;
}
.form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--menu-primary);
  outline-offset: 2px;
}

/* Accessible text that remains available to assistive technology. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Inline safety hint beneath textarea — icon + text, no box */
.form-safety-inline {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  margin: -8px 0 16px;
}
.form-safety-inline a {
  color: var(--menu-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-required-note {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.field-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
}

/* Focus target and navigation hub for server-side validation errors. */
.form-error-summary {
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid var(--red);
  border-left-width: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--red) 7%, var(--white));
  color: var(--ink);
  scroll-margin-top: 24px;
}
.form-error-summary:focus {
  outline: none;
}
.form-error-summary h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}
.form-error-summary ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.form-error-summary li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.form-error-summary li > svg {
  margin-top: 1px;
}
.form-error-summary li + li {
  margin-top: 6px;
}
.form-error-summary a {
  color: var(--red);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-decoration: none;
}
.form-error-summary a:hover {
  color: var(--ink);
}

/* Inline validation message under one field. */
.field-error {
  color: var(--red);
  font-size: 13px;
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  line-height: 1.45;
}

/* Success notice replacing a submitted form. */
.form-success {
  display: none;
  background: var(--green-tint);
  border: 1px solid var(--green);
  color: var(--ink);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 14px;
  margin-bottom: 24px;
}
.form-success.show {
  display: block;
}

/* ==========================================================================
   Home & About Page Sections
   ========================================================================== */

/* Alternating light sections; .alt adds the gray band. */
.section-light {
  padding: 72px 0;
}
.section-light.alt {
  background: #eeeef2;
}
.section-light h2 {
  font-size: 34px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.22;
}
.section-light .section-lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 720px;
  margin-bottom: 36px;
  line-height: 1.55;
}

/* Key figures band on the home page: lead copy left, three counters right. */
.stats-band {
  padding: 64px 0;
}
.stats-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: 48px;
  align-items: center;
}
.stats-band-lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 520px;
}
.stats-band-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.stats-band-number {
  display: block;
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
  /* Tabular digits keep the width steady while the counter runs. */
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.stats-band-label {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}

/* Heading with a right-aligned "show all" link. */
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 12px;
}
.section-head-row h2 {
  margin-bottom: 0;
}
.section-head-row .link-underline {
  font-size: 15px;
  white-space: nowrap;
}

/* Link with animated arrow icon (no underline) */
.section-head-row .link-arrow,
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.section-head-row .link-arrow svg,
.link-arrow svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.section-head-row .link-arrow:hover,
.link-arrow:hover {
  color: var(--ink);
  opacity: 0.7;
  text-decoration: none;
}
.section-head-row .link-arrow:hover svg,
.link-arrow:hover svg {
  transform: translateX(4px);
}

/* Image-and-text layout used across home and about sections. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split .split-img {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.split .split-img-tall {
  max-height: 580px;
}
.split .split-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.split .split-img picture img,
.split .split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Call-to-action button below the chip links in a split section. */
.split .split-cta {
  margin-top: 32px;
}

/* Checkmark list of quality promises. */
.feature-list li {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 15px;
}
.feature-list li:last-child {
  margin-bottom: 12px;
}
.feature-list li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--green);
}
.feature-list b {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 2px;
}
.feature-note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 24px;
}

/* Small uppercase kicker above a heading. */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 12px;
}
.eyebrow-dark {
  color: var(--header);
  opacity: 1;
}
.eyebrow-green {
  color: var(--green);
  opacity: 1;
}

/* Numbered onboarding steps on the home page with branded green step badges */
.steps-list-branded {
  list-style: none;
  padding: 0;
  margin: 28px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.steps-list-branded .step-item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.steps-list-branded .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(30, 126, 82, 0.28);
}
.steps-list-branded .step-content {
  flex: 1;
  font-size: 16px;
  line-height: 1.5;
}
.steps-list-branded .step-title {
  display: inline;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}
.steps-list-branded .step-title::after {
  content: ":";
}
.steps-list-branded .step-desc {
  font-size: 16px;
  color: var(--muted);
}
.steps-list-branded a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
}
.steps-list-branded a:hover {
  color: var(--green);
}

/* Full-width dark call-to-action band. */
.cta-band {
  background: var(--header);
  color: var(--white);
  text-align: center;
  padding: 80px var(--page-pad);
}
.cta-band h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.25;
}
.cta-band p {
  font-size: 17px;
  line-height: 1.6;
  opacity: 0.92;
  margin-bottom: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Photo variant: full-bleed landscape photo with a rounded brand-color box. */
.cta-band-photo {
  position: relative;
  overflow: hidden;
  padding: 104px var(--page-pad);
  text-align: left;
  background: var(--header);
}
.cta-band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.cta-band-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(76, 77, 104, 0.04) 0%, rgba(76, 77, 104, 0.28) 45%, rgba(76, 77, 104, 0.72) 100%),
    linear-gradient(to bottom, rgba(28, 29, 34, 0.22) 0%, rgba(28, 29, 34, 0.05) 18%, rgba(28, 29, 34, 0.05) 82%, rgba(28, 29, 34, 0.26) 100%);
}
.cta-band-photo .container {
  position: relative;
  z-index: 2;
}
.cta-container-right {
  display: flex;
  justify-content: flex-end;
}
.cta-band-box {
  max-width: 580px;
  width: 100%;
  background: rgba(76, 77, 104, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  padding: 44px 48px;
  box-shadow: 0 20px 48px rgba(20, 20, 30, 0.35);
}
.cta-band-box .hero-eyebrow,
.cta-band-box .eyebrow {
  color: var(--green-soft);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: inline-block;
  opacity: 1;
}
.cta-band-box h2 {
  font-size: 30px;
  line-height: 1.22;
  margin-bottom: 14px;
  color: var(--white);
}
.cta-band-box .cta-band-lead {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 24px;
}

/* About Page Specifics */
/* Split hero variant for the about page. */
.hero.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
  padding-top: 56px;
  padding-bottom: 72px;
}
.hero-split-text h1 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 14px;
}

/* Offset image collage beside the hero text. */
.hero-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 540px;
}
.hero-collage img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.hero-collage img:nth-child(2),
.hero-collage img:nth-child(3) {
  transform: translateY(14px);
}

.lead-strong {
  font-size: 24px;
  font-weight: 600;
  max-width: 900px;
  margin-bottom: 24px;
  line-height: 1.35;
  color: var(--ink);
}
.two-col-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1100px;
}
.two-col-text .col-lead {
  font-size: 17px;
  font-weight: 500;
}
.two-col-text p {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.6;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.team-card {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  text-align: center;
}
.team-card img {
  height: 260px;
  width: 100%;
  object-fit: cover;
}
.team-card .team-body {
  padding: 20px;
}
.team-card h3 {
  font-size: 18px;
  font-weight: 600;
}
.team-card p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}

.mission-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mission-item h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.35;
}
.mission-item p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.55;
}

.quote-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.quote {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 24px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.quote p {
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.55;
  flex: 1;
}
.quote .quote-by {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.quote-by span {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
}

/* ==========================================================================
   Blog & Articles
   ========================================================================== */

/* Back link above a filtered blog category listing. */
.category-back {
  padding-top: 36px;
  padding-bottom: 8px;
}

/* Keep the category controls on the same vertical rhythm as listing filters. */
.page-blog-list main > .chip-block {
  padding-top: 36px;
  margin-bottom: 32px;
}

/* Two-column grid of blog teaser cards / Mobile swipeable carousel */
.blog-carousel {
  position: relative;
}
.blog-carousel-dots {
  display: none;
}
.blog-carousel-dot {
  position: relative;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: width 0.25s ease;
}
.blog-carousel-dot::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(76, 77, 104, 0.28);
  transition: width 0.25s ease, background 0.25s ease, border-radius 0.25s ease;
}
.blog-carousel-dot:hover::before {
  background: rgba(76, 77, 104, 0.5);
}
.blog-carousel-dot.active {
  width: 40px;
}
.blog-carousel-dot.active::before {
  width: 24px;
  border-radius: 4px;
  background: var(--header);
}
.blog-carousel-dot:focus-visible {
  outline: 2px solid var(--header);
  outline-offset: 2px;
}
.blog-teasers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding-bottom: 48px;
}

@media (min-width: 821px) {
  .page-home .blog-teasers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-bottom: 0;
  }
}

@media (max-width: 820px) {
  .page-home .blog-carousel {
    margin-left: calc(-1 * var(--page-pad));
    margin-right: calc(-1 * var(--page-pad));
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
  }
  .page-home .blog-teasers {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 20px;
    padding-left: var(--page-pad);
    padding-right: var(--page-pad);
    margin-left: calc(-1 * var(--page-pad));
    margin-right: calc(-1 * var(--page-pad));
    scrollbar-width: none;
  }
  .page-home .blog-teasers::-webkit-scrollbar {
    display: none;
  }
  .page-home .blog-teasers .teaser {
    flex: 0 0 calc(100vw - 2 * var(--page-pad) - 24px);
    max-width: 360px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .page-home .blog-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding-bottom: 12px;
  }
}

/* Blog teaser card: cover, category kicker, title, excerpt, link. */
.teaser {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.teaser:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
  text-decoration: none;
}
.teaser img {
  height: 220px;
  width: 100%;
  object-fit: cover;
}
.teaser .teaser-body {
  padding: 24px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.teaser-cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--menu-primary);
  margin-bottom: 8px;
  text-decoration: none;
}
.teaser h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.3;
}
.teaser p {
  font-size: 14px;
  color: var(--muted);
  flex: 1;
  line-height: 1.55;
}
.teaser .link-underline {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
}

/* Article Detail */
/* Blog post layout: body left, sticky author card right. */
.article {
  display: grid;
  grid-template-columns: minmax(0, 800px) minmax(300px, 360px);
  gap: 0 clamp(56px, 5vw, 80px);
  align-items: start;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--page-pad) 64px;
}
.article-main {
  grid-column: 1;
  min-width: 0;
}
.article-body {
  min-width: 0;
}
.article-tags {
  margin-top: 40px;
  min-width: 0;
}
/* Sticky sidebar with the author teaser and categories. */
.article-aside {
  grid-column: 2;
  position: sticky;
  top: 32px;
  min-width: 0;
}

.article-aside-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
  margin-bottom: 18px;
}

.article-advisor-list {
  display: grid;
  gap: 24px;
}

/* A multi-card selection must scroll with the article instead of becoming a
   viewport-tall sticky surface whose lower cards cannot be reached. */
.article-aside.article-aside-multiple {
  position: static;
}

.article-body h2 {
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.25;
}
.article-body h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.3;
}
.article-body p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 32px;
  color: var(--ink);
}
.article-img {
  border-radius: 20px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-card);
}
.article-body .video-card {
  margin: 0 0 32px;
  border-radius: 24px;
}
.article-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 48px 0;
}
.blogcats {
  margin-top: 36px;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

/* Centered not-found block with a fallback search. */
.notfound {
  max-width: 620px;
  padding-top: 48px;
}
.notfound h1 {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 10px;
}
.notfound-lead {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 24px;
}
.notfound-search {
  display: flex;
  gap: 12px;
  align-items: center;
}
.notfound-search .search-bar {
  max-width: none;
}
.notfound-search .btn {
  border-radius: 999px;
  padding: 0 28px;
}

.page-404 .section {
  padding-top: 44px;
}
.page-404 .section-head-row h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--ink);
}
.page-404 .notfound-topic-chips .chip-dark {
  background: var(--chip-dark);
  color: var(--white);
}
.page-404 .notfound-topic-chips .chip-dark:hover {
  background: var(--header);
}
.notfound-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.notfound-foot .btn {
  min-height: 50px;
}
.notfound-foot-label {
  font-size: 15px;
  color: var(--muted);
}

/* ==========================================================================
   Static Content & Legal Pages – Design System & Layouts
   ========================================================================== */

.content-hero {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px var(--page-pad) 64px;
  text-align: center;
}

.content-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  background: var(--white-a15);
  border: 1px solid var(--white-a20);
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 20px;
  backdrop-filter: blur(8px);
}

.content-hero-badge.badge-emergency {
  background: rgba(220, 38, 38, 0.25);
  border-color: rgba(254, 202, 202, 0.4);
  color: #fff0f0;
}

.content-hero h1 {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--white);
}

.content-hero p.content-hero-sub {
  max-width: 740px;
  margin: 18px auto 0;
  color: var(--white-a90);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.55;
}

.content-hero-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: 14px;
  color: var(--white-a75);
}

.content-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Page Main wrapper */
.content-page-main {
  background: var(--bg);
  padding: 56px 0 96px;
  min-height: 60vh;
}

/* 2-Column Legal / Documentation Layout */
.legal-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  width: 100%;
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

.legal-grid-single {
  max-width: 920px;
  margin: 0 auto;
}

/* Cohesive Legal & Content Card Layouts */
.contact-card-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (max-width: 768px) {
  .contact-card-cols-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.legal-section-block {
  margin-bottom: 18px;
  scroll-margin-top: 40px;
}

.legal-section-block:last-child {
  margin-bottom: 0;
}

.legal-section-block .legal-section-header {
  margin-bottom: 14px;
}

.legal-main-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Legal Cards */
.legal-card {
  background: var(--white);
  border-radius: 40px 20px 20px 40px;
  box-shadow: var(--shadow-card);
  padding: 36px 40px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  scroll-margin-top: 40px;
  width: 100%;
}

.legal-card:hover {
  box-shadow: var(--shadow-pop);
}

.legal-prose h3[id] {
  scroll-margin-top: 40px;
}

.legal-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.legal-section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--header);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.legal-section-header h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}

/* Prose formatting inside legal cards */
.legal-prose {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.6;
}

.legal-prose p + p {
  margin-top: 10px;
}

.legal-prose ul + p,
.legal-prose ol + p {
  margin-top: 10px;
}

.legal-section-block > h2,
.legal-subhead {
  font-size: 20px;
  font-weight: 600;
  color: var(--header);
  margin-bottom: 10px;
  line-height: 1.3;
}

.legal-h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 14px;
  margin-bottom: 6px;
}

.contact-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.legal-card-box {
  margin: 16px 0 20px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
}
.legal-card-box p {
  font-size: 14.5px;
}

/* Divider between prose sections sharing one card (e.g. boilerplate block). */
.legal-section-divider {
  border-top: 1px solid var(--border-subtle);
  padding-top: 24px;
}

/* Operator / contact info columns inside legal cards (Impressum). */
.legal-contact-col p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 12px;
}
.legal-contact-col p.legal-org-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.legal-contact-col p strong {
  color: var(--ink);
}
.legal-contact-col .contact-stack {
  margin-top: 16px;
}
.legal-contact-col .contact-stack a {
  color: var(--green-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-contact-col .contact-stack a:hover {
  color: var(--ink);
}
.legal-contact-col .ext-link {
  font-size: 14px;
}

.legal-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}

.legal-muted {
  font-size: 14.5px;
  color: var(--muted);
}

.notfall-cta-card {
  text-align: center;
}

.notfall-cta-card h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--header);
  margin-bottom: 10px;
}

.notfall-cta-card p {
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 20px;
  line-height: 1.55;
  font-size: 14.5px;
}

.notfall-cta-action {
  display: flex;
  justify-content: center;
}

/* Feature Icon Box (Unified container) */
.feature-icon-box,
.about-value-icon,
.media-download-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: var(--green-tint);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step Badges (Unified circular step numbers) */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.step-badge-md {
  width: 36px;
  height: 36px;
  font-size: 16px;
  background: var(--green-soft);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(141, 200, 164, 0.4);
}
.step-badge-sm {
  width: 24px;
  height: 24px;
  font-size: 12px;
  background: var(--green-tint);
  color: var(--green);
}
.step-badge-dark {
  width: 30px;
  height: 30px;
  font-size: 14px;
  background: var(--header);
  color: var(--white);
}

.legal-prose h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--header);
  margin: 20px 0 8px;
}

.legal-prose ul,
.legal-prose ol {
  margin: 10px 0 12px 22px;
}

.legal-prose ul {
  list-style: disc;
}

.legal-prose ol {
  list-style: decimal;
}

.legal-prose li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.legal-prose li strong {
  color: var(--ink);
}

.legal-prose a:not(.btn) {
  color: var(--green-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  transition: color 0.15s ease;
}

.legal-prose a:not(.btn):hover {
  color: var(--ink);
}

/* External Link helper with subtle arrow */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--green-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
  transition: color 0.15s ease;
}

.ext-link:hover {
  color: var(--ink);
}

.ext-link svg {
  width: 12px;
  height: 12px;
  stroke-width: 2;
  flex-shrink: 0;
}

/* Callout / Alert Boxes */
.callout-box {
  border-radius: 16px;
  padding: 20px 24px;
  margin: 20px 0;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  line-height: 1.6;
  font-size: 15px;
}

.callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
  width: 24px;
  height: 24px;
}

.callout-content {
  flex: 1;
}

.callout-content strong {
  font-weight: 600;
}

.callout-subtle {
  background: var(--lav);
  border: 1px solid transparent;
  color: var(--lav-text);
}

.callout-subtle .callout-icon {
  color: var(--green);
  opacity: 1;
}

.callout-info {
  background: #f0f7ff;
  border: 1px solid #cce4ff;
  color: #1e4273;
}

.callout-info .callout-icon {
  color: #2b7fff;
}

.callout-warning {
  background: #fff9ed;
  border: 1px solid #ffe3b0;
  color: #7a4f01;
}

.callout-warning .callout-icon {
  color: #d97706;
}

.callout-emergency {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #991b1b;
}

.callout-emergency .callout-icon {
  color: #dc2626;
}

.callout-success {
  background: #edf7f1;
  border: 1px solid #b7e4c7;
  color: #155724;
}

.callout-success .callout-icon {
  color: #2e9e6b;
}

/* Sticky Table of Contents (TOC) Sidebar */
.legal-sidebar {
  position: sticky;
  top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.legal-toc-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.legal-toc-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.legal-toc-list li {
  display: block;
  width: 100%;
}

.legal-toc-list a {
  font-size: 14px;
  color: var(--muted);
  padding: 1px 0;
  border-radius: 10px;
  transition: all 0.15s ease;
  display: block;
  line-height: 1.25;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  border-left: 2px solid transparent;
}

.legal-toc-list a:hover {
  color: var(--header);
  background: var(--lav);
}

.legal-toc-list a.active {
  color: var(--header);
  font-weight: 600;
  background: var(--lav);
  border-left-color: var(--green);
}

.legal-sidebar-card {
  background: var(--lav);
  border-radius: 20px;
  padding: 22px;
  font-size: 14px;
  color: var(--lav-text);
  line-height: 1.55;
}

.legal-sidebar-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--header);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legal-sidebar-card a {
  color: var(--header);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================================
   FAQ Category Cards (One Cohesive Box per Theme)
   ========================================================================== */

.faq-categories-container {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.faq-category-card {
  background: #ffffff;
  border: 1px solid var(--border-subtle, #e8e6f0);
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  scroll-margin-top: 90px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-category-card:hover {
  border-color: rgba(47, 154, 116, 0.3);
}

.faq-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.faq-category-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(47, 154, 116, 0.1);
  color: var(--green);
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.faq-category-header h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--header);
  margin: 0;
  line-height: 1.3;
}

.faq-accordion-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--border-subtle, #e8e6f0);
  background: transparent;
  transition: border-color 0.2s ease;
}

.faq-item:first-child {
  border-top: 1px solid var(--border-subtle, #e8e6f0);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--header);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--green);
}

.faq-question:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.faq-chevron {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface, #f8f7fb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.faq-question:hover .faq-chevron {
  background: rgba(47, 154, 116, 0.1);
  color: var(--green);
}

.faq-item[open] .faq-question {
  color: var(--green);
}

.faq-item[open] .faq-chevron {
  transform: rotate(180deg);
  background: var(--green);
  color: #ffffff;
}

.faq-answer {
  padding: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.faq-answer p {
  margin: 0 0 14px;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul,
.faq-answer ol {
  margin: 12px 0 16px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-answer li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
}

.faq-answer li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: var(--green);
  font-size: 18px;
  line-height: 1.4;
}

.faq-answer li strong {
  color: var(--header);
  font-weight: 600;
}

.faq-answer a {
  color: var(--header);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.faq-answer a:hover {
  color: var(--green);
}

/* ==========================================================================
   Medienanfragen & Media Kit
   ========================================================================== */

.media-download-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.media-download-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--header);
  margin: 0 0 8px;
  line-height: 1.3;
}
.media-download-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 14px;
}
.media-download-card .btn {
  margin-top: 16px;
}
.media-download-card .legal-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.media-download-icon {
  margin-bottom: 16px;
}

.media-spokesperson-card {
  background: var(--surface, #f8f7fb);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  margin: 20px 0 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.media-spokesperson-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--white);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.media-spokesperson-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}

.media-spokesperson-body .eyebrow {
  margin-bottom: 4px;
}
.media-spokesperson-body h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--header);
  margin: 0 0 4px;
}
.media-spokesperson-role {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px;
  line-height: 1.4;
}
.media-spokesperson-body .legal-note {
  margin-top: 12px;
  line-height: 1.4;
}

@media (max-width: 600px) {
  .media-spokesperson-card {
    flex-direction: column;
    gap: 14px;
  }
}

/* ==========================================================================
   Subscription & Pricing Plan Cards (AGB / Advisor Plans)
   ========================================================================== */

.pricing-plans-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0 16px;
}

@media (max-width: 768px) {
  .pricing-plans-grid {
    grid-template-columns: 1fr;
  }
}

.pricing-plan-card {
  position: relative;
  background: var(--surface, #f8f7fb);
  border: 1.5px solid var(--border-subtle, #e8e6f0);
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pricing-plan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.pricing-plan-card.plan-featured {
  background: var(--white);
  border: 2px solid var(--green);
  box-shadow: 0 10px 32px var(--green-tint);
}

.pricing-plan-card .plan-badge {
  position: absolute;
  top: -13px;
  right: 20px;
  background: var(--green);
  color: var(--white);
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(30, 126, 82, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pricing-plan-card .plan-badge svg {
  color: #fef08a; /* Soft golden sparkle */
  flex-shrink: 0;
}

.plan-header {
  margin-bottom: 18px;
}

.plan-subtitle {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

.plan-price {
  margin: 8px 0 6px;
  color: var(--header);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

.plan-price span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.professionals-kicker {
  margin-bottom: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.professionals-benefit-grid {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.professionals-benefit {
  display: flex;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface, #f8f7fb);
}

.professionals-benefit > svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--green);
}

.legal-prose .professionals-benefit h3 {
  margin: 0 0 4px;
}

/* ==========================================================================
   Professionals Partner Landing Page (fuer-fachpersonen.php)
   ========================================================================== */

.hero.hero-prof-banner {
  min-height: 480px;
}
/* A wide landscape survives far less masking than the portrait home heroes:
   with the home-page curve the right half read as an empty dark panel. */
.hero.hero-prof-banner .hero-home-bg .hero-bg-img {
  object-position: right 30%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 20%, black 46%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 20%, black 46%);
}
.hero.hero-prof-banner .hero-bg-gradient {
  background: linear-gradient(to bottom, var(--header) 0, rgba(76, 77, 104, 0) 90px),
              linear-gradient(to right, var(--header) 0%, rgba(76, 77, 104, 0.34) 28%, transparent 56%);
}

/* Reassurance line below the hero CTA. */
.hero-prof-note {
  margin-top: 14px;
  max-width: 430px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--white-a70);
}

.text-center-head {
  text-align: center;
}
.text-center-head h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: 780px;
}
.text-center-head .section-lead {
  margin-left: auto;
  margin-right: auto;
  max-width: 680px;
}

/* 1. Benefits Grid */
.prof-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  text-align: left;
  margin-top: 40px;
}
.prof-benefit-card {
  background: var(--white);
  border: 1px solid var(--border-subtle, #e8e6f0);
  border-radius: var(--radius-card, 24px);
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.prof-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}
.prof-benefit-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(30, 126, 82, 0.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.prof-benefit-icon svg {
  width: 24px;
  height: 24px;
}
.prof-benefit-card h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
}
.prof-benefit-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* 2. Criteria & Trust Callout */
.prof-criteria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
  margin-top: 36px;
}
.prof-criterion-card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.prof-criterion-card .criterion-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(30, 126, 82, 0.12);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.prof-criterion-card .criterion-badge svg {
  width: 18px;
  height: 18px;
}
.prof-criterion-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}
.prof-criterion-card p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.prof-criteria-note {
  max-width: 780px;
  margin: 32px auto 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.prof-criteria-note strong {
  color: var(--ink);
  font-weight: 600;
}

/* 3. Steps Grid */
.prof-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: left;
  margin-top: 40px;
}
.prof-step-item {
  background: var(--white);
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.prof-step-item .step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  box-shadow: 0 3px 10px rgba(30, 126, 82, 0.28);
}
.prof-step-item h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--ink);
}
.prof-step-item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* 4. Pricing Wrap */
.prof-pricing-wrap {
  max-width: 860px;
  margin: 0 auto;
}
.prof-pricing-wrap .pricing-plans-grid {
  gap: 28px;
  text-align: left;
}
.prof-pricing-wrap .pricing-plan-card {
  padding: 36px 32px;
  background: var(--white);
}
.prof-pricing-wrap .plan-features {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prof-pricing-wrap .plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.prof-pricing-wrap .plan-features li svg {
  color: var(--green);
  flex-shrink: 0;
}
/* The global .plan-features margin is !important, so the breathing room between
   the last feature and the CTA has to come from the footer side. */
.prof-pricing-wrap .plan-footer {
  padding-top: 28px;
}
.prof-pricing-wrap .plan-footer .btn-full {
  width: 100%;
  justify-content: center;
}
/* Outlined secondary CTA: the flat lavender fill read as a disabled button
   next to the solid green Premium action. */
.prof-pricing-wrap .plan-footer .btn-lav {
  border: 1.5px solid var(--border);
  color: var(--header);
  font-weight: 600;
}
.prof-pricing-notes {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
/* Shared pill for the one line that removes the reader's main objection —
   the fee guarantee for advisors, the "free for you" promise on the home page. */
.guarantee-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--lav);
  color: var(--lav-text);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}
.guarantee-pill svg {
  flex-shrink: 0;
}
/* In the home trust section the pill sits between the list and the CTA and
   aligns its checkmark and text with the list items above. */
.trust-guarantee {
  margin: 0 0 24px -14px;
  padding: 6px 18px 6px 14px;
  gap: 14px;
  align-items: flex-start;
}
.trust-guarantee svg {
  margin-top: 2px;
}
/* The note inherited the centred full-grid width, which stranded the info mark
   far to the left of its own text. Width-limited and left-aligned so mark and
   text stay together — no extra surface, the section has enough boxes. */
.prof-pricing-notes .professionals-fee-note {
  width: max-content;
  max-width: min(1000px, calc(100vw - 40px));
  margin: 0;
  font-size: 13px;
  text-align: left;
  align-items: center;
}
.prof-pricing-notes .professionals-terms-line {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
}
.prof-pricing-notes .professionals-terms-line a {
  font-weight: 600;
  color: var(--ink);
}

/* 5. FAQ Accordion & Contact Touchpoint */
/* Reading column for the collapsible FAQ: narrower than the card grids above so
   the answers keep a comfortable line length. */
.prof-faq-accordion {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: left;
}

/* Deliberately wider than the FAQ reading column above, so the closing box
   reads as a separate block rather than a seventh accordion row. */
.prof-contact-touchpoint {
  max-width: 880px;
  margin: 44px auto 0;
  background: var(--white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 30px 36px;
  text-align: left;
}
.contact-touchpoint-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.contact-touchpoint-text {
  flex: 1 1 320px;
}
.contact-touchpoint-text h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.contact-touchpoint-text p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 991px) {
  .prof-benefits-grid,
  .prof-criteria-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .prof-steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 600px) {
  .prof-steps-grid {
    grid-template-columns: 1fr;
  }
  .prof-contact-touchpoint {
    padding: 24px 20px;
  }
}

/* ==========================================================================
   Inquiry confirmation
   ========================================================================== */

.inquiry-confirmation-card {
  padding: 34px;
}

.contact-wrap.inquiry-empty-layout {
  grid-template-columns: minmax(0, 820px);
  padding-bottom: 80px;
}

.inquiry-empty-layout .inquiry-confirmation-card {
  padding: 40px 42px;
}

.inquiry-empty-copy {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.inquiry-confirmation-mark {
  display: flex;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(47, 154, 116, 0.11);
}

.inquiry-confirmation-mark svg {
  width: 28px;
  height: 28px;
}

.inquiry-confirmation-card h2 {
  margin: 0;
  color: var(--header);
  font-size: 24px;
}

.inquiry-confirmation-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.inquiry-reference {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  background: var(--surface, #f8f7fb);
}

.inquiry-reference span {
  color: var(--muted);
  font-size: 13px;
}

.inquiry-reference strong {
  color: var(--header);
  font-size: 19px;
  letter-spacing: 0.04em;
}

.inquiry-status-note {
  padding: 18px 20px;
  border-left: 4px solid var(--green);
  border-radius: 0 14px 14px 0;
  background: rgba(47, 154, 116, 0.09);
}

.inquiry-status-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--header);
}

.inquiry-status-note p,
.inquiry-prototype-note {
  margin: 0;
}

.inquiry-prototype-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12.5px;
}

.inquiry-confirmation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin-top: 26px;
}

.inquiry-next-steps ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inquiry-next-steps li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 9px;
  align-items: start;
}

.inquiry-next-steps li span {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(47, 154, 116, 0.12);
  color: var(--green);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 600px) {
  .inquiry-confirmation-card {
    padding: 24px 20px;
  }

  .contact-wrap.inquiry-empty-layout {
    padding-bottom: 56px;
  }

  .inquiry-empty-layout .inquiry-confirmation-card {
    padding: 28px 24px;
  }

  .inquiry-reference {
    align-items: flex-start;
    flex-direction: column;
  }

  .inquiry-confirmation-actions {
    align-items: flex-start;
    flex-direction: column;
  }
}

.professionals-benefit p,
.professionals-steps p,
.professionals-review-note p {
  margin: 0;
}

.professionals-criteria {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.professionals-review-note {
  margin: 20px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--green);
  border-radius: 0 14px 14px 0;
  background: rgba(47, 154, 116, 0.09);
}

.professionals-review-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--header);
}

.professionals-fee-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 14px 2px 8px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.professionals-info-mark {
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.legal-prose .professionals-steps {
  display: grid;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.legal-prose .professionals-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.legal-prose .professionals-steps li > span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--header);
  color: #fff;
  font-weight: 700;
}

.professionals-terms-link {
  font-size: 14px;
}

.page-professionals .plan-cta-box {
  margin-top: 0;
  padding: 36px 28px;
}

.page-professionals .plan-cta-box h2 {
  margin: 0 0 10px;
}

.page-professionals .plan-cta-box > p:not(.plan-cta-sub) {
  max-width: 560px;
  margin: 0 auto 24px;
}

.page-professionals .plan-cta-sub {
  margin-top: 16px;
}

@media (max-width: 600px) {
  .page-professionals .plan-cta-box {
    padding: 28px 20px;
  }
}

.plan-features {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 10px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  padding: 0 !important;
}

.plan-features li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--green);
}

.plan-features li strong {
  font-weight: 600;
}

.plan-cta-box {
  margin-top: 24px;
  background: var(--surface, #f8f7fb);
  border: 1px solid var(--border-subtle, #e8e6f0);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
}

.plan-cta-box .btn-green {
  font-size: 16px;
  font-weight: 600;
  padding: 14px 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 6px 20px rgba(30, 126, 82, 0.25);
}

.plan-cta-box .btn-green:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(30, 126, 82, 0.35);
}

.plan-cta-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 10px;
  margin-bottom: 0;
}

/* ==========================================================================
   Emergency Page Specifics
   ========================================================================== */

.emergency-hero-banner {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  color: var(--white);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  box-shadow: 0 10px 32px rgba(185, 28, 28, 0.28);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.emergency-hero-text h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--white);
  line-height: 1.2;
}

.emergency-hero-text p {
  font-size: 16px;
  opacity: 0.95;
  line-height: 1.5;
  color: var(--white);
  max-width: 600px;
}

.emergency-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.emergency-hero-actions .btn-emergency-main {
  background: var(--white);
  color: #991b1b;
  font-weight: 700;
  font-size: 18px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  text-decoration: none;
}

.emergency-hero-actions .btn-emergency-main:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  color: #7f1d1d;
}

/* Emergency Sidebar Card (Right column on notfall.php) */
.emergency-aside-card {
  position: sticky;
  top: 40px;
  background: #991b1b;
  color: var(--white);
  border-radius: 40px 20px 20px 40px;
  padding: 32px 28px;
  box-shadow: var(--shadow-card);
}

.emergency-aside-card h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 12px;
}

.emergency-aside-card p.emergency-aside-sub {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 20px;
}

.emergency-aside-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-emergency-aside {
  background: var(--white);
  color: #991b1b;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.btn-emergency-aside:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  background: #fff8f8;
  color: #7f1d1d;
}

.emergency-section-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--header);
  margin: 32px 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.emergency-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.emergency-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.emergency-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: #cbd5e1;
}

.emergency-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.emergency-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.emergency-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
  background: var(--surface, #f5f4f8);
  color: var(--muted, #666474);
  border: 1px solid var(--border-subtle, #e5e3ec);
}

.tag-urgent {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
  font-weight: 600;
}

.emergency-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.3;
}

.emergency-card-desc {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 24px;
  flex: 1;
}

.emergency-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}

.emergency-dial-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: var(--green);
  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  transition: background 0.15s ease, transform 0.1s ease;
  text-decoration: none !important;
}

.emergency-dial-btn:hover {
  background: var(--green-hover);
  transform: scale(1.02);
  color: var(--white);
}

.emergency-dial-btn svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.emergency-web-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}


/* Home crisis section actions */
.home-emergency-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 24px 0 28px;
}

/* Colour comes from .emergency-dial-btn so the home signpost and /notfall show
   the same green hotline buttons; only the hover lift differs. */
.home-emergency-actions .emergency-dial-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(30, 126, 82, 0.28);
}

/* Dark red emergency link */
.link-arrow-danger {
  color: #b91c1c !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.link-arrow-danger:hover {
  color: #991b1b !important;
}

.link-arrow-danger svg {
  color: #b91c1c;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-arrow-danger:hover svg {
  color: #991b1b;
  transform: translateX(4px);
}

/* Plan Comparison Grid (AGB) */
.plan-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 24px 0;
}

.plan-card {
  border-radius: 20px;
  padding: 28px;
  border: 1.5px solid var(--border);
  background: #faf9fc;
  display: flex;
  flex-direction: column;
  position: relative;
}

.plan-card.plan-featured {
  border-color: var(--green);
  background: var(--white);
  box-shadow: var(--shadow-card);
}

.plan-card-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--green);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.plan-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}

.plan-desc {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
}

.plan-feature-list {
  list-style: none !important;
  margin: 12px 0 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink);
}

.plan-feature-icon {
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Impressum Grids & Contact Badges */
.impressum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.impressum-info-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: 28px;
}

.impressum-info-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--header);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-detail-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  font-size: 15px;
}

.contact-icon-bubble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--header);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.service-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--lav);
  color: var(--lav-text);
  font-size: 13px;
  font-weight: 500;
  margin: 4px;
  transition: background 0.15s ease, color 0.15s ease;
  text-decoration: none !important;
}

.service-tag:hover {
  background: var(--header);
  color: var(--white);
}

.service-badge-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0;
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .legal-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .legal-sidebar {
    order: -1;
    position: static;
  }

  .emergency-hero-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px;
  }

  .emergency-cards-grid,
  .plan-comparison-grid,
  .impressum-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .legal-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .content-hero {
    padding: 60px 20px 48px;
  }

  .emergency-card-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .emergency-dial-btn,
  .emergency-web-link {
    justify-content: center;
    width: 100%;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Global dark footer pinned to the viewport bottom on short pages. */
.site-footer {
  background: var(--header);
  color: var(--white);
  margin-top: auto;
}

/* Footer columns: brand block left, link groups right. */
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px var(--page-pad) 32px;
  display: flex;
  align-items: flex-start;
  gap: 72px;
  flex-wrap: wrap;
}

.footer-brand {
  flex: 0 0 300px;
  max-width: 300px;
}
.footer-brand p {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 14px;
  line-height: 1.5;
}

.footer-cols {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-start;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}
.footer-nav a {
  opacity: 0.85;
}
.footer-nav a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.88;
  margin-bottom: 4px;
}

.footer-social {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: auto;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--white-a40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.footer-social a svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
.footer-social a:hover {
  background: var(--white-a16);
}

.footer-copy {
  border-top: 1px solid var(--white-a15);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px var(--page-pad);
  font-size: 13px;
  opacity: 0.75;
}

.footer-credit-link {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
}

.footer-credit-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Scrim overlay */
/* Shared dimmer behind every open filter surface. */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 50;
  display: none;
}
.scrim.show {
  display: block;
}
body.filter-sheet-open {
  overflow: hidden;
}

/* ==========================================================================
   Mini-App Overlay
   The host owns the viewport shell; each iframe app owns its own interface.
   ========================================================================== */
.app-overlay[hidden] {
  display: none;
}
.app-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
}
.app-overlay-scrim {
  position: absolute;
  inset: 0;
  background: var(--black-a75);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.app-overlay-container,
.app-overlay-frame {
  position: absolute;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
}
.app-overlay-frame {
  border: 0;
  background: var(--menu-surface);
}
.app-overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.app-overlay-close:hover {
  background: var(--bg);
}
body.app-overlay-open {
  overflow: hidden;
}

/* ==========================================================================
   Filter Modals – Desktop (min-width: 821px)
   ========================================================================== */
/* Base rules (~984–1470), this desktop layer, and the mobile-sheet layer
   (~3491–3654) form a deliberate three-layer cascade; source order is fixed. */
@media (min-width: 821px) {
  .dd-panel,
  .dd-panel.two-col,
  #challenge-panel.two-col,
  .advfilter {
    position: fixed;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    min-width: 0;
    width: min(800px, calc(100vw - 48px));
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 48px);
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    z-index: 60;
  }
  .dd-panel,
  .dd-panel .mobile-sheet-head,
  .dd-panel .mobile-sheet-foot,
  .advfilter,
  .advfilter-head,
  .advfilter-foot {
    background: var(--menu-surface);
  }
  .dd-panel.open,
  .advfilter.open {
    display: flex;
    flex-direction: column;
  }
  .dd-panel .mobile-sheet-head,
  .dd-panel .mobile-sheet-foot,
  .advfilter-head,
  .advfilter-foot {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .dd-panel .mobile-sheet-head,
  .advfilter-head {
    justify-content: space-between;
    padding: 20px 28px 10px;
  }
  .dd-panel .mobile-sheet-head h3,
  .advfilter-head h3 {
    font-size: 22px;
    font-weight: 600;
  }
  .dd-panel .mobile-sheet-close,
  .advfilter-close {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
  }
  .dd-panel .mobile-sheet-close:hover,
  .advfilter-close:hover {
    background: var(--lav);
  }
  .dd-panel .dd-search,
  .dd-panel.two-col .dd-search {
    height: 42px;
    margin: 0 28px 10px;
  }
  .dd-panel .dd-panel-body {
    min-height: 0;
    padding: 0 10px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .dd-panel.two-col .dd-panel-body {
    display: block;
  }
  .dd-panel.two-col .dd-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    column-gap: 24px;
  }
  .dd-panel.two-col .dd-panel-column {
    min-width: 0;
  }
  .dd-panel.two-col .dd-region-group + .dd-region-group,
  #challenge-panel.two-col .dd-challenge-group + .dd-challenge-group {
    margin-top: 4px;
  }
  .dd-panel.two-col .dd-item {
    align-items: flex-start;
    white-space: normal;
  }
  .dd-panel.two-col .dd-item > span {
    overflow: visible;
    text-overflow: clip;
  }
  .dd-panel.two-col .dd-item input[type="checkbox"] {
    margin-top: 1px;
  }
  #region-panel .dd-item.dd-group,
  #challenge-panel .dd-item.dd-group {
    padding-top: 6px;
    padding-bottom: 2px;
    font-size: 16px;
  }
  .dd-panel .mobile-sheet-foot,
  .advfilter-foot {
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 28px 18px;
    border-top: 1px solid var(--border);
  }
  .advfilter-body {
    padding: 0 16px 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .advfilter-foot {
    margin: 0;
  }
}

/* ==========================================================================
   Responsive – Tablet (max-width: 1180px)
   ========================================================================== */

@media (max-width: 1180px) {
  :root {
    --page-pad: 36px;
  }

  .footer-brand {
    flex: 1 1 100%;
    max-width: 460px;
  }
  .footer-inner {
    gap: 40px 60px;
  }
  .footer-social {
    margin-left: 0;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .detail-main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-facts,
  .detail-cta {
    position: static;
  }

  .article {
    grid-template-columns: 1fr;
    gap: 36px 0;
  }
  .article-main {
    display: contents;
  }
  .article-body {
    order: 1;
    grid-column: 1;
    grid-row: auto;
  }
  .article-aside {
    order: 2;
    grid-column: 1;
    grid-row: auto;
    position: static;
    max-width: 440px;
  }
  .article-tags {
    order: 3;
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
  }

  .info-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .quote-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Responsive – Mobile & Small Tablet (max-width: 820px)
   ========================================================================== */

@media (max-width: 820px) {
  .surface-profile.surface-mobile-repeat .detail-main > .detail-cta {
    display: none;
  }

  .surface-profile.surface-mobile-repeat .detail-cta-repeat {
    display: block;
    margin-top: 32px;
    padding: 26px 24px;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
  }

  .detail-cta-repeat h3 {
    font-size: 24px;
  }

  :root {
    --page-pad: 20px;
  }

  /* Header */
  .navbar,
  .site-header-slim .navbar {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .nav-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  .nav-links {
    display: none;
  }
  .navbar-desktop {
    display: none;
  }

  /* Hero */
  .hero {
    padding-top: 48px;
    padding-bottom: 40px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero .hero-sub {
    font-size: 16px;
  }
  .badge {
    font-size: 14px;
  }
  .trust-badges {
    gap: 12px;
  }

  /* Homepage Full-Bleed Hero Banner (Mobile/Tablet <= 820px):
     compact navigation, content anchored to the bottom of the photo. */
  .site-header:has(.hero-home-banner) .navbar {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .hero.hero-home-banner {
    min-height: 440px;
    padding: 0;
    align-items: flex-end;
  }
  .hero-home-bg {
    width: 100%;
    max-width: none;
    opacity: 0.55;
  }
  /* Shift the photo past the right edge so more of the person is visible;
     the container's overflow clips the excess, the masked left gap stays dark. */
  .hero-home-bg picture {
    transform: translateX(32%);
  }
  .hero-home-bg .hero-bg-img {
    /* Anchor the person in the right corner so more of them stays visible. */
    object-position: 100% center;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%), linear-gradient(to right, transparent 0%, black 35%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%), linear-gradient(to right, transparent 0%, black 35%);
  }
  .hero-bg-gradient {
    background: linear-gradient(to right, var(--header) 10%, rgba(76, 77, 104, 0.5) 50%, transparent 90%),
                linear-gradient(to bottom, transparent 60%, var(--header) 100%);
  }
  .hero-home-container {
    padding: 40px var(--page-pad) 36px;
    text-align: left;
  }
  .hero-home-banner h1 {
    font-size: 30px;
    line-height: 1.22;
    margin-bottom: 14px;
  }
  .hero-home-banner .hero-sub {
    font-size: 16px;
    margin: 0 0 24px 0;
    max-width: 100%;
  }
  .hero-action-wizard {
    align-items: flex-start;
  }
  .hero-action-search .hero-search {
    margin: 0 0 10px 0;
  }
  .btn-trust-cta {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    justify-content: center;
  }

  /* Key figures band stacks: lead on top, counters below. */
  .stats-band {
    padding: 48px 0;
  }
  .stats-band-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .stats-band-number {
    font-size: 36px;
  }

  /* Filters */
  .filters {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(0, 1.4fr) 52px;
    gap: 10px;
    padding-top: 24px;
  }
  .filters-without-challenge {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
  .filters-with-back.filters-without-challenge {
    grid-template-columns: auto minmax(0, 1fr) 50px;
  }
  .filters-with-back .search-bar {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-left: 0;
  }
  .filter-back {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: start;
    height: 50px;
    min-height: 50px;
    padding: 0 16px;
  }
  .filters-with-back .filter-dd {
    grid-column: 1 / 3;
    grid-row: 3;
  }
  .filters-with-back .filter-fab {
    grid-column: 3;
    grid-row: 3;
  }
  .search-bar {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    height: 50px;
  }
  .filter-dd {
    min-width: 0;
    width: auto;
    max-width: none;
  }
  .filter-dd-toggle {
    height: 50px;
    padding: 0 12px 0 14px;
    font-size: 14px;
  }
  .filter-dd-toggle .dd-count {
    padding: 1px 6px;
    margin-left: 4px;
    margin-right: 4px;
  }
  .filter-fab {
    width: 50px;
    height: 50px;
    margin-left: 0;
  }
  .filters-actions {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
    margin-bottom: 12px;
    justify-content: flex-start;
    padding-left: 14px;
    padding-right: 0;
  }

  /* Bottom sheets for filters. */
  .dd-panel {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: 85vh;
    padding: 0;
    border-radius: 28px 28px 0 0;
    z-index: 60;
    overflow: hidden;
  }
  .dd-panel.open {
    display: flex;
    flex-direction: column;
  }
  .dd-panel.two-col {
    width: 100%;
    max-width: 100%;
  }
  .dd-columns {
    display: flex;
    flex-direction: column;
  }
  .dd-panel-column {
    display: contents;
  }
  .dd-region-group,
  .dd-challenge-group {
    /* PHP sets --filter-order inline. */
    order: var(--filter-order, 0);
  }
  .dd-item {
    padding: 6px 16px;
    line-height: 1.35;
  }
  .dd-item.dd-sub {
    padding-left: 26px;
  }
  .dd-region-group + .dd-region-group {
    margin-top: 2px;
  }
  #challenge-panel .dd-item.dd-group {
    font-size: 16px;
    padding: 7px 16px 4px;
  }
  #challenge-panel .dd-challenge-group + .dd-challenge-group {
    margin-top: 2px;
  }

  .mobile-sheet-head,
  .mobile-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--menu-surface);
  }
  .advfilter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    background: var(--white);
    padding: 11px 18px 7px;
  }
  .mobile-sheet-head {
    padding: 11px 18px 7px;
  }
  .mobile-sheet-head h3,
  .advfilter-head h3 {
    font-size: 17px;
    font-weight: 600;
  }
  .mobile-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--ink);
  }
  .mobile-sheet-close:hover {
    background: var(--lav);
  }
  .dd-search {
    height: 40px;
    margin: 0 18px 6px;
  }
  .dd-panel-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 0 6px;
  }
  .mobile-sheet-foot {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    padding: 8px 18px 12px;
    border-top: 1px solid var(--border);
  }
  .mobile-sheet-foot .filter-match-count,
  .advfilter-foot .filter-match-count {
    flex: 1 0 100%;
    margin-right: 0;
  }

  .advfilter {
    position: fixed;
    inset: auto 0 0 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    border-radius: 28px 28px 0 0;
    max-height: 85vh;
    overflow: hidden;
    padding: 0;
    background: var(--white);
  }
  .advfilter-close {
    display: inline-flex;
    position: static;
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--ink);
  }
  .advfilter-close:hover {
    background: var(--lav);
  }
  .advfilter-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 18px 6px;
  }
  .advfilter-check {
    margin: 2px 0 4px;
    padding: 12px 0 4px;
    border-bottom: 0;
  }
  .advfilter-group {
    margin-bottom: 12px;
  }
  .advfilter-foot {
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 8px 18px 12px;
    background: var(--white);
    border-top: 1px solid var(--border);
  }
  .advfilter-foot .reset-link {
    color: var(--menu-primary);
  }

  /* Cards */
  .card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
  }
  .b-card-photo {
    height: 260px;
  }
  .b-card-body {
    padding: 22px 20px 24px;
  }
  .b-card-name {
    font-size: 24px;
  }
  .b-card-title {
    min-height: auto;
    margin-bottom: 8px;
  }

  /* Detail Page */
  .detail-top {
    padding-top: 24px;
    gap: 16px;
  }
  .detail-head h1 {
    font-size: 32px;
  }
  .detail-head .subtitle {
    font-size: 16px;
  }
  .detail-hero-card {
    grid-template-columns: 1fr;
    border-radius: 32px 32px 20px 20px;
    min-height: 0;
  }
  .detail-hero-card .photo {
    min-height: 280px;
    max-height: 320px;
    position: relative;
  }
  .detail-hero-card .facts {
    padding: 24px 20px 20px;
  }
  .detail-hero-card .facts-premium {
    /* Reserve the first row only when the edge-attached badge exists. */
    padding-top: 68px;
  }
  .detail-focus-badge {
    top: 18px;
    right: 0;
  }
  .detail-cta {
    position: static;
  }
  .section {
    padding-top: 36px;
  }
  .section > h2 {
    font-size: 24px;
    margin-bottom: 14px;
  }
  .chip-block {
    margin-bottom: 22px;
  }
  .info-cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 0;
  }
  .detail-book-link {
    margin-bottom: 28px;
  }
  .section-pad-bottom {
    padding-bottom: 56px;
  }

  /* Contact, Legal & Emergency Pages Mobile Optimization */
  .contact-wrap {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 12px;
    padding-bottom: 32px;
  }

  /* Bring Table of Contents / Notfall Box to the TOP on mobile for Legal, FAQ & Emergency */
  .page-emergency .contact-wrap > aside.emergency-aside-card,
  .page-legal:not(.page-impressum) .contact-wrap > aside.contact-facts,
  .page-faq .contact-wrap > aside.contact-facts {
    order: -1;
    position: static;
    width: 100%;
    margin-bottom: 8px;
  }

  .page-impressum.page-legal .contact-wrap > aside.contact-facts,
  .page-contact .contact-wrap > aside.contact-facts {
    order: 2 !important;
    position: static;
    width: 100%;
  }
  .page-contact .contact-wrap > aside.contact-facts-advisor,
  .page-inquiry-confirmation .contact-wrap > aside.contact-facts {
    margin-top: 12px;
  }
  .page-contact .contact-facts .facts {
    background: none;
    border: none;
    box-shadow: none;
    padding: 4px 4px 0;
  }

  /* Compact TOC on Mobile: Hide redundant decorative headlines and subtitles */
  .contact-facts h3,
  .contact-facts .contact-facts-name,
  .contact-facts .contact-facts-titles {
    display: none;
  }

  .contact-facts .facts {
    margin-top: 0;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: var(--shadow-card);
  }

  .contact-facts .facts-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-top: 12px;
    margin-bottom: 5px;
  }
  .contact-facts .facts > div:first-child > .facts-label,
  .contact-facts .facts > .facts-label:first-child {
    margin-top: 0;
  }

  .contact-facts .facts > .facts-label:not(:first-child) {
    margin-top: 18px;
  }

  .page-faq .contact-facts .facts-cta .btn {
    width: 100%;
    justify-content: center;
  }

  .contact-facts .facts ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-left: 0;
    list-style: none;
    line-height: 1.4;
  }

  .contact-facts .facts ul li {
    margin: 0;
    padding: 0;
    line-height: 1.4;
    font-size: 14px;
  }

  .contact-facts :is(.legal-toc-list, .contact-link-list) li a {
    font-size: 13.5px;
    line-height: 1.25;
    display: inline-block;
    padding: 1px 0;
    text-decoration: none;
  }

  /* Emergency Page Mobile Red Box: Prominent at the top */
  .emergency-aside-card {
    border-radius: 16px;
    padding: 20px 22px;
  }

  .emergency-aside-card h3 {
    font-size: 20px;
  }

  .emergency-aside-sub {
    font-size: 14px;
    margin-bottom: 16px;
  }

  /* FAQ Category Cards on Mobile */
  .faq-category-card {
    padding: 20px 18px;
    border-radius: 16px;
  }

  .faq-category-header {
    margin-bottom: 14px;
  }

  .faq-category-header h2 {
    font-size: 17px;
  }

  .faq-category-badge {
    width: 26px;
    height: 26px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .faq-question {
    font-size: 14.5px;
    padding: 14px 0;
  }

  .faq-answer {
    font-size: 14px;
    padding-bottom: 16px;
  }

  .faq-answer li {
    font-size: 13.5px;
  }

  /* Legal Prose Cards Mobile */
  .contact-card {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .legal-prose {
    font-size: 14.5px;
    line-height: 1.55;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .legal-prose h2 {
    font-size: 20px;
  }

  .legal-prose h3 {
    font-size: 16.5px;
  }

  .pricing-plans-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pricing-plan-card {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .prof-pricing-notes {
    align-items: stretch;
    gap: 16px;
    margin-top: 24px;
    text-align: left;
  }

  .prof-pricing-notes .professionals-fee-note {
    width: 100%;
    max-width: none;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--lav);
    color: var(--ink);
    font-size: 12.5px;
    line-height: 1.45;
  }

  .prof-pricing-notes .professionals-fee-note strong {
    color: var(--header);
  }

  .prof-pricing-notes .professionals-info-mark {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    margin-top: 0;
    border-color: var(--menu-primary);
    color: var(--menu-primary);
  }

  .prof-pricing-notes .professionals-terms-line {
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.55;
    text-align: left;
  }

  .prof-pricing-notes .professionals-terms-line a {
    display: flex;
    width: fit-content;
    margin-top: 6px;
  }

  .plan-cta-box {
    padding: 20px 16px;
    border-radius: 16px;
  }

  .plan-cta-box .btn-green {
    width: 100%;
    max-width: 100%;
    font-size: 14.5px;
    padding: 12px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .form-field input,
  .form-field select {
    height: 48px;
  }

  .form-field textarea {
    min-height: 120px;
  }

  /* Blog */
  .page-blog-list main > .chip-block {
    padding-top: 24px;
    margin-bottom: 20px;
  }
  .chip-block .chip-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin: 0 calc(var(--page-pad) * -1);
    padding: 0 var(--page-pad);
    scrollbar-width: none;
  }
  .chip-block .chip-links::-webkit-scrollbar {
    display: none;
  }
  .chip-block .chip-links .chip {
    flex: 0 0 auto;
  }
  .page-blog-list .chip-scroll-wrap {
    position: relative;
  }
  .page-blog-list .chip-scroll-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    right: calc(var(--page-pad) * -1);
    bottom: 0;
    width: 44px;
    background: linear-gradient(90deg, transparent, var(--bg));
    pointer-events: none;
  }

  .blog-teasers {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .article {
    padding: 32px var(--page-pad) 48px;
  }
  .article-body h2 {
    font-size: 24px;
    margin-bottom: 14px;
  }
  .article-body p {
    margin-bottom: 20px;
  }
  .article-body hr {
    margin: 32px 0;
  }

  /* About & Split */
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* On mobile a split section reads better when the headline names the topic
     before the photo appears. Elements marked .split-head move above the image,
     the rest follows it. The text column dissolves into the grid so its children
     can be ordered; the row gap is dropped because they carry their own bottom
     margins, so the image gets an explicit one instead. */
  .split-head-first {
    row-gap: 0;
  }
  .split-head-first > :not(.split-img) {
    display: contents;
  }
  .split-head-first > :not(.split-img) > * {
    order: 3;
  }
  .split-head-first .split-head {
    order: 1;
  }
  .split-head-first .split-img {
    order: 2;
    margin-bottom: 24px;
  }
  .hero.hero-split {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
    padding-top: 36px;
    padding-bottom: 44px;
  }
  .hero-split-text h1 {
    font-size: 28px;
  }
  .hero.hero-home-banner h1 {
    font-size: 26px;
  }
  .hero-home-banner .hero-home-bg {
    opacity: 0.5;
  }
  .btn-hero-wizard {
    font-size: 16px;
    padding: 14px 26px;
  }
  .stats-band-items {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hero-collage {
    margin: 0 auto;
    max-width: 100%;
  }
  .hero-search {
    flex-direction: column;
    gap: 10px;
  }
  .hero-search .btn {
    height: 50px;
    justify-content: center;
  }

  .notfound {
    padding-top: 28px;
  }
  .notfound h1 {
    font-size: 28px;
  }
  .notfound-search {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .notfound-search .search-bar {
    flex: 0 0 50px;
    min-height: 50px;
  }
  .notfound-search .btn {
    height: 50px;
    justify-content: center;
  }

  .section-light {
    padding: 48px 0;
  }
  .section-light h2 {
    font-size: 26px;
    line-height: 1.25;
  }
  .trust-guarantee {
    border-radius: 20px;
    max-width: 100%;
  }
  .two-col-text {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lead-strong {
    font-size: 20px;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .quote-grid {
    grid-template-columns: 1fr;
  }
  .cta-band {
    padding: 56px 20px;
  }
  .cta-band h2 {
    font-size: 26px;
  }
  .cta-band-photo {
    padding: 48px var(--page-pad);
  }
  .cta-band-box {
    padding: 32px 26px;
  }

  /* Footer */
  .site-footer {
    text-align: left;
  }
  .footer-inner {
    flex-direction: column;
    gap: 32px;
    padding: 44px var(--page-pad) 24px;
  }
  .footer-brand {
    flex: 0 0 auto;
    max-width: none;
  }
  .footer-cols {
    justify-content: flex-start;
    gap: 40px;
  }
  .footer-social {
    align-self: flex-start;
  }
  .footer-copy {
    padding-left: var(--page-pad);
    padding-bottom: 24px;
  }
}

/* ==========================================================================
   Small Mobile Phones (max-width: 599px)
   ========================================================================== */

@media (max-width: 599px) {
  .content-hero {
    padding-top: 52px;
    padding-bottom: 44px;
  }
  .content-hero h1 {
    font-size: 36px;
  }
  .content-page-main {
    padding: 48px 0 64px;
  }
  .prose {
    font-size: 16px;
  }
  .emergency-grid {
    grid-template-columns: 1fr;
    margin-left: 0;
  }
  .price-table {
    font-size: 14px;
  }
  .price-table td {
    padding: 10px 14px;
  }
  .price-table td:nth-child(2) {
    width: 100px;
  }
  .price-table td:nth-child(3) {
    width: 110px;
  }
}

/* ==========================================================================
   Tablet Devices (600px - 820px)
   ========================================================================== */

@media (min-width: 600px) and (max-width: 820px) {
  .card-grid,
  .info-cards,
  .team-grid,
  .quote-grid,
  .blog-teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-hero-card {
    grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
    border-radius: 36px 20px 20px 36px;
  }
  .detail-hero-card .photo {
    min-height: 360px;
    max-height: none;
  }

  .contact-card {
    max-width: 640px;
    margin-inline: auto;
  }
}


/* ==========================================================================
   About Page Overhaul (ueber-uns.php)
   ========================================================================== */

.hero-about-banner {
  min-height: 480px;
}

.hero-about-banner .hero-home-bg .hero-bg-img {
  object-position: right 30%;
}

.hero-about-banner .hero-home-content {
  max-width: 680px;
  text-align: left;
}

.hero-about-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.btn-about-cta {
  padding: 13px 26px;
  font-size: 15.5px;
  font-weight: 600;
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: var(--radius-btn);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
  transform: translateY(-1px);
}

/* Values Grid – Horizontal Compact Editorial Layout */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
  text-align: left;
}

.about-value-card {
  background: var(--white);
  border-radius: 20px;
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(221, 216, 228, 0.45);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-value-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(28, 29, 34, 0.08);
}

.about-value-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: rgba(30, 126, 82, 0.1);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.about-value-icon svg {
  width: 24px;
  height: 24px;
}

.about-value-body {
  flex: 1;
  min-width: 0;
}

.about-value-card h3 {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 1px 0 6px;
}

.about-value-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Mission Split & Unboxed Items */
.about-mission-split {
  align-items: center;
  gap: 56px;
}

.about-mission-img-wrap {
  border-radius: var(--radius-card, 28px);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.about-mission-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card, 28px);
}

.about-mission-list.unboxed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 28px;
  text-align: left;
}

.about-mission-list.unboxed .about-mission-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.about-mission-list.unboxed .about-mission-item .step-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 3px;
  box-shadow: 0 3px 10px rgba(141, 200, 164, 0.4);
}

.about-mission-list.unboxed .about-mission-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 6px;
}

.about-mission-list.unboxed .about-mission-content p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Team Grid - Inherits from .card-grid and .b-card with higher photo box */
.about-team-grid {
  margin-top: 48px;
  text-align: left;
}

.about-team-photo {
  height: 350px;
  background: var(--white);
}

.about-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-team-card:hover .about-team-photo img {
  transform: scale(1.03);
}

/* Testimonials Carousel (Wide Editorial Quotes with Smooth Horizontal Slide) */
.about-quotes-carousel {
  max-width: 900px;
  margin: 44px auto 0;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.about-quotes-track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.about-quote-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  opacity: 0.35;
  transform: scale(0.97);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-quote-slide.active {
  opacity: 1;
  transform: scale(1);
}

.about-quote-card {
  background: var(--white);
  border-radius: 28px;
  padding: 48px 52px;
  box-shadow: 0 14px 40px rgba(28, 29, 34, 0.08);
  text-align: center;
  position: relative;
}

.about-quote-card .quote-text {
  font-size: 21px;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 400;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.quote-mark-inline {
  color: var(--green);
  font-family: Georgia, serif;
  font-size: 1.35em;
  font-weight: 700;
  line-height: 0;
  vertical-align: -0.06em;
  margin: 0 6px;
  user-select: none;
}

.about-quote-card .quote-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.about-quote-card .quote-author-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.about-quote-card .quote-author-meta {
  font-size: 14px;
  color: var(--muted);
}

/* Quotes Navigation Controls */
.about-quotes-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.quote-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  color: var(--header);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-nav-btn:hover {
  background: var(--header);
  color: var(--white);
  border-color: var(--header);
  transform: scale(1.05);
}

.quote-nav-btn svg {
  width: 18px;
  height: 18px;
}

.about-quotes-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Responsive adjustments for About page */
@media (max-width: 991px) {
  .about-values-grid,
  .about-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .about-quote-card {
    padding: 36px 30px;
  }
  .about-quote-card .quote-text {
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .about-values-grid,
  .about-team-grid {
    grid-template-columns: 1fr;
  }
  .about-quotes-carousel {
    border-radius: 20px;
  }
  .about-quote-card {
    padding: 28px 20px;
  }
  .about-quote-card .quote-text {
    font-size: 16.5px;
    line-height: 1.55;
  }
  .quote-nav-btn {
    display: none;
  }
}