/* vellenfeld.at theme (design variant B "warm", see docs/design/decision.md):
 * a layer over Barceloneta (Bootstrap 5).
 *
 * Contemporary serif body (Literata), softer white cards with rounded
 * corners and warm shadows, the green navigation bar of the old site with
 * pill-shaped items, a footer edged with the stripes of the logo. Palette,
 * logo and the Dancing Script page titles are those of the old site.
 *
 * This file loads before Barceloneta's own CSS: rules start with "body" (or
 * ":root:root" for variables) so they win without depending on load order.
 */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("fonts/dancing-script-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("fonts/dancing-script-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/literata-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/literata-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/literata-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  font-style: italic;
  font-display: swap;
  font-weight: 200 900;
  src: url("fonts/literata-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------- variables */

:root:root {
  /* brand colours of the old site */
  --vf-green: #7fb401;
  --vf-brown: #7f3901;
  --vf-orange: #fe7101;
  --vf-yellow: #f3de01;
  --vf-footer: #222;
  --vf-bg: #fcfcfc;
  /* the same hues darkened for text (WCAG AA) */
  --vf-green-text: #537501;   /* 5.2:1 on #fcfcfc */
  --vf-green-deep: #466301;   /* navigation bar, white text 6.9:1 */
  --vf-green-ink: #1d2a00;    /* text on the brand green, 6.1:1 */
  --vf-orange-text: #be5501;  /* 4.6:1 on #fcfcfc */
  --vf-brown-hover: #5c2900;
  --vf-text: #2b2620;
  --vf-muted: #6a5f55;
  --vf-line: #ece4d8;
  --vf-surface: #fff;
  --vf-cream: #fbf3e4;        /* warm panel behind calls to action */
  --vf-radius: 1rem;
  --vf-radius-sm: 0.6rem;
  --vf-shadow: 0 1px 2px rgba(127, 57, 1, 0.06), 0 10px 30px rgba(127, 57, 1, 0.08);
  --vf-font-body: "Literata", Georgia, "Times New Roman", serif;
  --vf-font-script: "Dancing Script", cursive;

  --bs-body-font-family: var(--vf-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.7;
  --bs-body-color: var(--vf-text);
  --bs-body-color-rgb: 43, 38, 32;
  --bs-body-bg: var(--vf-bg);
  --bs-heading-color: var(--vf-orange-text);
  --bs-primary: var(--vf-brown);
  --bs-primary-rgb: 127, 57, 1;
  --bs-secondary-bg: transparent;
  --bs-border-color: var(--vf-line);
  --bs-link-color: var(--vf-green-text);
  --bs-link-color-rgb: 83, 117, 1;
  --bs-link-hover-color: var(--vf-brown);
  --bs-link-hover-color-rgb: 127, 57, 1;
  --plone-link-color: var(--vf-green-text);
  --plone-link-hover-color: var(--vf-brown);
}

/* ------------------------------------------------------- base typography */

body {
  background: var(--vf-bg);
  font-optical-sizing: auto;
}
body a {
  text-decoration-color: rgba(127, 180, 1, 0.7);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
body a:hover { text-decoration-color: currentColor; }

/* page titles: handwritten, brown, as on the old site */
body h1,
body .documentFirstHeading {
  font-family: var(--vf-font-script);
  font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  line-height: 1.1;
  color: var(--vf-brown);
  margin-bottom: 1.25rem;
}
/* subheadings: the serif, orange, as on the old site but lighter */
body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--vf-font-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--vf-orange-text);
}
body h2 { font-size: 1.7rem; margin: 2rem 0 0.75rem; }
body h3 { font-size: 1.3rem; margin: 1.5rem 0 0.5rem; }
body h4 { font-size: 1.15rem; margin: 0 0 0.6rem; }
body .mosaic-tile-content > h2:first-child,
body .mosaic-tile-content > h3:first-child { margin-top: 0; }
body .lead,
body .documentDescription {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--vf-muted);
}
body strong { font-weight: 650; }
body ul { padding-left: 1.2rem; }
body li::marker { color: var(--vf-orange); }

/* ------------------------------------------------- header and navigation */

body #content-header { padding-top: 1.5rem !important; }
body #portal-logo img { height: 5.25rem; width: auto; }
/* "Anmelden" sits in the footer site actions, as on the old site */
body.userrole-anonymous #portal-top { display: none !important; }

/* the green bar of the old site, one shade deeper so white text reads well */
body #portal-globalnav-wrapper {
  --bs-navbar-background: var(--vf-green-deep);
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: var(--vf-green-ink);
  --bs-navbar-active-color: var(--vf-green-ink);
  --bs-navbar-active-background: transparent;
  --bs-navbar-hover-background: transparent;
  padding: 0.5rem 0;
}
body #portal-globalnav { gap: 0.25rem; }
body #portal-globalnav .nav-link {
  color: #fff;
  font-size: 1.02rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
body #portal-globalnav > li.has_subtree > .nav-link { padding-right: 2.1rem; }
body #portal-globalnav > li > .nav-link:hover,
body #portal-globalnav > li.inPath > .nav-link,
body #portal-globalnav > li.current > .nav-link,
body #portal-globalnav > li.selected > .nav-link {
  background: var(--vf-green);
  color: var(--vf-green-ink);
}
body #portal-globalnav li { background: transparent; }
body #portal-globalnav label { height: 2.4em; }
body #portal-globalnav label::after { background: transparent; color: inherit; }
body #portal-globalnav li:hover > label::after,
body #portal-globalnav li.inPath > label::after { color: var(--vf-green-ink); }
body #portal-globalnav .dropdown {
  background: var(--vf-surface);
  border-radius: var(--vf-radius-sm);
  box-shadow: var(--vf-shadow);
  padding: 0.4rem;
  margin-top: 0.5rem;
}
body #portal-globalnav .dropdown .nav-link {
  color: var(--vf-text);
  border-radius: 0.4rem;
}
body #portal-globalnav .dropdown .nav-link:hover { background: var(--vf-cream); color: var(--vf-brown); }

body #portal-searchbox .searchField {
  border-radius: 999px;
  border: 0;
  padding-inline: 1rem;
  font-size: 0.95rem;
}
body #portal-searchbox .searchButton {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.6);
  --bs-btn-hover-bg: var(--vf-green);
  --bs-btn-hover-color: var(--vf-green-ink);
  --bs-btn-hover-border-color: var(--vf-green);
  border-radius: 999px;
  font-size: 0.95rem;
}

/* mobile: off-canvas menu in the same green */
body .navbar-toggler { border-color: var(--vf-line) !important; border-radius: 999px; }
@media (max-width: 991.98px) {
  body #portal-logo img { height: 3.5rem; }
  body #portal-globalnav-wrapper { padding: 0; }
  body #portal-globalnav .nav-link { padding: 0.7rem 1rem; }
  body #portal-globalnav .dropdown { background: transparent; box-shadow: none; margin: 0; }
  body #portal-globalnav .dropdown .nav-link { color: #fff; }
}

/* breadcrumbs: quiet; hidden where they only say "Startseite" */
body #portal-breadcrumbs { background: transparent; margin-bottom: 0.5rem; font-size: 0.875rem; }
body #portal-breadcrumbs .breadcrumb { padding: 1rem 0 0; margin: 0; }
body #portal-breadcrumbs a { color: var(--vf-muted); }
body #portal-breadcrumbs:has(.breadcrumb > li:only-child) { display: none; }
body #main-container { margin-top: 2rem; }

/* ------------------------------------------------------- mosaic and tiles */

body #content .mosaic-grid-row { margin-bottom: 2.5rem; row-gap: 1.75rem; }
body #content .mosaic-grid-row:has(.mosaic-IDublinCore-title-tile),
body #content .mosaic-grid-row:has(.mosaic-IDublinCore-description-tile) { margin-bottom: 0.5rem; }
body #content .mosaic-grid-row:has(.mosaic-IDublinCore-description-tile) .lead { margin-bottom: 1.5rem; }
body .mosaic-tile { margin-bottom: 1rem; }
body .mosaic-tile-content > p:last-child { margin-bottom: 0; }
body .mosaic-tile img { max-width: 100%; height: auto; }
body .mosaic-tile figure { margin: 0; }
body .content-image img { display: block; width: 100%; border-radius: var(--vf-radius); }
/* first full-width banner on the front page */
body .mosaic-grid-cell.col-12 .content-image img { aspect-ratio: 16 / 5; object-fit: cover; }
/* photos in three-column rows share one 4:3 frame */
body .mosaic-grid-cell.col-lg-4 .content-image img { aspect-ratio: 4 / 3; object-fit: cover; }

/* cards: listing columns (Termine, Aktuelles) and three-column rows
   (front-page teasers, membership prices); white, rounded, soft shadow */
body .mosaic-grid-cell.col-lg-3,
body .mosaic-grid-cell.col-lg-4 {
  display: flex;
  flex-direction: column;
}
body .mosaic-grid-cell.col-lg-3 > .mosaic-tile:last-child,
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:last-child { flex-grow: 1; }
body .mosaic-grid-cell.col-lg-3 > .mosaic-tile,
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile {
  background: var(--vf-surface);
  padding: 0 1.5rem;
  margin: 0;
  box-shadow: var(--vf-shadow);
  clip-path: inset(0 -40px);
}
body .mosaic-grid-cell.col-lg-3 > .mosaic-tile:first-child,
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:first-child {
  border-radius: var(--vf-radius) var(--vf-radius) 0 0;
  padding-top: 1.5rem;
  clip-path: inset(-40px -40px 0 -40px);
}
body .mosaic-grid-cell.col-lg-3 > .mosaic-tile:last-child,
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:last-child {
  border-radius: 0 0 var(--vf-radius) var(--vf-radius);
  padding-bottom: 1.75rem;
  clip-path: inset(0 -40px -40px -40px);
}
body .mosaic-grid-cell.col-lg-3 > .mosaic-tile:only-child,
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:only-child {
  border-radius: var(--vf-radius);
  clip-path: none;
}
/* card headings of the listings in the handwritten script */
body .mosaic-grid-cell.col-lg-3 > .mosaic-tile:first-child h4 {
  font-family: var(--vf-font-script);
  font-weight: 700;
  font-size: 2rem;
  color: var(--vf-brown);
  margin-bottom: 0.75rem;
}
/* a photo at the top of a card runs to the card edges */
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:first-child:has(.content-image) {
  padding: 0;
  margin-bottom: 0;
}
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:first-child .content-image img {
  border-radius: var(--vf-radius) var(--vf-radius) 0 0;
}
body .mosaic-grid-cell.col-lg-4 > .mosaic-tile:first-child:has(.content-image) + .mosaic-tile { padding-top: 1.25rem; }
body .mosaic-grid-cell.col-lg-4 h3 { margin-top: 0; }

/* centred call-to-action tile ("Ziele & Visionen") on a warm panel */
body .mosaic-grid-cell.col-12 > .mosaic-tile-align-center {
  background: var(--vf-cream);
  border-radius: calc(var(--vf-radius) * 1.5);
  padding: 3.5rem 1.5rem;
}
body .mosaic-tile-align-center h2 {
  margin-top: 0;
  font-family: var(--vf-font-script);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--vf-brown);
}
body .mosaic-tile-align-center p:has(> br:only-child) { display: none; }

/* listings inside tiles (Aktuelles) */
body .existing-content-tile .entries article {
  --bs-gutter-x: 1rem;
  flex-wrap: nowrap;
  padding: 0.9rem 0;
  margin: 0 !important;
  border-bottom: 1px dashed var(--vf-line);
}
body .existing-content-tile .entries article:first-child { padding-top: 0; }
body .existing-content-tile .entries article:last-child { border-bottom: 0; }
body .existing-content-tile .entries article > .col { padding-left: 0; }
body .existing-content-tile .entries article > .col-3 { flex: 0 0 auto; width: auto; padding-right: 0; }
body .existing-content-tile .entries a.url {
  font-weight: 600;
  color: var(--vf-brown);
  text-decoration: none;
  line-height: 1.35;
}
body .existing-content-tile .entries a.url:hover { text-decoration: underline; }
body .existing-content-tile .entries p { font-size: 0.925rem; color: var(--vf-muted); margin: 0.25rem 0 0 !important; }
body .existing-content-tile .entries img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 3.75rem; }
/* empty listing */
body .existing-content-tile > p.discreet,
body p.vf-no-events {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  background: var(--vf-cream);
  border-radius: var(--vf-radius-sm);
  padding: 0.85rem 1rem;
  color: var(--vf-text);
  font-style: italic;
  font-size: 0.95rem;
  margin: 0;
}
body .existing-content-tile > p.discreet::before,
body p.vf-no-events::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--vf-orange-text);
  -webkit-mask: var(--vf-icon-calendar) center / contain no-repeat;
  mask: var(--vf-icon-calendar) center / contain no-repeat;
}
body .existing-content-tile nav.pagination { display: none; }
body p.vf-no-events { max-width: 36rem; }

/* ------------------------------------------------------------ buttons */

body .btn-primary,
body .btn-success {
  --bs-btn-bg: var(--vf-brown);
  --bs-btn-border-color: var(--vf-brown);
  --bs-btn-hover-bg: var(--vf-brown-hover);
  --bs-btn-hover-border-color: var(--vf-brown-hover);
  --bs-btn-active-bg: var(--vf-brown-hover);
  --bs-btn-active-border-color: var(--vf-brown-hover);
  border-radius: 999px;
}
/* Plone 5 button classes in migrated content */
body .plone-btn {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--vf-brown);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(127, 57, 1, 0.2);
  transition: background 0.15s, transform 0.15s;
}
body .plone-btn:hover,
body .plone-btn:focus { background: var(--vf-brown-hover); color: #fff; transform: translateY(-1px); }
body .mosaic-tile-content .pull-right { float: none; }
body .mosaic-tile-content p:has(> .plone-btn) > br { display: none; }
body .mosaic-tile-content p:has(> .plone-btn) { margin-top: 1.25rem; }

/* ------------------------------------------------------ event datebox */

body .vevent.tileItem {
  background: var(--vf-surface);
  border-radius: var(--vf-radius);
  box-shadow: var(--vf-shadow);
  padding: 1.25rem;
  margin: 0 0 1.25rem !important;
  gap: 0.5rem;
}
body .vevent .cal_date {
  width: 5rem;
  border: 0;
  border-radius: var(--vf-radius-sm);
  overflow: hidden;
  background: var(--vf-cream);
}
body .vevent .cal_month {
  background: var(--vf-orange-text);
  color: #fff;
  border: 0;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0 !important;
}
body .vevent .cal_date .card-body { padding: 0.3rem 0 0.5rem !important; }
body .vevent .cal_day {
  font-family: var(--vf-font-body);
  color: var(--vf-brown);
  font-weight: 700;
  font-size: 2rem !important;
  line-height: 1.1;
}
body .vevent .cal_wkday { font-size: 0.75rem; color: var(--vf-muted); font-style: italic; }
body .vevent .cal_info h2 { font-size: 1.3rem; margin: 0 0 0.2rem; }
body .vevent .cal_info h2 a { color: var(--vf-brown); text-decoration: none; }
body .vevent .cal_info h2 a:hover { text-decoration: underline; }
body .vevent .documentByLine { font-size: 0.9rem; color: var(--vf-muted); }
body .vevent .description { margin: 0.25rem 0 0; }

/* -------------------------------------------------------------- footer */

body #portal-footer-wrapper {
  position: relative;
  background: var(--vf-footer);
  color: #ece8df;
  text-align: left;
  padding: 4rem 0 1.5rem;
  margin-top: 4rem;
  font-size: 0.95rem;
}
/* the stripes of the logo along the top edge */
body #portal-footer-wrapper::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: linear-gradient(to right,
    var(--vf-green) 0 25%, var(--vf-brown) 25% 50%,
    var(--vf-orange) 50% 75%, var(--vf-yellow) 75% 100%);
}
body #portal-footer-wrapper a { color: var(--vf-yellow); }
body #portal-footer-wrapper a:hover { color: #fff; }
body #portal-footer .doormat { row-gap: 2rem; }
body #portal-footer .doormat .headline h2 {
  font-family: var(--vf-font-script);
  font-weight: 700;
  color: var(--vf-yellow);
  font-size: 2.5rem;
  margin: 0 0 1rem;
}
body #portal-footer .doormat .card-body { padding: 0; }
body #portal-footer .doormat img { max-width: 100%; height: auto; border-radius: var(--vf-radius); }
/* the Impressum logo is the full image (600 dpi); show it small */
body #portal-footer .doormat .card-body img.image-inline { width: 10rem; max-width: 100%; }
/* footer social links as small pills */
body #portal-footer .doormat p:has(a[href*="facebook"]) { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body #portal-footer .doormat p:has(a[href*="facebook"]) a {
  background: rgba(243, 222, 1, 0.12);
  border-radius: 999px;
  padding: 0.25rem 0.95rem;
  text-decoration: none;
  font-size: 0.875rem;
}
body #portal-footer .doormat p:has(a[href*="facebook"]) a:hover { background: var(--vf-yellow); color: var(--vf-footer); }
body #portal-footer .site-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: 2.5rem;
  padding: 1.25rem 0 0;
  font-size: 0.875rem;
}
body #portal-footer .site-actions ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem; }
body #portal-footer .site-actions ul li { margin: 0; }
body #portal-footer .site-actions a { color: #ece8df; text-decoration: none; }
body #portal-footer .site-actions a:hover { color: var(--vf-yellow); }

/* Font Awesome classes in the Impressum portlet, drawn with local SVG masks */
body .fa {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.55em;
  vertical-align: -0.18em;
  background-color: currentColor;
  -webkit-mask: var(--vf-icon) center / contain no-repeat;
  mask: var(--vf-icon) center / contain no-repeat;
}
body #portal-footer .fa.text-primary { color: var(--vf-orange) !important; }

/* -------------------------------------------------------------- forms */

body .form-control,
body .form-select { border-radius: var(--vf-radius-sm); }
body .form-control:focus,
body .form-select:focus {
  border-color: var(--vf-green);
  box-shadow: 0 0 0 0.2rem rgba(127, 180, 1, 0.25);
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 575.98px) {
  body { --bs-body-font-size: 1rem; }
  body #content .mosaic-grid-row { margin-bottom: 1.5rem; }
  body .mosaic-grid-cell.col-12 > .mosaic-tile-align-center { padding: 2.25rem 1rem; }
  body .mosaic-grid-cell.col-12 .content-image img { aspect-ratio: 16 / 7; }
  body h2 { font-size: 1.5rem; }
  body .vevent.tileItem { padding: 1rem; }
}

/* ------------------------------------------------------------- icons
   (Lucide, ISC licence, https://lucide.dev; drawn as masks, no icon font) */

:root:root {
  --vf-icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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 10h18'/%3E%3C/svg%3E");
}
body .fa-address-card { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Cpath d='M5 16c.6-1.3 1.7-2 3-2s2.4.7 3 2M14 10h5M14 14h4'/%3E%3C/svg%3E"); }
body .fa-map { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21'/%3E%3Cpath d='M9 3v15M15 6v15'/%3E%3C/svg%3E"); }
body .fa-at { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-4 8'/%3E%3C/svg%3E"); }
body .fa-phone { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' 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 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }