/* Horbach Raumausstattung – Design-Schicht (Stand 25.09.2026)
 * Wird nach allen Theme-Stylesheets geladen und verfeinert Typografie, Rhythmus,
 * Bilder, Kontaktflächen und Zustände. CI (Grün #006551 / #00a878, Montserrat +
 * Lato), Struktur und Inhalte bleiben unverändert. */

:root {
  --hb-green: #006551;
  --hb-green-bright: #00a878;
  --hb-green-soft: #e8f3f0;
  --hb-ink: #2c2f33;
  --hb-text: #3d4146;
  --hb-muted: #686d73;
  --hb-line: #e4e6e8;
  --hb-surface: #f5f5f3;
  --hb-radius: 18px;
  --hb-radius-sm: 12px;
  --hb-shadow: 0 18px 40px -26px rgba(20, 30, 28, .35);
  --hb-shadow-hover: 0 24px 48px -24px rgba(20, 30, 28, .45);
  --hb-ease: cubic-bezier(.22, .61, .36, 1);
  --hb-section: clamp(56px, 7vw, 104px);
  --hb-card-pad: clamp(28px, 4.2vw, 56px);
}

/* ---------- 1. Typografie & Lesbarkeit ---------- */
body {
  font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--hb-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#main p,
#main li,
#main td {
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.72;
  color: var(--hb-text);
}
#main p { margin-bottom: 1.05em; }
#main p span.inline-23bcb9fc68 { font-size: inherit; color: inherit; font-family: inherit; }
#main [class*="justify"],
#main [class*="justify"] p,
#main p.inline-398a863900 {
  text-align: left !important;
}
#main p,
#main li { overflow-wrap: break-word; }
@media (max-width: 767px) {
  #main p,
  #main li { hyphens: auto; -webkit-hyphens: auto; }
}
#main .color-gray p { color: var(--hb-text); }

#main h1, #main h2, #main h3, #main h4 {
  font-family: "Montserrat", "Lato", sans-serif;
  color: var(--hb-ink);
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  text-wrap: balance;
  letter-spacing: -.01em;
}
#main h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2rem); line-height: 1.25; }
#main h3 { font-size: clamp(1.15rem, 1rem + .5vw, 1.3rem); line-height: 1.35; }
#main h4 { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.3; }
#main a:not(.hyperlink_txt):not(.kontakt-cta):not(.tel-link) {
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color .2s var(--hb-ease);
}
#main strong { color: var(--hb-ink); }

/* ---------- 2. Hero & Vertrauensleiste ---------- */
.hero-static::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(10, 22, 20, .42), rgba(10, 22, 20, 0) 70%),
    linear-gradient(180deg, rgba(10, 22, 20, .18) 0%, rgba(10, 22, 20, 0) 30%, rgba(10, 22, 20, .28) 100%);
}
.hero-textwrap { z-index: 2; width: min(92vw, 900px); }
.hero-textbar {
  background: transparent;
  padding: 0;
  max-width: none;
  margin-bottom: 0;
}
#slider { position: relative; z-index: 5; }
.hero-textbar h1,
#slider .headerTitle { color: #fff !important; }
.hero-textbar h1 {
  text-wrap: balance;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.hero-textbar h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin: 22px auto 0;
  border-radius: 3px;
  background: var(--hb-green-bright);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin-top: 28px;
}
.hero-actions .kontakt-cta,
.hero-actions .hero-cta-phone {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color .25s var(--hb-ease), color .25s var(--hb-ease), transform .25s var(--hb-ease), box-shadow .25s var(--hb-ease);
}
.hero-actions .kontakt-cta {
  background: var(--hb-green);
  border: 2px solid var(--hb-green);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
}
.hero-actions .kontakt-cta:hover { background: #00543f; border-color: #00543f; color: #fff; transform: translateY(-1px); }
.hero-actions .hero-cta-phone {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(4px);
}
.hero-actions .hero-cta-phone::before {
  content: "";
  width: 18px;
  height: 18px;
  margin-right: 10px;
  background: currentColor;
  -webkit-mask: var(--hb-icon-phone) center / contain no-repeat;
  mask: var(--hb-icon-phone) center / contain no-repeat;
}
.hero-actions .hero-cta-phone:hover { background: #fff; color: var(--hb-green); }

.trustbar {
  position: relative;
  z-index: 3;
  width: min(1170px, calc(100% - 32px));
  margin: -44px auto 0;
  background: #fff;
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
}
.trustbar ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.trustbar li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  margin: 0;
  font-size: .98rem;
  line-height: 1.35;
  color: var(--hb-muted);
}
.trustbar li + li { border-left: 1px solid var(--hb-line); }
.trustbar strong { display: block; color: var(--hb-ink); font-family: "Montserrat", sans-serif; font-size: .95rem; }
.trust-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hb-green-soft);
  position: relative;
}
.trust-icon::before {
  content: "";
  position: absolute;
  inset: 11px;
  background: var(--hb-green);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.trust-icon--award { --icon: var(--hb-icon-award); }
.trust-icon--since { --icon: var(--hb-icon-clock); }
.trust-icon--needle { --icon: var(--hb-icon-scissors); }
.trust-icon--pin { --icon: var(--hb-icon-pin); }
@media (max-width: 1024px) {
  .trustbar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trustbar li:nth-child(3) { border-left: 0; }
  .trustbar li:nth-child(n + 3) { border-top: 1px solid var(--hb-line); }
}
@media (max-width: 560px) {
  .trustbar { margin-top: -28px; }
  .trustbar li { padding: 16px 14px; gap: 10px; font-size: .88rem; }
  .trustbar strong { font-size: .86rem; }
  .trust-icon { flex-basis: 36px; width: 36px; height: 36px; }
  .trust-icon::before { inset: 9px; }
}

/* Unterseiten-Header: Titel ohne halbtransparenten Balken, mit ruhigem Verlauf */
#slider .element_video_background,
#slider .element_bgimage,
#slider .element_headerimage { position: relative; }
#slider .element_video_background::after,
#slider .element_bgimage-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(10, 22, 20, .38), rgba(10, 22, 20, .08) 75%);
}
#slider .element_video_background_inside,
#slider .element_bgimage-inside { position: relative; z-index: 1; }
.headerTitle {
  background: transparent;
  height: auto;
  min-height: 94px;
  font-size: clamp(1.8rem, 1.1rem + 2.8vw, 3rem) !important;
  letter-spacing: -.02em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .4);
  flex-direction: column;
}
.headerTitle::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 16px;
  border-radius: 3px;
  background: var(--hb-green-bright);
}
.headerTitleLine { display: none; }

/* ---------- 3. Rhythmus & Karten ---------- */
#main .module_article.article-pt > .container,
#main .module_article[class*="article-pt-"]:not(.article-pt-0):not(.article-pt-xxs) > .container { padding-top: var(--hb-section); }
#main .module_article.article-pb > .container,
#main .module_article[class*="article-pb-"]:not(.article-pb-0):not(.article-pb-xxs) > .container { padding-bottom: var(--hb-section); }
#main .module_article.article-pb-xxs > .container { padding-bottom: 12px; }

.module_article.rahmen-grau,
.module_article.block-grau {
  border-radius: var(--hb-radius);
  padding: 0;
  margin-bottom: clamp(24px, 3vw, 40px);
  transition: box-shadow .35s var(--hb-ease);
}
.module_article.rahmen-grau {
  border: 1px solid var(--hb-line);
  background: #fff;
  box-shadow: var(--hb-shadow);
}
.module_article.block-grau { background: var(--hb-surface); }
.module_article.rahmen-grau > .container,
.module_article.block-grau > .container {
  padding: var(--hb-card-pad) !important;
}
.module_article.rahmen-grau > .container > :last-child,
.module_article.block-grau > .container > :last-child,
.module_article .autogrid_row:last-child,
.module_article .element_gallery:last-child { margin-bottom: 0 !important; }

/* Leistungsboxen: eigene Linien-Icons statt Häkchen */
.iconbox { display: flex; align-items: flex-start; }
.iconbox .icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  margin: 2px 22px 0 0;
  border-radius: 16px;
  background: var(--hb-green-soft);
  position: relative;
  font-size: 0;
  transition: background-color .3s var(--hb-ease), transform .3s var(--hb-ease);
}
.iconbox .icon::before {
  content: "" !important;
  position: absolute;
  inset: 14px;
  background: var(--hb-green);
  -webkit-mask: var(--icon, var(--hb-icon-check)) center / contain no-repeat;
  mask: var(--icon, var(--hb-icon-check)) center / contain no-repeat;
  transition: background-color .3s var(--hb-ease);
}
.iconbox-wrapper:nth-child(1) .icon { --icon: var(--hb-icon-ruler); }
.iconbox-wrapper:nth-child(2) .icon { --icon: var(--hb-icon-scissors); }
.iconbox-wrapper:nth-child(3) .icon { --icon: var(--hb-icon-sparkle); }
.iconbox-wrapper:hover .icon { background: var(--hb-green); transform: translateY(-2px); }
.iconbox-wrapper:hover .icon::before { background: #fff; }
.iconbox-wrapper + .iconbox-wrapper { margin-top: clamp(20px, 2.4vw, 32px); }
.iconbox .content-header h3 { margin-bottom: 4px; }
.iconbox .content-header a { font-style: normal; font-weight: 700; font-size: .95rem; }

/* Willkommensbox (dunkel) */
#welcome {
  border-radius: var(--hb-radius);
  box-shadow: var(--hb-shadow);
}
#welcome h2 { color: #fff !important; }
#welcome p { color: rgba(255, 255, 255, .86) !important; }
#welcome img { border-radius: var(--hb-radius-sm); }

/* ---------- 4. Bilder & Galerien ---------- */
#main .image_container,
#main .element_image figure {
  border-radius: var(--hb-radius-sm);
  overflow: hidden;
}
#main .image_container img {
  transition: transform .8s var(--hb-ease), filter .6s var(--hb-ease);
}
#main .image_container:hover img,
#main a:hover > img { transform: scale(1.035); }
#main img.is-zoomable { cursor: zoom-in; }
.element_player video { border-radius: var(--hb-radius-sm); background: #111; }

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 5px !important;
  border-radius: 50%;
  background: #c9ceca !important;
  opacity: 1 !important;
  transition: background-color .25s var(--hb-ease), transform .25s var(--hb-ease);
}
.swiper-pagination-bullet-active { background: var(--hb-green) !important; transform: scale(1.25); }
[id^="swiper-button-"],
.gallery_nav-button {
  transition: transform .25s var(--hb-ease), background-color .25s var(--hb-ease);
}
[id^="swiper-button-"]:hover,
.gallery_nav-button:hover { transform: scale(1.08); }
.gallery_nav-section .bullet.active { background: var(--hb-green) !important; }

/* Sanftes Einblenden beim Scrollen (nur mit JS und ohne reduzierte Bewegung) */
.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--hb-ease), transform .55s var(--hb-ease);
}
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* Lightbox */
.site-lightbox::backdrop { background: rgba(12, 16, 15, .9); backdrop-filter: blur(2px); }
.site-lightbox img { border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.site-lightbox button {
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  transition: background-color .2s var(--hb-ease);
}
.site-lightbox button:hover { background: rgba(255, 255, 255, .28); }
.site-lightbox__close { position: fixed; top: 16px; right: 16px; }

/* ---------- 5. Kontakt & Conversion ---------- */
a.tel-link { color: inherit; text-decoration: none; font-weight: 700; white-space: nowrap; }
#main a.tel-link { color: var(--hb-green); }
a.tel-link:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Kontaktkarte in der Seitenspalte der Leistungsseiten */
.column.col_4:has(.element_text.kontakt) {
  position: sticky;
  top: 130px;
  align-self: flex-start;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--hb-line);
  border-radius: var(--hb-radius);
  background: #fff;
  box-shadow: var(--hb-shadow);
}
#main .column.col_4:has(.element_text.kontakt) .element_text_extented.color-accent p {
  font-family: "Montserrat", sans-serif;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--hb-ink);
  text-wrap: balance;
  margin-bottom: 0;
}
#main .column.col_4:has(.element_text.kontakt) .element_text_extented.mb-m { margin-bottom: 20px; }
.column.col_4:has(.element_text.kontakt) .element_hyperlink a,
.column.col_4:has(.element_text.kontakt) .hyperlink_txt {
  border-radius: 999px !important;
  min-height: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: var(--hb-green);
  border-color: var(--hb-green);
  transition: background-color .25s var(--hb-ease), transform .25s var(--hb-ease);
}
.column.col_4:has(.element_text.kontakt) .element_hyperlink a:hover { background: #00543f; transform: translateY(-1px); }
.column.col_4:has(.element_text.kontakt) .lh-2 p { font-size: 1rem; line-height: 1.6; }
.column.col_4:has(.element_text.kontakt) .lh-2 a.tel-link { font-size: 1.3rem; letter-spacing: .01em; }
.column.col_4 .element_text.kontakt {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--hb-radius-sm);
  background: var(--hb-green-soft);
  color: var(--hb-text);
  text-align: left;
}
.column.col_4 .element_text.kontakt p { margin: 0; color: var(--hb-text); font-size: .95rem; line-height: 1.6; text-align: left; }
.column.col_4 .element_text.kontakt p:first-child { font-weight: 700; color: var(--hb-ink); }
.column.col_4 .element_text.kontakt em { color: var(--hb-green); }
@media (max-width: 1024px) { .column.col_4:has(.element_text.kontakt) { position: static; margin-top: 32px; } }

/* Formular */
form[data-contact-form] label { font-weight: 700; color: var(--hb-ink); font-size: .92rem; margin-bottom: 6px; display: inline-block; }
form[data-contact-form] input.text,
form[data-contact-form] input[type="email"],
form[data-contact-form] input[type="tel"],
form[data-contact-form] textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid #d5d9dc;
  border-radius: var(--hb-radius-sm);
  background: #fbfbfa;
  font-size: 1rem;
  color: var(--hb-ink);
  box-shadow: none;
  transition: border-color .2s var(--hb-ease), box-shadow .2s var(--hb-ease), background-color .2s var(--hb-ease);
}
form[data-contact-form] textarea { min-height: 150px; resize: vertical; }
form[data-contact-form] input:hover,
form[data-contact-form] textarea:hover { border-color: #b9c0c4; }
form[data-contact-form] input:focus,
form[data-contact-form] textarea:focus {
  outline: none;
  border-color: var(--hb-green);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 101, 81, .14);
}
form[data-contact-form] .widget { margin-bottom: 0; }
form[data-contact-form] .autogrid_row { margin-bottom: 20px; row-gap: 20px; }
form[data-contact-form] .widget-explanation p { font-size: .9rem !important; color: var(--hb-muted) !important; line-height: 1.6 !important; }
form[data-contact-form] button.submit {
  width: auto;
  min-width: 220px;
  min-height: 52px;
  padding: 14px 34px;
  border-radius: 999px !important;
  border: 0;
  background: var(--hb-green);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  box-shadow: 0 12px 24px -14px rgba(0, 101, 81, .8);
  transition: background-color .25s var(--hb-ease), transform .25s var(--hb-ease);
}
form[data-contact-form] button.submit:hover { background: #00543f; transform: translateY(-1px); }
form[data-contact-form] .form-status {
  padding: 14px 18px;
  border-radius: var(--hb-radius-sm);
  background: var(--hb-green-soft);
  font-weight: 700;
}
form[data-contact-form] .form-status.is-error { background: #fdecee; }
@media (max-width: 767px) { form[data-contact-form] button.submit { width: 100%; } }

/* Mobile Aktionsleiste */
.action-bar { display: none; }
@media (max-width: 767px) {
  .action-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 900;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .45);
    transform: translateY(0);
    transition: transform .35s var(--hb-ease), opacity .35s var(--hb-ease);
  }
  .action-bar.is-hidden { transform: translateY(140%); opacity: 0; }
  body.mmenu_open .action-bar { transform: translateY(140%); opacity: 0; }
  .action-bar__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
  }
  .action-bar__item--call { color: var(--hb-green); background: var(--hb-green-soft); }
  .action-bar__item--appointment { color: #fff; background: var(--hb-green); }
  .action-bar__icon { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
  .action-bar__item--call .action-bar__icon { --icon: var(--hb-icon-phone); }
  .action-bar__item--appointment .action-bar__icon { --icon: var(--hb-icon-calendar); }
  #bottom { padding-bottom: 88px; }
}

/* ---------- 6. Feinschliff ---------- */
:focus-visible {
  outline: 3px solid var(--hb-green-bright) !important;
  outline-offset: 3px;
  border-radius: 6px;
}
#header .mainmenu .level_1 > li > a { transition: background-color .25s var(--hb-ease), color .25s var(--hb-ease); border-radius: 6px; }
#header .mainmenu .level_2 { border-radius: 0 0 var(--hb-radius-sm) var(--hb-radius-sm); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35); overflow: hidden; }

#footer { font-size: .95rem; }
#footer p, #footer td, #footer div { color: #c4c7c9; }
#footer a.tel-link { color: #fff; }
#footer .element_image_extended_inside img {
  background: #fff;
  padding: 10px 14px;
  border-radius: var(--hb-radius-sm);
}
#footer .element_image img { border-radius: 8px; }
#bottom .copyright { color: #a9adb0; }
#footer .totop:before { border-radius: 0 0 10px 10px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  #main .image_container:hover img { transform: none; }
}

/* ---------- Icons (Linien-Icons als Masken, Farbe über CSS) ---------- */
:root {
  --hb-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --hb-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 15h3'/%3E%3C/svg%3E");
  --hb-icon-award: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M8.2 13 7 22l5-3 5 3-1.2-9'/%3E%3C/svg%3E");
  --hb-icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --hb-icon-scissors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12'/%3E%3C/svg%3E");
  --hb-icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --hb-icon-ruler: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.3 15.3 8.7 2.7a1 1 0 0 0-1.4 0L2.7 7.3a1 1 0 0 0 0 1.4l12.6 12.6a1 1 0 0 0 1.4 0l4.6-4.6a1 1 0 0 0 0-1.4zM7.5 10.5l2-2M10.5 13.5l2-2M13.5 16.5l2-2'/%3E%3C/svg%3E");
  --hb-icon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9zM19 16l.8 2.2L22 19l-2.2.8L19 22l-.8-2.2L16 19l2.2-.8z'/%3E%3C/svg%3E");
  --hb-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}