.private-insight-bento {
  --private-insight-surface: #f1efe8;
  --private-insight-panel: rgba(255, 255, 255, .46);
  --private-insight-panel-strong: rgba(255, 255, 255, .68);
  --private-insight-line: rgba(31, 30, 27, .14);
  --private-insight-line-strong: rgba(31, 30, 27, .24);
  --private-insight-ink: #191917;
  --private-insight-muted: #65635d;
  --private-insight-accent: #806900;
  isolation: isolate;
  min-width: 0;
  min-height: 24rem;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(10.8rem, auto) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--private-insight-line);
  background: var(--private-insight-surface) !important;
  color: var(--private-insight-ink) !important;
}

body.protection-page.protection-subpage .cost-bento-grid__small > .private-insight-bento {
  min-height: 24rem !important;
}

body.protection-page.protection-subpage .cost-bento-grid__small > .private-insight-bento--local {
  min-height: 28rem !important;
  grid-template-rows: minmax(10.8rem, auto) minmax(16rem, auto);
}

.private-insight-bento__visual {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 10.8rem;
  margin: .95rem 1.05rem .15rem;
  overflow: hidden;
  border: 1px solid var(--private-insight-line);
  border-radius: 1rem;
  background: var(--private-insight-panel);
  box-shadow: inset 0 1px 0 var(--private-insight-panel-strong);
}

.private-insight-bento__visual :is(span, strong, b, small, em) {
  min-width: 0;
}

.private-insight-bento__visual b,
.private-insight-bento__visual strong {
  color: var(--private-insight-ink);
  font-style: normal;
}

.private-insight-bento__visual small,
.private-insight-bento__visual em {
  color: var(--private-insight-muted);
  font-style: normal;
}

body.protection-page.protection-subpage .private-insight-bento .bento-card__content {
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  height: 100%;
  padding: .7rem clamp(1.2rem, 1.8vw, 1.65rem) clamp(1.2rem, 1.8vw, 1.65rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  border: 0;
  background: transparent !important;
  color: inherit !important;
  opacity: 1 !important;
  pointer-events: auto;
  transform: none !important;
  box-shadow: none;
}

body.protection-page.protection-subpage .private-insight-bento h3 {
  max-width: 19ch;
  color: var(--private-insight-ink) !important;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

body.protection-page.protection-subpage .private-insight-bento p {
  max-width: 31rem;
  color: var(--private-insight-muted) !important;
}

body.protection-page.protection-subpage .private-insight-bento .bento-card__kicker {
  color: var(--private-insight-accent) !important;
}

body.protection-page.protection-subpage .private-insight-bento .bento-card__action {
  display: flex !important;
}

/* Köln: ein räumlicher Beratungskompass mit realen Zugangswegen. */
.private-insight-bento--local .private-insight-bento__visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 200, 0, .13), transparent 38%),
    var(--private-insight-panel);
}

body.protection-page.protection-subpage .private-insight-bento--local .bento-card__content {
  min-height: 16rem;
  justify-content: flex-start !important;
  padding-bottom: 1.5rem !important;
  overflow: visible !important;
}

body.protection-page.protection-subpage .private-insight-bento--local .bento-card__action {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
  min-height: 3rem;
  margin-top: 1.1rem !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: none !important;
}

body.protection-page.protection-subpage .private-insight-bento--local .bento-card__action span {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.private-local-compass::before,
.private-local-compass::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid var(--private-insight-line);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.private-local-compass::before {
  width: 7.7rem;
  height: 7.7rem;
}

.private-local-compass::after {
  width: 4.6rem;
  height: 4.6rem;
  border-color: rgba(194, 159, 0, .38);
}

.private-local-compass__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 4rem;
  height: 4rem;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: #f5c800;
  color: #24210f;
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 .7rem 1.8rem rgba(159, 128, 0, .16);
}

.private-local-compass__core small {
  color: rgba(36, 33, 15, .68);
  font-size: .5rem;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.private-local-compass__core b {
  margin-top: .18rem;
  color: #24210f;
  font-size: .66rem;
  line-height: 1.05;
}

.private-local-compass__node {
  position: absolute;
  z-index: 2;
  padding: .35rem .48rem;
  border: 1px solid var(--private-insight-line);
  border-radius: .5rem;
  background: var(--private-insight-panel-strong);
  color: var(--private-insight-muted);
  font-size: .58rem;
  font-weight: 730;
  line-height: 1;
  white-space: nowrap;
}

.private-local-compass__node:nth-of-type(2) { top: .75rem; left: .75rem; }
.private-local-compass__node:nth-of-type(3) { top: .75rem; right: .75rem; }
.private-local-compass__node:nth-of-type(4) { right: 50%; bottom: .75rem; transform: translateX(50%); }

/* Kosten: vier reale Einflussgrößen laufen in einen Beitrag zusammen. */
.private-cost-constellation {
  background:
    linear-gradient(var(--private-insight-line), var(--private-insight-line)) center / 1px 100% no-repeat,
    linear-gradient(90deg, var(--private-insight-line), var(--private-insight-line)) center / 100% 1px no-repeat,
    var(--private-insight-panel);
}

.private-cost-constellation__core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 5.15rem;
  height: 5.15rem;
  display: grid;
  place-content: center;
  border: 1px solid rgba(182, 149, 0, .5);
  border-radius: 50%;
  background: var(--private-insight-surface);
  text-align: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 .55rem rgba(245, 200, 0, .08);
}

.private-cost-constellation__core small {
  font-size: .5rem;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.private-cost-constellation__core b {
  margin-top: .14rem;
  font-size: .83rem;
}

.private-cost-constellation__factor {
  position: absolute;
  width: 4.35rem;
  color: var(--private-insight-muted);
  font-size: .52rem;
  font-weight: 730;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.private-cost-constellation__factor:nth-of-type(2) { top: 1.05rem; left: .58rem; }
.private-cost-constellation__factor:nth-of-type(3) { top: 1.05rem; right: .58rem; text-align: right; }
.private-cost-constellation__factor:nth-of-type(4) { bottom: 1.05rem; left: .58rem; }
.private-cost-constellation__factor:nth-of-type(5) { right: .58rem; bottom: 1.05rem; text-align: right; }

.private-cost-constellation__factor::after {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1px;
  margin-top: .3rem;
  background: rgba(183, 150, 0, .54);
  transform-origin: left center;
}

.private-cost-constellation__factor:nth-of-type(3)::after,
.private-cost-constellation__factor:nth-of-type(5)::after {
  margin-left: auto;
  transform-origin: right center;
}

/* Leistungen: eine Matrix, die den Alltag ins Zentrum stellt. */
.private-life-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  background: var(--private-insight-panel);
}

.private-life-matrix__area {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: .72rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.private-life-matrix__area::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: radial-gradient(circle at 100% 100%, rgba(245, 200, 0, .16), transparent 66%);
  transition: opacity .42s cubic-bezier(.22, 1, .36, 1);
}

.private-life-matrix__area:nth-of-type(2)::after { background-position: 0 100%; transform: scaleX(-1); }
.private-life-matrix__area:nth-of-type(3)::after { background-position: 100% 0; transform: scaleY(-1); }
.private-life-matrix__area:nth-of-type(4)::after { background-position: 0 0; transform: scale(-1); }

.private-life-matrix__area:nth-of-type(even) {
  align-items: flex-end;
  border-left: 1px solid var(--private-insight-line);
  text-align: right;
}
.private-life-matrix__area:nth-of-type(n + 3) { border-top: 1px solid var(--private-insight-line); }

.private-life-matrix__area b {
  font-size: .65rem;
  font-weight: 790;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.private-life-matrix__area small {
  max-width: 13ch;
  font-size: .58rem;
  line-height: 1.3;
}

.private-life-matrix__focus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 4.35rem;
  height: 4.35rem;
  display: grid;
  place-items: center;
  border: .45rem solid var(--private-insight-surface);
  border-radius: 50%;
  background: #f5c800;
  color: #24210f !important;
  font-size: .67rem;
  font-weight: 820;
  transform: translate(-50%, -50%);
  box-shadow: 0 .65rem 1.4rem rgba(118, 95, 0, .13);
}

body.protection-page .private-insight-bento--services .private-life-matrix__focus,
body.protection-page .private-insight-bento--services:hover .private-life-matrix__focus {
  transform: translate(-50%, -50%);
}

body.protection-page .private-insight-bento--services:hover .private-life-matrix__area small {
  transform: none;
}

/* Wartezeit: drei Schutzsignale statt einer weiteren Zeitachse. */
.private-protection-signal {
  padding: .35rem .78rem;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.private-protection-signal__row {
  min-width: 0;
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  align-items: center;
  gap: .72rem;
}

.private-protection-signal__row + .private-protection-signal__row {
  border-top: 1px solid var(--private-insight-line);
}

.private-protection-signal__row > span {
  color: var(--private-insight-accent);
  font-size: .53rem;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.private-protection-signal__row > div {
  min-width: 0;
}

.private-protection-signal__row b {
  display: block;
  font-size: .66rem;
  line-height: 1.2;
}

.private-protection-signal__row small {
  display: block;
  margin-top: .22rem;
  font-size: .58rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.private-protection-signal__row:first-child > span {
  padding: .42rem .45rem;
  border-radius: .42rem;
  background: #f5c800;
  color: #24210f;
  text-align: center;
}

html.dark .private-insight-bento {
  --private-insight-surface: #151614;
  --private-insight-panel: rgba(255, 255, 255, .045);
  --private-insight-panel-strong: rgba(255, 255, 255, .075);
  --private-insight-line: rgba(255, 255, 255, .12);
  --private-insight-line-strong: rgba(255, 255, 255, .22);
  --private-insight-ink: #f5f4ef;
  --private-insight-muted: rgba(245, 244, 239, .64);
  --private-insight-accent: #f5c800;
  border-color: var(--private-insight-line);
  background: var(--private-insight-surface) !important;
  color: var(--private-insight-ink) !important;
}

html.dark .private-local-compass__node {
  background: rgba(21, 22, 20, .92);
}

html.dark body.protection-page.protection-subpage .private-insight-bento h3 {
  color: var(--private-insight-ink) !important;
}

html.dark body.protection-page.protection-subpage .private-insight-bento p {
  color: var(--private-insight-muted) !important;
}

html.dark body.protection-page.protection-subpage .private-insight-bento .bento-card__kicker {
  color: var(--private-insight-accent) !important;
}

/* Functional motion: card reveal orchestrates the information hierarchy. */
html.motion-enhanced .private-insight-bento[data-motion-reveal] .private-insight-bento__visual [data-insight-part],
html.motion-enhanced .private-insight-bento[data-motion-reveal] .private-insight-bento__visual::before,
html.motion-enhanced .private-insight-bento[data-motion-reveal] .private-insight-bento__visual::after {
  opacity: 0;
  translate: 0 .45rem;
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    translate .65s cubic-bezier(.22, 1, .36, 1);
}

html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual [data-insight-part],
html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual::before,
html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual::after {
  opacity: 1;
  translate: 0 0;
}

html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual [data-insight-part]:nth-child(2) { transition-delay: 80ms; }
html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual [data-insight-part]:nth-child(3) { transition-delay: 145ms; }
html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual [data-insight-part]:nth-child(4) { transition-delay: 210ms; }
html.motion-enhanced .private-insight-bento[data-motion-reveal].is-motion-visible .private-insight-bento__visual [data-insight-part]:nth-child(5) { transition-delay: 275ms; }

@media (hover: hover) {
  .private-insight-bento:hover .private-insight-bento__visual {
    border-color: rgba(194, 159, 0, .42);
    box-shadow: inset 0 1px 0 var(--private-insight-panel-strong), 0 .75rem 1.8rem rgba(92, 74, 0, .08);
  }

  .private-insight-bento--local:hover .private-local-compass__node:nth-of-type(2) { transform: translate(-.16rem, -.12rem); }
  .private-insight-bento--local:hover .private-local-compass__node:nth-of-type(3) { transform: translate(.16rem, -.12rem); }
  .private-insight-bento--local:hover .private-local-compass__node:nth-of-type(4) { transform: translate(50%, .16rem); }

  .private-insight-bento--costs:hover .private-cost-constellation__factor::after {
    transform: scaleX(1.28);
  }

  .private-insight-bento--services:hover .private-life-matrix__focus {
    box-shadow: 0 0 0 .32rem rgba(245, 200, 0, .14), 0 .75rem 1.65rem rgba(118, 95, 0, .18);
  }

  .private-insight-bento--services:hover .private-life-matrix__area::after {
    opacity: 1;
  }

  .private-insight-bento--services:hover .private-life-matrix__area b {
    color: var(--private-insight-accent);
  }

  .private-insight-bento--waiting:hover .private-protection-signal__row:first-child > span {
    transform: translateX(.14rem);
  }
}

.private-insight-bento__visual,
.private-local-compass__node,
.private-cost-constellation__factor::after,
.private-protection-signal__row:first-child > span {
  transition:
    transform .42s cubic-bezier(.22, 1, .36, 1),
    border-color .36s cubic-bezier(.22, 1, .36, 1),
    box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}

.private-life-matrix__focus {
  transition: box-shadow .42s cubic-bezier(.22, 1, .36, 1);
}

.private-life-matrix__area b {
  transition: color .32s cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 48rem) {
  body.protection-page.protection-subpage .cost-bento-grid__small > .private-insight-bento--local {
    min-height: 23.5rem !important;
    grid-template-rows: 8.65rem minmax(14.85rem, auto);
  }

  body.protection-page.protection-subpage .private-insight-bento--local .private-insight-bento__visual {
    min-height: 7.85rem;
    margin-top: .8rem;
    margin-bottom: 0;
  }

  body.protection-page.protection-subpage .private-insight-bento--local .bento-card__content {
    height: auto !important;
    min-height: 14.85rem;
    padding: .5rem clamp(1.2rem, 1.8vw, 1.65rem) 1rem !important;
  }

  body.protection-page.protection-subpage .private-insight-bento--local .bento-card__action {
    margin-top: .75rem !important;
  }
}

@media (max-width: 47.99rem) {
  .private-insight-bento {
    min-height: 25rem;
    grid-template-rows: minmax(11.25rem, auto) minmax(0, 1fr);
  }

  body.protection-page.protection-subpage .cost-bento-grid__small > .private-insight-bento {
    min-height: 25rem !important;
  }

  .private-insight-bento__visual {
    min-height: 11.25rem;
    margin-inline: 1rem;
  }

  .private-life-matrix__area {
    padding: .65rem;
  }

  body.protection-page.protection-subpage .private-insight-bento h3 {
    max-width: 20ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .private-insight-bento,
  .private-insight-bento *,
  .private-insight-bento *::before,
  .private-insight-bento *::after,
  .private-insight-bento::before,
  .private-insight-bento::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }

  html.motion-enhanced .private-insight-bento[data-motion-reveal] .private-insight-bento__visual [data-insight-part],
  html.motion-enhanced .private-insight-bento[data-motion-reveal] .private-insight-bento__visual::before,
  html.motion-enhanced .private-insight-bento[data-motion-reveal] .private-insight-bento__visual::after {
    opacity: 1;
    translate: 0 0;
  }
}
