@charset "UTF-8";
:root {
  /* === Sali Homes brand palette (source of truth) === */
  --sali-sage: #7EAD96; /* primary brand green */
  --sali-sage-hover: #6B9A83; /* darker hover */
  --sali-sage-light: #EAF4EF; /* soft green tint / badges / hover bg */
  --sali-sage-soft: #A8CFC0; /* light sage accent */
  --sali-dark: #111827; /* near-black headings & dark sections */
  --sali-darkest: #0F1A14; /* darkest green-black (footer) */
  --sali-text: #4B5563; /* primary body text */
  --sali-text-muted: #6B7280; /* secondary text */
  --sali-muted: #9CA3AF; /* muted / placeholders */
  --sali-border: #E5E7EB; /* borders & separators */
  --sali-bg-light: #F8F9FA; /* light section background */
  --sali-star: #F59E0B; /* rating stars (amber) */
  /* --- 2026 redesign palette (new-design mockups, source of truth) --- */
  --sali-deep: #517664; /* primary brand green */
  --sali-deep-dark: #3d5a4c; /* primary hover */
  --sali-accent: #d1370d; /* CTA orange-red */
  /* --- editorial / product-listing palette --- */
  --sali-cream: #fbfaf8; /* warm page background */
  --sali-forest: var(--sali-deep); /* deep green (buttons, bands) */
  --sali-forest-hover: var(--sali-deep-dark); /* deep green hover */
  --sali-ink: #22322b; /* near-black hero & footer */
  --sali-warm-text: #6B7570; /* warm muted text */
  --sali-warm-100: #F1ECE5; /* warm surface */
  --sali-warm-200: #E8E2DA; /* warm border */
  --sali-warm-300: #D9D3CA; /* warm placeholder */
  /* --- redesign: extended solids --- */
  --sali-accent-hover: #b52f0b; /* CTA orange-red hover */
  --sali-deep-muted: #658975; /* muted category-link green */
  --sali-success: #3ba55d; /* in-stock indicator green */
  --sali-accent-soft: #F2A88E; /* soft coral accent on dark sections */
  --sali-leaf: #d7e7c5; /* light leaf green (serif accents on dark) */
  --sali-leaf-soft: #DAE6C8; /* pale leaf green (eyebrows on dark) */
  --sali-text-deep: #41544a; /* dark grey-green body text on light cards */
  --sali-text-soft: #5a6b62; /* section-lead grey-green text */
  --sali-text-mist: #7a8a80; /* muted grey-green small text */
  --sali-text-faint: #8a978f; /* faintest grey-green text */
  --sali-cream-shade: #eeeee7; /* darker cream (gradient stop) */
  --sali-linen: #e8e4d4; /* linen swatch background */
  /* --- redesign: hairlines, scrims & shadows (recurring alpha values) --- */
  --sali-line: rgba(81, 118, 100, 0.16); /* header/nav hairlines, card borders */
  --sali-hairline: rgba(81, 118, 100, 0.15); /* sticky-nav bottom hairline */
  --sali-line-soft: rgba(81, 118, 100, 0.14); /* soft card/panel borders */
  --sali-deep-a18: rgba(81, 118, 100, 0.18); /* tab-bar border / card shadow */
  --sali-deep-a20: rgba(81, 118, 100, 0.2); /* dashed spec-row separators */
  --sali-deep-a35: rgba(81, 118, 100, 0.35); /* strong/active borders */
  --sali-glass: rgba(251, 250, 248, 0.82); /* blurred nav background */
  --sali-shadow-soft: rgba(34, 50, 43, 0.05); /* resting card shadow */
  --sali-shadow: rgba(34, 50, 43, 0.10); /* hover card shadow */
  --sali-accent-glow: rgba(209, 55, 13, 0.32); /* CTA shadow */
  --sali-accent-glow-strong: rgba(209, 55, 13, 0.42); /* CTA hover shadow */
  --sali-sage-a12: rgba(126, 173, 150, 0.12); /* sage tint background */
  --sali-sage-a16: rgba(126, 173, 150, 0.16); /* sage badge background */
  --sali-sage-a40: rgba(126, 173, 150, 0.4); /* sage badge border */
  --sali-watermark: rgba(251, 250, 248, 0.06); /* giant watermark text on dark */
  --sali-cream-a10: rgba(251, 250, 248, 0.1); /* translucent panel on dark */
  --sali-cream-a15: rgba(251, 250, 248, 0.15); /* license-footer top hairline */
  --sali-cream-a55: rgba(251, 250, 248, 0.55); /* license-footer text */
  --sali-cream-a65: rgba(251, 250, 248, 0.65); /* faint text on dark */
  --sali-cream-a70: rgba(251, 250, 248, 0.7); /* footer link text */
  --sali-cream-a80: rgba(251, 250, 248, 0.8); /* footer body text / icon fill */
  --sali-cream-a82: rgba(251, 250, 248, 0.82); /* lead text on dark sections */
  --sali-white-a08: rgba(255, 255, 255, 0.08); /* ghost-button hover fill */
  --sali-white-a10: rgba(255, 255, 255, 0.1); /* translucent chip on dark */
  --sali-white-a12: rgba(255, 255, 255, 0.12); /* row separators on dark */
  --sali-white-a16: rgba(255, 255, 255, 0.16); /* borders/fills on dark */
  --sali-white-a22: rgba(255, 255, 255, 0.22); /* chip borders on dark */
  --sali-white-a40: rgba(255, 255, 255, 0.4); /* ghost-button border */
  --sali-white-a50: rgba(255, 255, 255, 0.5); /* underline/borders on dark */
  --sali-white-a65: rgba(255, 255, 255, 0.65); /* muted text on dark */
  --sali-white-a85: rgba(255, 255, 255, 0.85); /* body text on dark */
  /* --- redesign font stacks --- */
  --font-display: "Montserrat", sans-serif; /* headings, buttons, nav */
  --font-body: "Inter", sans-serif; /* body & UI text */
  --font-accent: "Source Serif 4", serif; /* italic serif accents in headlines */
  /* === existing tokens mapped onto the Sali palette === */
  --background: #FFFFFF;
  --background2: var(--sali-bg-light);
  --box-shadow: #0000001A;
  --underline: var(--sali-muted);
  --underline-opacity: #9CA3AF59;
  --underline-2: var(--sali-text);
  --underline-3: var(--sali-border);
  --grey-bg: var(--sali-border);
  --grey-bg-6: #D1D5DB;
  --grey-bg-2: #ECEFF1;
  --grey-bg-3: #F1F3F5;
  --grey-bg-4: #F4F6F7;
  --grey-bg-5: var(--sali-bg-light);
  --grey-bg-7: #F1F3F5;
  --dark-grey: var(--sali-text);
  --custom-green: var(--sali-sage);
  --custom-red: #E21313;
  --DarkGreen: var(--sali-dark);
  --light-blue: #4AC4E6;
  --white: #FFFFFF;
  /* === legacy page palette (pre-redesign pages: business, karriere, faq, contact) === */
  --legacy-ink: #021b0d; /* legacy dark green headings/text */
  --legacy-grey-text: #535353; /* legacy body grey */
  --legacy-grey-mid: #a2a2a8; /* legacy mid grey (borders/placeholders) */
  --legacy-border: #cecece; /* legacy light border grey */
  --legacy-grey-bg: #EFEFEF; /* legacy disabled/grey background */
  --legacy-divider: #DCDCDC; /* legacy divider line */
  --legacy-text-dark: #333; /* legacy near-black text */
  --legacy-text-mid: #666; /* legacy mid text grey */
  --legacy-green: #03a84e; /* legacy CTA green */
  --legacy-green-hover: #029443; /* legacy CTA green hover */
  --legacy-green-active: #038f42; /* legacy CTA green pressed (= darken(#03a84e, 5%)) */
  --legacy-green-light: #89cd79; /* legacy soft green band */
  --legacy-white: #fdfdfd; /* legacy off-white surface */
  --legacy-cream: #fbfaf6; /* legacy warm off-white text */
  --legacy-box-shadow: #00000029; /* legacy focus shadow */
}

/* Tenant 1 (Sali Homes) theme */
.tenant1 {
  --brandPrimary: var(--sali-deep);
  --brandPrimaryHover: var(--sali-deep-dark);
  --brandSecondary: var(--sali-dark);
  --brandSecondaryHover: var(--sali-sage-light);
  --brandTertiary: var(--sali-sage);
  --brandTertiaryHover: var(--sali-sage-hover);
  --brandAccent: var(--sali-accent);
  --newAdvertiseBg: var(--sali-dark);
  --newAdvertiseColor: white;
  --blackPrimary: var(--sali-text);
  --DarkGreen: var(--sali-dark);
  --logoImg: url("/images/saliHomes/logo.png");
  --padlockImg: url("/images/saliHomes/padlock.svg");
  --productReturnImg: url("/images/saliHomes/product-return.svg");
  --wheelbarrowImg: url("/images/saliHomes/made-in-germany.svg");
  --locationImg: url("/images/saliHomes/location.svg");
  --businessAccountBbImg: url("/images/saliHomes/business-account-bg.png");
  --rightArrowImg: url("/images/saliHomes/right-arrow.svg");
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Inter — body & UI font (2026 redesign). Self-hosted variable fonts. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Italic-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
/* Source Serif 4 — italic serif accents inside headlines (2026 redesign). */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4-Italic-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* Cormorant Garamond — serif display font for headings (Figma). Self-hosted
   variable fonts (weight axis 300–700), normal + italic. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/CormorantGaramond-Italic-Variable.ttf") format("truetype");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
/* Plus Jakarta Sans — checkout UI font (Figma node 5-1840). Self-hosted
   variable fonts (weight axis 200–800), normal + italic. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-Italic-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
/* DM Sans — sans UI font for product tiles etc. (Figma). Self-hosted variable
   fonts (weight axis 100–1000), normal + italic. */
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/fonts/DMSans-Italic-Variable.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Thin.ttf") format("truetype");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("/fonts/Barlow-ExtraBold.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
body {
  background-color: var(--background);
  font-size: 16px !important;
  font-family: var(--font-body) !important;
  animation: fadeInAnimation ease 1s;
  scrollbar-gutter: stable;
  color: var(--dark-grey);
}
body h1 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--DarkGreen);
}
body h2 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  color: var(--DarkGreen);
}
body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--DarkGreen);
}
body h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--DarkGreen);
}
body .small-text {
  font-size: 12px;
}
body .link-like-text {
  cursor: pointer;
}
body .link-like-text:hover {
  text-decoration: underline;
}
body .form-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  padding: 20px;
  border-bottom: 1px solid var(--legacy-divider);
}
body .form-check:last-child {
  border-bottom: none;
}
body .form-check .type-text {
  margin-left: 20px;
  margin-bottom: 0;
}
body .form-check .type-text .form-check-input, body .form-check .type-text .title, body .form-check .type-text .description {
  cursor: pointer;
}
body .form-check .form-check-input {
  width: 20px;
  height: 20px;
  accent-color: var(--brandPrimary);
}
body a {
  cursor: pointer;
  color: var(--blackPrimary);
}
body a:hover {
  color: var(--blackPrimary);
  text-decoration: underline;
}
body input[type=radio] {
  accent-color: var(--brandPrimary);
}
body .primary-color {
  color: var(--brandPrimary);
}
body .primary-color-hover {
  color: var(--brandPrimaryHover);
}
body .primary-bg-color {
  background-color: var(--brandPrimary);
}
body .primary-bg-color-hover {
  background-color: var(--brandPrimaryHover);
}
body .primary-gradient {
  background-image: linear-gradient(90deg, rgba(19, 42, 22, 0.88) 0%, rgba(23, 43, 25, 0.66) 44.3%, rgba(13, 46, 12, 0.14) 100%);
}
body .secondary-color {
  color: var(--brandSecondary);
}
body .secondary-color-hover {
  color: var(--brandSecondaryHover);
}
body .secondary-bg-color {
  background-color: var(--brandSecondary);
}
body .secondary-bg-color-hover {
  background-color: var(--brandSecondaryHover);
}
body .error-text {
  color: var(--red);
}
@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1450px !important;
  }
}
/* Custom select chevron (2026 design) — applies to native selects shop-wide */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23517664' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}

:root {
  /* === Sali Homes brand palette (source of truth) === */
  --sali-sage: #7EAD96; /* primary brand green */
  --sali-sage-hover: #6B9A83; /* darker hover */
  --sali-sage-light: #EAF4EF; /* soft green tint / badges / hover bg */
  --sali-sage-soft: #A8CFC0; /* light sage accent */
  --sali-dark: #111827; /* near-black headings & dark sections */
  --sali-darkest: #0F1A14; /* darkest green-black (footer) */
  --sali-text: #4B5563; /* primary body text */
  --sali-text-muted: #6B7280; /* secondary text */
  --sali-muted: #9CA3AF; /* muted / placeholders */
  --sali-border: #E5E7EB; /* borders & separators */
  --sali-bg-light: #F8F9FA; /* light section background */
  --sali-star: #F59E0B; /* rating stars (amber) */
  /* --- 2026 redesign palette (new-design mockups, source of truth) --- */
  --sali-deep: #517664; /* primary brand green */
  --sali-deep-dark: #3d5a4c; /* primary hover */
  --sali-accent: #d1370d; /* CTA orange-red */
  /* --- editorial / product-listing palette --- */
  --sali-cream: #fbfaf8; /* warm page background */
  --sali-forest: var(--sali-deep); /* deep green (buttons, bands) */
  --sali-forest-hover: var(--sali-deep-dark); /* deep green hover */
  --sali-ink: #22322b; /* near-black hero & footer */
  --sali-warm-text: #6B7570; /* warm muted text */
  --sali-warm-100: #F1ECE5; /* warm surface */
  --sali-warm-200: #E8E2DA; /* warm border */
  --sali-warm-300: #D9D3CA; /* warm placeholder */
  /* --- redesign: extended solids --- */
  --sali-accent-hover: #b52f0b; /* CTA orange-red hover */
  --sali-deep-muted: #658975; /* muted category-link green */
  --sali-success: #3ba55d; /* in-stock indicator green */
  --sali-accent-soft: #F2A88E; /* soft coral accent on dark sections */
  --sali-leaf: #d7e7c5; /* light leaf green (serif accents on dark) */
  --sali-leaf-soft: #DAE6C8; /* pale leaf green (eyebrows on dark) */
  --sali-text-deep: #41544a; /* dark grey-green body text on light cards */
  --sali-text-soft: #5a6b62; /* section-lead grey-green text */
  --sali-text-mist: #7a8a80; /* muted grey-green small text */
  --sali-text-faint: #8a978f; /* faintest grey-green text */
  --sali-cream-shade: #eeeee7; /* darker cream (gradient stop) */
  --sali-linen: #e8e4d4; /* linen swatch background */
  /* --- redesign: hairlines, scrims & shadows (recurring alpha values) --- */
  --sali-line: rgba(81, 118, 100, 0.16); /* header/nav hairlines, card borders */
  --sali-hairline: rgba(81, 118, 100, 0.15); /* sticky-nav bottom hairline */
  --sali-line-soft: rgba(81, 118, 100, 0.14); /* soft card/panel borders */
  --sali-deep-a18: rgba(81, 118, 100, 0.18); /* tab-bar border / card shadow */
  --sali-deep-a20: rgba(81, 118, 100, 0.2); /* dashed spec-row separators */
  --sali-deep-a35: rgba(81, 118, 100, 0.35); /* strong/active borders */
  --sali-glass: rgba(251, 250, 248, 0.82); /* blurred nav background */
  --sali-shadow-soft: rgba(34, 50, 43, 0.05); /* resting card shadow */
  --sali-shadow: rgba(34, 50, 43, 0.10); /* hover card shadow */
  --sali-accent-glow: rgba(209, 55, 13, 0.32); /* CTA shadow */
  --sali-accent-glow-strong: rgba(209, 55, 13, 0.42); /* CTA hover shadow */
  --sali-sage-a12: rgba(126, 173, 150, 0.12); /* sage tint background */
  --sali-sage-a16: rgba(126, 173, 150, 0.16); /* sage badge background */
  --sali-sage-a40: rgba(126, 173, 150, 0.4); /* sage badge border */
  --sali-watermark: rgba(251, 250, 248, 0.06); /* giant watermark text on dark */
  --sali-cream-a10: rgba(251, 250, 248, 0.1); /* translucent panel on dark */
  --sali-cream-a15: rgba(251, 250, 248, 0.15); /* license-footer top hairline */
  --sali-cream-a55: rgba(251, 250, 248, 0.55); /* license-footer text */
  --sali-cream-a65: rgba(251, 250, 248, 0.65); /* faint text on dark */
  --sali-cream-a70: rgba(251, 250, 248, 0.7); /* footer link text */
  --sali-cream-a80: rgba(251, 250, 248, 0.8); /* footer body text / icon fill */
  --sali-cream-a82: rgba(251, 250, 248, 0.82); /* lead text on dark sections */
  --sali-white-a08: rgba(255, 255, 255, 0.08); /* ghost-button hover fill */
  --sali-white-a10: rgba(255, 255, 255, 0.1); /* translucent chip on dark */
  --sali-white-a12: rgba(255, 255, 255, 0.12); /* row separators on dark */
  --sali-white-a16: rgba(255, 255, 255, 0.16); /* borders/fills on dark */
  --sali-white-a22: rgba(255, 255, 255, 0.22); /* chip borders on dark */
  --sali-white-a40: rgba(255, 255, 255, 0.4); /* ghost-button border */
  --sali-white-a50: rgba(255, 255, 255, 0.5); /* underline/borders on dark */
  --sali-white-a65: rgba(255, 255, 255, 0.65); /* muted text on dark */
  --sali-white-a85: rgba(255, 255, 255, 0.85); /* body text on dark */
  /* --- redesign font stacks --- */
  --font-display: "Montserrat", sans-serif; /* headings, buttons, nav */
  --font-body: "Inter", sans-serif; /* body & UI text */
  --font-accent: "Source Serif 4", serif; /* italic serif accents in headlines */
  /* === existing tokens mapped onto the Sali palette === */
  --background: #FFFFFF;
  --background2: var(--sali-bg-light);
  --box-shadow: #0000001A;
  --underline: var(--sali-muted);
  --underline-opacity: #9CA3AF59;
  --underline-2: var(--sali-text);
  --underline-3: var(--sali-border);
  --grey-bg: var(--sali-border);
  --grey-bg-6: #D1D5DB;
  --grey-bg-2: #ECEFF1;
  --grey-bg-3: #F1F3F5;
  --grey-bg-4: #F4F6F7;
  --grey-bg-5: var(--sali-bg-light);
  --grey-bg-7: #F1F3F5;
  --dark-grey: var(--sali-text);
  --custom-green: var(--sali-sage);
  --custom-red: #E21313;
  --DarkGreen: var(--sali-dark);
  --light-blue: #4AC4E6;
  --white: #FFFFFF;
  /* === legacy page palette (pre-redesign pages: business, karriere, faq, contact) === */
  --legacy-ink: #021b0d; /* legacy dark green headings/text */
  --legacy-grey-text: #535353; /* legacy body grey */
  --legacy-grey-mid: #a2a2a8; /* legacy mid grey (borders/placeholders) */
  --legacy-border: #cecece; /* legacy light border grey */
  --legacy-grey-bg: #EFEFEF; /* legacy disabled/grey background */
  --legacy-divider: #DCDCDC; /* legacy divider line */
  --legacy-text-dark: #333; /* legacy near-black text */
  --legacy-text-mid: #666; /* legacy mid text grey */
  --legacy-green: #03a84e; /* legacy CTA green */
  --legacy-green-hover: #029443; /* legacy CTA green hover */
  --legacy-green-active: #038f42; /* legacy CTA green pressed (= darken(#03a84e, 5%)) */
  --legacy-green-light: #89cd79; /* legacy soft green band */
  --legacy-white: #fdfdfd; /* legacy off-white surface */
  --legacy-cream: #fbfaf6; /* legacy warm off-white text */
  --legacy-box-shadow: #00000029; /* legacy focus shadow */
}

/* Announcement bar (site-wide) — 2026 redesign: deep-green gradient strip */
.sali-topbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--sali-deep-dark), var(--sali-deep) 55%, var(--sali-deep-dark));
  color: var(--sali-cream);
  font-size: 13.5px;
  padding: 9px 16px;
  text-align: center;
  position: relative;
  z-index: 110;
}
.sali-topbar .dot {
  color: var(--sali-sage);
  margin: 0 6px;
}
.sali-topbar a {
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--sali-white-a50);
  margin-left: 6px;
}
.sali-topbar a:hover {
  color: var(--white);
  opacity: 0.85;
  text-decoration: none;
}
@media (max-width: 575px) {
  .sali-topbar {
    font-size: 12px;
  }
  .sali-topbar span {
    display: none;
  }
}

/* ================= Desktop Header ================= */
/* Transparent by default; .scrolled (toggled by JS in header.html) adds the cream blur */
.header-desktop {
  position: sticky;
  top: 0;
  background: transparent;
  transition: all 0.35s;
  padding: 10px 0 0;
  z-index: 100;
  /* Category bar under the main nav row */
  /* hide the outline configurator button on narrower desktops to avoid crowding */
}
.header-desktop.scrolled {
  background: var(--sali-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--sali-hairline);
  padding: 10px 0 8px;
}
.header-desktop.scrolled .logo .logo-img {
  height: 44px;
}
.header-desktop .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 12px;
}
.header-desktop .logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}
.header-desktop .logo .logo-img {
  height: 56px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: height 0.35s;
}
.header-desktop .logo .logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--sali-deep);
}
.header-desktop .header-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}
.header-desktop .header-nav .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sali-ink);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding: 4px 0;
}
.header-desktop .header-nav .nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--sali-accent);
  transition: width 0.3s;
}
.header-desktop .header-nav .nav-item:hover {
  color: var(--sali-ink);
  text-decoration: none;
}
.header-desktop .header-nav .nav-item:hover::after {
  width: 100%;
}
.header-desktop .header-nav .caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.3s ease;
}
.header-desktop .header-nav .products-trigger.open .caret {
  transform: rotate(180deg);
}
.header-desktop .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  /* Cart + login widgets → identical round outlined buttons (mockup .cart-btn).
     The widgets' own SVGs are hidden; mockup-style stroke icons are drawn via
     CSS masks so shape, size and color match the design exactly. */
}
.header-desktop .header-actions .hdr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a,
.header-desktop .header-actions [name=wgt-login-button] .buttons {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid var(--sali-deep);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  transition: background 0.25s;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a::before,
.header-desktop .header-actions [name=wgt-login-button] .buttons::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--sali-deep);
  transition: background-color 0.25s;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a:hover,
.header-desktop .header-actions [name=wgt-login-button] .buttons:hover {
  background: var(--sali-deep);
  text-decoration: none;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a:hover::before,
.header-desktop .header-actions [name=wgt-login-button] .buttons:hover::before {
  background-color: var(--white);
}
.header-desktop .header-actions [name=wgt-open-cart-button] a svg,
.header-desktop .header-actions [name=wgt-login-button] .buttons svg {
  display: none;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a span,
.header-desktop .header-actions [name=wgt-login-button] .buttons span {
  display: none;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.6'/><circle cx='18' cy='20' r='1.6'/><path d='M2.5 3.5h2.6l2.3 12h11.2l2.1-8.5H6.1'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='1.6'/><circle cx='18' cy='20' r='1.6'/><path d='M2.5 3.5h2.6l2.3 12h11.2l2.1-8.5H6.1'/></svg>") center/contain no-repeat;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a .cart-container {
  position: static;
  margin-bottom: 0;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a .cart-container .cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--sali-accent);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-display);
  min-width: 19px;
  height: 19px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.header-desktop .header-actions [name=wgt-open-cart-button] a .cart-label {
  display: none;
}
.header-desktop .header-actions [name=wgt-login-button] .buttons::before {
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.6'/><path d='M4.5 20.5c0-3.8 3.4-6.2 7.5-6.2s7.5 2.4 7.5 6.2'/></svg>") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.6'/><path d='M4.5 20.5c0-3.8 3.4-6.2 7.5-6.2s7.5 2.4 7.5 6.2'/></svg>") center/contain no-repeat;
}
.header-desktop .header-actions [name=wgt-login-button] .buttons .image-container {
  display: none;
}
.header-desktop .hdr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.header-desktop .hdr-btn:hover {
  transform: translateY(-2px);
}
.header-desktop .hdr-btn-outline {
  color: var(--sali-deep);
  border-color: var(--sali-deep);
}
.header-desktop .hdr-btn-outline:hover {
  background: var(--sali-deep);
  color: var(--white);
  text-decoration: none;
}
.header-desktop .hdr-btn-primary {
  background: var(--sali-accent);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(209, 55, 13, 0.25);
}
.header-desktop .hdr-btn-primary:hover {
  background: var(--sali-accent-hover);
  color: var(--white);
  text-decoration: none;
}
.header-desktop .nav-cats {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 9px 3px 11px;
  border-top: 1px solid var(--sali-line);
}
.header-desktop .nav-cats a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--sali-deep-muted);
  position: relative;
  padding: 3px 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.22s;
}
.header-desktop .nav-cats a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--sali-accent);
  transition: width 0.3s;
}
.header-desktop .nav-cats a:hover {
  color: var(--sali-deep);
  text-decoration: none;
}
.header-desktop .nav-cats a:hover::after {
  width: 100%;
}
@media (max-width: 1250px) {
  .header-desktop .header-nav {
    gap: 22px;
  }
  .header-desktop .hdr-btn-outline {
    display: none;
  }
}
@media (max-width: 991px) {
  .header-desktop {
    display: none;
  }
}

/* ================= Mobile Header ================= */
.header-mobile {
  display: none;
}
@media (max-width: 991px) {
  .header-mobile {
    display: block;
  }
}
.header-mobile .mobile-navbar {
  position: relative;
  width: 100%;
  padding: 12px 14px;
  box-shadow: 0 1px 0 var(--sali-hairline);
  background: var(--sali-cream);
  z-index: 100;
  color: var(--sali-text);
  box-sizing: border-box;
}
.header-mobile .mobile-navbar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
.header-mobile .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 8px;
  min-width: 0;
}
.header-mobile .content .logo-wrapper {
  flex-shrink: 0;
}
.header-mobile .content .logo-wrapper img {
  height: 44px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
.header-mobile .content .action-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.header-mobile .content .action-buttons .action-btn {
  padding: 4px;
}
.header-mobile .mobile-navbar-collapse {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--sali-deep);
  box-shadow: 0 10px 20px var(--box-shadow);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  padding: 0 20px;
  z-index: 100;
}
.header-mobile .mobile-navbar-collapse.show {
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.5s ease-in, opacity 0.5s ease-in;
  padding: 20px;
}
.header-mobile .mobile-navbar-collapse .mobile-menu-item {
  display: block;
  text-decoration: none;
  color: var(--sali-cream);
  border-bottom: 1px solid var(--sali-white-a12);
}
.header-mobile .mobile-navbar-collapse .mobile-menu-item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--sali-cream);
  margin: 0;
  padding: 14px 0;
}
.header-mobile .mobile-navbar-collapse .mobile-menu-item:hover {
  text-decoration: none;
}
.header-mobile .mobile-navbar-collapse .mobile-menu-item:hover h3 {
  color: var(--sali-sage);
}
.header-mobile .mobile-navbar-collapse .mobile-menu-item.mobile-cta {
  border-bottom: none;
}
.header-mobile .mobile-navbar-collapse .mobile-menu-item.mobile-cta h3 {
  display: inline-block;
  background: var(--sali-accent);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 100px;
  font-size: 16px;
  margin-top: 14px;
}

/* ================= CME-managed header texts (page 'main-menu') ================= */
/* Announcement bar: the block is rich text - one paragraph per entry, rendered inline */
.sali-topbar p {
  display: inline;
  margin: 0;
}
.sali-topbar p + p::before {
  content: "✦";
  color: var(--sali-sage);
  margin: 0 10px;
}
.sali-topbar p + p a {
  margin-left: 0;
}

/* Navigation links come as plain <a> tags (possibly inside a <p>) */
.header-desktop .header-nav p {
  display: contents;
}
.header-desktop .header-nav > a, .header-desktop .header-nav p > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--sali-ink);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding: 4px 0;
}
.header-desktop .header-nav > a::after, .header-desktop .header-nav p > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--sali-accent);
  transition: width 0.3s;
}
.header-desktop .header-nav > a:hover, .header-desktop .header-nav p > a:hover {
  color: var(--sali-ink);
  text-decoration: none;
}
.header-desktop .header-nav > a:hover::after, .header-desktop .header-nav p > a:hover::after {
  width: 100%;
}

/* Language switcher (wgt-locale-select): first item of the category row, under the logo */
.header-desktop .nav-cats .hdr-locale {
  display: inline-flex;
  align-items: center;
  padding-right: 22px;
  margin-right: 4px;
  border-right: 1px solid var(--sali-line);
}
.header-desktop .nav-cats .hdr-locale .selected-language-wrapper {
  background: transparent;
  padding: 0;
  gap: 6px;
}
.header-desktop .nav-cats .hdr-locale .globus-icon {
  width: 20px;
  height: 20px;
}
.header-desktop .nav-cats .hdr-locale .label-text {
  display: none;
}
.header-desktop .nav-cats .hdr-locale .current-language, .header-desktop .nav-cats .hdr-locale .current-language .chevron {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--sali-deep-muted);
}
.header-desktop .nav-cats .hdr-locale .current-language:hover, .header-desktop .nav-cats .hdr-locale .current-language:hover .chevron {
  color: var(--sali-deep);
}
.header-desktop .nav-cats .hdr-locale .locale-container {
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
}

.header-mobile .mobile-navbar-collapse .mobile-menu-links p {
  display: contents;
}
.header-mobile .mobile-navbar-collapse .mobile-menu-links a {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: var(--sali-cream);
  text-decoration: none;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--sali-white-a12);
}
.header-mobile .mobile-navbar-collapse .mobile-menu-links a:hover {
  color: var(--sali-sage);
  text-decoration: none;
}
.header-mobile .mobile-navbar-collapse .mobile-locale {
  padding: 14px 0 4px;
}
.header-mobile .mobile-navbar-collapse .mobile-locale .selected-language-wrapper {
  background: transparent;
  padding: 0;
}
.header-mobile .mobile-navbar-collapse .mobile-locale .label-text, .header-mobile .mobile-navbar-collapse .mobile-locale .current-language, .header-mobile .mobile-navbar-collapse .mobile-locale .current-language .chevron {
  color: var(--sali-cream);
}
.header-mobile .mobile-navbar-collapse .mobile-locale .locale-container {
  padding: 6px 12px;
  cursor: pointer;
}

:root {
  /* === Sali Homes brand palette (source of truth) === */
  --sali-sage: #7EAD96; /* primary brand green */
  --sali-sage-hover: #6B9A83; /* darker hover */
  --sali-sage-light: #EAF4EF; /* soft green tint / badges / hover bg */
  --sali-sage-soft: #A8CFC0; /* light sage accent */
  --sali-dark: #111827; /* near-black headings & dark sections */
  --sali-darkest: #0F1A14; /* darkest green-black (footer) */
  --sali-text: #4B5563; /* primary body text */
  --sali-text-muted: #6B7280; /* secondary text */
  --sali-muted: #9CA3AF; /* muted / placeholders */
  --sali-border: #E5E7EB; /* borders & separators */
  --sali-bg-light: #F8F9FA; /* light section background */
  --sali-star: #F59E0B; /* rating stars (amber) */
  /* --- 2026 redesign palette (new-design mockups, source of truth) --- */
  --sali-deep: #517664; /* primary brand green */
  --sali-deep-dark: #3d5a4c; /* primary hover */
  --sali-accent: #d1370d; /* CTA orange-red */
  /* --- editorial / product-listing palette --- */
  --sali-cream: #fbfaf8; /* warm page background */
  --sali-forest: var(--sali-deep); /* deep green (buttons, bands) */
  --sali-forest-hover: var(--sali-deep-dark); /* deep green hover */
  --sali-ink: #22322b; /* near-black hero & footer */
  --sali-warm-text: #6B7570; /* warm muted text */
  --sali-warm-100: #F1ECE5; /* warm surface */
  --sali-warm-200: #E8E2DA; /* warm border */
  --sali-warm-300: #D9D3CA; /* warm placeholder */
  /* --- redesign: extended solids --- */
  --sali-accent-hover: #b52f0b; /* CTA orange-red hover */
  --sali-deep-muted: #658975; /* muted category-link green */
  --sali-success: #3ba55d; /* in-stock indicator green */
  --sali-accent-soft: #F2A88E; /* soft coral accent on dark sections */
  --sali-leaf: #d7e7c5; /* light leaf green (serif accents on dark) */
  --sali-leaf-soft: #DAE6C8; /* pale leaf green (eyebrows on dark) */
  --sali-text-deep: #41544a; /* dark grey-green body text on light cards */
  --sali-text-soft: #5a6b62; /* section-lead grey-green text */
  --sali-text-mist: #7a8a80; /* muted grey-green small text */
  --sali-text-faint: #8a978f; /* faintest grey-green text */
  --sali-cream-shade: #eeeee7; /* darker cream (gradient stop) */
  --sali-linen: #e8e4d4; /* linen swatch background */
  /* --- redesign: hairlines, scrims & shadows (recurring alpha values) --- */
  --sali-line: rgba(81, 118, 100, 0.16); /* header/nav hairlines, card borders */
  --sali-hairline: rgba(81, 118, 100, 0.15); /* sticky-nav bottom hairline */
  --sali-line-soft: rgba(81, 118, 100, 0.14); /* soft card/panel borders */
  --sali-deep-a18: rgba(81, 118, 100, 0.18); /* tab-bar border / card shadow */
  --sali-deep-a20: rgba(81, 118, 100, 0.2); /* dashed spec-row separators */
  --sali-deep-a35: rgba(81, 118, 100, 0.35); /* strong/active borders */
  --sali-glass: rgba(251, 250, 248, 0.82); /* blurred nav background */
  --sali-shadow-soft: rgba(34, 50, 43, 0.05); /* resting card shadow */
  --sali-shadow: rgba(34, 50, 43, 0.10); /* hover card shadow */
  --sali-accent-glow: rgba(209, 55, 13, 0.32); /* CTA shadow */
  --sali-accent-glow-strong: rgba(209, 55, 13, 0.42); /* CTA hover shadow */
  --sali-sage-a12: rgba(126, 173, 150, 0.12); /* sage tint background */
  --sali-sage-a16: rgba(126, 173, 150, 0.16); /* sage badge background */
  --sali-sage-a40: rgba(126, 173, 150, 0.4); /* sage badge border */
  --sali-watermark: rgba(251, 250, 248, 0.06); /* giant watermark text on dark */
  --sali-cream-a10: rgba(251, 250, 248, 0.1); /* translucent panel on dark */
  --sali-cream-a15: rgba(251, 250, 248, 0.15); /* license-footer top hairline */
  --sali-cream-a55: rgba(251, 250, 248, 0.55); /* license-footer text */
  --sali-cream-a65: rgba(251, 250, 248, 0.65); /* faint text on dark */
  --sali-cream-a70: rgba(251, 250, 248, 0.7); /* footer link text */
  --sali-cream-a80: rgba(251, 250, 248, 0.8); /* footer body text / icon fill */
  --sali-cream-a82: rgba(251, 250, 248, 0.82); /* lead text on dark sections */
  --sali-white-a08: rgba(255, 255, 255, 0.08); /* ghost-button hover fill */
  --sali-white-a10: rgba(255, 255, 255, 0.1); /* translucent chip on dark */
  --sali-white-a12: rgba(255, 255, 255, 0.12); /* row separators on dark */
  --sali-white-a16: rgba(255, 255, 255, 0.16); /* borders/fills on dark */
  --sali-white-a22: rgba(255, 255, 255, 0.22); /* chip borders on dark */
  --sali-white-a40: rgba(255, 255, 255, 0.4); /* ghost-button border */
  --sali-white-a50: rgba(255, 255, 255, 0.5); /* underline/borders on dark */
  --sali-white-a65: rgba(255, 255, 255, 0.65); /* muted text on dark */
  --sali-white-a85: rgba(255, 255, 255, 0.85); /* body text on dark */
  /* --- redesign font stacks --- */
  --font-display: "Montserrat", sans-serif; /* headings, buttons, nav */
  --font-body: "Inter", sans-serif; /* body & UI text */
  --font-accent: "Source Serif 4", serif; /* italic serif accents in headlines */
  /* === existing tokens mapped onto the Sali palette === */
  --background: #FFFFFF;
  --background2: var(--sali-bg-light);
  --box-shadow: #0000001A;
  --underline: var(--sali-muted);
  --underline-opacity: #9CA3AF59;
  --underline-2: var(--sali-text);
  --underline-3: var(--sali-border);
  --grey-bg: var(--sali-border);
  --grey-bg-6: #D1D5DB;
  --grey-bg-2: #ECEFF1;
  --grey-bg-3: #F1F3F5;
  --grey-bg-4: #F4F6F7;
  --grey-bg-5: var(--sali-bg-light);
  --grey-bg-7: #F1F3F5;
  --dark-grey: var(--sali-text);
  --custom-green: var(--sali-sage);
  --custom-red: #E21313;
  --DarkGreen: var(--sali-dark);
  --light-blue: #4AC4E6;
  --white: #FFFFFF;
  /* === legacy page palette (pre-redesign pages: business, karriere, faq, contact) === */
  --legacy-ink: #021b0d; /* legacy dark green headings/text */
  --legacy-grey-text: #535353; /* legacy body grey */
  --legacy-grey-mid: #a2a2a8; /* legacy mid grey (borders/placeholders) */
  --legacy-border: #cecece; /* legacy light border grey */
  --legacy-grey-bg: #EFEFEF; /* legacy disabled/grey background */
  --legacy-divider: #DCDCDC; /* legacy divider line */
  --legacy-text-dark: #333; /* legacy near-black text */
  --legacy-text-mid: #666; /* legacy mid text grey */
  --legacy-green: #03a84e; /* legacy CTA green */
  --legacy-green-hover: #029443; /* legacy CTA green hover */
  --legacy-green-active: #038f42; /* legacy CTA green pressed (= darken(#03a84e, 5%)) */
  --legacy-green-light: #89cd79; /* legacy soft green band */
  --legacy-white: #fdfdfd; /* legacy off-white surface */
  --legacy-cream: #fbfaf6; /* legacy warm off-white text */
  --legacy-box-shadow: #00000029; /* legacy focus shadow */
}

/* 2026 redesign: deep-green footer with rounded top corners */
.footer {
  background: var(--sali-deep-dark);
  color: var(--sali-cream-a80);
  padding: 72px 0 44px;
  margin-top: 0;
  border-radius: 18px 18px 0 0;
}
.footer .footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer .footer-brand {
  max-width: 320px;
}
.footer .footer-logo {
  display: inline-block;
  margin-bottom: 18px;
}
.footer .footer-logo img {
  height: 62px;
  width: auto;
  object-fit: contain;
}
.footer .footer-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sali-cream-a70);
  margin: 0 0 18px;
}
.footer .footer-socials {
  display: flex;
  gap: 14px;
}
.footer .footer-socials p {
  display: contents;
}
.footer .footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sali-white-a08);
  transition: background 0.25s;
  /* Links from the CME block 'socials' carry text only; the icon is drawn from the address */
  font-size: 0;
  color: transparent;
  /* any other address: a small text pill instead of an icon */
}
.footer .footer-socials a svg {
  width: 18px;
  height: 18px;
  fill: var(--sali-cream-a80);
  transition: fill 0.25s;
}
.footer .footer-socials a:hover {
  background: var(--sali-white-a16);
}
.footer .footer-socials a:hover svg {
  fill: var(--sali-sage);
}
.footer .footer-socials a::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: var(--sali-cream-a80);
  transition: background-color 0.25s;
  -webkit-mask: var(--social-icon, none) center/contain no-repeat;
  mask: var(--social-icon, none) center/contain no-repeat;
}
.footer .footer-socials a:hover::before {
  background-color: var(--sali-sage);
}
.footer .footer-socials a[href*="instagram."] {
  --social-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.3-.1-1.7-.1-4.9s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.9-.1M12 0C8.7 0 8.3 0 7 .1 5.7.2 4.9.4 4.1.7c-.8.3-1.5.7-2.1 1.4C1.3 2.7.9 3.4.6 4.2.3 5 .1 5.8.1 7.1 0 8.3 0 8.7 0 12s0 3.7.1 4.9c.1 1.3.3 2.1.5 2.9.3.8.7 1.5 1.4 2.1.6.6 1.3 1.1 2.1 1.4.8.3 1.6.5 2.9.5 1.2.2 1.6.2 4.9.2s3.7 0 4.9-.1c1.3-.1 2.1-.3 2.9-.5.8-.3 1.5-.7 2.1-1.4.6-.6 1.1-1.3 1.4-2.1.3-.8.5-1.6.5-2.9.1-1.2.1-1.6.1-4.9s0-3.7-.1-4.9c-.1-1.3-.3-2.1-.5-2.9-.3-.8-.7-1.5-1.4-2.1-.6-.6-1.3-1.1-2.1-1.4-.8-.3-1.6-.5-2.9-.5C15.7 0 15.3 0 12 0m0 5.8A6.2 6.2 0 1 0 18.2 12 6.2 6.2 0 0 0 12 5.8m0 10.2A4 4 0 1 1 16 12a4 4 0 0 1-4 4m6.4-11.9a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44'/></svg>");
}
.footer .footer-socials a[href*="youtube."], .footer .footer-socials a[href*="youtu.be"] {
  --social-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.5 15.6V8.4L15.8 12z'/></svg>");
}
.footer .footer-socials a[href*="spotify."] {
  --social-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0a12 12 0 1 0 12 12A12 12 0 0 0 12 0zm5.5 17.3a.75.75 0 0 1-1 .25 10.2 10.2 0 0 0-7.7-1.2.75.75 0 1 1-.33-1.46 11.7 11.7 0 0 1 8.83 1.4.75.75 0 0 1 .2 1.01zm1.47-3.27a.94.94 0 0 1-1.29.31 12.8 12.8 0 0 0-9.6-1.5.94.94 0 1 1-.44-1.83 14.7 14.7 0 0 1 11 1.73.94.94 0 0 1 .33 1.29zm.13-3.4A15.3 15.3 0 0 0 7.6 8.9a1.13 1.13 0 1 1-.51-2.2 17.6 17.6 0 0 1 13.1 2 1.13 1.13 0 0 1-1.09 1.97z'/></svg>");
}
.footer .footer-socials a:not([href*="instagram."]):not([href*="youtube."]):not([href*="youtu.be"]):not([href*="spotify."]) {
  width: auto;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  color: var(--sali-cream-a80);
  text-decoration: none;
}
.footer .footer-socials a:not([href*="instagram."]):not([href*="youtube."]):not([href*="youtu.be"]):not([href*="spotify."])::before {
  display: none;
}
.footer h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  margin: 4px 0 18px;
}
.footer .footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer .footer-links a {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--sali-cream-a70);
  text-decoration: none;
  transition: color 0.25s, padding-left 0.25s;
}
.footer .footer-links a:hover {
  color: var(--sali-sage);
  padding-left: 4px;
  text-decoration: none;
}
@media (max-width: 991px) {
  .footer {
    padding: 48px 0 32px;
  }
  .footer .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
  }
  .footer .footer-brand {
    grid-column: 1/-1;
    max-width: none;
  }
}
@media (max-width: 575px) {
  .footer {
    padding: 40px 0 24px;
  }
  .footer .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* CME page 'footer': link columns and the tagline are rich text */
.footer .footer-tagline p {
  margin: 0;
}
.footer .footer-links p {
  display: contents;
}

:root {
  /* === Sali Homes brand palette (source of truth) === */
  --sali-sage: #7EAD96; /* primary brand green */
  --sali-sage-hover: #6B9A83; /* darker hover */
  --sali-sage-light: #EAF4EF; /* soft green tint / badges / hover bg */
  --sali-sage-soft: #A8CFC0; /* light sage accent */
  --sali-dark: #111827; /* near-black headings & dark sections */
  --sali-darkest: #0F1A14; /* darkest green-black (footer) */
  --sali-text: #4B5563; /* primary body text */
  --sali-text-muted: #6B7280; /* secondary text */
  --sali-muted: #9CA3AF; /* muted / placeholders */
  --sali-border: #E5E7EB; /* borders & separators */
  --sali-bg-light: #F8F9FA; /* light section background */
  --sali-star: #F59E0B; /* rating stars (amber) */
  /* --- 2026 redesign palette (new-design mockups, source of truth) --- */
  --sali-deep: #517664; /* primary brand green */
  --sali-deep-dark: #3d5a4c; /* primary hover */
  --sali-accent: #d1370d; /* CTA orange-red */
  /* --- editorial / product-listing palette --- */
  --sali-cream: #fbfaf8; /* warm page background */
  --sali-forest: var(--sali-deep); /* deep green (buttons, bands) */
  --sali-forest-hover: var(--sali-deep-dark); /* deep green hover */
  --sali-ink: #22322b; /* near-black hero & footer */
  --sali-warm-text: #6B7570; /* warm muted text */
  --sali-warm-100: #F1ECE5; /* warm surface */
  --sali-warm-200: #E8E2DA; /* warm border */
  --sali-warm-300: #D9D3CA; /* warm placeholder */
  /* --- redesign: extended solids --- */
  --sali-accent-hover: #b52f0b; /* CTA orange-red hover */
  --sali-deep-muted: #658975; /* muted category-link green */
  --sali-success: #3ba55d; /* in-stock indicator green */
  --sali-accent-soft: #F2A88E; /* soft coral accent on dark sections */
  --sali-leaf: #d7e7c5; /* light leaf green (serif accents on dark) */
  --sali-leaf-soft: #DAE6C8; /* pale leaf green (eyebrows on dark) */
  --sali-text-deep: #41544a; /* dark grey-green body text on light cards */
  --sali-text-soft: #5a6b62; /* section-lead grey-green text */
  --sali-text-mist: #7a8a80; /* muted grey-green small text */
  --sali-text-faint: #8a978f; /* faintest grey-green text */
  --sali-cream-shade: #eeeee7; /* darker cream (gradient stop) */
  --sali-linen: #e8e4d4; /* linen swatch background */
  /* --- redesign: hairlines, scrims & shadows (recurring alpha values) --- */
  --sali-line: rgba(81, 118, 100, 0.16); /* header/nav hairlines, card borders */
  --sali-hairline: rgba(81, 118, 100, 0.15); /* sticky-nav bottom hairline */
  --sali-line-soft: rgba(81, 118, 100, 0.14); /* soft card/panel borders */
  --sali-deep-a18: rgba(81, 118, 100, 0.18); /* tab-bar border / card shadow */
  --sali-deep-a20: rgba(81, 118, 100, 0.2); /* dashed spec-row separators */
  --sali-deep-a35: rgba(81, 118, 100, 0.35); /* strong/active borders */
  --sali-glass: rgba(251, 250, 248, 0.82); /* blurred nav background */
  --sali-shadow-soft: rgba(34, 50, 43, 0.05); /* resting card shadow */
  --sali-shadow: rgba(34, 50, 43, 0.10); /* hover card shadow */
  --sali-accent-glow: rgba(209, 55, 13, 0.32); /* CTA shadow */
  --sali-accent-glow-strong: rgba(209, 55, 13, 0.42); /* CTA hover shadow */
  --sali-sage-a12: rgba(126, 173, 150, 0.12); /* sage tint background */
  --sali-sage-a16: rgba(126, 173, 150, 0.16); /* sage badge background */
  --sali-sage-a40: rgba(126, 173, 150, 0.4); /* sage badge border */
  --sali-watermark: rgba(251, 250, 248, 0.06); /* giant watermark text on dark */
  --sali-cream-a10: rgba(251, 250, 248, 0.1); /* translucent panel on dark */
  --sali-cream-a15: rgba(251, 250, 248, 0.15); /* license-footer top hairline */
  --sali-cream-a55: rgba(251, 250, 248, 0.55); /* license-footer text */
  --sali-cream-a65: rgba(251, 250, 248, 0.65); /* faint text on dark */
  --sali-cream-a70: rgba(251, 250, 248, 0.7); /* footer link text */
  --sali-cream-a80: rgba(251, 250, 248, 0.8); /* footer body text / icon fill */
  --sali-cream-a82: rgba(251, 250, 248, 0.82); /* lead text on dark sections */
  --sali-white-a08: rgba(255, 255, 255, 0.08); /* ghost-button hover fill */
  --sali-white-a10: rgba(255, 255, 255, 0.1); /* translucent chip on dark */
  --sali-white-a12: rgba(255, 255, 255, 0.12); /* row separators on dark */
  --sali-white-a16: rgba(255, 255, 255, 0.16); /* borders/fills on dark */
  --sali-white-a22: rgba(255, 255, 255, 0.22); /* chip borders on dark */
  --sali-white-a40: rgba(255, 255, 255, 0.4); /* ghost-button border */
  --sali-white-a50: rgba(255, 255, 255, 0.5); /* underline/borders on dark */
  --sali-white-a65: rgba(255, 255, 255, 0.65); /* muted text on dark */
  --sali-white-a85: rgba(255, 255, 255, 0.85); /* body text on dark */
  /* --- redesign font stacks --- */
  --font-display: "Montserrat", sans-serif; /* headings, buttons, nav */
  --font-body: "Inter", sans-serif; /* body & UI text */
  --font-accent: "Source Serif 4", serif; /* italic serif accents in headlines */
  /* === existing tokens mapped onto the Sali palette === */
  --background: #FFFFFF;
  --background2: var(--sali-bg-light);
  --box-shadow: #0000001A;
  --underline: var(--sali-muted);
  --underline-opacity: #9CA3AF59;
  --underline-2: var(--sali-text);
  --underline-3: var(--sali-border);
  --grey-bg: var(--sali-border);
  --grey-bg-6: #D1D5DB;
  --grey-bg-2: #ECEFF1;
  --grey-bg-3: #F1F3F5;
  --grey-bg-4: #F4F6F7;
  --grey-bg-5: var(--sali-bg-light);
  --grey-bg-7: #F1F3F5;
  --dark-grey: var(--sali-text);
  --custom-green: var(--sali-sage);
  --custom-red: #E21313;
  --DarkGreen: var(--sali-dark);
  --light-blue: #4AC4E6;
  --white: #FFFFFF;
  /* === legacy page palette (pre-redesign pages: business, karriere, faq, contact) === */
  --legacy-ink: #021b0d; /* legacy dark green headings/text */
  --legacy-grey-text: #535353; /* legacy body grey */
  --legacy-grey-mid: #a2a2a8; /* legacy mid grey (borders/placeholders) */
  --legacy-border: #cecece; /* legacy light border grey */
  --legacy-grey-bg: #EFEFEF; /* legacy disabled/grey background */
  --legacy-divider: #DCDCDC; /* legacy divider line */
  --legacy-text-dark: #333; /* legacy near-black text */
  --legacy-text-mid: #666; /* legacy mid text grey */
  --legacy-green: #03a84e; /* legacy CTA green */
  --legacy-green-hover: #029443; /* legacy CTA green hover */
  --legacy-green-active: #038f42; /* legacy CTA green pressed (= darken(#03a84e, 5%)) */
  --legacy-green-light: #89cd79; /* legacy soft green band */
  --legacy-white: #fdfdfd; /* legacy off-white surface */
  --legacy-cream: #fbfaf6; /* legacy warm off-white text */
  --legacy-box-shadow: #00000029; /* legacy focus shadow */
}

/* Bottom legal row inside the deep-green footer (design .foot-bottom) */
.license-footer {
  background: var(--sali-deep-dark);
  padding: 0 0 28px;
  font-family: var(--font-body);
}
.license-footer .foot-bottom {
  border-top: 1px solid var(--sali-cream-a15);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--sali-cream-a55);
}
.license-footer .foot-bottom span {
  color: var(--sali-cream-a55);
}
.license-footer .foot-bottom .sep {
  margin: 0 2px;
}
.license-footer .foot-bottom a {
  text-decoration: none;
}
.license-footer .foot-bottom a span {
  color: var(--sali-cream-a70);
  transition: color 0.25s;
}
.license-footer .foot-bottom a:hover {
  text-decoration: none;
}
.license-footer .foot-bottom a:hover span {
  color: var(--sali-cream-a70);
}
@media (max-width: 576px) {
  .license-footer {
    padding-bottom: 20px;
  }
  .license-footer .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* CME page 'license-footer': the links block is rich text, separators are drawn here */
.license-footer .foot-legal p {
  display: contents;
}
.license-footer .foot-legal a {
  color: var(--sali-cream-a70);
  text-decoration: none;
  transition: color 0.25s;
}
.license-footer .foot-legal a:hover {
  color: var(--sali-cream);
  text-decoration: none;
}
.license-footer .foot-legal a + a::before {
  content: "·";
  color: var(--sali-cream-a55);
  margin: 0 8px;
}

/* ============================================================
   Legal page shell (2026 redesign) — shared by agb / impressum /
   data-privacy. Ported 1:1 from new-design mockups
   (impressum/agb/datenschutz.html): cream page, .legal-container
   (mockup .container, 820px), eyebrow + h1 + lead page head,
   white content panel (radius 22px), pill action buttons.
   All colors via themes/var.scss tokens.
   ============================================================ */
body {
  background-color: var(--sali-cream);
}

/* mockup: main{padding:72px 0 96px} */
.legal-page {
  padding: 72px 0 96px;
  /* mockup: a{color:var(--deep)} a:hover{color:var(--accent)} */
}
.legal-page a {
  color: var(--sali-deep);
  text-decoration: none;
}
.legal-page a:hover {
  color: var(--sali-accent);
}

/* mockup: .container{max-width:820px;margin:0 auto;padding:0 24px} */
.legal-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* mockup: .eyebrow */
.legal-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sali-deep);
  font-weight: 700;
}

/* mockup: h1{font-size:clamp(2rem,4vw,2.9rem);margin:14px 0 18px}
   + h1,h2{font-family:display;line-height:1.12;letter-spacing:-.02em} */
.legal-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sali-ink);
  margin: 14px 0 18px;
}

/* mockup: .lead */
.legal-lead {
  font-size: 1.05rem;
  color: var(--sali-text-soft);
  max-width: 60ch;
  margin-bottom: 0;
}

/* mockup: .panel */
.legal-panel {
  margin-top: 34px;
  background: var(--white);
  border: 1px solid var(--sali-line-soft);
  border-radius: 22px;
  padding: 30px;
  /* mockup: .panel h2{font-size:1.15rem;margin-bottom:10px}
     (top margin added between sections of real CMS content) */
  /* mockup: .panel p{font-size:.94rem;color:text-soft} */
}
.legal-panel h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--sali-ink);
  margin: 28px 0 10px;
}
.legal-panel h2:first-child {
  margin-top: 0;
}
.legal-panel h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sali-ink);
  margin: 22px 0 8px;
}
.legal-panel p,
.legal-panel li {
  font-size: 0.94rem;
  color: var(--sali-text-soft);
  line-height: 1.7;
}
.legal-panel p {
  margin-bottom: 14px;
}
.legal-panel p:last-child {
  margin-bottom: 0;
}
.legal-panel ul,
.legal-panel ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

/* mockup: .actions + .btn / .btn-accent / .btn-outline */
.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.legal-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 13px 26px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: 0.25s;
}
.legal-btn--accent {
  background: var(--sali-accent);
  color: var(--white);
}
.legal-btn--accent:hover {
  background: var(--sali-deep);
  color: var(--white);
}
.legal-btn--outline {
  border: 1.5px solid var(--sali-deep);
  color: var(--sali-deep);
}
.legal-btn--outline:hover {
  background: var(--sali-deep);
  color: var(--white);
}

/* .legal-page scopes the mockup hover, but buttons must keep white text */
.legal-page a.legal-btn--accent {
  color: var(--white);
}
.legal-page a.legal-btn--accent:hover {
  color: var(--white);
}

.legal-page a.legal-btn--outline {
  color: var(--sali-deep);
}
.legal-page a.legal-btn--outline:hover {
  color: var(--white);
}

/* Job list (/job-offers, CME page 'job-offers' + partials/job-list) and job pages (template job-detail).
   Built on the legal-shell atoms (cream page, eyebrow, title, panel, pill buttons). */
.jobs-page .legal-lead p {
  margin: 0 0 10px;
}
.jobs-page .legal-lead p:last-child {
  margin-bottom: 0;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 34px;
}
.job-list .job-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) auto;
  gap: 18px 28px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--sali-line-soft);
  border-radius: 22px;
  padding: 26px 30px;
  text-decoration: none;
  color: var(--sali-ink);
  transition: transform 0.3s, box-shadow 0.3s;
}
.job-list .job-card:hover {
  text-decoration: none;
  color: var(--sali-ink);
  transform: translateY(-3px);
  box-shadow: 0 18px 44px var(--sali-shadow);
}
.job-list .job-card-head {
  min-width: 0;
}
.job-list .job-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--sali-ink);
}
.job-list .job-apply {
  justify-self: end;
  white-space: nowrap;
}
.job-list .job-list-empty {
  margin-top: 34px;
  color: var(--sali-text-soft);
}
.job-list .job-list-empty p {
  margin: 0;
}
@media (max-width: 800px) {
  .job-list .job-card {
    grid-template-columns: 1fr;
  }
  .job-list .job-apply {
    justify-self: start;
  }
}

.job-badge {
  display: inline-block;
  background: var(--sali-sage-a16);
  border: 1px solid var(--sali-sage-a40);
  color: var(--sali-deep);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 10px;
}

.job-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
}
.job-facts > div {
  min-width: 0;
}
.job-facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sali-text-mist);
  font-weight: 600;
  margin: 0;
}
.job-facts dd {
  font-size: 0.95rem;
  color: var(--sali-text-deep);
  margin: 2px 0 0;
}

.job-detail-page .job-back {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--sali-text-soft);
  text-decoration: none;
  margin-bottom: 18px;
}
.job-detail-page .job-back:hover {
  color: var(--sali-accent);
}
.job-detail-page .legal-title {
  margin-bottom: 10px;
}
.job-detail-page .job-badge {
  margin: 0 0 18px;
}
.job-detail-page .job-facts {
  margin-top: 8px;
}
.job-detail-page .job-panel .job-description p:last-child {
  margin-bottom: 0;
}
.job-detail-page .job-panel .job-section {
  margin-top: 28px;
}
.job-detail-page .job-panel .job-section h2 {
  margin-top: 0;
}

/*# sourceMappingURL=job-offers.css.map */