/* ==========================================================================
   VetDuo Heiligenrode – design for the Elementor build
   --------------------------------------------------------------------------
   Ported 1:1 from the approved reference (projekte.99grad.de/vetduo/, css/*).
   Elementor elements carry the reference class names (Advanced → CSS Classes);
   because Elementor wraps every widget in its own div, rules that styled an
   element directly in the reference (e.g. a.btn, h2.title) target the inner
   Elementor element here (.btn .elementor-button, .title .elementor-heading-title).

   1. Tokens (unchanged from the reference)
   2. Base
   3. Elementor normalisation
   4. Layout notes, type, buttons, cards
   (Notches, status badge, opening hours, FAQ list, service list: plugin vetduo-widgets)
   5. Sections: hero, vd-split + notches
   6. Header, nav, footer, popup
   7. Logo cat
   8. Sub pages: text boxes, lists, service catalogue, FAQ, contact block, legal
   9. Icon pattern
  10. Contact form (Contact Form 7)
  11. Header/footer additions (current menu item, footer menu)
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root,body{
/* Brand primitives — values read from the web logo (Web_Logo_VetDuo_RGB.svg) and the print brandsheet */
--green-700:var(--e-global-color-vdgreen7,#5F8A18); /* derived: hover/pressed */
--green-500:var(--e-global-color-secondary,#7CAE22); /* logo green (web). Print equivalent: #70B340 */
--green-400:var(--e-global-color-vdgreen4,#B6D54A); /* brandsheet tint */
--green-300:var(--e-global-color-vdgreen3,#CFDE6B); /* brandsheet tint */
--green-100:var(--e-global-color-vdgreen1,#EEF4DC); /* derived: soft surface */
--green-50:var(--e-global-color-vdgreen05,#F6F9EC);  /* derived: page wash */
--navy-900:var(--e-global-color-vdnavy9,#001C2E);  /* stationery deep navy */
--navy-800:var(--e-global-color-primary,#002C40);  /* logo navy (web). Print: #00293A */
--navy-700:var(--e-global-color-vdnavy7,#0F4159);  /* derived: hover on navy */
--navy-500:var(--e-global-color-vdnavy5,#2D637C);  /* derived: heller Zwischenschritt — sichtbarer Hover auf navy-Button, Weiß bleibt lesbar (~6:1) */
--navy-100:var(--e-global-color-vdnavy1,#E3E9ED);  /* derived: soft surface */
--navy-50:var(--e-global-color-vdnavy05,#F1F4F6);   /* derived */
--orange-500:var(--e-global-color-accent,#FF5E1E); /* brandsheet accent — sparingly: emergencies, highlights */
--orange-400:var(--e-global-color-vdorange4,#FF8A5C); /* derived: lighter tint for hover */
--orange-100:var(--e-global-color-vdorange1,#FFE8DE); /* derived */
--black:#000000;
--gray-900:var(--e-global-color-text,#262626);
--gray-700:var(--e-global-color-vdgray7,#494A48);
--gray-500:var(--e-global-color-vdgray5,#808080);
--gray-300:var(--e-global-color-vdgray3,#C9CBCA); /* derived */
--gray-200:var(--e-global-color-vdgray2,#E4E5E4); /* derived */
--gray-100:var(--e-global-color-vdgray1,#F6F6F6);
--white:var(--e-global-color-vdwhite,#FFFFFF);

/* Semantic — text */
--text-primary:var(--navy-800);
--text-body:var(--gray-900);
--text-muted:var(--gray-500);
--text-on-dark:var(--white);
--text-accent:var(--green-500);
--text-link:var(--green-700);
--text-link-hover:var(--green-700); /* Hover bleibt grün; die Unterstreichung (base.css) ist das Feedback */

/* Semantic — surfaces */
--surface-page:var(--white);
--surface-subtle:var(--gray-100);
--surface-card:var(--white);
--surface-brand:var(--navy-800);
--surface-brand-deep:var(--navy-900);
--surface-accent:var(--green-500);
--surface-accent-soft:var(--green-100);
--surface-highlight:var(--orange-500);

/* Semantic — borders */
--border-subtle:var(--gray-200);
--border-strong:var(--gray-300);
--border-brand:var(--navy-800);
--border-focus:var(--green-500);

/* Semantic — interactive */
--action-primary:var(--green-500);
--action-primary-hover:var(--green-700);
--action-primary-text:var(--white);
--action-secondary:var(--navy-800);
--action-secondary-hover:var(--navy-500);
--action-secondary-text:var(--white);

/* Semantic — status */
--status-success:var(--green-500);
--status-success-soft:var(--green-100);
--status-warning:var(--orange-500);
--status-warning-soft:var(--orange-100);
--status-error:#C63A1E; /* derived: darker orange for legible error text */
--status-error-soft:#FBE3DC;
--status-info:var(--navy-800);
--status-info-soft:var(--navy-100);
}
:root,body{
/* One family, three weights (Bliss 2 Light / Medium / Bold). Fallback Alegreya Sans. */
--font-sans:var(--e-global-typography-text-font-family,"Bliss 2"),"Bliss2","Alegreya Sans","Gill Sans","Trebuchet MS",sans-serif;
--font-display:var(--font-sans);
--font-body:var(--font-sans);

--weight-light:300;   /* body copy (Bliss2-Light) */
--weight-regular:400;
--weight-medium:500;  /* UI labels, nav (Bliss2-Medium) */
--weight-bold:700;    /* headings, names, emphasis (Bliss2-Bold) */

/* Scale (px) — EINE saubere Basis, keine Multiplikatoren, keine Ad-hoc-Bumps.
   Jede Stufe ist einer Rolle zugeordnet: */
--text-xs:12px;    /* Kleingedrucktes / rechtliche Hinweise */
--text-sm:14px;    /* label, caps */
--text-small:16px; /* small — kleine Hinweise, Fußnoten */
--text-base:17px;  /* button */
--text-md:19px;    /* body — Standard-Fließtext (auch in Cards) */
--text-lg:22px;    /* h4, section-title/eyebrow, lead */
--text-xl:28px;    /* h3 */
--text-2xl:36px;   /* h2 */
--text-3xl:48px;   /* h1 */
--text-4xl:60px;   /* display — nur Hero/Header */

--leading-tight:1.1;
--leading-snug:1.25;
--leading-normal:1.5;
--leading-relaxed:1.65;

--tracking-tight:-0.01em;
--tracking-normal:0;
--tracking-caps:0.08em; /* uppercase labels: SPRECHZEITEN, DR. DIANA KELLER */
--tracking-body:0.02em; /* minimal Laufweite for running text */

/* Roles */
--type-display:var(--e-global-typography-vddisplay-font-weight,700) var(--e-global-typography-vddisplay-font-size,60px)/var(--e-global-typography-vddisplay-line-height,1.1) var(--font-sans);
--type-h1:var(--e-global-typography-vdh1-font-weight,700) var(--e-global-typography-vdh1-font-size,48px)/var(--e-global-typography-vdh1-line-height,1.1) var(--font-sans);
--type-h2:var(--e-global-typography-primary-font-weight,700) var(--e-global-typography-primary-font-size,36px)/var(--e-global-typography-primary-line-height,1.25) var(--font-sans);
--type-h3:var(--e-global-typography-vdh3-font-weight,700) var(--e-global-typography-vdh3-font-size,28px)/var(--e-global-typography-vdh3-line-height,1.25) var(--font-sans);
--type-h4:var(--e-global-typography-vdh4-font-weight,700) var(--e-global-typography-vdh4-font-size,22px)/var(--e-global-typography-vdh4-line-height,1.25) var(--font-sans);
--type-subtitle:300 var(--e-global-typography-secondary-font-size,22px)/var(--e-global-typography-secondary-line-height,1.5) var(--font-sans); /* 22px — section-title/eyebrow (grün, versal via .eyebrow) */
--type-lead:var(--e-global-typography-vdlead-font-weight,300) var(--e-global-typography-vdlead-font-size,22px)/var(--e-global-typography-vdlead-line-height,1.65) var(--font-sans);    /* 22px */
--type-body:var(--e-global-typography-text-font-weight,300) var(--e-global-typography-text-font-size,19px)/var(--e-global-typography-text-line-height,1.5) var(--font-sans);      /* 19px — Standard-Fließtext */
--type-body-strong:var(--e-global-typography-vdstrong-font-weight,700) var(--e-global-typography-vdstrong-font-size,19px)/var(--e-global-typography-vdstrong-line-height,1.5) var(--font-sans);/* 19px bold */
--type-small:var(--e-global-typography-vdsmall-font-weight,300) var(--e-global-typography-vdsmall-font-size,16px)/var(--e-global-typography-vdsmall-line-height,1.5) var(--font-sans);  /* 16px */
--type-small-strong:var(--weight-bold) var(--text-small)/var(--leading-normal) var(--font-body); /* 16px bold */
--type-label:var(--weight-medium) var(--text-sm)/1.2 var(--font-body);
--type-caps:var(--weight-bold) var(--text-sm)/1.2 var(--font-body); /* + uppercase + tracking-caps */
--type-button:var(--weight-medium) var(--text-base)/1 var(--font-body);
}
/* Phone sizes of banner headline, H2 and eyebrow: set in the Elementor globals (mobile ≤600px). */
:root,body{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;

/* Content width and section padding are Elementor settings (kit "Inhaltsbreite" 1200px, layout.php). */
--container-narrow:760px;
--gutter:var(--space-6);
/* Vertical breathing room around buttons (Elementor buttons: Advanced → Margin) */
--btn-y:25px;

--radius-sm:4px;
--radius-md:8px;
--radius-lg:16px;
/* Rundung der großen Textkästen (Eyebrow/Headline/Copy/Button). GLOBAL, damit
   sie auch standalone (außerhalb .vd-split) konsistent 30px haben. */
--radius-box-lg:30px;
--radius-pill:999px;
--radius-card:var(--radius-md);
--radius-button:var(--radius-pill);
--radius-input:var(--radius-sm);
/* Innenrundung der kleinen Notch-Boxen (Außenradius --radius-box-sm minus
   Kontur-Dicke --gap = konstant 12px, per Design). Gemeinsame Quelle, damit
   Notch-Innenradius und angeglichene Karten (z. B. Leistungen) synchron bleiben. */
--radius-notch-inner:12px;

--control-h-sm:36px;
--control-h-md:44px;
--control-h-lg:52px;
}
:root,body{
/* Flat brand; shadows are soft and rare (lifted cards, dialogs) */
--shadow-sm:0 1px 2px rgba(0,28,46,.06);
--shadow-md:0 4px 16px rgba(0,28,46,.10);
--shadow-lg:0 12px 40px rgba(0,28,46,.16);
--focus-ring:0 0 0 3px rgba(124,174,34,.45);

--ease-out:cubic-bezier(.2,.7,.2,1);/* @kind other */
--duration-fast:120ms;/* @kind other */
--duration-base:200ms;/* @kind other */
--duration-slow:320ms;/* @kind other */

/* Protection gradient over photography (b&w imagery under navy) */
--overlay-navy:linear-gradient(180deg,rgba(0,28,46,0) 0%,rgba(0,28,46,.75) 100%);/* @kind other */
--overlay-navy-flat:rgba(0,44,64,.55);
--image-filter:grayscale(1) contrast(1.05);/* @kind other */
}

/* 2. Base (reference tokens/base.css) -------------------------------------- */
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);letter-spacing:var(--tracking-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--text-primary)}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}h4{font:var(--type-h4)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font-family:var(--font-body)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
::selection{background:var(--green-300);color:var(--navy-900)}

/* 3. Elementor normalisation ------------------------------------------------
   Heading/text widgets: the wrapper carries the reference class, the inner tag inherits. */
.elementor-widget-heading .elementor-heading-title{font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-wrap:inherit;text-align:inherit}
.elementor-widget-heading:is(.title,.card__title){color:var(--text-primary)}
.elementor-widget-text-editor p{margin:0}
/* Elementor sets min-width:0 on containers and widgets; the reference relies on the default (auto),
   which decides how far grid/flex items may shrink (e.g. the hours card on tablets). */
.elementor .e-con,.elementor .e-con .elementor-widget{min-width:auto}
/* …but not in grids: a column is its share of the row (like the reference's minmax(…px,1fr)),
   long words or the opening hours must not widen it. Inside the opening hours card the hours
   may stick out into the card's right padding (room for the badge), as in the reference. */
.elementor .e-con.e-grid:not(.vd-split__media) > :is(.e-con,.elementor-widget){min-width:0}
.elementor a{text-decoration:none}
.elementor a:hover{text-decoration:underline}
.elementor-widget-image{text-align:left}
.elementor-widget-image a{display:block}
/* Lucide icons are stroke icons; never let Elementor's fill rules colour them in.
   !important: Elementor's per-element hover rule (".elementor-N .elementor-element-X
   .elementor-button:hover svg{fill:…}", from the button's hover text colour) is more
   specific and would fill the icon solid on hover. The stroke follows currentColor. */
.elementor svg[fill="none"]{fill:none !important}

/* 4. Layout ------------------------------------------------------------------
   Layout lives in the Elementor panel (build/layout.php): sections are boxed containers
   (content width = kit "Inhaltsbreite" 1200px, 24px side padding), grids and stacks are
   Grid/Flexbox containers with their gaps, boxes carry padding, radius and shadow there.
   Left here: what Elementor can't express. */
/* overflow-x:clip: the notches overhang the content; on narrow screens that must not cause sideways scrolling.
   --section-bg: the notches' border takes the colour of the section they sit in. */
.e-con.section{--section-bg:var(--white);overflow-x:clip}
.e-con.section--gray{--section-bg:var(--gray-100)}

.eyebrow{font:var(--type-subtitle);color:var(--text-accent);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-caps)}
.eyebrow--ondark{color:var(--green-400)}
@media (max-width:600px){.eyebrow,.eyebrow .elementor-heading-title{font-size:16px;line-height:1.4}}
.title{color:var(--text-primary);text-wrap:pretty;margin:0}
.elementor-widget-heading.title--ondark{color:#fff}
.title--display{font:var(--type-display)}
.title--h2{font:var(--type-h2)}
/* Phones: German compound words ("Selbstbedienungsautomat") are wider than the box.
   The reference overflows the screen here; hyphenate instead. */
@media (max-width:600px){.title,.card__title{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:16 7 7;overflow-wrap:break-word}}

/* Buttons: wrapper = .btn, the anchor = .elementor-button */
.btn .elementor-button{
  box-sizing:content-box;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:var(--type-body-strong);text-decoration:none;cursor:pointer;
  height:var(--control-h-md);padding:0 22px;
  border-radius:var(--radius-button);border:1px solid transparent;fill:none;
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
  white-space:nowrap;
}
.btn .elementor-button-content-wrapper{gap:8px;align-items:center}
/* Phones: a label longer than the column wraps instead of pushing the box wider than the screen. */
@media (max-width:600px){.e-con:not(.header-actions) > .btn .elementor-button{white-space:normal;height:auto;min-height:var(--control-h-md);max-width:calc(100% - 46px);line-height:1.3}}
.btn .elementor-button-icon svg{width:20px;height:20px;flex:0 0 auto}
.btn .elementor-button:hover{text-decoration:none}
/* The button is the only thing in its widget: no line box around it (its 25px margins are the widget's). */
.e-con > .elementor-widget.btn{display:flex}

.btn--primary .elementor-button{background:var(--action-primary);color:var(--action-primary-text)}
.btn--primary .elementor-button:hover{background:var(--green-400);color:var(--navy-900)}
.btn--emergency .elementor-button{background:var(--orange-500);color:#fff}
.btn--emergency .elementor-button:hover{background:var(--orange-400);color:var(--navy-800)}
.btn--outline .elementor-button{background:transparent;border-color:var(--border-brand);color:var(--text-primary)}
.btn--outline .elementor-button:hover{background:var(--navy-50);color:var(--text-primary)}
.btn--ondark .elementor-button{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6);color:#fff}
.btn--ondark .elementor-button:hover{background:rgba(255,255,255,.20);color:#fff}
.btn--lg .elementor-button{height:var(--control-h-lg);padding:0 30px;font:var(--type-lead);font-weight:var(--weight-bold)}

/* Cards (box, padding, radius, shadow, the shared rows in card grids, "Ganze Box verlinken": Elementor panel) */
.e-con:is(.card--navy,.card--green){color:#fff}
.card__title{font:var(--type-h3);margin:0}
.card--navy .elementor-widget-heading.card__title,.card--green .elementor-widget-heading.card__title{color:#fff}

/* Text links built from the Button widget */
.card__link .elementor-button,.tel-link .elementor-button{
  display:flex;align-items:center;padding:0;background:none;border-radius:0;text-align:left;white-space:normal;
  font:var(--type-body-strong);color:var(--text-link);text-decoration:none;
  transition:color var(--duration-fast) var(--ease-out);
}
.card__link .elementor-button-content-wrapper,.tel-link .elementor-button-content-wrapper{justify-content:flex-start}
.card__link .elementor-button-content-wrapper{gap:6px;align-items:center}
.card__link .elementor-button-icon svg{width:18px;height:18px;flex:0 0 auto}
.card__link .elementor-button:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
.card--green .card__link .elementor-button{color:#fff}
.tel-link .elementor-button-content-wrapper{gap:8px;align-items:center}
.tel-link .elementor-button-icon svg{width:20px;height:20px;flex:0 0 auto}
.tel-link .elementor-button:hover{color:var(--text-link-hover);text-decoration:none}


/* 5. Sections --------------------------------------------------------------- */
/* Hero: photo (image widget) under a navy scrim; the scrim is a pseudo element. */
.e-con.hero{color:#fff}
.hero__img{position:absolute;inset:0;z-index:0}
.hero__img img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 20%;opacity:.55;filter:var(--image-filter)}
.e-con.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,44,64,.95) 0%,rgba(0,44,64,.75) 45%,rgba(0,44,64,.25) 100%)}
.hero__lead{font:var(--type-lead);color:rgba(255,255,255,.92);text-wrap:pretty}

/* vd-split (reference sections.css): sizes of the icon notches and the open/closed badge */
.e-con.vd-split{
  --vd-gap:12px;
  --radius-box-sm:calc(var(--vd-gap) + var(--radius-notch-inner));
  --badge-w:158px;--badge-h:94px;--badge-top:-26px;--badge-right:-18px;
  --icon-size:84px;--icon-offset:-26px;
}
@media (max-width:600px){
  .e-con.vd-split{
    --vd-gap:9px;
    --badge-w:124px;--badge-h:76px;--badge-top:-16px;--badge-right:-10px;
    --icon-size:60px;--icon-offset:-16px;
  }
}
.vd-split__media{height:100%}
.vd-split__media.elementor-widget-image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--radius-box-lg)}


/* 6. Header ------------------------------------------------------------------
   Theme Builder wraps the header in <header class="elementor-location-header">;
   that wrapper is what has to stick. */
.elementor-location-header{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:50}

/* Logo = wordmark + the cat (first animation frame) placed exactly where the logo's own cat was.
   All offsets are in logo units (the original SVG is 317.48 × 85.368). */
.e-con.brand{
  --logo-h:66px;
  --u:calc(var(--logo-h) / 85.368);
  display:block;position:relative;flex:0 0 auto;
  width:calc(var(--u) * 317.48);height:var(--logo-h);
}
.brand__wordmark{position:absolute;top:0;right:0;width:calc(var(--u) * 199.48);height:100%}
/* While the cat is out on the page the wordmark slides left into its place, and back when it returns
   (class set by cat.js). */
.brand__wordmark{transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.e-con.brand.is-cat-out .brand__wordmark{transform:translateX(calc(var(--u) * -118))}
@media (prefers-reduced-motion:reduce){.brand__wordmark{transition:none}}
/* beats Elementor's .elementor-widget-image a img[src$=".svg"]{width:48px} */
.e-con.brand .brand__wordmark a,.e-con.brand .brand__wordmark img{display:block;width:100%;height:100%}
.brand__cat{position:absolute;left:calc(var(--u) * -0.63);top:calc(var(--u) * -20.6);width:calc(var(--u) * 122.6);aspect-ratio:1}
.brand .brand__cat img{display:block;width:100%;height:100%}

.mainnav{flex:0 1 auto}
.mainnav .elementor-nav-menu--main .elementor-nav-menu{display:flex;flex-wrap:nowrap;gap:4px;align-items:center}
.mainnav .elementor-nav-menu--main .elementor-nav-menu::after{display:none} /* clearfix pseudo would add a flex gap */
.mainnav .elementor-nav-menu--main .elementor-nav-menu > li{display:inline-flex;align-items:center}
.mainnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item{
  padding:10px 14px;margin:0;line-height:1.2;display:inline;white-space:normal;
  font:var(--type-label);font-size:var(--text-md);color:var(--navy-800);text-decoration:none;
}
.mainnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.mainnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted{color:var(--green-700);text-decoration:none}
/* Caret: the reference's Lucide chevron instead of Font Awesome's */
.mainnav .sub-arrow{display:inline;padding:0;margin:0 0 0 4.6px} /* = the space before the caret in the reference */
.mainnav .sub-arrow svg{display:none}
.mainnav .sub-arrow::before{
  content:"";display:inline-block;width:16px;height:16px;vertical-align:middle;background:currentColor;
  -webkit-mask:url(../icons/chevron-down.svg) center/contain no-repeat;mask:url(../icons/chevron-down.svg) center/contain no-repeat;
}
.mainnav .elementor-nav-menu--main .menu-item-has-children{position:relative}
/* Dropdown opens on hover/focus via CSS like the reference (SmartMenus' inline styles are overridden). */
.mainnav .elementor-nav-menu--main .sub-menu{
  position:absolute!important;top:100%!important;left:0!important;margin:0!important;
  display:grid!important;gap:2px;min-width:220px!important;width:auto!important;padding:6px;
  background:#fff;border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:60;
  opacity:0;visibility:hidden;transform:translateY(4px);pointer-events:none;
  transition:none; /* closes at once: a fade-out left a see-through strip over the dark hero (the open dropdown reaches ~11px below the header) */
  /* own compositing layer for good: otherwise Chrome re-layers header/hero each time the dropdown shows or hides
     and briefly paints a white full-width strip below the header (looks like the header jumps in height). */
  will-change:opacity,transform;
}
/* Opening fades in (the transition of the target state applies). pointer-events: a hidden dropdown must not
   catch the mouse – otherwise a cursor resting just below it re-opens it, it closes, re-opens … (flicker). */
.mainnav .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
.mainnav .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),visibility var(--duration-fast);
}
.mainnav .elementor-nav-menu--main .sub-menu li{display:block}
.mainnav .elementor-nav-menu--main .sub-menu a.elementor-sub-item{
  display:block;white-space:nowrap;border:0;border-radius:var(--radius-sm);padding:10px 14px;line-height:1.2;
  font:var(--type-label);font-size:var(--text-md);color:var(--navy-800);background:none;
}
.mainnav .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover{background:var(--navy-50);color:var(--green-700);text-decoration:none}


/* Burger (nav-menu toggle) and the mobile menu */
.mainnav .elementor-menu-toggle{width:var(--control-h-md);height:var(--control-h-md);padding:0;border:none;border-radius:0;background:transparent;color:var(--navy-800)}
.mainnav .elementor-menu-toggle svg{width:30px;height:30px}
.mainnav nav.elementor-nav-menu--dropdown{margin:0;background:#fff;transition:none}
.mainnav .elementor-menu-toggle.elementor-active + nav.elementor-nav-menu--dropdown{padding:12px;border-top:1px solid var(--border-subtle)}
.mainnav nav.elementor-nav-menu--dropdown a,.mainnav nav.elementor-nav-menu--dropdown a.elementor-sub-item{
  display:block;padding:12px 16px;border:0;
  font:var(--type-label);font-size:var(--text-md);color:var(--navy-800);background:none;
}
.mainnav nav.elementor-nav-menu--dropdown a:hover,.mainnav nav.elementor-nav-menu--dropdown a.highlighted{background:none;color:var(--green-700);text-decoration:none}
.mainnav nav.elementor-nav-menu--dropdown .sub-menu{display:block!important;position:static!important;width:auto!important;margin:0!important;border:0;box-shadow:none}
.mainnav nav.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item{padding-left:32px;color:var(--navy-700);font-weight:var(--weight-light)}
.mainnav nav.elementor-nav-menu--dropdown .sub-arrow{display:none}

/* Narrow desktops: the reference header is wider than the screen here; tighten the menu instead. */
@media (min-width:901px) and (max-width:1100px){
  .mainnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item{padding-left:10px;padding-right:10px}
}
@media (min-width:901px){
  .mainnav .elementor-menu-toggle,.mainnav nav.elementor-nav-menu--dropdown{display:none}
}
@media (max-width:900px){
  .mainnav .elementor-nav-menu--main{display:none}
  /* Header row stays 132px; the open menu wraps into a full-width row below it and pushes the page down.
     The nav widget's wrapper is dissolved (frontend only) so burger and menu become header items. */
  .e-con.masthead > .brand{margin-right:auto}
  .e-con.masthead > *{margin-block:calc((132px - 66px) / 2)}
  .e-con.masthead > .brand{margin-block:calc((132px - var(--logo-h)) / 2)}
  body:not(.elementor-editor-active) .elementor-element.mainnav{display:contents}
  /* beats Elementor's per-widget toggle alignment (margin:0 auto) */
  .e-con.masthead .mainnav .elementor-menu-toggle{order:3;margin:0 0 0 calc(10px - 24px)}
  .mainnav nav.elementor-nav-menu--dropdown{order:4;flex:0 0 calc(100% + 2 * var(--gutter));margin:0 calc(-1 * var(--gutter))}
  .e-con.brand{--logo-h:min(66px,calc((100vw - 48px - 380px) * 85.368 / 317.48))}
}
/* Icon-only header buttons: on phones (reference) and on narrow desktops, where text buttons + menu don't fit. */
@media (max-width:600px),(min-width:901px) and (max-width:1000px){
  .header-actions .btn .elementor-button{width:var(--control-h-md);padding:0;border-radius:50%;box-sizing:border-box;height:var(--control-h-md)}
  .header-actions .btn .elementor-button-text{display:none}
  .header-actions .btn .elementor-button-icon svg{width:22px;height:22px}
}
@media (max-width:600px){
  .e-con.masthead .mainnav .elementor-menu-toggle{margin:0 0 0 calc(10px - 16px)}
  /* The reference keeps the 66px logo here and overflows the screen; scale it to fit instead. */
  .e-con.brand{--logo-h:clamp(34px,calc((100vw - 48px - 170px) * 85.368 / 317.48),66px)}
}

/* Footer ---------------------------------------------------------------------- */
.e-con.site-footer{color:#fff;font-size:19px}
@media (max-width:600px){.footer-contact .vd-flink + .vd-flink{margin-top:8px}}
.footer-logo img{height:55px;width:auto;display:block}
.footer-practice{font-weight:var(--weight-bold);line-height:1.4}
.footer-caps{font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:#fff;margin-bottom:4px}
.footer-contact p{display:grid;gap:6px;align-content:start}
.footer-contact .vd-flink + .vd-flink{margin-top:-3px}
.footer-address{font-weight:var(--weight-light);line-height:1.5;color:rgba(255,255,255,.85)}
.footer-menu p{display:grid;gap:4px}
.footer-note{font-weight:var(--weight-light);line-height:1.5;color:rgba(255,255,255,.85)}
.footer-bottom .heart{color:var(--green-400)}
.site-footer .vd-flink{color:var(--green-400);font-weight:var(--weight-bold);font-size:inherit;text-decoration:none;display:inline-block;width:fit-content;transition:color var(--duration-fast) var(--ease-out)}
.site-footer .vd-flink:hover{color:var(--green-100);text-decoration:none}

/* Welcome popup (Elementor Pro popup "Willkommen") -------------------------------- */
.elementor-popup-modal.vd-popup{box-sizing:border-box;padding:max(15px,env(safe-area-inset-top)) max(15px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left))}
.vd-popup .dialog-widget-content{width:min(560px,calc(100vw - 30px))!important;box-sizing:border-box}
.popup__text{font:var(--type-body);color:var(--navy-800)}
.vd-popup .dialog-close-button{
  top:10px;right:10px;width:32px;height:32px;margin:0;
  display:inline-grid;place-items:center;justify-content:center;align-items:center;box-shadow:none;outline:none;
  border-radius:50%;background:var(--gray-100);color:var(--gray-500);font-size:18px;
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
/* The reference's Lucide X instead of Elementor's icon */
.vd-popup .dialog-close-button svg,.vd-popup .dialog-close-button i{display:none}
.vd-popup .dialog-close-button::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url(../icons/x.svg) center/contain no-repeat;mask:url(../icons/x.svg) center/contain no-repeat}
.vd-popup .dialog-close-button:hover{background:var(--gray-200);color:var(--navy-800)}

/* 7. Logo cat ----------------------------------------------------------------- */
/* role=button is set by cat.js – with the animation switched off (Praxisdaten) the logo cat stays a plain image. */
.vd-cat-home[role=button] img{cursor:pointer}
.vd-cat-home.is-away img{visibility:hidden}
@media (hover:hover){
  .vd-cat-home[role=button]:not(.is-away):hover img{animation:vd-cat-wiggle .5s ease-in-out}
}
@keyframes vd-cat-wiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}

.vd-cat-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow:visible;pointer-events:none;z-index:45}
.vd-cat-layer.is-front{z-index:60}
.vd-cat-clip{position:absolute;left:0;top:0;width:100%;overflow:clip}
.vd-cat{position:absolute;left:0;top:0;will-change:transform;pointer-events:none}
/* On the page (not mid-jump) the cat can be tapped: it sits down or hops a little (cat.js). */
.vd-cat.is-pokable{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vd-cat img{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;max-width:none}
.vd-cat img.on{visibility:visible}
/* light outline + glow so the navy cat stays visible on dark areas (hero, footer) – always on, also mid-jump */
.vd-cat-layer .vd-cat{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 30px #fff)}
/* Speech bubble after a landing (text from Praxisdaten → Katzen-Animation). cat.js positions it above
   the cat's head and sets --tail (x of the tail inside the bubble). */
.vd-cat-bubble{position:absolute;left:0;top:0;box-sizing:border-box;max-width:200px;width:max-content;padding:6px 11px;
  background:var(--white);color:var(--navy-800);border:2px solid var(--navy-800);border-radius:12px;
  font-size:16px;line-height:1.3;text-align:center;overflow-wrap:break-word;
  box-shadow:0 4px 12px rgba(0,28,46,.15);pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.9);transform-origin:var(--tail,50%) 100%;transition:opacity .2s,transform .2s}
.vd-cat-bubble.is-on{opacity:1;transform:none}
.vd-cat-bubble::before,.vd-cat-bubble::after{content:"";position:absolute;left:var(--tail,50%);top:100%;border-style:solid;border-color:transparent}
.vd-cat-bubble::before{margin-left:-9px;border-width:10px 9px 0;border-top-color:var(--navy-800)}
.vd-cat-bubble::after{margin-left:-6px;border-width:7px 6px 0;border-top-color:var(--white)}
@media (prefers-reduced-motion:reduce){.vd-cat-bubble{transition:none}}

/* 8. Sub pages ------------------------------------------------------------------
   Components the sub pages use on top of the start page (reference components.css,
   sections.css, patterns.css, forms.css, site.css). */

/* Global sections (Template widget): the wrappers must not take part in the layout. */
body:not(.elementor-editor-active) :is(.e-con.vd-include,.vd-include > .elementor-widget-template,.vd-include .elementor-widget-container,.vd-include .elementor-template,.vd-include .elementor-template > .elementor){display:contents}

/* Anchor targets land below the sticky header (also see site.js for Elementor's smooth scroll). */
.elementor [id]{scroll-margin-top:148px}

/* Type */
.title--h1{font:var(--type-h1)}
.title--h3{font:var(--type-h3)}
.lead{font:var(--type-lead);text-wrap:pretty}
.eyebrow--emergency{color:var(--orange-500)}
/* Several paragraphs/lists in one text widget keep the stack's 16px rhythm. */
.e-con.stack > .elementor-widget-text-editor :is(p,ul,ol) + :is(p,ul,ol){margin-top:16px}

/* Notch border colour per section background */
.e-con.section--wash{--section-bg:var(--green-50)}

/* The picture widgets carry their aspect ratio themselves: in Elementor's flex containers an image
   that hasn't loaded yet (lazy) would otherwise count as 0px high and the section jumps on load. */
.vd-split__media--wide{height:auto;aspect-ratio:16/9}
.vd-split__media--wide.elementor-widget-image img{aspect-ratio:16/9;height:auto}
.e-con.vd-split__media--placeholder{color:var(--white)}
.e-con.vd-split__media--square{aspect-ratio:1/1;height:auto;min-height:0}
.placeholder-icon .elementor-icon{display:block;color:#fff;font-size:72px}
.placeholder-icon .elementor-icon svg{width:72px;height:72px}

/* Photo with rounded corners (4:3), grey by default */
.media-figure{aspect-ratio:4/3}
.media-figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);filter:var(--image-filter)}
.media-figure--color img{filter:none}

/* Icons used inside text/HTML (Lucide shapes as CSS masks: <i class="vd-i ico-…">) */
.vd-i{display:inline-block;width:1em;height:1em;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-check{--ico:url(../icons/check.svg)}
.ico-check-circle{--ico:url(../icons/check-circle.svg)}
.ico-send{--ico:url(../icons/send.svg)}
.ico-arrow-right{--ico:url(../icons/arrow-right.svg)}
.ico-arrow-up-right{--ico:url(../icons/arrow-up-right.svg)}

/* Text links */
a.vd-flink{color:var(--green-400);font-weight:var(--weight-bold);font-size:inherit;text-decoration:none;display:inline-block;width:fit-content;transition:color var(--duration-fast) var(--ease-out)}
a.vd-flink:hover{color:var(--green-100);text-decoration:none}
a.vd-flink--onlight{color:var(--green-700)}
a.vd-flink--onlight:hover{color:var(--green-500)}
/* Card links typed into text (FAQ answers): text + arrow */
a.card__link{display:inline-flex;align-items:center;gap:6px;font:var(--type-body-strong);color:var(--text-link);text-decoration:none}
a.card__link:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
a.card__link::after{content:"";width:18px;height:18px;flex:0 0 auto;background:currentColor;-webkit-mask:url(../icons/arrow-right.svg) center/contain no-repeat;mask:url(../icons/arrow-right.svg) center/contain no-repeat}
a.card__link[target="_blank"]::after{-webkit-mask-image:url(../icons/arrow-up-right.svg);mask-image:url(../icons/arrow-up-right.svg)}
.tel-link--emergency .elementor-button{color:var(--orange-500)}
.tel-link--emergency .elementor-button:hover{color:var(--orange-400)}
/* Footer: link built from a Button widget (text/link from "Praxisdaten") */
.vd-flink-btn .elementor-button{display:inline-block;padding:0;border:0;border-radius:0;background:none;font:inherit;font-weight:var(--weight-bold);line-height:inherit;letter-spacing:inherit;color:var(--green-400);text-align:left;transition:color var(--duration-fast) var(--ease-out)}
.vd-flink-btn .elementor-button-content-wrapper{display:inline}
.vd-flink-btn .elementor-button:hover{color:var(--green-100);text-decoration:none}

/* Lists */
ul.checklist{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.checklist li{display:flex;gap:var(--space-3);align-items:flex-start}
.checklist li::before{content:"";flex:0 0 auto;width:22px;height:22px;margin-top:2px;background:var(--text-accent);-webkit-mask:url(../icons/check.svg) center/contain no-repeat;mask:url(../icons/check.svg) center/contain no-repeat}
ul.bullets{margin:0;padding-left:1.2em;display:grid;gap:var(--space-3)}
.bullets li{font:var(--type-body-strong)}

/* Service catalogue (Leistungen, English page; jump chips and icon headings: VetDuo widgets) */
.e-con.svc-cat{scroll-margin-top:148px}
/* The list fills the card's shared row track (like the reference ul), so its rows stretch too. */
.e-con.svc-cat > .svc-list-w{display:grid}

/* FAQ (widget "FAQ-Liste", plugin vetduo-widgets): links in answers, "Weitere Fragen" line */
a.faq__link{display:inline-flex;align-items:baseline;gap:4px;color:var(--text-link);text-decoration:none}
a.faq__link:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
a.faq__link::after{content:"";width:16px;height:16px;flex:0 0 auto;align-self:center;background:currentColor;-webkit-mask:url(../icons/arrow-up-right.svg) center/contain no-repeat;mask:url(../icons/arrow-up-right.svg) center/contain no-repeat}
.faq-more{color:var(--text-primary)}
.faq-more p{max-width:60ch}
.faq-more strong{font-weight:var(--weight-bold)}

/* Contact data block (Kontakt) */
.contact-block{display:grid;gap:6px}
.contact-block p{margin:0}
.contact-block__name{color:var(--navy-800);font-weight:var(--weight-bold);line-height:1.4}
.contact-block__address{color:var(--navy-800);line-height:1.5;margin-top:12px}

/* Legal texts */
.legal.elementor-widget-text-editor p{margin:0 0 var(--space-4);line-height:1.6}
.legal h2{margin:var(--space-6) 0 var(--space-2)}
.legal ul{margin:0 0 var(--space-4);padding-left:1.25em;line-height:1.6}
.legal li{margin:0 0 4px}
.legal a.vd-flink[target="_blank"]::after{content:"";display:inline-block;width:1em;height:1em;margin-left:.25em;vertical-align:-0.12em;background:currentColor;-webkit-mask:url(../icons/arrow-up-right.svg) center/contain no-repeat;mask:url(../icons/arrow-up-right.svg) center/contain no-repeat}

/* 9. Icon pattern (reference patterns.css) ----------------------------------------
   The reference draws an SVG pattern with JS into .vet-pattern; here the same pattern
   (assets/img/pattern.svg, rotated tile of heart/cross/paw) is a mask on ::before. */
.e-con.pat{position:relative;overflow:hidden;isolation:isolate}
.e-con.pat::before{
  content:"";display:block;position:absolute;inset:0;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;
  border:0;border-radius:inherit;transition:none;
  background:var(--pat-color);opacity:var(--pat-opacity);mix-blend-mode:var(--pat-blend,normal);
  -webkit-mask:url(../img/pattern.svg) 0 0/100% 100% no-repeat;mask:url(../img/pattern.svg) 0 0/100% 100% no-repeat;
}
.e-con.pat > *{position:relative;z-index:1}
.e-con.pat--gruen{--pat-color:#fff;--pat-opacity:.08}
.e-con.pat--navy{--pat-color:#000;--pat-opacity:.28;--pat-blend:multiply}
.e-con.pat--hellgruen{--pat-color:var(--green-500);--pat-opacity:.08}
.e-con.pat--hellgruen-hell{--pat-color:#fff;--pat-opacity:.37}
.e-con.pat--weiss{--pat-color:var(--green-500);--pat-opacity:.08}
.e-con:is(.pat--gruen,.pat--navy) :is(h1,h2,h3,h4,p,li,a,dt,dd,span){color:#fff}

/* 10. Contact form (Contact Form 7, reference forms.css) --------------------------- */
.wpcf7 .screen-reader-response{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;word-wrap:normal}
.wpcf7 .hidden-fields-container,.wpcf7-not-valid-tip,.wpcf7 .wpcf7-spinner{display:none}
.vd-hp{position:absolute;left:-9999px}
.wpcf7-form.form{display:grid;gap:var(--space-5);max-width:var(--container-narrow)}
.form .wpcf7-form-control-wrap{display:block;position:relative}
.form__row{display:grid;gap:var(--space-5)}
@media (min-width:640px){.form__row--split{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:var(--space-2)}
.field__label{font:var(--type-body-strong);color:var(--text-primary)}
.field__req{color:var(--text-primary)}
.field__error{font:var(--type-small);color:var(--status-warning);display:none}
.field.is-invalid .field__error{display:block}
.form :is(.input,.textarea){
  width:100%;box-sizing:border-box;
  font:var(--type-small);letter-spacing:normal;color:var(--text-body);background:var(--white);
  border:1px solid var(--border-strong);
  transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);
}
.form .input{height:var(--control-h-md);padding:0 var(--space-5);border-radius:var(--radius-button)}
.form .textarea{display:inline-block;min-height:160px;height:160px;padding:var(--space-4) var(--space-5);border-radius:var(--radius-box-lg);resize:vertical}
.form :is(.input,.textarea):focus{outline:none;border-color:var(--border-brand);box-shadow:var(--focus-ring)}
.field.is-invalid :is(.input,.textarea){border-color:var(--status-warning)}
.form :is(.input,.textarea)::placeholder{color:var(--gray-500)}
.textarea-wrap{position:relative;display:block}
.char-count{position:absolute;right:var(--space-4);bottom:var(--space-3);font:var(--type-small);color:var(--gray-500);pointer-events:none;background:var(--white);padding-left:6px}
/* Round marks for salutation (radio) and consent (checkbox) */
.form input:is([type="radio"],[type="checkbox"]){
  appearance:none;-webkit-appearance:none;box-sizing:border-box;
  width:22px;height:22px;margin:0;flex:0 0 auto;
  border:1px solid var(--border-strong);border-radius:50%;background:var(--white);cursor:pointer;
  transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out);
}
.form input:is([type="radio"],[type="checkbox"]):checked{
  background:var(--navy-800) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat;
  border-color:var(--navy-800);
}
.form input:is([type="radio"],[type="checkbox"]):focus-visible{box-shadow:var(--focus-ring)}
.field.is-invalid input:is([type="radio"],[type="checkbox"]){border-color:var(--status-warning)}
.form .wpcf7-radio{display:flex;flex-wrap:wrap;gap:var(--space-5)}
.form .wpcf7-list-item{display:inline-flex;margin:0}
.form .wpcf7-radio label{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;font:var(--type-body-strong);color:var(--text-primary)}
.form .check .wpcf7-list-item{display:block}
.form .check label{display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:start;cursor:pointer}
.form .check .wpcf7-list-item-label,.check__text{font:var(--type-small);color:var(--text-primary)}
.check__text a{color:var(--text-link)}
.form__note{font:var(--type-small);color:var(--text-primary)}
.form__footer{display:grid;gap:var(--space-4)}
.form .vd-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:var(--type-body-strong);letter-spacing:normal;cursor:pointer;
  height:var(--control-h-md);padding:0 22px;margin-block:var(--btn-y);
  border-radius:var(--radius-button);border:1px solid transparent;white-space:nowrap;
  background:var(--action-primary);color:var(--action-primary-text);
  transition:background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out);
}
.form .vd-submit .vd-i{width:20px;height:20px}
.form .vd-submit:hover{background:var(--green-400);color:var(--navy-900)}
.form .vd-submit:disabled{opacity:.6;cursor:default}
.wpcf7-form.submitting .vd-submit{opacity:.6}
/* Sent: the thank-you box replaces the form */
.form-thanks{display:none}
.wpcf7-form.sent > :not(.form-thanks){display:none}
.wpcf7-form.sent > .form-thanks{display:block}
.toast{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:var(--radius-md);border:1px solid}
.toast__icon{flex:0 0 auto;margin-top:2px;display:flex}
.toast__icon .vd-i{width:22px;height:22px}
.toast__body{display:grid;gap:4px;font:var(--type-body)}
.toast__title{font:var(--type-body-strong)}
.toast--success{background:var(--status-success-soft);border-color:var(--status-success)}
.toast--success .toast__icon{color:var(--status-success)}
/* Server answer (only shown when sending failed) */
.wpcf7-response-output{display:none}
.wpcf7-form:is(.failed,.aborted,.spam) .wpcf7-response-output{display:block;margin:0;padding:16px 20px;border:1px solid var(--status-warning);border-radius:var(--radius-md);background:var(--status-warning-soft);color:var(--text-primary)}

/* 11. Header/footer additions -------------------------------------------------------- */
/* Current page in the main menu (not for anchor links on the English page) */
/* (selector strong enough to beat the menu typography Elementor prints from the global "Menü") */
.e-con .mainnav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active:not(.elementor-item-anchor){color:var(--green-700);font-weight:900}
/* Footer menu = Nav Menu widget (vertical), styled like the reference links */
.footer-nav .elementor-nav-menu--main .elementor-nav-menu{display:grid;gap:4px;flex-direction:column}
.footer-nav .elementor-nav-menu--main .elementor-nav-menu::after{display:none}
.footer-nav .elementor-nav-menu--main .elementor-nav-menu > li{display:block;border:0;line-height:var(--leading-normal)}
.e-con .footer-nav .elementor-nav-menu--main a.elementor-item{
  display:inline-block;width:fit-content;padding:0;margin:0;border:0;
  font:inherit;font-weight:var(--weight-bold);line-height:var(--leading-normal);color:var(--green-400);
  transition:color var(--duration-fast) var(--ease-out);
}
.e-con .footer-nav .elementor-nav-menu--main a.elementor-item:hover{color:var(--green-100);text-decoration:none}