/* ==========================================================================
   PJ Bau Steinteppiche
   Brand layer on top of the Masco Tailwind build (assets/css/style.css).
   Tokens map 1:1 to a later Tailwind theme (colors.pj-*, fontFamily.body).
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter/Inter-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --pj-navy: #0f2e6b;
  --pj-blue: #1f2f8f;
  --pj-red: #c4161c;
  --pj-red-dark: #a11216;
  --pj-red-soft: #fbe4e4;
  --pj-ink: #1d2330;
  --pj-text: #4a5162;
  --pj-muted: #6b7280;
  --pj-line: #e2e6ed;
  --pj-soft: #f3f5f8;
  --pj-sky: #eef1f5;
  --pj-white: #ffffff;
  --pj-radius: 12px;
  --pj-radius-lg: 18px;
  --pj-shadow: 0 24px 60px -24px rgba(15, 46, 107, 0.28);
  --pj-shadow-sm: 0 10px 30px -18px rgba(15, 46, 107, 0.35);
  /* Handlungsfarbe: Markenblau statt Rot. Rot bleibt kleiner Akzent. */
  --pj-cta: #14448f;
  --pj-cta-dark: #0f3272;
}

/* ---------- Base overrides ---------- */
html { scroll-padding-top: 90px; }
body, .page-wrapper { font-family: "Inter", system-ui, sans-serif; color: var(--pj-text); }
h1, h2, h3, h4, h5, h6 { font-family: "Inter", system-ui, sans-serif; color: var(--pj-navy); letter-spacing: -0.5px; }
h2 { text-transform: uppercase; font-weight: 800; line-height: 1.15; }
@media (min-width: 1200px) { h2 { font-size: 42px; } }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pj-red); outline-offset: 3px; }
.pj-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; }

.pj-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--pj-red); margin-bottom: 14px; }
.pj-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.pj-lead { font-size: 1.125rem; line-height: 1.7; color: var(--pj-text); }

/* ---------- Buttons ---------- */
.pj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 16px; padding: 14px 26px; font-weight: 600; font-size: 1rem; line-height: 1.3; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.pj-btn svg { width: 22px; height: 22px; flex: none; }
.pj-btn--primary { background: var(--pj-cta); color: #fff; box-shadow: 0 12px 24px -12px rgba(15, 46, 107, .6); }
.pj-btn--primary:hover { background: var(--pj-cta-dark); transform: translateY(-1px); }
.pj-btn--grey { background: #e6e8eb; color: var(--pj-ink); font-weight: 700; }
.pj-btn--grey:hover { background: #d9dce1; }
.pj-btn--outline { border-color: var(--pj-navy); color: var(--pj-navy); background: transparent; }
.pj-btn--outline:hover { background: var(--pj-navy); color: #fff; }
.pj-btn--white { background: #fff; color: var(--pj-navy); }
.pj-btn--white:hover { background: #e6ecf6; color: var(--pj-navy); }
.pj-btn--block { width: 100%; }
.pj-btn--caps { text-transform: uppercase; letter-spacing: 0; font-size: 14px; border-radius: 999px; padding: 15px 22px; }

/* ---------- Header ---------- */
.pj-header { position: absolute; inset: 0 0 auto 0; z-index: 50; padding-block: 22px; transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease; }
.pj-header.is-sticky { position: fixed; background: #fff; box-shadow: 0 10px 30px -20px rgba(15, 46, 107, .45); padding-block: 10px; animation: pjSlideDown .4s ease; }
@keyframes pjSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.pj-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pj-brand { display: flex; align-items: center; gap: 18px; text-decoration: none; }
.pj-brand__logo { height: 58px; width: auto; display: block; }
.pj-header.is-sticky .pj-brand__logo { height: 46px; }
.pj-brand__claim { display: none; border-left: 1px solid #c9ced6; padding-left: 18px; font-size: 13px; line-height: 1.45; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pj-muted); }
.pj-header__actions { display: flex; align-items: center; gap: 14px; }
.pj-header__phone span, .pj-header__cta span { display: none; }
.pj-header__phone, .pj-header__cta { padding: 12px; border-radius: 14px; }
@media (min-width: 576px) {
  .pj-brand__logo { height: 64px; }
  .pj-header__phone span { display: inline; }
  .pj-header__phone { padding: 13px 22px; }
}
@media (min-width: 992px) {
  .pj-header__cta span { display: inline; }
  .pj-header__cta { padding: 14px 26px; }
}
@media (min-width: 1200px) {
  .pj-brand__logo { height: 72px; }
  .pj-brand__claim { display: block; }
  .pj-header__phone, .pj-header__cta { font-size: 1.125rem; padding: 16px 28px; }
}

/* ---------- Hero ---------- */
.pj-hero { position: relative; overflow: hidden; background: #fff; isolation: isolate; }
.pj-hero__visual { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pj-hero__sky { position: absolute; inset: 0 0 0 35%; background: linear-gradient(180deg, #e9edf2 0%, #f4f6f8 45%, #dfe3e8 100%); }
.pj-hero__wall { position: absolute; top: 0; right: 0; width: 15%; height: 58%; background: linear-gradient(90deg, #eceef1, #f7f8f9 60%, #e4e7ea); border-left: 1px solid #dde1e6; }
/* Der dunkle Streifen in der Wand wirkte wie ein Bildfehler und ist entfernt.
   Die Wand bleibt als ruhiger heller Verlauf stehen. */
.pj-hero__floor { position: absolute; left: -45%; right: -45%; bottom: -14%; height: 125%; background: url("../img/steinteppich-grau.jpg") center bottom / 420px repeat; transform: perspective(1100px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(0deg, #000 55%, transparent 100%); mask-image: linear-gradient(0deg, #000 55%, transparent 100%); }
.pj-hero__fade { position: absolute; inset: 0; background:
  linear-gradient(90deg, #fff 0%, #fff 34%, rgba(255,255,255,.88) 46%, rgba(255,255,255,0) 66%),
  linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.35) 100%); }
.pj-hero__space { padding-top: 120px; padding-bottom: 60px; }
.pj-hero__grid { display: grid; gap: 40px; align-items: center; }
.pj-hero__content { max-width: 800px; }
.pj-hero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 10px 22px 10px 16px; border-radius: 999px; background: #e8f6ec; color: #16713c; font-size: 1.02rem; font-weight: 600; }
.pj-hero__badge svg { width: 22px; height: 22px; color: #1c8c46; flex: none; }
@media (max-width: 575.98px) { .pj-hero__badge { font-size: .95rem; padding: 9px 16px 9px 12px; } }
.pj-pill { display: inline-flex; align-items: center; gap: 12px; background: var(--pj-red-soft); color: var(--pj-red-dark); border-radius: 999px; padding: 8px 20px 8px 14px; font-size: 1rem; font-weight: 500; }
.pj-pill::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--pj-red); flex: none; }
.pj-hero h1 { margin: 30px 0 18px; font-size: clamp(2.05rem, 3.7vw, 3rem); line-height: 1.04; font-weight: 800; letter-spacing: -1px; text-transform: uppercase; color: var(--pj-navy); }
.pj-hero h1 .pj-hero__line2 { display: block; color: var(--pj-ink); }
.pj-hero__text { font-size: 1.15rem; line-height: 1.6; color: var(--pj-text); max-width: 640px; }
.pj-checks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.pj-checks li { display: flex; align-items: center; gap: 16px; font-size: 1.08rem; color: var(--pj-ink); }
.pj-check { width: 38px; height: 38px; border-radius: 50%; background: var(--pj-cta); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pj-check svg { width: 20px; height: 20px; }
@media (min-width: 992px) {
  .pj-hero__space { padding-top: 150px; padding-bottom: 90px; }
  .pj-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 44px; align-items: start; }
}
@media (min-width: 1200px) { .pj-hero__space { padding-top: 165px; padding-bottom: 110px; } }
@media (max-width: 991.98px) {
  .pj-hero__sky { inset: 55% 0 0 0; }
  .pj-hero__wall { display: none; }
  .pj-hero__floor { left: -30%; right: -30%; height: 45%; }
  .pj-hero__fade { background: linear-gradient(180deg, #fff 0%, #fff 55%, rgba(255,255,255,.6) 75%, rgba(255,255,255,.2) 100%); }
}

/* ---------- Lead form (hero) ---------- */
.pj-form-card { position: relative; background: #fff; border: 1px solid var(--pj-line); border-radius: var(--pj-radius-lg); box-shadow: var(--pj-shadow); padding: 26px 20px 22px; width: 100%; max-width: 500px; margin-inline: auto; }
@media (min-width: 576px) { .pj-form-card { padding: 28px 26px 24px; } }
@media (min-width: 992px) { .pj-form-card { margin-right: 0; } }
.pj-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; }
.pj-steps::before { content: ""; position: absolute; top: 19px; left: 12.5%; right: 12.5%; height: 3px; background: #d7dbe2; border-radius: 3px; }
.pj-steps::after { content: ""; position: absolute; top: 19px; left: 12.5%; width: calc(75% * var(--pj-progress, 0)); height: 3px; background: var(--pj-navy); border-radius: 3px; transition: width .4s ease; }
.pj-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; color: var(--pj-text); text-align: center; }
.pj-step__dot { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #d7dbe2; background: #f5f6f8; color: var(--pj-muted); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 600; transition: all .3s ease; }
.pj-step.is-active .pj-step__dot, .pj-step.is-done .pj-step__dot { background: var(--pj-navy); border-color: #c9d3e6; color: #fff; box-shadow: 0 0 0 3px #e3e9f4; }
.pj-step.is-active { color: var(--pj-navy); font-weight: 600; }
.pj-form__title { text-align: center; font-size: 1.45rem; line-height: 1.2; font-weight: 800; text-transform: uppercase; color: var(--pj-ink); margin: 0 0 18px; letter-spacing: -.3px; }
.pj-form__panel[hidden] { display: none; }
.pj-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; margin: 0; padding: 0; }
.pj-option { position: relative; }
.pj-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pj-option label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; border: 1.5px solid var(--pj-line); border-radius: 10px; background: #fff; padding: 14px 8px; font-size: 1rem; color: var(--pj-ink); cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; text-align: center; }
.pj-option label svg { width: 50px; height: 50px; color: var(--pj-ink); }
.pj-option input:hover + label { border-color: #9fb0cf; }
.pj-option input:checked + label { border-color: var(--pj-navy); background: #eef2f9; box-shadow: inset 0 0 0 1px var(--pj-navy); }
.pj-option input:focus-visible + label { outline: 3px solid var(--pj-red); outline-offset: 2px; }
.pj-options--compact .pj-option label { min-height: 0; padding: 12px 8px; font-size: .95rem; }
.pj-field { display: block; margin-top: 12px; }
.pj-field__label { display: block; font-size: 14px; font-weight: 600; color: var(--pj-ink); margin-bottom: 6px; }
.pj-input, .pj-select { width: 100%; border: 1.5px solid var(--pj-line); border-radius: 8px; background: #fff; padding: 12px 14px; font-size: 1rem; color: var(--pj-ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
.pj-input::placeholder { color: #7b8190; }
.pj-input:focus, .pj-select:focus { border-color: var(--pj-navy); box-shadow: 0 0 0 3px #e3e9f4; }
.pj-input.is-invalid, .pj-options.is-invalid label { border-color: var(--pj-red); }
.pj-legend { font-size: 14px; font-weight: 600; color: var(--pj-ink); margin: 14px 0 8px; padding: 0; }
.pj-form__row { display: grid; gap: 0 12px; }
@media (min-width: 576px) { .pj-form__row--2 { grid-template-columns: 1fr 1fr; } }
.pj-form__actions { display: flex; gap: 10px; margin-top: 16px; }
.pj-form__back { flex: none; border-radius: 999px; padding: 15px 18px; }
.pj-form__note { margin: 14px 0 0; text-align: center; font-size: 14px; color: var(--pj-text); }
.pj-form__error { margin: 10px 0 0; font-size: 14px; color: var(--pj-red-dark); text-align: center; min-height: 0; }
.pj-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--pj-text); }
.pj-consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--pj-navy); flex: none; }
.pj-consent a { text-decoration: underline; }
.pj-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.pj-form__success { text-align: center; padding: 18px 4px 6px; }
.pj-form__success-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: #e7f6ec; color: #1c8c46; display: flex; align-items: center; justify-content: center; }
.pj-form__success-icon svg { width: 34px; height: 34px; }

/* ---------- Trust bar ---------- */
.pj-trust { background: var(--pj-soft); border-top: 1px solid var(--pj-line); }
.pj-trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; align-items: center; padding-block: 34px; }
.pj-trust__item { display: flex; align-items: center; gap: 12px; color: var(--pj-ink); }
.pj-trust__google { flex-direction: column; align-items: flex-start; gap: 2px; }
.pj-google { font-size: 34px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.pj-google span:nth-child(1), .pj-google span:nth-child(4) { color: #4285f4; }
.pj-google span:nth-child(2), .pj-google span:nth-child(6) { color: #ea4335; }
.pj-google span:nth-child(3) { color: #fbbc05; }
.pj-google span:nth-child(5) { color: #34a853; }
.pj-stars { display: flex; gap: 3px; color: #f5b400; }
.pj-stars svg { width: 20px; height: 20px; }
.pj-trust__small { font-size: 14px; color: var(--pj-text); }
.pj-trust__icon { width: 50px; height: 56px; flex: none; }
.pj-trust__label { font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--pj-ink); }
.pj-trust__ihk { display: inline-flex; align-items: center; justify-content: center; background: var(--pj-navy); color: #fff; font-weight: 800; font-size: 20px; letter-spacing: .5px; padding: 10px 12px; border-radius: 4px; flex: none; }
.pj-trust__claim { grid-column: 1 / -1; text-align: center; font-size: 15px; letter-spacing: 5px; text-transform: uppercase; color: var(--pj-ink); }
.pj-trust__claim::after { content: ""; display: block; width: 46px; height: 2px; background: var(--pj-red); margin: 12px auto 0; }
@media (min-width: 992px) {
  .pj-trust__grid { grid-template-columns: auto auto auto 1fr; gap: 20px 70px; padding-block: 38px; }
  .pj-trust__claim { grid-column: auto; text-align: left; border-left: 1px solid #c9ced6; padding: 18px 0 18px 70px; }
  .pj-trust__claim::after { margin: 12px 0 0; }
}

/* ---------- Section headings ---------- */
.pj-section-head { max-width: 760px; margin: 0 auto 50px; text-align: center; }
.pj-section-head p { margin-top: 16px; }
@media (min-width: 1200px) { .pj-section-head { margin-bottom: 70px; } }

/* ---------- Einsatzbereiche (service cards) ---------- */
.pj-services { display: grid; gap: 22px; }
@media (min-width: 768px) { .pj-services { grid-template-columns: 1fr 1fr; } }
.pj-service { height: 100%; display: flex; flex-direction: column; gap: 22px; border: 1px solid var(--pj-line); border-radius: var(--pj-radius); background: #fff; padding: 30px; transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.pj-service:hover { border-color: #cfd8e8; background: #f8fafd; box-shadow: var(--pj-shadow-sm); transform: translateY(-3px); }
.pj-service__icon { width: 74px; height: 74px; border-radius: 16px; background: #eef2f9; color: var(--pj-navy); display: flex; align-items: center; justify-content: center; flex: none; transition: background-color .3s ease, color .3s ease; }
.pj-service:hover .pj-service__icon { background: var(--pj-cta); color: #fff; }
.pj-service__icon svg { width: 46px; height: 46px; }
.pj-service h3 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.3px; margin-bottom: 10px; line-height: 1.25; }
.pj-service p { color: var(--pj-text); font-size: 1.02rem; margin-bottom: 14px; }
.pj-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--pj-navy); text-decoration: none; font-size: 1rem; }
.pj-link svg { width: 18px; height: 18px; transition: transform .25s ease; }
.pj-link:hover { color: var(--pj-cta); }
.pj-link:hover svg, .pj-service:hover .pj-link svg { transform: translateX(5px); }
@media (min-width: 1200px) { .pj-service { flex-direction: row; padding: 40px; gap: 32px; } .pj-service__icon { width: 96px; height: 96px; } .pj-service__icon svg { width: 58px; height: 58px; } }

/* ---------- Content blocks ---------- */
.pj-bg-soft { background: var(--pj-soft); }
.pj-content { display: grid; gap: 40px; align-items: center; }
.pj-content + .pj-content { margin-top: 80px; }
@media (min-width: 992px) {
  .pj-content { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; }
  .pj-content--reverse .pj-content__media { order: -1; }
  .pj-content + .pj-content { margin-top: 110px; }
}
.pj-content h2 { margin-bottom: 20px; }
.pj-content p + p { margin-top: 14px; }
.pj-content__media { position: relative; }
.pj-media-frame { border-radius: var(--pj-radius-lg); padding: 26px; background: #fff; box-shadow: var(--pj-shadow-sm); }
.pj-media-frame--navy { background: var(--pj-navy); }
.pj-texture { aspect-ratio: 5 / 4; border-radius: var(--pj-radius); background-size: 720px; background-repeat: repeat; position: relative; overflow: hidden; }
.pj-texture--grau { background-image: url("../img/steinteppich-grau.jpg"); }
.pj-texture__tag { position: absolute; left: 18px; bottom: 18px; background: rgba(255,255,255,.94); color: var(--pj-ink); font-weight: 700; font-size: 15px; border-radius: 999px; padding: 8px 16px; box-shadow: var(--pj-shadow-sm); }
.pj-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pj-layer { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 16px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 12px 16px; color: #fff; }
.pj-layer__swatch { height: 38px; border-radius: 6px; }
.pj-layer strong { display: block; font-size: 1rem; }
.pj-layer span { display: block; font-size: 14px; opacity: .8; line-height: 1.4; }
.pj-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.pj-list li { display: flex; gap: 14px; align-items: flex-start; color: var(--pj-ink); font-weight: 500; }
.pj-list .pj-check { width: 28px; height: 28px; margin-top: 1px; }
.pj-list .pj-check svg { width: 15px; height: 15px; }

/* ---------- Farben ---------- */
.pj-count { display: inline-flex; align-items: baseline; gap: 8px; margin: 18px 0 0; padding: 8px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--pj-line); color: var(--pj-ink); font-size: .98rem; font-weight: 500; }
.pj-count strong { font-size: 1.35rem; font-weight: 800; color: var(--pj-navy); }
.pj-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; }
.pj-filter__btn { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--pj-line); background: #fff; color: var(--pj-ink); border-radius: 999px; padding: 10px 18px; font-size: .96rem; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.pj-filter__btn span { font-size: .8rem; font-weight: 700; color: var(--pj-muted); background: var(--pj-soft); border-radius: 999px; padding: 2px 8px; }
.pj-filter__btn:hover { border-color: #9fb0cf; }
.pj-filter__btn.is-active { background: var(--pj-navy); border-color: var(--pj-navy); color: #fff; }
.pj-filter__btn.is-active span { background: rgba(255,255,255,.18); color: #fff; }
.pj-colors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .pj-colors { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1200px) { .pj-colors { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.pj-color { margin: 0; border-radius: var(--pj-radius); overflow: hidden; border: 1px solid var(--pj-line); background: #fff; transition: box-shadow .3s ease, transform .3s ease; }
.pj-color[hidden] { display: none; }
.pj-color:hover { box-shadow: var(--pj-shadow-sm); transform: translateY(-3px); }
.pj-color__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.pj-color__btn::after { content: "Größer ansehen"; position: absolute; inset: auto 0 0 0; background: rgba(15, 46, 107, .82); color: #fff; font-size: 13px; font-weight: 600; padding: 8px; opacity: 0; transition: opacity .25s ease; }
.pj-color__btn:hover::after, .pj-color__btn:focus-visible::after { opacity: 1; }
.pj-colors__empty { text-align: center; color: var(--pj-muted); margin: 30px 0 0; }
.pj-color img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.pj-color figcaption { padding: 14px 16px 16px; }
.pj-color strong { display: block; color: var(--pj-ink); font-size: 1.05rem; }
.pj-color span { display: block; color: var(--pj-muted); font-size: 14px; line-height: 1.45; }
.pj-colors__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 40px; padding: 24px 28px; border-radius: var(--pj-radius); background: var(--pj-soft); }
.pj-colors__foot p { margin: 0; color: var(--pj-ink); font-weight: 500; max-width: 720px; }

/* ---------- Transformation (Vergleich) ---------- */
.pj-compare { display: grid; gap: 14px; max-width: 1100px; margin: 0 auto; }
.pj-compare__head { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 700; border-radius: 10px; padding: 16px 20px; }
.pj-compare__head--bad { background: #fdeeee; color: #a11216; }
.pj-compare__head--good { background: #e8f6ec; color: #16713c; }
.pj-compare__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; color: #fff; }
.pj-compare__icon svg { width: 15px; height: 15px; }
.pj-compare__icon--bad { background: var(--pj-red); }
.pj-compare__icon--good { background: #1c8c46; }
.pj-compare__pair { border: 1px solid var(--pj-line); border-radius: 12px; overflow: hidden; }
.pj-compare__cell { margin: 0; padding: 16px 20px 16px 48px; position: relative; font-size: 1.02rem; line-height: 1.5; }
.pj-compare__cell::before { content: ""; position: absolute; left: 18px; top: 21px; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pj-mark) center / contain no-repeat; mask: var(--pj-mark) center / contain no-repeat; }
.pj-compare__cell--bad { background: #fdf5f5; color: #8e2226; --pj-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23000' stroke-width='3.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.pj-compare__cell--good { background: #f4faf6; color: #1b5c38; --pj-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E"); }
@media (min-width: 768px) {
  .pj-compare { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .pj-compare__pair { display: contents; }
  .pj-compare__head { margin-bottom: 10px; }
  .pj-compare__cell { border: 1px solid var(--pj-line); border-radius: 10px; margin-bottom: 10px; display: flex; align-items: center; min-height: 72px; }
  .pj-compare__cell::before { top: 50%; transform: translateY(-50%); }
}
@media (max-width: 767.98px) {
  .pj-compare__head { display: none; }
  .pj-compare__cell--bad { border-bottom: 1px solid var(--pj-line); }
}

/* ---------- Referenz / Case ---------- */
.pj-case { display: grid; gap: 22px; align-items: stretch; }
.pj-case__card { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 992px) { .pj-case { grid-template-columns: 1fr 1fr; gap: 28px; } }
.pj-case__media { border-radius: var(--pj-radius-lg); overflow: hidden; background: var(--pj-soft); display: flex; box-shadow: var(--pj-shadow-sm); }
.pj-case__media img { width: 100%; height: 100%; max-height: 640px; object-fit: cover; object-position: center 35%; }
.pj-case__placeholder { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 34px; border: 2px dashed #c3cad6; border-radius: var(--pj-radius-lg); color: var(--pj-muted); }
.pj-case__placeholder svg { width: 64px; height: 64px; color: #9aa5b6; }
.pj-case__placeholder strong { color: var(--pj-ink); font-size: 1.1rem; }
.pj-case__placeholder span { max-width: 340px; font-size: .95rem; line-height: 1.5; }
.pj-case__card { position: relative; background: var(--pj-navy); color: rgba(255,255,255,.88); border-radius: var(--pj-radius-lg); padding: 32px 26px; }
@media (min-width: 768px) { .pj-case__card { padding: 44px 40px; } }
.pj-case__badge { display: inline-block; background: #ffe7a3; color: #6b4b00; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; }
.pj-case__name { margin: 0 0 4px; font-family: inherit; font-size: 1.9rem; font-weight: 800; line-height: 1.1; color: #fff; }
.pj-case__name span { display: block; font-size: 1.25rem; font-weight: 700; color: #ffc861; }
.pj-case__kicker { margin: 18px 0 8px; font-size: .95rem; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.pj-case__quote { margin: 0; }
.pj-case__quote p { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.pj-case__facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pj-case__facts li { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); border-radius: 10px; padding: 10px 16px; color: #fff; font-weight: 600; font-size: .98rem; }
.pj-case__facts svg { width: 20px; height: 20px; color: #ffc861; flex: none; }
.pj-case__cta { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.pj-case__cta p { margin: 0; font-size: .98rem; color: var(--pj-muted); max-width: 420px; }

/* ---------- Vorher / Nachher ---------- */
.pj-ba { display: grid; gap: 26px; }
@media (min-width: 1200px) { .pj-ba { grid-template-columns: 1fr 1fr; gap: 34px 40px; } }
.pj-ba__pair { margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
@media (min-width: 576px) { .pj-ba__pair { gap: 16px; } }
.pj-ba__shot { position: relative; border-radius: var(--pj-radius); overflow: hidden; background: #e7e9ec; box-shadow: var(--pj-shadow-sm); }
.pj-ba__shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.pj-ba__shot figcaption { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(29, 35, 48, .82); color: #fff; font-size: 13px; line-height: 1.35; text-align: center; padding: 9px 10px; }
@media (min-width: 768px) { .pj-ba__shot figcaption { font-size: 14px; padding: 11px 14px; } }
.pj-ba__arrow { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pj-navy); color: #fff; flex: none; }
.pj-ba__arrow svg { width: 18px; height: 18px; }
.pj-ba__note { margin: 26px 0 0; text-align: center; font-size: .95rem; color: var(--pj-muted); }
@media (max-width: 420px) {
  .pj-ba__pair { grid-template-columns: 1fr; }
  .pj-ba__arrow { transform: rotate(90deg); margin: 0 auto; }
}

/* ---------- Ablauf ---------- */
.pj-process { display: grid; gap: 22px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .pj-process { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .pj-process { grid-template-columns: repeat(3, 1fr); } }
.pj-process__item { position: relative; background: #fff; border-radius: var(--pj-radius); padding: 30px 26px; border: 1px solid var(--pj-line); height: 100%; }
.pj-process__num { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 50%; background: var(--pj-navy); color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: 18px; }
.pj-process li:nth-child(3) .pj-process__num { background: var(--pj-cta); }
.pj-process__item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; letter-spacing: -.2px; line-height: 1.3; }
.pj-process__item p { font-size: 1rem; }

/* ---------- FAQ ---------- */
.pj-faq { max-width: 1000px; margin: 0 auto; list-style: none; padding: 0; border: 1px solid var(--pj-line); border-radius: var(--pj-radius); background: #fff; }
.pj-faq .accordion-item { border-bottom: 1px solid var(--pj-line); padding: 24px 22px; }
.pj-faq .accordion-item:last-child { border-bottom: 0; }
@media (min-width: 768px) { .pj-faq .accordion-item { padding: 26px 32px; } }
.pj-faq .accordion-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; cursor: pointer; }
.pj-faq .accordion-header button { flex: 1; text-align: left; font-size: 1.12rem; font-weight: 600; color: var(--pj-ink); background: none; border: 0; padding: 0; cursor: pointer; line-height: 1.45; }
.pj-faq .accordion-icon-1 { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--pj-navy); flex: none; display: flex; align-items: center; justify-content: center; }
.pj-faq .accordion-icon-1 span { display: inline-block; background: #fff; border-radius: 2px; }
.pj-faq .accordion-icon-1 span:first-child { width: 12px; height: 2px; }
.pj-faq .accordion-icon-1 span:last-child { position: absolute; width: 2px; height: 12px; transition: all .4s ease; }
.pj-faq .accordion-item.active .accordion-icon-1 { background: var(--pj-cta); }
.pj-faq .accordion-body p { padding-top: 14px; font-size: 1.02rem; max-width: 840px; }

/* ---------- CTA + Footer ---------- */
.pj-footer { position: relative; overflow: hidden; background: #0b1f4a; color: rgba(255,255,255,.82); }
.pj-footer h2 { color: #fff; }
.pj-cta { position: relative; overflow: hidden; }
.pj-cta__inner { display: grid; gap: 30px; align-items: center; padding-block: 80px 60px; }
@media (min-width: 992px) { .pj-cta__inner { grid-template-columns: 1.3fr auto; padding-block: 100px 80px; } }
.pj-cta__text { font-size: 1.12rem; margin-top: 14px; max-width: 640px; }
.pj-cta__buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.pj-cta__texture { position: absolute; inset: 0; background: url("../img/steinteppich-grau.jpg") center / 280px; opacity: .07; z-index: 0; }
.pj-cta__inner, .pj-footer__main, .pj-footer__bottom { position: relative; z-index: 1; }
.pj-footer__line { height: 1px; background: rgba(255,255,255,.14); max-width: 1300px; margin: 0 auto; }
.pj-footer__main { display: grid; gap: 40px; padding-block: 56px; }
@media (min-width: 768px) { .pj-footer__main { grid-template-columns: 1.4fr 1fr 1fr; } }
.pj-footer__logo { height: 76px; width: auto; margin-bottom: 18px; }
.pj-footer__title { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 16px; }
.pj-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pj-footer a { text-decoration: none; transition: color .2s ease; }
.pj-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pj-footer__contact li { display: flex; gap: 12px; align-items: flex-start; }
.pj-footer__contact svg { width: 20px; height: 20px; margin-top: 4px; flex: none; color: #8fb2ea; }
.pj-footer__bottom { background: rgba(255,255,255,.04); padding-block: 18px; font-size: 14px; }
.pj-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }

/* ---------- Mobile sticky call bar ---------- */
.pj-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); box-shadow: 0 -10px 30px -18px rgba(15,46,107,.5); transform: translateY(110%); transition: transform .35s ease; }
.pj-mobilebar.is-visible { transform: translateY(0); }
.pj-mobilebar .pj-btn { padding: 12px 10px; font-size: .95rem; border-radius: 12px; }
@media (min-width: 992px) { .pj-mobilebar { display: none; } }
@media (max-width: 991.98px) { .pj-footer__bottom { padding-bottom: 90px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Hero fine-tuning: keep the long CTA on one line on large screens */
@media (min-width: 1200px) {
  .pj-btn--caps { white-space: nowrap; }
}

/* Reset the template's default paragraph spacing (p { margin-bottom: 2rem }) inside brand components */
.pj-hero__text, .pj-content p, .pj-section-head p, .pj-process__item p, .pj-cta__text,
.pj-footer p, .pj-trust__claim, .pj-faq p, .pj-form__success p { margin-bottom: 0; }
.pj-footer__title { margin-bottom: 16px !important; }

/* Small phones */
@media (max-width: 575.98px) {
  .pj-hero__location { font-size: 1rem; }
  .pj-pill { font-size: .92rem; }
  .pj-options--compact .pj-option label { font-size: .88rem; padding: 11px 4px; }
  .pj-trust__label { font-size: .92rem; }
  .pj-trust__ihk { font-size: 16px; padding: 8px 9px; }
  .pj-trust__icon { width: 40px; height: 45px; }
}

/* ---------- Farbmuster in Großansicht ---------- */
.pj-lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pj-lightbox[hidden] { display: none; }
.pj-lightbox__backdrop { position: absolute; inset: 0; background: rgba(12, 20, 40, .72); }
.pj-lightbox__inner { position: relative; background: #fff; border-radius: var(--pj-radius-lg); padding: 16px; max-width: min(560px, 92vw); width: 100%; box-shadow: var(--pj-shadow); }
.pj-lightbox__inner img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--pj-radius); display: block; }
.pj-lightbox__title { margin: 14px 0 4px; text-align: center; font-size: 1.15rem; font-weight: 700; color: var(--pj-ink); }
.pj-lightbox__close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--pj-navy); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--pj-shadow-sm); }
.pj-lightbox__close:hover { background: var(--pj-cta); }

/* ---------- Farbband unter der Vertrauensleiste ---------- */
.pj-strip { background: #fff; border-bottom: 1px solid var(--pj-line); padding-block: 26px 30px; }
.pj-strip__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-bottom: 18px; }
.pj-strip__claim { margin: 0; font-size: 1.05rem; color: var(--pj-ink); }
.pj-strip__claim strong { color: var(--pj-navy); font-weight: 800; }
.pj-strip__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.pj-strip__track { display: flex; gap: 14px; width: max-content; animation: pjSlide 60s linear infinite; }
.pj-strip:hover .pj-strip__track { animation-play-state: paused; }
@keyframes pjSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.pj-strip__chip { position: relative; flex: none; width: 128px; border-radius: 10px; overflow: hidden; box-shadow: var(--pj-shadow-sm); }
.pj-strip__chip img { width: 100%; height: 84px; object-fit: cover; display: block; }
.pj-strip__chip em { position: absolute; inset: auto 0 0 0; background: rgba(29, 35, 48, .78); color: #fff; font-style: normal; font-size: 12px; text-align: center; padding: 4px; }

/* ---------- Ansprechpartner ---------- */
.pj-person { display: grid; gap: 34px; align-items: center; }
@media (min-width: 992px) { .pj-person { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 60px; } }
.pj-person__media { border-radius: var(--pj-radius-lg); overflow: hidden; box-shadow: var(--pj-shadow); }
.pj-person__media img { width: 100%; height: auto; display: block; }
.pj-person h2 { margin-bottom: 18px; }
.pj-person p { margin-bottom: 0; }
.pj-person__name { margin-top: 22px; font-size: 1.25rem; font-weight: 800; color: var(--pj-navy); line-height: 1.3; }
.pj-person__name span { display: block; font-size: .98rem; font-weight: 500; color: var(--pj-muted); }
.pj-person__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- Foto im Inhaltsblock ---------- */
.pj-photo { margin: 0; position: relative; border-radius: var(--pj-radius); overflow: hidden; }
.pj-photo img { width: 100%; height: auto; display: block; }
.pj-photo figcaption { position: absolute; inset: auto 0 0 0; background: rgba(29, 35, 48, .8); color: #fff; font-size: 14px; text-align: center; padding: 10px; }

/* ---------- IHK-Logo in der Vertrauensleiste ---------- */
.pj-trust__logo { width: 150px; height: auto; flex: none; background: #fff; padding: 6px 8px; border-radius: 6px; box-shadow: 0 1px 0 rgba(15,46,107,.06); }
@media (max-width: 575.98px) { .pj-trust__logo { width: 110px; } }

/* ---------- Funnel: Zusatzelemente ---------- */
.pj-options--rows { grid-template-columns: 1fr; }
.pj-upload { margin-top: 16px; }
.pj-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pj-upload__label { display: flex; align-items: center; gap: 14px; border: 1.5px dashed #c3cad6; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.pj-upload__label:hover { border-color: var(--pj-cta); background: #f6f8fc; }
.pj-upload input[type="file"]:focus-visible + .pj-upload__list, .pj-upload input[type="file"]:focus-visible ~ .pj-upload__label { outline: 3px solid var(--pj-red); outline-offset: 2px; }
.pj-upload__icon { width: 42px; height: 42px; border-radius: 10px; background: #eef2f9; color: var(--pj-cta); display: flex; align-items: center; justify-content: center; flex: none; }
.pj-upload__icon svg { width: 22px; height: 22px; }
.pj-upload__label strong { display: block; font-size: .98rem; color: var(--pj-ink); }
.pj-upload__label em { display: block; font-style: normal; font-size: .82rem; line-height: 1.4; color: var(--pj-muted); margin-top: 2px; }
.pj-upload__list { margin: 10px 0 0; font-size: .85rem; color: #16713c; }
.pj-form__trust { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--pj-text); }
.pj-form__trust li { display: inline-flex; align-items: center; gap: 6px; }
.pj-form__trust li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #e7f6ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%231c8c46' stroke-width='3.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; flex: none; }
.pj-form__success-call { margin-top: 18px; width: 100%; }

/* ---------- Farben: mehr anzeigen ---------- */
.pj-colors__more { display: flex; justify-content: center; margin-top: 28px; }

/* ---------- Kundenstimme: Eckdaten als Zeilen in der dunklen Karte ---------- */
/* Aufbau wie zuvor: grosses Foto links, dunkle Karte rechts. Neu sind nur die
   Eckdaten, die untereinander als Zeilen stehen statt als Chips nebeneinander. */

.pj-case__specs { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.pj-case__specs li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255,255,255,.08); border-radius: 10px; padding: 11px 16px;
}
.pj-case__spec-label { display: inline-flex; align-items: center; gap: 11px; font-size: .95rem; color: rgba(255,255,255,.78); }
.pj-case__spec-label svg { width: 19px; height: 19px; color: #ffc861; flex: none; }
.pj-case__spec-value { font-weight: 800; color: #fff; font-size: .96rem; text-align: right; }

/* ---------- Rechtsseiten (Impressum, Datenschutz) ---------- */
.pj-legal__head { border-bottom: 1px solid #e3e7ee; background: #fff; }
.pj-legal__head .container-default { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 16px; }
.pj-legal__logo img { height: 52px; width: auto; display: block; }
.pj-legal__back { font-size: .95rem; font-weight: 700; color: var(--pj-navy); text-decoration: none; }
.pj-legal__back:hover { text-decoration: underline; }

.pj-legal { padding-block: 48px 72px; }
.pj-legal .container-default { max-width: 760px; }
.pj-legal h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.8rem); margin: 0 0 28px; color: var(--pj-navy); }
.pj-legal h2 { font-size: 1.25rem; margin: 38px 0 12px; color: var(--pj-navy); }
.pj-legal p, .pj-legal li { font-size: 1rem; line-height: 1.7; color: var(--pj-ink); }
.pj-legal p { margin: 0 0 14px; }
.pj-legal ul { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 6px; }
.pj-legal__lead { font-size: 1.1rem; line-height: 1.6; padding: 18px 22px; background: var(--pj-soft); border-radius: var(--pj-radius); }
.pj-legal__note { margin-top: 40px; padding: 16px 20px; background: #fff6e5; border-left: 4px solid #d79a1e; border-radius: 8px; font-size: .95rem; color: #6b4b00; }

.pj-legal__foot { border-top: 1px solid #e3e7ee; background: #fff; }
.pj-legal__foot .container-default { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-block: 20px; font-size: .92rem; color: var(--pj-muted); }
.pj-legal__foot a { color: var(--pj-navy); }

/* Handwerkskammer-Logo in der Vertrauensleiste */
.pj-trust__logo--hwk { width: 200px; padding: 8px 10px; }
@media (max-width: 575.98px) { .pj-trust__logo--hwk { width: 150px; } }

/* Sprungziel Formular: Platz fuer den Header lassen */
.pj-form-card { scroll-margin-top: 110px; }

/* Aufbau als Arbeitsschritte */
.pj-layers--steps .pj-layer { grid-template-columns: 34px 1fr; gap: 14px; }
.pj-layer .pj-layer__step { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--pj-navy); font-weight: 800; font-size: 1rem; line-height: 1; opacity: 1; }