/* ==========================================================================
   MEDICO — styling that Elementor's own controls do not express.
   Every rule here is Tier B: a native widget doing the job, this file only
   supplying appearance. No layout is created here that Elementor cannot
   already see, so the client can still move and edit every element.
   ========================================================================== */

:root{
  --md-petrol:#24400E; --md-petrol-700:#1B300A; --md-petrol-400:#557435;
  --md-green:#4A8519;  --md-green-text:#3F7016; --md-green-light:#8BB656;
  --md-orange:#C75300;
  --md-tint:#EEF3E3;   --md-cream:#FBFAF6;      --md-line:#E3E5DA;
  --md-ink:#20241C;    --md-muted:#4A4A46;
  --md-radius:14px;    --md-radius-lg:22px;
  --md-shadow:0 1px 2px rgba(36,64,14,.05),0 12px 32px -12px rgba(36,64,14,.18);
}

/* The kit writes line-height as 1.68em, which resolves to a FIXED 28.56px and
   inherits that px value to every child — so .95rem card copy and the review
   text were laid out on 17px leading instead of their own. A unitless value
   recomputes per element, as the design does. Elementor puts kit typography on
   a .elementor-kit-<id> class, which outranks a bare `body` selector, hence
   !important. */
body{ background:var(--md-cream); line-height:1.68!important; }

/* Elementor's grid container defaults grid_rows_grid to 2fr, so every grid
   gets an empty second row and stretches its items to fill it — that alone
   made the imported page 4,645px taller than the approved design. Setting it
   in the widget JSON does not help (unit:"auto" is ignored), so let the rows
   size to their content here. Boxed grids put the grid on .e-con-inner,
   full-width grids on the element itself. */
.e-con.e-grid.e-con-full,
.e-con.e-grid > .e-con-inner{ grid-template-rows:auto!important; }

/* Elementor gives every nested container 10px of padding (gotcha 28). On a
   layout wrapper that is pure overhead: it adds 20px of height each AND
   narrows the row, which pushed the treatment-card copy onto an extra line.
   Zero it on wrappers only — cards and panels keep their own padding. */
.md-sec-head,.md-cards,.md-actions,.md-values,.md-info-strip,
.md-gal3,.md-gal-wide,.md-hero-text,.md-hero-media,
.md-meta-item,.md-split-media,.md-split-text,.md-praxis-text,.md-kontakt-text,
.md-cta-actions,
.md-foot-grid,.md-foot-col,.md-foot-brand,.md-foot-bottom,.md-value{ padding:0!important; }

/* keep the design's smaller band padding on narrow screens */
@media (max-width:767px){
  .e-con.e-parent > .e-con-inner{ padding-block:64px; }
  /* a band wrapper only carries a background: the split nested inside it already
     supplies the section padding, so letting both apply doubles it to 128 */
  .md-band-white > .e-con-inner{ padding-block:0!important; }
  .md-hero > .e-con-inner{ padding-block:48px 56px!important; }
  .md-trust > .e-con-inner{ padding-block:46px!important; }
  .md-page-hero > .e-con-inner{ padding-block:46px 52px!important; }
}

/* ---------------------------------------------------------------- eyebrow */
.md-eyebrow .elementor-heading-title{
  font-size:.72rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px; line-height:1.68;
}
.md-eyebrow .elementor-heading-title::after{
  content:""; height:1px; width:34px; background:currentColor; opacity:.45; flex:0 0 34px;
}
.md-eyebrow.md-center .elementor-heading-title{ justify-content:center; }
.md-eyebrow.md-center .elementor-heading-title::before{
  content:""; height:1px; width:34px; background:currentColor; opacity:.45; flex:0 0 34px;
}

/* ---------------------------------------------------------------- buttons */
.md-btn .elementor-button{
  border-radius:999px; padding:15px 30px; font-weight:600; border:1.5px solid transparent;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.md-btn .elementor-button:hover{ transform:translateY(-2px); }
.md-btn-primary .elementor-button{ background:var(--md-green); color:#fff; }
.md-btn-primary .elementor-button:hover{ background:var(--md-green-text); }
.md-btn-ghost .elementor-button{
  background:transparent; color:var(--md-petrol); border-color:rgba(36,64,14,.22);
}
.md-btn-ghost .elementor-button:hover{ background:rgba(36,64,14,.05); border-color:var(--md-petrol); }
/* Elementor inlines FA as <svg> and the kit fills it white (button text colour),
   which made the ghost buttons' arrow invisible on cream */
.md-btn-ghost .elementor-button-icon svg{ fill:currentColor; }
.md-btn-ondark .elementor-button{ background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.md-btn-ondark .elementor-button:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.md-actions{ margin-top:0; }
.md-actions.md-center{ margin-top:0; }
/* justify-content only centres items narrower than the row; the button widget
   is width:100%, so the "centred" ghost buttons sat on the left */
.md-actions.md-center > .elementor-widget{ width:auto!important; }

/* ----------------------------------------------------------------- header */
/* Sticky lives on the theme-builder wrapper (medico-core plugin): Elementor
   leaves <div data-elementor-type="header"> static, so sticky on this
   container never stuck. This rule only supplies the glass look. */
.md-header{
  background:rgba(251,250,246,.88)!important;
  backdrop-filter:saturate(160%) blur(12px); -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;
}
/* The header's own flex row lands on .e-con-inner and is correct. What breaks
   it is the three child containers: Elementor computes their width as 20px
   (their default 10px padding, content contributing nothing), so the logo and
   the menu overflow a 20px box. width:auto lets them size to their content. */
.md-header .e-con-inner > .e-con{ width:auto!important; padding:0!important; }
/* the container's own vertical padding did not survive; set the bar height here
   (design: 44px logo + 14px top/bottom = 72px) */
.md-header > .e-con-inner{ padding-top:14px; padding-bottom:14px; }
.e-con.md-brand,.e-con.md-header-cta{ flex:0 0 auto!important; }
.e-con.md-nav-wrap{ flex:1 1 auto!important; }
/* The widget's own width control produced width:0 — size the image here. */
/* !important on height too: Elementor's own image rule (height:auto) loads after
   this sheet and won at equal specificity, so the 36px mobile size never applied
   and the 183px-wide logo pushed the CTA over it. */
.md-logo img{ height:44px!important; width:auto!important; max-width:none; display:block; }
@media (max-width:640px){ .md-logo img{ height:36px!important; } }
.e-con.md-brand{ min-width:0; }
.md-nav-wrap{ justify-content:center; }
.md-nav-phone .elementor-heading-title{ font-size:.94rem; font-weight:600; white-space:nowrap; }
.md-nav-phone a{ color:inherit; text-decoration:none; }
.md-nav .elementor-item{ font-size:.94rem; font-weight:500; color:var(--md-petrol); }
@media (max-width:1024px){ .md-nav-phone{ display:none; } }
/* Mobile: logo + burger only. Fitting the CTA in as well pushed the header to
   163px, and once it fitted it overlapped first the burger and then the logo.
   The burger menu carries every link and the hero's own "Termin online buchen"
   button sits immediately below, so the header CTA earns nothing here. */
/* Mobile: logo | small "Termin buchen" | burger — the design's own order. The
   phone number is already hidden below 1024. padding-block needs !important:
   the generic `.e-con.e-parent > .e-con-inner{padding-block:64px}` mobile rule
   above outranks this selector and was making the bar 192px tall. */
@media (max-width:767px){
  .md-header > .e-con-inner{ flex-wrap:nowrap!important; padding-block:10px!important; gap:12px!important; }
  .e-con.md-brand{ flex:1 1 auto!important; }
  .e-con.md-header-cta{ display:flex!important; flex:0 0 auto!important; order:1; }
  .e-con.md-nav-wrap{ flex:0 0 auto!important; order:2; }
  .md-header-cta .md-btn .elementor-button{ padding:12px 20px; font-size:.88rem; }
  .md-header-cta .elementor-button-icon{ display:none; }
  .md-nav .elementor-menu-toggle{ padding:8px; }
  /* Elementor widgets are width:100% of their container; in a row that lets the
     brand column collapse to 27px (its widget "needs" no width) and the nav
     column claim 120px for a 38px burger. Size both to their content. */
  .md-brand > .elementor-widget,.md-nav-wrap > .elementor-widget{ width:auto!important; }
  /* Pro's collapsed dropdown <nav> sits in flow at the width of its longest
     item (120px) and keeps the burger column that wide. Take it out of flow:
     the sticky header wrapper is its containing block, so this is the
     design's full-width panel under the bar. */
  .e-con.md-nav-wrap,.md-nav-wrap > .elementor-widget{ position:static!important; }
  .md-nav-wrap .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:absolute!important; left:0; right:0; top:100%; width:auto!important; background:var(--md-cream);
    border-top:1px solid var(--md-line); box-shadow:0 18px 30px -20px rgba(36,64,14,.35);
  }
  .md-nav-wrap .elementor-nav-menu--dropdown a{ padding:15px 24px; font-size:1rem; color:var(--md-petrol); border-bottom:1px solid var(--md-line); }
}

/* ------------------------------------------------------------------- hero */
.md-hero-h1 .elementor-heading-title em{ font-style:normal; color:var(--md-green-text); }
.md-lead p{ font-size:1.12rem; color:var(--md-muted); }
/* the design caps the hero intro at 44ch */
.md-hero .md-lead p{ max-width:44ch; font-size:1.16rem; }
.md-hero-meta{ margin-top:38px; padding-top:26px; border-top:1px solid var(--md-line); }
/* the design lets these three size to their content (flex + gap); equal grid
   columns are only 143px wide and wrap "transparente Preise..." onto 4 lines */
.md-hero-meta,.md-hero-meta > .e-con-inner{
  display:flex!important; flex-wrap:wrap; gap:22px 34px; }
.md-hero-meta{ padding:26px 0 0!important; }
.md-hero-meta .md-meta-item,
.md-hero-meta .md-meta-item > .e-con-inner{ width:auto!important; flex:0 0 auto!important;
  padding:0!important; gap:0!important; }
.md-meta-big .elementor-heading-title{ font-size:1.35rem; font-weight:600; line-height:1.25; }
.md-meta-small p{ font-size:.9rem; margin:0; color:var(--md-muted); }
.md-hero-img img,.md-split-img img,.md-gal3 img,.md-gal-wide img{
  /* block, not the inline-block Elementor leaves: an inline image sits in a line
     box, so while it is still lazy-loading its wrapper collapses to one
     line-height (27px) and the stacked mobile layout loses the whole photo */
  display:block;
}
.md-hero-img img,.md-split-img img{
  border-radius:var(--md-radius-lg); box-shadow:var(--md-shadow);
  width:100%; aspect-ratio:4/5; object-fit:cover;
}
.md-hero-media{ position:relative; }
/* decorative panel behind the photo — ::after, because ::before already
   belongs to Elementor's background overlay (gotcha 31) */
.md-hero-media::after{
  content:""; position:absolute; right:-22px; bottom:-22px; width:56%; height:38%;
  background:var(--md-tint); border-radius:var(--md-radius-lg); z-index:-1;
}

/* trust band, pricing, reviews, contact list: medico-core widgets (tier C) —
   their styling ships with the plugin, nothing to override here. */

/* --------------------------------------------------------------- sections */
.md-sec-head{ max-width:620px; }
.md-sec-head.md-center{ margin-left:auto; margin-right:auto; text-align:center; }

/* pills */
.md-pills{ display:flex; flex-wrap:wrap; gap:9px; list-style:none; padding:0; margin:26px 0 30px; }
.md-pills li{
  font-size:.83rem; font-weight:500; color:var(--md-petrol); background:#fff;
  border:1px solid var(--md-line); border-radius:999px; padding:7px 15px;
}
/* signature */
.md-sig{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:0; }
.md-sig b{ font-size:1.15rem; font-weight:600; color:var(--md-petrol); }
.md-sig span{ font-size:.88rem; color:var(--md-muted); }

/* treatment cards */
.md-card{
  background:var(--md-cream); border:1px solid var(--md-line); border-radius:var(--md-radius-lg);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.md-card:hover{ transform:translateY(-4px); box-shadow:var(--md-shadow); border-color:#D2DCC2; }
.md-card-num .elementor-heading-title{ font-size:.9rem; font-weight:600; letter-spacing:.04em; }
.md-card-title{ margin-top:0; }
.md-card-text p{ font-size:.95rem; margin:0; color:var(--md-muted); }

/* ------------------------------------------------------- praxis 3-up grid */
.md-gal3 img{ border-radius:var(--md-radius); width:100%; height:100%; object-fit:cover; }
.md-gal3 .md-gal3-tall{ grid-row:span 2; }
.md-gal3 .md-gal3-tall img{ aspect-ratio:3/4.4; }
.md-gal3 .md-gal3-a img,.md-gal3 .md-gal3-b img{ aspect-ratio:4/3; }
@media (max-width:640px){ .md-gal3 .md-gal3-tall{ grid-row:auto; } .md-gal3 .md-gal3-tall img{ aspect-ratio:4/3; } }
.md-gal-img img{ border-radius:var(--md-radius); width:100%; aspect-ratio:3/4; object-fit:cover; }

/* tick list */
.md-ticks .elementor-icon-list-icon i{ color:var(--md-green); font-size:14px; }
.md-ticks .elementor-icon-list-text{ font-size:.98rem; color:var(--md-muted); }

/* ------------------------------------------------------------------- FAQ */
/* the design caps the accordion at 800px and centres it */
.md-faq{ max-width:800px!important; margin-inline:auto; }
.md-faq .e-n-accordion-item-title{ font-size:1.05rem; font-weight:600; color:var(--md-petrol);
  /* the design reserves 44px for its chevron with an absolute ::after, so the
     text keeps the full measure. Elementor's icon sits in flow and takes 25px
     of it (15px icon + 10px gap), so only 19px of padding is left to add. */
  padding:24px 19px 24px 0; }
/* Elementor boxes each accordion row; the design draws one hairline underneath */
.md-faq .e-n-accordion-item,
.md-faq details{ border:0!important; border-bottom:1px solid var(--md-line)!important;
  border-radius:0!important; background:transparent!important; }
/* and it puts the marker on the right, not the left */
.md-faq .e-n-accordion-item-title-icon{ order:1; margin-left:auto; }
/* the box comes from the <summary> and the panel container, not the <details> */
.md-faq .e-n-accordion-item-title,
.md-faq .e-n-accordion-item > .e-con,
.md-faq .e-n-accordion-item > .elementor-element{ border:0!important; background:transparent!important; }
.md-faq .e-n-accordion-item-title-icon{ color:var(--md-green); }

/* ------------------------------------------------------------ heading ink */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title{ color:var(--md-ink); }
.md-cta-title h2.elementor-heading-title{ color:#fff; }
.md-legal-h2 h2.elementor-heading-title{ color:var(--md-petrol); }

/* --------------------------------------------------------------- CTA band */
.md-cta-title .elementor-heading-title{ max-width:16ch; margin:0 auto; }
.md-cta-text p{ color:rgba(255,255,255,.74); max-width:52ch; margin:0 auto; text-align:center; }
.md-cta-actions{ margin-top:14px; flex-wrap:wrap; }

/* --------------------------------------------------------------- contact */
.md-form-wrap{ background:#fff; border:1px solid var(--md-line); border-radius:var(--md-radius-lg); }
.md-form .elementor-field-group label{ font-size:.85rem; font-weight:600; color:var(--md-petrol); margin-bottom:7px; }
.md-form .elementor-field{
  border:1px solid var(--md-line)!important; border-radius:10px!important;
  padding:13px 15px!important; background:var(--md-cream)!important; font-size:.98rem;
}
.md-form .elementor-field:focus{ border-color:var(--md-green)!important; box-shadow:0 0 0 3px rgba(74,133,25,.16); background:#fff!important; }
/* Pro's form button takes the kit's accent (orange) through a later, more
   specific rule; the design's submit is the primary green */
.md-form .elementor-form .elementor-button{ width:100%; border-radius:999px; background:var(--md-green)!important; color:#fff!important; font-weight:600; padding:15px 30px; }
.md-form .elementor-form .elementor-button:hover{ background:var(--md-green-text)!important; }
.md-form-note{ font-size:.8rem; color:var(--md-muted); margin:14px 0 0; }

/* ------------------------------------------------------------- subpages */
.md-crumbs p{ font-size:.83rem; color:var(--md-petrol-400); margin:0 0 18px; }
.md-crumbs a{ color:var(--md-petrol-400); text-decoration:none; }
.md-page-hero > .e-con-inner{ display:block!important; }
.md-page-hero > .e-con-inner > .elementor-element{ max-width:760px!important; }
.md-page-hero .md-page-h1 .elementor-heading-title{ font-size:clamp(2.1rem,4.4vw,3.4rem); }
.md-lead-hero p{ color:var(--md-petrol-400); font-size:1.15rem; margin-top:20px; }
.md-kicker .elementor-heading-title{ font-size:2rem; font-weight:600; opacity:.7; line-height:1; margin-bottom:10px; }
.md-band-white{ padding-left:24px!important; padding-right:24px!important; }
.md-band-white .md-split{ padding-left:0!important; padding-right:0!important; }
@media (max-width:980px){
  .md-split > .e-con-inner{ row-gap:30px!important; }
  /* stacked, the design shows the photo first on a flipped row too */
  .md-flip .md-split-media{ order:-1; }
}
.md-split-media{ position:relative; }
.md-split-media::after{
  content:""; position:absolute; left:-18px; bottom:-18px; width:58%; height:44%;
  background:var(--md-tint); border-radius:var(--md-radius-lg); z-index:-1;
}
.md-flip .md-split-media::after{ left:auto; right:-18px; bottom:auto; top:-18px; }
@media (max-width:980px){ .md-split-media{ max-width:440px; } .md-split-media::after{ display:none; } }

/* pull quote */
.md-pull{
  border-left:3px solid var(--md-green-light); padding:6px 0 6px 26px; margin:34px 0;
  font-size:1.2rem; font-weight:500; line-height:1.55; color:var(--md-petrol);
}
/* the design's .prose is a left-aligned 66ch column inside the page wrap —
   capping the (auto-centred) inner moved the whole block to the middle */
.md-prose > .e-con-inner{ display:block!important; }
.md-prose > .e-con-inner > .elementor-element{ max-width:66ch!important; }
.md-prose p,.md-prose .md-pull,.md-prose .md-sig{ margin:0!important; }
.md-prose > .e-con-inner > .elementor-element{ margin:0 0 16px; }
.md-prose > .e-con-inner > .md-eyebrow{ margin-bottom:14px; }
.md-prose > .e-con-inner > .md-pull-wrap{ margin:34px 0; }
.md-prose > .e-con-inner > .md-sig-wrap{ margin:6px 0 0; }
.md-prose-first p{ font-size:1.13rem; color:var(--md-petrol); font-weight:500; }

/* value cards */
.md-value,.md-value > .e-con-inner{ gap:0!important; }
.md-value h3.elementor-heading-title{ font-size:1.12rem; margin-bottom:9px; }
/* the two-up values grid is capped at 860 and centred in the design */
.md-values-2{ max-width:860px!important; margin-inline:auto; }
/* the design's section head carries margin-bottom:clamp(36px,4vw,54px) = 51.2,
   7px more than the container gap that follows the grid */
.md-values-sec .md-sec-head,.md-after .md-sec-head{ margin-bottom:7px; }
.md-faq-sec > .e-con-inner{ padding-block:clamp(64px,8vw,116px)!important; }
/* the container already contributes a 36px gap, so add only the remainder of the
   design's clamp(36px,4vw,54px) section-head margin */
.md-faq-sec .md-sec-head{ margin-bottom:calc(clamp(36px,4vw,54px) - 36px); }
.md-prices .md-sec-head{ margin-bottom:calc(clamp(36px,4vw,54px) - 40px); }
.md-vnum .elementor-heading-title{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--md-tint); font-size:.95rem; font-weight:600; margin-bottom:16px;
}
.md-value p{ font-size:.95rem; margin:9px 0 0; color:var(--md-muted); }

/* info cards */
.md-info{ background:#fff; border:1px solid var(--md-line); border-radius:var(--md-radius-lg); padding:30px 28px; }
.md-info .elementor-icon-box-wrapper{ text-align:left!important; gap:0!important; }
.md-info .elementor-icon-box-icon{ margin-left:0!important; margin-right:auto!important; margin-bottom:16px!important; }
.md-info .elementor-icon-box-title{ margin-top:0!important; margin-bottom:8px!important; }
.md-info .elementor-icon-box-title,
.md-info .elementor-icon-box-title a,
.md-info .elementor-icon-box-title a:hover{ color:var(--md-petrol)!important; }
.md-info .elementor-icon{
  width:38px; height:38px; border-radius:10px; background:var(--md-tint);
  display:grid; place-items:center; color:var(--md-green-text); font-size:19px;
}
.md-info .elementor-icon-box-title{ font-size:1rem; font-weight:600; color:var(--md-petrol); }
.md-info .elementor-icon-box-description{ font-size:.94rem; color:var(--md-muted); }

/* map panel */
.md-map-panel{ border-radius:var(--md-radius-lg); border:1px solid var(--md-line); text-align:center; }
.md-map-icon .elementor-icon{
  width:38px; height:38px; border-radius:10px; background:#fff; display:grid; place-items:center; font-size:19px;
}
.md-map-addr .elementor-heading-title{ font-size:1.35rem; font-weight:600; color:var(--md-petrol); margin:18px 0 6px; }
.md-map-note p{ font-size:.83rem; color:var(--md-petrol-400); margin:22px 0 0; }

/* ----------------------------------------------------------- legal pages */
.md-legal > .e-con-inner{ max-width:74ch!important; margin-inline:auto;
  display:block!important; }
.md-legal-h2 .elementor-heading-title{
  font-size:clamp(1.35rem,2.2vw,1.75rem); color:var(--md-petrol);
  margin:clamp(38px,4vw,56px) 0 14px;
  padding-top:22px; border-top:1px solid var(--md-line); scroll-margin-top:96px;
}
.md-legal > .e-con-inner > .elementor-element:first-child .elementor-heading-title{
  margin-top:0; padding-top:0; border-top:0; }
.md-legal-body p,.md-legal-body li{ color:var(--md-muted); }
.md-legal-body h3{ font-size:1.02rem; font-weight:600; color:var(--md-petrol); margin:30px 0 10px; }
.md-legal-body ul{ list-style:none; padding:0; margin:0 0 16px; }
.md-legal-body li{ position:relative; padding-left:22px; margin-bottom:8px; font-size:.97rem; }
.md-legal-body li::before{
  content:""; position:absolute; left:2px; top:11px; width:6px; height:6px;
  border-radius:50%; background:var(--md-green); opacity:.55;
}
.md-legal-body a{ color:var(--md-green-text); text-decoration:underline; text-underline-offset:2px;
  /* the statutory text carries long unbroken URLs and mail addresses; on a 375px
     screen they pushed the page to 480px wide and gave it a sideways scroll */
  overflow-wrap:anywhere; }
.md-legal-body .legal-toc{
  background:#fff; border:1px solid var(--md-line); border-radius:var(--md-radius-lg);
  padding:28px 30px; margin-bottom:clamp(30px,4vw,46px);
}
.md-legal-body .legal-toc h2{
  margin:0 0 14px; padding:0; border:0; font-size:.78rem; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--md-green-text);
}
.md-legal-body .legal-toc ol{ margin:0; padding:0; list-style:none; columns:2; column-gap:34px; }
.md-legal-body .legal-toc li{ margin-bottom:9px; padding:0; font-size:.94rem; break-inside:avoid; }
.md-legal-body .legal-toc li::before{ content:none; }
.md-legal-body .legal-toc a{ color:var(--md-petrol); text-decoration:none; }
.md-legal-body .legal-toc a:hover{ color:var(--md-green); }
.md-legal-body .todo{
  background:var(--md-tint); border-left:3px solid var(--md-green); border-radius:0 10px 10px 0;
  padding:18px 22px; margin:0 0 16px;
}
.md-legal-body .todo b{
  display:block; color:var(--md-green-text); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:8px;
}
@media (max-width:640px){ .md-legal-body .legal-toc ol{ columns:1; } }

/* ------------------------------------------------------------- footer */
.md-footer{ color:rgba(255,255,255,.72); font-size:.93rem; }
.md-foot-logo img{ height:48px; width:auto; }
.md-foot-h .elementor-heading-title{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.md-foot-list ul{ list-style:none; padding:0; margin:0; }
.md-foot-list li{ margin-bottom:11px; }
.md-footer a{ color:rgba(255,255,255,.72); text-decoration:none; }
.md-footer a:hover{ color:var(--md-green-light); }
.md-foot-text p,.md-foot-legal p{ color:rgba(255,255,255,.72); margin:0; }
.md-foot-legal p{ font-size:.85rem; }
@media (max-width:640px){ .md-foot-bottom{ flex-direction:column; } }

/* body is --ink (as in the design); these contexts are --muted there */
.md-split-text p,.md-praxis-text p,.md-prose p,.md-legal-body p,.md-legal-body li,
.md-price-note p,.md-rev-cite,.md-form-note{ color:var(--md-muted); }

/* The homepage teaser is .about-grid in the design — .9fr / 1.1fr, so the text
   column is ~54px wider than an even split and its paragraphs wrap on 4 lines
   instead of 5. Elementor's grid control only takes a column COUNT, so the
   uneven tracks have to come from here. */
.md-split.md-about > .e-con-inner{ grid-template-columns:.9fr 1.1fr!important; }
@media (max-width:980px){ .md-split.md-about > .e-con-inner{ grid-template-columns:1fr!important; } }

.md-hero > .e-con-inner{ grid-template-columns:1.05fr .95fr!important; }
@media (max-width:980px){ .md-hero > .e-con-inner{ grid-template-columns:1fr!important; } }
/* Elementor's button ships a tight line-height, so the pill came out 47px
   against the design's 58px — every section holding a button ran short. */
.md-btn .elementor-button{ line-height:1.68; }

/* ---- vertical rhythm inside text columns -------------------------------
   Gotcha 35 in the flesh: these columns had BOTH a 20px container gap and the
   paragraphs' own 1rem bottom margin, so every text block sat 20px further
   apart than the design. Hand the rhythm to the margins, as the design does,
   and let the gap go. */
.md-hero-text,.md-split-text,.md-praxis-text,.md-kontakt-text,.md-sec-head,.md-prose,
.md-hero-text > .e-con-inner,.md-split-text > .e-con-inner,.md-praxis-text > .e-con-inner,
.md-kontakt-text > .e-con-inner,.md-sec-head > .e-con-inner,.md-prose > .e-con-inner{ gap:0!important; }
.md-eyebrow{ margin-bottom:14px!important; }
.md-actions{ margin-top:26px; }
.md-actions.md-center{ margin-top:0; }   /* section container owns that one */
.md-sig-wrap{ margin-top:6px; }
.md-hero-meta{ margin-top:38px; }

/* the design's contact grid is .85fr / 1.15fr — an even split widened the text
   column and dropped the intro line from two lines to one */
.md-kontakt > .e-con-inner{ grid-template-columns:.85fr 1.15fr!important; }
@media (max-width:980px){
  .md-kontakt > .e-con-inner,.md-anfahrt > .e-con-inner{ grid-template-columns:1fr!important; row-gap:32px!important; }
}
/* the design's panels use clamp(26px,3vw,38px) padding; the container control is one value */
@media (max-width:640px){
  .md-form-wrap{ padding:26px!important; }
  .md-map-panel{ padding:32px!important; min-height:0!important; }
}

/* praxis: the design's list carries 14px between items; the icon-list widget
   ships none, which cost the section 42px */
.md-ticks .elementor-icon-list-item{ margin-bottom:14px; }
.md-ticks .elementor-icon-list-items{ margin-bottom:-14px; }

/* FAQ: the accordion title needs the body leading, or each row is 5px short */
.md-faq .e-n-accordion-item-title{ line-height:1.45; }

/* the leading has to go on the title's inner text node, not the <summary> */
.md-faq .e-n-accordion-item-title-text{ line-height:1.45; }
/* the design spaces form rows by 18px; Elementor's default is tighter */
.md-form .elementor-field-group{ margin-bottom:18px!important; }  /* Elementor's own row_gap rule is more specific */

/* the design's praxis list sits 26px below the paragraph */
.md-ticks{ margin-top:26px; }

/* ---- hero availability badge ---- */
.md-hero-badge{
  position:absolute; left:-18px; bottom:34px; z-index:2;
  background:#fff; border-radius:var(--md-radius); padding:14px 20px!important;
  box-shadow:var(--md-shadow); width:auto!important;
}
.md-badge-inner{ display:flex!important; align-items:center; gap:12px; }
.md-dot{
  display:block; width:9px; height:9px; border-radius:50%; background:#3FA34D;
  flex:0 0 9px; box-shadow:0 0 0 4px rgba(63,163,77,.16);
}
.md-badge-txt b{ display:block; font-size:.86rem; font-weight:600; color:var(--md-petrol); line-height:1.35; }
.md-badge-txt small{ display:block; font-weight:400; color:var(--md-muted); font-size:.8rem; }
@media (max-width:640px){ .md-hero-badge{ left:12px; bottom:12px; } }