/* ============================================================
   MERCURY COMPLIANCE AG — STYLESHEET
   Mobile First | CSS Grid + Flexbox
   Schrift: Inter, --font-body
   Farbpalette:
     Accent Gold:    #c8a96e
     Accent Teal:    #7ab5b0
     Text (primär):  #000000 — Fließtext, Überschriften, Navigation
     Text Mid:       #4a4a4a (Sekundärtöne / Platzhalter, nur wo nicht Primärtext)
     Text Light:     #7a7a7a (dezente UI, z. B. Trennzeichen)
     Border:         #d8d8d8
     BG Light:       #f8f8f6
     BG White:       #ffffff
     Header:         weiss, Nav wie mercury.ch-Referenz
   Content-Breite: Original ~900px → +10% (= gleicher Faktor wie Planung)
   Key-Visuals: Höhe aus Referenz-Screenshot (Banner ca. 2.5:1 -> Kachel aspect-ratio 5:8).
   Breite = Content max-width. Beschriftung unten zentriert.
   ============================================================ */

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 15px;
  font-family: var(--font-body);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: #ffffff;
  text-align: left; /* KEIN Blocksatz */
}

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

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- CSS CUSTOM PROPERTIES ---------- */
:root {
  /* MERCURY BRAND ORANGE - auto-generated from logo.jpg
     (median ueber Orange-Pixel im Logo, siehe scripts/extract-brand-color.py).
     Pflicht-Variable fuer alle Bullets, runden Schmuckelemente, Sigel-Akzente.
     NIE manuell aendern – stattdessen extract-brand-color.py erneut laufen
     lassen und reports/brand_color.txt als Single Source of Truth nehmen. */
  --color-brand-orange: #dd7828;
  /* Mercury-UI-Gold: gedaempfter Akzent fuer Links, Hovers, Underlines etc.
     KEIN Bullet-Token. Bewusst getrennt von --color-brand-orange. */
  --color-gold:    #c8a96e;
  --color-teal:    #7ab5b0;
  /* Einheitliche Bullet-Groesse fuer alle Listen-Indikatoren. */
  --bullet-size:   5px;
  /* Erste Textzeile (nicht gesamtes li) — 1em bezieht sich auf li/::before-Schriftgroesse. */
  --bullet-line-height: 1.55;
  /* Chevron-Grau fuer Suffixe (Quick-Links, Footer-Links etc.). */
  --color-chevron: #9b9b9b;
  /* Primäre Lesefarbe (Kundenvorgabe: rein schwarz) */
  --color-text:    #000000;
  /* Dunkelgrau: Rahmenlinien, Hamburger-Icon, Tooltip-Hintergrund — nicht für Fließtext */
  --color-dark:    #1a1a1a;
  --color-mid:     #4a4a4a;
  --color-light:   #7a7a7a;
  --color-border:  #d8d8d8;
  --color-bg:      #f8f8f6;
  --color-white:   #ffffff;
  --color-nav:     #000000;
  /* Sektions-Überschriften (Home-Spalten, One-Pager, Unterseiten) */
  --headline-section-size: 1.2rem;
  --headline-section-spacing: 0.14em;

  --font-body: 'Inter', sans-serif;

  --layout-max-original: 900px; /* Inhalt mercury.ch (Planungsreferenz) */
  --max-width:     calc(var(--layout-max-original) * 1.1);
  --gutter:        1.25rem;

  /* Header / Logo / Hero: gleicher vertikaler Rhythmus wie Original */
  --header-meta-size:     0.88rem;
  --header-nav-size:      0.93rem;
  --header-nav-home-py:   0.9rem;
  --header-nav-home-px:   1.45rem;
  --header-nav-row-py:    0.9rem;
  --header-nav-link-gap:  1.65rem;
  --logo-vertical-gap:    clamp(1.9rem, 3.6vw, 2.75rem);
  --logo-img-max-height:  76px;
  --scroll-target-offset: clamp(5.5rem, 12vh, 8.5rem);

  /* Key-Visuals: Compliance = warmes Apricot-Orange; Legal = warmes Honig-Gelb (nicht dunkler, nur wärmer) */
  --hero-overlay-compliance:     rgba(252, 158, 108, 0.58);
  --hero-overlay-legal:          rgba(252, 212, 96, 0.58);
  --hero-overlay-outsourcing:    rgba(210, 218, 55, 0.72);
  --hero-overlay-investigations: rgba(118, 218, 195, 0.68);
}

/* ---------- CONTAINER ---------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- HEADER / NAV (Referenz mercury.ch: weiss, Meta oben rechts, HOME-Kachel) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  /* Kein border-bottom hier — sonst volle Viewport-Breite */
}

.site-header__bound {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  /* Kein border-bottom hier: würde über die volle Bound-Breite gehen; die helle Linie sitzt auf .site-header__bar (gleiche Breite wie .site-nav / Oberlinie). */
}

.site-header__utilities {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-block: 0.55rem 0.35rem;
  font-family: var(--font-body);
  font-size: var(--header-meta-size);
  color: var(--color-text);
}

.site-header__util-link:hover {
  color: var(--color-text);
  text-decoration: underline;
}

.site-header__pipe {
  color: var(--color-light);
  user-select: none;
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  min-height: 50px;
  border-bottom: 1px solid var(--color-border);
}

.site-header__nav-shell {
  flex: 1;
  min-width: 0;
}

.site-nav {
  display: none;
  flex-direction: column;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  z-index: 99;
}

@media (max-width: 767px) {
  .site-header__bar {
    border-top: 1px solid var(--color-dark);
    align-items: center;
  }

  .site-header__nav-shell {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex: 0 0 auto;
    width: 100%;
  }
}

.site-nav.site-nav--open {
  display: flex;
}

/* Home wie andere Top-Links; dunkle „Pill“ nur bei .active (Startseite / Sektion #home) */
.site-nav__home {
  font-family: var(--font-body);
  font-size: var(--header-nav-size);
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: stretch;
  transition: color 0.2s, background 0.2s;
}

.site-nav__home:hover:not(.active) {
  color: var(--color-text);
  background: #fafafa;
}

/* Dunkle Nav-Pill wandert mit aktivem Hauptpunkt (ScrollSpy / aktuelle Seite) */
.site-nav__home.active,
.site-nav__item:not(.site-nav__item--has-sub) > .site-nav__top.active,
.site-nav__item--has-sub.is-active-sub > .site-nav__item-head .site-nav__top,
.site-nav__item--has-sub:not(.is-active-sub) > .site-nav__item-head .site-nav__top.active {
  color: var(--color-white) !important;
  background: #2b2b2b;
  font-weight: 700;
  padding: var(--header-nav-home-py) var(--header-nav-home-px);
}

.site-nav__home.active:hover,
.site-nav__item:not(.site-nav__item--has-sub) > .site-nav__top.active:hover,
.site-nav__item--has-sub.is-active-sub > .site-nav__item-head .site-nav__top:hover,
.site-nav__item--has-sub:not(.is-active-sub) > .site-nav__item-head .site-nav__top.active:hover {
  background: #1a1a1a;
  color: var(--color-white) !important;
}

/* Hauptnavigation: Top-Level als Liste, Dropdowns nur Desktop-Hover / Mobile-Akkordeon */
.site-nav__links {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__item {
  border-bottom: 1px solid #eee;
}

.site-nav__item:last-child {
  border-bottom: none;
}

.site-nav__item-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
}

.site-nav__top {
  font-family: var(--font-body);
  font-size: var(--header-nav-size);
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--color-text);
  padding: 0.85rem 1.1rem;
  transition: color 0.2s, background 0.2s;
  flex: 1;
  text-align: left;
}

.site-nav__item:not(.site-nav__item--has-sub) > .site-nav__top {
  display: block;
}

.site-nav__top:hover {
  color: var(--color-text);
  background: #fafafa;
}

.site-nav__sub a.active {
  color: var(--color-text);
  font-weight: 700;
}

.site-nav__top.active {
  font-weight: 700;
}

/* Mobile: Untermenü per Button aufklappen */
.site-nav__expand {
  flex-shrink: 0;
  width: 2.75rem;
  border: none;
  border-left: 1px solid #eee;
  background: #fafafa;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--color-text);
  transition: background 0.2s, transform 0.2s;
}

.site-nav__expand:hover {
  background: #f0f0f0;
  color: var(--color-text);
}

.site-nav__expand-icon {
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -0.2rem;
  transition: transform 0.2s;
}

.site-nav__item.is-open .site-nav__expand-icon {
  transform: rotate(225deg);
  margin-top: 0.15rem;
}

.site-nav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  background: #fbfbf9;
  border-top: 1px solid #eee;
}

.site-nav__item.is-open .site-nav__sub {
  display: block;
}

.site-nav__sub li {
  border-bottom: 1px solid #eee;
}

.site-nav__sub li:last-child {
  border-bottom: none;
}

.site-nav__sub a {
  display: block;
  font-family: var(--font-body);
  font-size: calc(var(--header-nav-size) * 0.97);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--color-text);
  padding: 0.75rem 1.1rem 0.75rem 1.75rem;
  transition: color 0.2s, background 0.2s;
}

.site-nav__sub a:hover {
  color: var(--color-text);
  background: #f5f5f3;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-self: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.35rem 0.25rem;
  margin-left: 0.75rem;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  transition: all 0.2s;
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  /* Volle Breite nutzen (nicht schmal links buendeln); ohne flex-end am Bar. */
  .site-header__bar {
    min-height: 0;
    justify-content: flex-start;
  }

  .site-header__nav-shell {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  /*
   * Eine Zeile: Home links, «Publikationen» rechts, dazwischen gleichmässige Abstände.
   * <ul> mit display:contents — die vier <li> werden direkte Flex-Items von .site-nav.
   */
  .site-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-top: 1px solid var(--color-dark);
  }

  .site-nav.site-nav--open {
    display: flex;
  }

  .site-nav__home {
    flex-shrink: 0;
  }

  .site-nav__expand {
    display: none;
  }

  .site-nav__links {
    display: contents;
  }

  .site-nav__item {
    position: relative;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
  }

  .site-nav__item-head {
    justify-content: center;
    align-items: center;
  }

  .site-nav__item-head .site-nav__top {
    padding: var(--header-nav-row-py) 0.25rem;
    background: transparent;
    text-align: center;
    white-space: nowrap;
  }

  .site-nav__item:not(.site-nav__item--has-sub) > .site-nav__top {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--header-nav-row-py) 0.25rem;
  }

  /* Inaktives Home: gleiche Zeilenhöhe/Breite wie andere Top-Links */
  .site-nav__home:not(.active) {
    padding: var(--header-nav-row-py) clamp(0.25rem, 1.2vw, 0.85rem);
  }

  /* Dropdown wie mercury.ch: Panel unter dem Punkt */
  .site-nav__sub {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 15.5rem;
    margin-top: 0;
    padding: 0.35rem 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 120;
  }

  .site-nav__item--has-sub:hover .site-nav__sub,
  .site-nav__item--has-sub:focus-within .site-nav__sub {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-nav__sub li {
    border-bottom: 1px solid #f0f0f0;
  }

  .site-nav__sub li:last-child {
    border-bottom: none;
  }

  .site-nav__sub a {
    padding: 0.65rem 1.25rem;
    text-align: left;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.06em;
    font-size: calc(var(--header-nav-size) * 0.98);
    color: var(--color-text);
    background: transparent;
  }

  .site-nav__sub a:hover {
    background: var(--color-bg);
    color: var(--color-text);
  }
}

/* ---------- LOGO (Claim nur in der Grafik; gleicher Abstand zu Nav und zu Key-Visuals) ---------- */
.site-logo {
  text-align: center;
  padding: var(--logo-vertical-gap) var(--gutter);
}

.site-logo a {
  display: inline-block;
  line-height: 0;
}

.site-logo img {
  max-height: var(--logo-img-max-height);
  width: auto;
  margin-inline: auto;
}

/* ---------- HERO — 4 KEY VISUALS (mercury.ch: Typo/Abstände/Overlay wie Referenz) ---------- */
/* Gleicher Horizontalrahmen wie .container (+10 % vs. mercury-Contentbreite) */
.hero {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.hero__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: transparent;
}

@media (max-width: 599px) {
  .hero__kachel,
  .hero__kachel:first-child,
  .hero__kachel:nth-child(2n) {
    flex: 1 1 50%;
    width: 50%;
    max-width: 50%;
    margin: 0;
  }

  .hero__kachel:nth-child(4) .hero__img {
    object-position: center 32%;
    transform: none;
  }
}

@media (min-width: 600px) {
  .hero__grid {
    flex-wrap: nowrap;
  }

  .hero__kachel {
    flex: 1 1 0;
    width: auto;
    max-width: none;
  }
}

.hero__kachel {
  position: relative;
  display: block;
  aspect-ratio: 5 / 8;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
  background: var(--color-white);
  cursor: pointer;
  border: 0;
  outline: none;
}

.hero__kachel:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
  z-index: 6;
}

/* Rechts liegende Kachel oben (1px Ueberlappung wie bei 1–2 und 2–3) */
.hero__kachel:nth-child(1) { z-index: 1; }
.hero__kachel:nth-child(2) { z-index: 2; }
.hero__kachel:nth-child(3) { z-index: 3; }
.hero__kachel:nth-child(4) { z-index: 4; }

@media (min-width: 600px) {
  .hero__kachel:first-child {
    width: calc(100% + 1px);
    margin-inline-end: -1px;
  }
}

@media (min-width: 600px) {
  .hero__kachel:not(:first-child) {
    margin-inline-start: -1px;
    width: calc(100% + 1px);
    max-width: none;
  }

  /* Investigations nach links, deckt gruene Naht zu Outsourcing ab */
  .hero__kachel:nth-child(4) {
    margin-inline-start: -10px;
    width: calc(100% + 10px);
  }
}

/* Rotator: genau eine ruhige 360°-Umdrehung, ohne Overshoot (verhindert Flattern/Wackeln) */
.hero__rotator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0deg);
  transform-origin: center center;
  background: var(--color-white);
  transition: transform 0.72s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero__kachel:hover .hero__rotator,
.hero__kachel:focus-visible .hero__rotator {
  transform: translateZ(0) rotateY(360deg);
}

/* Schrift: leichter Bounce in Z beim Drehen (Dauer = Rotator) */
@keyframes hero-text-bounce {
  0% {
    transform: translateZ(4px) scale(1);
  }
  28% {
    transform: translateZ(10px) scale(1.05);
  }
  48% {
    transform: translateZ(3px) scale(0.98);
  }
  68% {
    transform: translateZ(8px) scale(1.03);
  }
  100% {
    transform: translateZ(4px) scale(1);
  }
}

/* Drei Ebenen: Media | Overlay | Text (im 3D-Raum der Rotators) */
.hero__layer {
  position: absolute;
  inset: 0;
}

/* Bild + Overlay: unten leicht ueberziehen (verhindert weisse Subpixel-Naht) */
.hero__layer--media,
.hero__layer--overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: -3px;
  height: calc(100% + 3px);
}

@media (min-width: 600px) {
  .hero__kachel:nth-child(4) .hero__rotator {
    left: -8px;
    width: calc(100% + 8px);
  }

  .hero__kachel:nth-child(4) .hero__img {
    object-position: 62% 32%;
    transform: translateX(-4px) scale(1.03) translateY(10px);
    transform-origin: center center;
  }
}

.hero__layer--media {
  z-index: 0;
  overflow: hidden;
  transform: translateZ(0);
  background: var(--color-white);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__kachel .hero__img {
  display: block;
  width: 100%;
  min-height: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__layer--overlay {
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 1;
  transition: opacity 0.22s linear;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__kachel:nth-child(1) .hero__layer--overlay {
  background: var(--hero-overlay-compliance);
}

.hero__kachel:nth-child(2) .hero__layer--overlay {
  background: var(--hero-overlay-legal);
}

.hero__kachel:nth-child(3) .hero__layer--overlay {
  background: var(--hero-overlay-outsourcing);
}

.hero__kachel:nth-child(4) .hero__layer--overlay {
  background: var(--hero-overlay-investigations);
}

.hero__kachel:hover .hero__layer--overlay,
.hero__kachel:focus-visible .hero__layer--overlay {
  opacity: 0;
}

.hero__layer--text {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 1rem;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
  transform: translateZ(4px) scale(1);
  transform-origin: center bottom;
  animation: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero__kachel:hover .hero__layer--text,
.hero__kachel:focus-visible .hero__layer--text {
  animation: hero-text-bounce 0.72s cubic-bezier(0.36, 0.85, 0.44, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .hero__kachel:hover .hero__layer--text,
  .hero__kachel:focus-visible .hero__layer--text {
    animation: none;
  }
}

.hero__label {
  font-family: var(--font-body);
  font-size: clamp(0.82rem, 2.15vw, 1.08rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.3;
  text-align: center;
  max-width: calc(100% - 1rem);
  /* Tiefe beim 3D-Drehen: weicher Schatten + leichte Kontur */
  text-shadow:
    0 0.06em 0.12em rgba(0, 0, 0, 0.55),
    0 0.12em 0.35em rgba(0, 0, 0, 0.35),
    0 0 0.04em rgba(0, 0, 0, 0.65);
}

@media (min-width: 900px) {
  .hero__label {
    font-size: 1.05rem;
  }
}

/* ---------- SECTION COMMON ---------- */
.section-container {
  padding-block: 3rem;
}

/* Trennlinie zwischen Sektionen: NICHT auf .section-container (würde
   Viewport-breit gehen), sondern absolut positioniert auf den inneren
   .container — so sitzt sie optisch an der Sektionsgrenze und ist
   gleichzeitig auf die Inhaltsbreite (max-width) gebunden. */
.section-container + .section-container > .container {
  position: relative;
}

.section-container + .section-container > .container::before {
  content: '';
  position: absolute;
  top: -3rem;        /* genau auf der Sektionsgrenze */
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--color-border);
}

.section-container--bg {
  background: var(--color-bg);
}

/* Kontakt: abgesetzter, dunklerer Block nach Team (nicht Weiss aus Zebra) */
.section-container--kontakt {
  background-color: #f0efec;
}

/* Alternierende Sektions-Hintergründe (DE Hub-Seiten mit scroll-target) */
main#main-content > section.scroll-target.section-container:nth-of-type(odd) {
  background-color: #fff;
}

main#main-content > section.scroll-target.section-container:nth-of-type(even) {
  background-color: #fafafa;
}

main#main-content > section#kontakt.section-container--kontakt {
  background-color: #f0efec;
}

/* ---------- SECTION HEADLINE ---------- */
.section-headline {
  font-family: var(--font-body);
  font-size: var(--headline-section-size);
  font-weight: 700;
  letter-spacing: var(--headline-section-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

/* ---------- CONTENT LAYOUT: TEXT + IMAGE ---------- */
.content-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .content-block {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 2.5rem;
  }

  .content-block--image-left .content-block__image {
    order: -1;
  }

  /* Bild bleibt beim Scrollen mit (sticky), bis die rechte Spalte zu Ende ist */
  .content-block__image {
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-block__image {
    position: static;
  }
}

.content-block__image img {
  width: 100%;
  height: auto;
  display: block;
}

.content-block__text p {
  color: var(--color-text);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.content-block__text a {
  text-decoration: underline;
  color: var(--color-text);
}

.content-block__text p:last-child {
  margin-bottom: 0;
}

/* ---------- BODY TEXT ---------- */
p {
  font-size: 0.875rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  text-align: left;
}

/* Rich text: bullet lists with orange dots (editor + saved content) */
[data-mercury-field] ul {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
}

[data-mercury-field] ul li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  font-size: 0.875rem;
  color: var(--color-text);
}

[data-mercury-field] ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1em * 1.5 - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

[data-mercury-field] ul li:last-child {
  margin-bottom: 0;
}

[data-mercury-field] strong,
[data-mercury-field] b {
  font-weight: 700;
}

[data-mercury-field] u {
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-mercury-field] a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

[data-mercury-field] a:hover {
  color: var(--color-gold);
}

/* ---------- LEISTUNGS-LISTE ---------- */
.leistungen-headline {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

/* ---------- PDF EMBED (Privacy Notice etc.) ----------
   Inline-Anzeige eines PDFs ueber <object>/<iframe>. Layout passt sich der
   Container-Breite an, Hoehe ist auf 900px gesetzt (auf Mobile reduziert). */
.pdf-embed {
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.pdf-embed__object,
.pdf-embed__iframe {
  display: block;
  width: 100%;
  height: 900px;
  border: 0;
  background: var(--color-white);
}

.pdf-embed__fallback {
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
  color: var(--color-mid);
}

.pdf-embed__download {
  margin-top: 1rem;
}

.pdf-embed__intro {
  font-size: 0.85rem;
  color: var(--color-mid);
  margin-bottom: 0.5rem;
}

.content-page--privacy .content-page__cookies {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.content-page__h2 {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: normal;
  margin: 0 0 1.25rem;
}

.content-page .section-headline:has(+ .content-page__h2) {
  margin-bottom: 0.4rem;
}

.privacy-notice-body {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text);
}

.privacy-notice__section {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 1.75rem 0 0.75rem;
  color: var(--color-text);
}

.privacy-notice__list {
  margin: 0.5rem 0 1rem 1.1rem;
  padding: 0;
}

.privacy-notice__list li {
  margin-bottom: 0.65rem;
}

.privacy-notice-body p {
  margin: 0 0 0.85rem;
}

.content-page--privacy .pdf-embed {
  margin-top: 0.75rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

@media (max-width: 760px) {
  .pdf-embed__object,
  .pdf-embed__iframe {
    height: 70vh;
    min-height: 480px;
  }
}

/* ---------- MERCURY-LIST (Defensiv-Standard fuer neuen Content) ----------
   Verwende `<ul class="mercury-list">` fuer einheitliche Bullets im Brand-
   Orange. Bestehende spezialisierte Listen-Klassen (.leistungen-liste,
   .fachartikel-liste, .aufsicht-list, .sitemap-list, .unternehmen-jobs)
   nutzen ebenfalls var(--color-brand-orange) und bleiben unveraendert. */
ul.mercury-list,
ol.mercury-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul.mercury-list li,
ol.mercury-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  line-height: var(--bullet-line-height);
  color: var(--color-text);
}

ul.mercury-list li::before,
ol.mercury-list li::before {
  content: "";
  flex: 0 0 var(--bullet-size);
  width: var(--bullet-size);
  height: var(--bullet-size);
  align-self: flex-start;
  margin-top: calc((1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  background: var(--color-brand-orange) !important;
  border-radius: 50%;
  display: block;
}

/* Fallback fuer rare Stellen, die ::marker statt ::before nutzen. */
.mercury-list li::marker {
  color: var(--color-brand-orange);
}

.leistungen-liste {
  list-style: none;
  padding-left: 0;
}

.leistungen-liste li {
  font-size: 0.8rem;
  color: var(--color-text);
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.3rem;
  line-height: var(--bullet-line-height);
}

.leistungen-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

/* Variante: oranger Bullet (Compliance-Original). Identisch zur Standard-Liste,
   bleibt aus Kompatibilitaetsgruenden als Alias-Klasse erhalten. */
.leistungen-liste--orange li {
  padding-left: 1.05rem;
  margin-bottom: 0.45rem;
  line-height: var(--bullet-line-height);
}

.leistungen-liste--orange li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  display: block;
  width: var(--bullet-size);
  height: var(--bullet-size);
  min-width: var(--bullet-size);
  min-height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

/* Investigations: Whistleblowing-Zwischenüberschrift mit Block-Abstand wie Original */
.leistungen-headline--block {
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

/* Investigations: rechte Spalte als Bezugspunkt für das absolut positionierte Badge */
#investigations .content-block__text {
  position: relative;
  padding-bottom: 150px;
}

/* Investigations: ACFE-Zertifikat-Badge — Overlay rechts unten, klickbar zum PDF */
.investigations-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  display: block;
  width: 140px;
  line-height: 0;
  cursor: pointer;
}

.investigations-badge img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* ---------- CTA LINK ---------- */
.cta-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 1px;
  margin-top: 1rem;
  transition: color 0.2s, border-color 0.2s;
}

.cta-link:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* ---------- HOME: DREISPALTEN (Compliance Package / Aktuelles / Artikel) ---------- */
.home-three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .home-three-col {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
  }
}

.home-col__headline {
  font-family: var(--font-body);
  font-size: var(--headline-section-size);
  font-weight: 700;
  letter-spacing: var(--headline-section-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.home-col__puzzle-img {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

.aktuelles-liste {
  list-style: none;
  font-size: 0.78rem;
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* FINMA-RSS-Liste: orange Bullets wie Quick Links / mercury.ch */
.aktuelles-liste--bullets {
  list-style: none;
  padding-left: 0;
}

.aktuelles-liste--bullets li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.625rem;
  line-height: var(--bullet-line-height);
  border-bottom: none;
}

.aktuelles-liste--bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

.aktuelles-liste--bullets li:last-child {
  margin-bottom: 0;
}

.aktuelles-liste--bullets a {
  color: inherit;
  text-decoration: none;
}

.aktuelles-liste--bullets a:hover {
  color: var(--color-gold);
}

.aktuelles-liste__status {
  color: var(--color-mid);
  font-style: italic;
  padding-left: 0;
}

.aktuelles-liste__status::before {
  display: none;
}

.home-aktuelles--inline {
  max-width: none;
  margin-inline: 0;
}

.home-aktuelles__img {
  display: block;
  width: 218px;
  height: 118px;
  max-width: 100%;
  margin-bottom: 1rem;
}

.home-aktuelles__date {
  margin: 0 0 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
}

/* Abstand Dreispalten → Quick Links */
.home-news-block__quick-links {
  margin-top: 2%;
  padding-top: 0;
}

@media (min-width: 768px) {
  .home-news-block__quick-links {
    margin-top: 2.5rem;
    padding-top: 0.35rem;
  }
}

@media (max-width: 767px) {
  .home-news-block__quick-links {
    margin-top: 2.75rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
  }
}

/* ---------- HOME: QUICK LINKS (mobile: 1 column, desktop: 4 columns) ---------- */
.quick-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .quick-links {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
    width: 100%;
  }

  .quick-link-item {
    flex: 0 0 auto;
    min-width: 0;
  }
}

.quick-link-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.quick-link-item__icon {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: auto;
}

.quick-link-item__bullet {
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #dd761c;
  flex-shrink: 0;
}

.quick-link-item__title {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
}

@media (min-width: 992px) {
  .quick-link-item__title {
    font-size: 0.8rem;
  }
}

@media (min-width: 1100px) {
  .quick-link-item__title {
    font-size: 0.875rem;
  }
}

.quick-link-item__title a {
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.quick-link-item__title a:hover {
  color: var(--color-gold);
}

@media (max-width: 767px) {
  .quick-link-item {
    gap: 0.65rem;
  }

  .quick-link-item__title {
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .quick-link-item__title a {
    white-space: normal;
  }
}

/* ---------- HOME: OUTSOURCING TEASER ---------- */
.outsourcing-teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--color-border);
}

.outsourcing-teaser__label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  flex-shrink: 0;
}

.outsourcing-teaser__slogan {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
}

/* ---------- TEAM GRID ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

@media (min-width: 600px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Einheitlicher Bildrahmen: Köpfe oben auf gleicher Höhe */
.team-card__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  line-height: 0;
  background: #fff;
}

.team-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: none;
  transition: filter 0.25s ease;
}

/* Farbig standard; Schwarz-weiss bei Hover (und Tastatur-Fokus) */
a.team-card:hover .team-card__media > img,
a.team-card:focus-visible .team-card__media > img {
  filter: grayscale(100%);
}

a.team-card:active .team-card__media > img {
  filter: grayscale(100%);
}

.team-card__name {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 0.5rem;
  padding-inline: 0;
}

.team-card__title {
  font-size: 0.72rem;
  color: var(--color-text);
  margin-top: 0.15rem;
  flex: 1 1 auto;
  padding-inline: 0;
}

.team-card__mail {
  font-size: 0.72rem;
  color: var(--color-text);
  margin-top: auto;
  padding-top: 0.35rem;
  padding-inline: 0;
  width: 100%;
  text-align: left;
}

a.team-card .team-card__mail {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* E-Mail: Icon + visible address (mailto) */
.mercury-email {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
}

.mercury-email--team-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0.35rem;
  white-space: nowrap;
}

.team-card__mail .mercury-email-host {
  display: block;
  width: 100%;
}

.mercury-email--team-card .mercury-email__icon-link {
  margin: 0;
  padding: 0;
  transform: translateX(-2px);
}

.mercury-email__icon-link {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-orange);
  text-decoration: none;
  line-height: 0;
  transition: color 0.2s, opacity 0.2s;
}

.mercury-email__icon-link:hover,
.mercury-email__icon-link:focus-visible {
  color: var(--color-gold);
  opacity: 0.9;
}

.mercury-email__address {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.mercury-email__address:hover,
.mercury-email__address:focus-visible {
  color: var(--color-gold);
}

.mercury-email__short {
  display: none;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.mercury-email__short:hover,
.mercury-email__short:focus-visible {
  color: var(--color-gold);
}

@media (max-width: 767px) {
  .mercury-email--team-card .mercury-email__address:not(.mercury-email__address--solo) {
    display: none !important;
  }

  .mercury-email--team-card .mercury-email__short {
    display: inline;
  }

  .team-card__mail {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 768px) {
  .mercury-email--team-card .mercury-email__short {
    display: none !important;
  }
}

.team-profile__lead .mercury-email {
  margin-top: 0.35rem;
}

.team-profile__lead .mercury-email-host {
  display: block;
}

.content-page__text .mercury-email {
  display: inline-flex;
  vertical-align: middle;
}

.kontakt-aside__details .mercury-email {
  display: inline-flex;
  vertical-align: middle;
}

a.team-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  transition: opacity 0.2s;
}

a.team-card:hover {
  opacity: 0.92;
}

a.team-card:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

/* ---------- TEAM-PROFIL (Unterseite wie mercury.ch, z. B. /samuel-ryhner/) ---------- */
.team-profile-back-bar {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: 0.65rem var(--gutter) 0;
}

.team-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.team-profile__back:hover {
  color: var(--color-text);
  border-bottom-color: var(--color-gold);
}

.team-profile__back:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.team-profile__back-arrow {
  font-size: 1em;
  line-height: 1;
  opacity: 0.85;
}

.team-profile-strip {
  background: var(--color-bg);
  /* Linie wird via .team-profile-strip__line (max-width gebunden) gezogen,
     kein border-bottom hier — das wäre Viewport-breit. */
  padding: 0.35rem 0 0;
}

.team-profile-strip__line {
  height: 1px;
  background: var(--color-border);
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
  box-sizing: content-box;
}

.team-profile-title-section {
  padding-top: clamp(2.5rem, 4vw, 3.75rem);
  padding-bottom: 0.85rem;
}

.team-profile__page-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #54595f;
  text-align: left;
  margin: 0;
  line-height: 1.25;
}

.team-profile-title-section + .section-container {
  padding-top: 0;
}

.team-profile-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 768px) {
  .team-profile-layout {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 3rem;
    align-items: start;
  }
}

.team-profile__photo a {
  display: inline-block;
  line-height: 0;
}

.team-profile__photo img {
  width: 100%;
  max-width: 458px;
  height: auto;
  display: block;
  filter: none;
  transition: filter 0.25s ease;
}

.team-profile__photo a:active img {
  filter: grayscale(100%);
}

.team-profile__lead {
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.team-profile__lead a {
  text-decoration: underline;
}

.team-profile__lead .mercury-email__icon-link {
  text-decoration: none;
}

.team-profile__body p {
  font-size: 0.875rem;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  line-height: 1.55;
}

.team-profile__body p:last-child {
  margin-bottom: 0;
}

.team-profile__linkedin {
  display: inline-block;
  margin-top: 1.25rem;
  line-height: 0;
  text-decoration: none;
}

.team-profile__linkedin img {
  display: block;
  width: 24px;
  height: 24px;
  image-rendering: auto;
}

.team-profile__linkedin:hover {
  opacity: 0.88;
}

/* ---------- WERTE GRID (Über uns) ---------- */
.werte-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 600px) {
  .werte-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.wert-item__headline {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* ---------- SEITE UNTERNEHMEN (3-Spalten-Layout wie mercury.ch) ---------- */
.page-unternehmen .unternehmen-3col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .page-unternehmen .unternehmen-3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 2.25rem;
    align-items: start;
  }
}

.unternehmen-col__title {
  font-family: var(--font-body);
  font-size: var(--headline-section-size);
  font-weight: 700;
  letter-spacing: var(--headline-section-spacing);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 1.25rem;
}

.unternehmen-col__image {
  margin-bottom: 1.25rem;
  line-height: 0;
}

.unternehmen-col__image img {
  width: 100%;
  height: auto;
  display: block;
}

.unternehmen-col__image--portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}

.page-unternehmen .unternehmen-col__text p,
.page-unternehmen .unternehmen-col > p,
.page-unternehmen .unternehmen-col > div p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 0.85rem;
}

.page-unternehmen .unternehmen-col__text p:last-child,
.page-unternehmen .unternehmen-col > p:last-of-type,
.page-unternehmen .unternehmen-col > div p:last-child {
  margin-bottom: 0;
}

.unternehmen-wert + .unternehmen-wert {
  margin-top: 1.35rem;
}

.unternehmen-wert__title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 0.5rem;
}

.unternehmen-wert p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

.unternehmen-col__outro {
  margin-top: 1.35rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
}

.unternehmen-col__outro a {
  color: var(--color-text);
  text-decoration: underline;
}

.unternehmen-jobs {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.unternehmen-jobs li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.45rem;
  font-size: 0.875rem;
  color: var(--color-text);
  line-height: 1.5;
}

.unternehmen-jobs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1em * 1.5 - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--color-brand-orange) !important;
  border-radius: 50%;
}

/* ---------- PUBLIKATIONEN / FACHARTIKEL ---------- */
.fachartikel-autor {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.fachartikel-liste {
  list-style: none;
}

.fachartikel-liste li {
  font-size: 0.82rem;
  color: var(--color-text);
  padding: 0.45rem 0 0.45rem 1rem;
  border-bottom: 1px dotted var(--color-border);
  position: relative;
  line-height: var(--bullet-line-height);
}

.fachartikel-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.45rem + (1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

.fachartikel-liste li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.fachartikel-liste li a:hover {
  color: var(--color-gold);
}

/* Newsletter: gleiche Liste wie Fachartikel, Zeile mit PDF-Download */
.fachartikel-liste--newsletter li {
  padding-left: 1rem;
}

.fachartikel-liste--newsletter .newsletter-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}

.fachartikel-liste--newsletter .newsletter-item__main {
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fachartikel-liste--newsletter .newsletter-item__title {
  font-size: 0.82rem;
  color: var(--color-text);
}

.fachartikel-liste--newsletter .newsletter-item__pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.65rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.fachartikel-liste--newsletter .newsletter-item__pdf:hover {
  color: var(--color-gold);
  background: var(--color-bg);
  border-color: var(--color-gold);
}

.fachartikel-liste--newsletter .newsletter-item__pdf-icon {
  flex-shrink: 0;
  color: var(--color-gold);
}

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--color-white);
  padding-block: 2.5rem 1.75rem;
  color: var(--color-mid);
  font-family: var(--font-body);
}

/* Heller, dezenter Trenner an der Footer-Oberkante (auf Inhaltsbreite). */
.site-footer > .container {
  position: relative;
}

.site-footer > .container::before {
  content: '';
  position: absolute;
  top: -2.5rem;
  left: var(--gutter);
  right: var(--gutter);
  height: 6px;
  background: linear-gradient(to bottom, transparent, transparent 2.5px, #e5e5e3 2.5px, #e5e5e3 3.5px, transparent 3.5px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 2rem;
  }
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.1fr 1fr 1.15fr 1fr auto;
    gap: 0 2.25rem;
    align-items: start;
  }
}

.footer-col__logo img {
  display: block;
  max-width: 165px;
  height: auto;
}

.footer-col__copyright {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-mid);
  margin-top: 1.1rem;
}

.footer-col ul.footer-col__legal {
  padding-left: 0;
  margin-left: 0;
}

.footer-col ul.footer-col__legal li {
  padding-left: 0;
}

.footer-col__legal {
  list-style: none;
  margin-top: 1.5rem;
  margin-left: 0;
  padding-left: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  font-family: var(--font-body);
  font-size: 0.62rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-col__legal li {
  padding-left: 0;
  margin-bottom: 0;
}

/* Chevron-Bullet aus .footer-col ul li::before fuer Legal-Liste deaktivieren. */
.footer-col__legal li::before {
  content: none !important;
}

.footer-col__legal a {
  color: var(--color-mid);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(74, 74, 74, 0.55);
  transition: color 0.2s;
}

.footer-col__legal a:hover {
  color: var(--color-gold);
  text-decoration-color: var(--color-gold);
}

.footer-col__legal li:not(:last-child)::after {
  content: '|';
  color: var(--color-light);
  margin: 0 0.55rem;
  display: inline-block;
  vertical-align: baseline;
  text-decoration: none;
}

.footer-col__linkedin {
  justify-self: end;
  align-self: start;
}

/* Spaltentitel im neuen Footer ausgeblendet — Original arbeitet ohne sichtbare
   Spalten-Headlines. .footer-col__title-Markup darf bestehen, wird aber visuell
   entfernt für gleiche Optik wie mercury.ch. */
.footer-col__title {
  display: none;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  position: relative;
  padding-left: 0.95rem;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-mid);
}

.footer-col ul li::before {
  content: '\203A'; /* › Chevron wie im Original */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-chevron);
  font-size: 0.85rem;
  line-height: 1.45;
}

.footer-col ul li a {
  font-size: 0.78rem;
  color: var(--color-mid);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col ul li a:hover,
.footer-col ul li a:focus,
.footer-col ul li a:visited,
.footer-col ul li a:active {
  color: var(--color-gold);
  text-decoration: none;
}

/* Optionaler Footer-Bottom (z.B. für mobile LinkedIn-Position) */
.footer-bottom {
  display: none;
}

.footer-linkedin {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 0;
  background: transparent;
  transition: opacity 0.2s;
}

.footer-linkedin img {
  display: block;
  width: 24px;
  height: 24px;
}

.footer-linkedin:hover {
  opacity: 0.75;
}

@media (max-width: 899px) {
  .footer-col__linkedin {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.5rem;
  }
}

/* ---------- SECTION DIVIDER (farbige Linie) ---------- */
.section-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-teal));
  width: 3rem;
  margin-bottom: 1.5rem;
}

/* ---------- BRANCHEN KACHELN ---------- */
.branchen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .branchen-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.branchen-kachel {
  background: var(--color-white);
  padding: 1.5rem;
}

.branchen-kachel__title {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* ---------- SCROLL OFFSET (wegen sticky Header + Logo) ---------- */
.scroll-target {
  scroll-margin-top: var(--scroll-target-offset);
}

/* One-Pager-Unterseiten: Sektionshöhe zum Testen des Scrollens (z. B. /ueber-uns) */
.scroll-target--onepager {
  min-height: 100vh;
}

/* ---------- RECHTE KONTEXT-NAVIGATION: Tooltip am Icon (fixed), quadratische Icons ---------- */
/* Kein transform am Nav: sonst wird position:fixed des Tooltips am Nav verankert statt am Viewport
   und getBoundingClientRect()-Koordinaten stimmen nicht → Tooltip unsichtbar. */
.page-context-nav {
  position: fixed;
  top: 0;
  right: clamp(0.35rem, 1.5vw, 1rem);
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 85;
  pointer-events: none;
}

/* Anker: Mitte des Icon-Buttons; links daneben; eine Zeile; Höhe wie Icon für optische Mittigstellung */
.page-context-nav__tooltip {
  --ctx-tip-gap: 12px;
  position: fixed;
  left: var(--ctx-tip-anchor-x, 0px);
  top: var(--ctx-tip-anchor-y, 0px);
  transform: translate(calc(-100% - var(--ctx-tip-gap)), -50%);
  z-index: 86;
  box-sizing: border-box;
  min-height: 2.4rem;
  max-width: min(70vw, 18rem);
  padding: 0 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Eine Zeile vertikal wie Icon (2.4rem): optische Mittigstellung zur Icon-Mitte */
  line-height: 2.4rem;
  background:
    linear-gradient(rgba(200, 169, 110, 0.14), rgba(200, 169, 110, 0.14)),
    var(--color-bg);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-align: right;
  border-radius: 0;
  box-shadow:
    inset 0 0 0 1px rgba(200, 169, 110, 0.7),
    0 2px 10px rgba(0, 0, 0, 0.07);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.page-context-nav__tooltip.is-in {
  opacity: 1;
  visibility: visible;
}

.page-context-nav__tooltip.is-out {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.38s ease,
    visibility 0.38s ease;
}

@media (prefers-reduced-motion: reduce) {
  .page-context-nav__tooltip {
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }
}

.page-context-nav__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  max-height: min(72vh, 38rem);
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: auto;
}

.page-context-nav__rail::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.page-context-nav__rail li {
  margin: 0;
  flex-shrink: 0;
}

.page-context-nav__btn {
  position: relative;
  width: 2.4rem;
  height: 2.4rem;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  opacity: 0.4;
  transition:
    opacity 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.page-context-nav__btn svg {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.page-context-nav__btn:hover,
.page-context-nav__btn:focus-visible {
  opacity: 0.88;
  color: var(--color-text);
  outline: none;
}

.page-context-nav__btn.is-active {
  opacity: 1;
  color: var(--color-gold);
  background: rgba(200, 169, 110, 0.14);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(200, 169, 110, 0.7);
}

.page-context-nav__btn.is-active svg {
  stroke-width: 1.85;
}

/* Hover-Tooltip nur fuer inaktive Icons */
.page-context-nav__btn::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(6px, -50%);
  padding: 0.32rem 0.5rem;
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.3;
  white-space: normal;
  max-width: 9.25rem;
  text-align: right;
  border-radius: 0;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease,
    transform 0.15s ease;
  z-index: 2;
}

.page-context-nav__btn.is-active::after {
  content: none;
}

.page-context-nav__btn:not(.is-active):hover::after,
.page-context-nav__btn:not(.is-active):focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

@media (max-width: 1099px) {
  .page-context-nav {
    display: none !important;
  }
}

/* ---------- KONTAKT (Referenz: 2 Spalten, Form links | Map + Adresse rechts) ---------- */
.kontakt-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: start;
  margin-top: 0.75rem;
}

.kontakt-section__intro {
  font-size: 0.88rem;
  color: var(--color-light);
  line-height: 1.45;
  margin-bottom: 1.2rem;
}

.kontakt-form {
  position: relative;
}

.kontakt-form__field {
  margin-bottom: 1.05rem;
}

.kontakt-form__label {
  display: block;
  font-size: 0.88rem;
  color: var(--color-light);
  margin-bottom: 0.32rem;
}

.kontakt-form__control,
.kontakt-form__textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
}

.kontakt-form__textarea {
  min-height: 9.5rem;
  resize: vertical;
  vertical-align: top;
}

.kontakt-form__control:focus,
.kontakt-form__textarea:focus {
  outline: 2px solid var(--color-mid);
  outline-offset: 1px;
}

.kontakt-form__submit {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.68rem 1rem;
  border: none;
  background: #9a9a9a;
  color: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.kontakt-form__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.kontakt-form__field--privacy {
  margin-top: 0.25rem;
}

.kontakt-form__privacy {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-light);
  cursor: pointer;
}

.kontakt-form__privacy span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

.kontakt-form__checkbox {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
  accent-color: var(--color-gold, #b8860b);
}

.kontakt-form__privacy a {
  font-family: inherit;
  font-size: inherit;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.kontakt-form__privacy a:hover {
  color: var(--color-gold);
}

.kontakt-form__feedback {
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.45;
}

.kontakt-form__feedback--ok {
  color: #2d6a4f;
}

.kontakt-form__feedback--err {
  color: #9b2335;
}

.kontakt-form__submit:hover {
  background: #868686;
}

.kontakt-aside__map-wrap {
  width: 100%;
  margin-bottom: 1.15rem;
  line-height: 0;
}

.kontakt-aside__iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

.kontakt-aside__details {
  font-size: 0.9rem;
  color: var(--color-light);
  line-height: 1.55;
}

.kontakt-aside__details a {
  color: var(--color-mid);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .kontakt-section-grid {
    grid-template-columns: 1fr;
  }

  .kontakt-aside__iframe {
    height: 260px;
  }
}

/* ---------- UTILITY ---------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.text-small {
  font-size: 0.78rem;
  color: var(--color-text);
}


/* ---------- CONTENT PAGE (einzelne Themenseiten) ---------- */
.content-page {
  padding-block: 2.5rem 3rem;
}

.content-page .container {
  max-width: 56rem;
}

.content-page__intro {
  margin-bottom: 1.25rem;
}

.content-page p {
  margin-bottom: 1rem;
}

.content-page p + h2,
.content-page p + h3,
.content-page ul + h2,
.content-page ul + h3 {
  margin-top: 1.75rem;
}

.content-page ol.compliance-cycle-steps {
  list-style: none;
  counter-reset: ccstep;
  margin: 1rem 0 1.5rem;
}

.content-page ol.compliance-cycle-steps li {
  counter-increment: ccstep;
  padding: 0.85rem 0 0.85rem 2.5rem;
  border-bottom: 1px dotted var(--color-border);
  position: relative;
  font-size: 0.9rem;
}

.content-page ol.compliance-cycle-steps li::before {
  content: counter(ccstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

.content-page ol.compliance-cycle-steps li strong {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

/* ---------- COMPLIANCE PACKAGE PAGE ----------
   2-Col-Layout: Puzzle-Bild (breiter) links, Fliesstext (justified) rechts. */
.package-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 880px) {
  .package-grid {
    grid-template-columns: minmax(360px, 1fr) 1fr;
  }
}

.package-grid__figure {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.package-grid__figure img {
  width: 100%;
  height: auto;
  max-width: 540px;
  display: block;
}

.package-grid__text p {
  margin: 0 0 1rem 0;
  color: var(--color-mid);
  font-size: 0.86rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.package-grid__text p:last-child {
  margin-bottom: 0;
}

/* ---------- COACHING & TRAINING PAGE ----------
   2-Col-Layout: Buchstapel-Bild links (volle Spaltenhoehe),
   Intro + Sub-Headline + Liste + Outro rechts. */
.coaching-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 880px) {
  .coaching-grid {
    grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  }
}

.coaching-grid__figure {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.coaching-grid__figure img {
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
}

.coaching-grid__text p {
  margin: 0 0 1rem 0;
  color: var(--color-mid);
  font-size: 0.86rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.coaching-grid__sub {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 1.25rem 0 0.85rem 0 !important;
  text-align: left !important;
}

.coaching-grid__list {
  margin: 0 0 1.25rem 0;
  padding-left: 0;
  list-style: none;
}

.coaching-grid__list li {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--color-mid);
  padding-left: 1.1rem;
  position: relative;
  margin-bottom: 0.4rem;
  text-align: left;
}

/* ---------- WHISTLEBLOWING PAGE ----------
   2-Col-Layout: Briefkasten-Bild links, Fliesstext (justified) rechts. */
.whistleblowing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 3rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 880px) {
  .whistleblowing-grid {
    grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  }
}

.whistleblowing-grid__figure {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.whistleblowing-grid__figure img {
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
}

.whistleblowing-grid__text p {
  margin: 0 0 1rem 0;
  color: var(--color-mid);
  font-size: 0.86rem;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.whistleblowing-grid__text p:last-child {
  margin-bottom: 0;
}

.whistleblowing-grid__contact {
  text-decoration: underline;
  font-weight: 400;
  color: inherit;
}

.whistleblowing-grid__contact:hover,
.whistleblowing-grid__contact:focus-visible {
  color: var(--color-text);
  text-decoration-thickness: 2px;
}

.whistleblowing-page__factsheet {
  margin-top: 1.75rem;
}

/* ---------- COMPLIANCE ASSESSMENT PAGE ----------
   2-Col-Layout: Wegweiser-Bild links, Fliesstext rechts. */
.assessment-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.5rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 880px) {
  .assessment-grid {
    grid-template-columns: minmax(280px, 0.85fr) 1.15fr;
  }
}

.assessment-grid__figure {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.assessment-grid__figure img {
  width: 100%;
  height: auto;
  max-width: 420px;
  display: block;
}

.assessment-grid__text p {
  margin: 0 0 1rem 0;
  color: var(--color-mid);
  font-size: 0.86rem;
  line-height: 1.7;
}

.assessment-grid__text p:last-child {
  margin-bottom: 0;
}

/* ---------- MERCURY COMPLIANCE CYCLE PAGE ----------
   2-Col-Layout: Cycle-Grafik links, Schritte 1-3 rechts.
   Schritt 4 + Schluss-Absatz wieder full-width darunter. */
.cycle-page__intro {
  margin-bottom: 1.5rem;
}

.cycle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 2.25rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

@media (min-width: 880px) {
  .cycle-grid {
    grid-template-columns: minmax(320px, 0.95fr) 1.05fr;
  }
}

.cycle-grid__figure {
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.cycle-grid__figure img {
  width: 100%;
  height: auto;
  max-width: 480px;
  display: block;
}

.cycle-grid__steps {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.cycle-step__title {
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.35rem 0;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.cycle-step__title strong {
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cycle-step p:not(.cycle-step__title) {
  margin: 0 0 0.25rem 0;
  color: var(--color-mid);
  font-size: 0.86rem;
  line-height: 1.65;
}

.cycle-page__outro {
  margin-top: 1rem;
}

.cycle-page__outro .cycle-step__title {
  margin-top: 0.5rem;
}

/* ---------- SITEMAP ---------- */
.sitemap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .sitemap-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.sitemap-group__title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: 0.4rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-border);
}

.sitemap-list {
  list-style: none;
}

.sitemap-list li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1rem;
  border-bottom: 1px dotted var(--color-border);
  line-height: var(--bullet-line-height);
}

.sitemap-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.4rem + (1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

.sitemap-list li.is-sub {
  padding-left: 1.75rem;
  font-size: 0.82rem;
}

.sitemap-list li.is-sub::before {
  left: 0.75rem;
  width: var(--bullet-size);
  height: var(--bullet-size);
  background: var(--color-brand-orange) !important;
}

.sitemap-list a {
  color: var(--color-text);
  font-size: 0.85rem;
  transition: color 0.2s;
}

.sitemap-list a:hover {
  color: var(--color-gold);
}

/* ---------- PDF DOWNLOAD CARD (für Privacy / Fideleg etc.) ---------- */
.doc-download {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  margin-top: 0.5rem;
}

.doc-download:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
  background: var(--color-bg);
}

.doc-download__badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-gold);
}

/* ---------- AUFSICHTSBEHOERDEN-LISTE ---------- */
.aufsicht-group {
  margin-bottom: 2rem;
}

.aufsicht-group__title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-border);
}

.aufsicht-list {
  list-style: none;
}

.aufsicht-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.1rem;
  font-size: 0.82rem;
  border-bottom: 1px dotted var(--color-border);
  line-height: var(--bullet-line-height);
}

.aufsicht-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.45rem + (1em * var(--bullet-line-height) - var(--bullet-size)) / 2);
  width: var(--bullet-size);
  height: var(--bullet-size);
  border-radius: 50%;
  background: var(--color-brand-orange) !important;
}

.aufsicht-list a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s;
}

.aufsicht-list a:hover {
  color: var(--color-gold);
}

/* ---------- SUCHE ---------- */
.suche-form {
  display: flex;
  gap: 0.5rem;
  margin: 1.5rem 0 2rem;
}

.suche-form input[type="search"] {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
}

.suche-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-gold);
}

.suche-form button {
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.suche-form button:hover {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* ---------- SITE SEARCH (Volltext) ---------- */
.site-search {
  margin: 1.5rem 0 3rem;
  max-width: 52rem;
}

.site-search__field-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.site-search__input {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-white);
  box-sizing: border-box;
}

.site-search__input:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 2px rgba(200, 169, 110, 0.2);
}

.site-search__status {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted, #666);
  min-height: 1.2em;
}

.site-search__suggest {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0.25rem 0 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 16rem;
  overflow-y: auto;
}

.site-search__suggest-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.site-search__suggest-item:hover,
.site-search__suggest-item.is-focused {
  background: rgba(200, 169, 110, 0.12);
}

.site-search__suggest-title {
  flex: 1;
  font-weight: 600;
}

.site-search__suggest-cat {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
  white-space: nowrap;
}

.site-search__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.site-search__filter {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.site-search__filter:hover,
.site-search__filter.is-active {
  color: var(--color-gold);
  border-color: var(--color-gold);
}

.site-search__filter.is-active {
  background: rgba(200, 169, 110, 0.1);
}

.site-search__results {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-search__result {
  border-bottom: 1px solid var(--color-border);
}

.site-search__result-link {
  display: block;
  padding: 1.1rem 0;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s;
}

.site-search__result-link:hover .site-search__result-title,
.site-search__result-link:focus-visible .site-search__result-title {
  color: var(--color-gold);
}

.site-search__result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.site-search__result-cat {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #666);
}

.site-search__result-score {
  font-size: 0.72rem;
  color: var(--color-text-muted, #888);
}

.site-search__result-title {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.35rem;
}

.site-search__result-snippet {
  display: block;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--color-text-muted, #555);
}

.site-search__mark {
  background: rgba(200, 169, 110, 0.35);
  color: inherit;
  padding: 0 0.05em;
  font-weight: inherit;
}

.site-search__empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--color-text-muted, #666);
  line-height: 1.6;
}

@media (max-width: 640px) {
  .site-search__suggest-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
}

/* (entfernt: :has(+p)-Hack — Größen über --headline-section-size und Komponenten-Klassen) */

/* Editor-Leiste nur verstecken, wenn mercury-runtime.js nicht geladen ist */
html:not(.mercury-editor-active) .mercury-editor-root,
html:not(.mercury-editor-active) .mercury-editor-footer-login,
html:not(.mercury-editor-active) .footer-admin {
  display: none !important;
}