/* =========================================================
   refine.css — design refinement layer (loaded AFTER site.css)
   Self-contained & reversible: remove the <link> in BaseLayout to revert.
   Covers: typography, 3-surface colour system, service-card polish,
   motion/detail, mobile. Draft for review — not yet committed.
   ========================================================= */

:root {
  /* ── Brand palette: Salbei-olive ────────────────────────────────────────
     SINGLE SOURCE OF TRUTH for every colour on the site.
     Each token is stored as an "r g b" channel triplet so the same token
     serves both solid fills — var(--accent) — and alpha tints —
     rgb(var(--accent-rgb) / .12). A colour therefore changes in exactly
     one place.

     Derived from the previous teal palette by an OKLCH hue rotation that
     preserves lightness (max deviation 0.025 L), so the contrast hierarchy
     the layout was designed around carries over unchanged. Olive hue 128;
     the warm surface sits at hue 98 to stay distinguishable from the cool.
     ──────────────────────────────────────────────────────────────────── */

  /* Ink ramp — olive-neutral, dark to light */
  --ink-950-rgb: 6 10 2;        --ink-950: rgb(var(--ink-950-rgb));
  --ink-900-rgb: 22 28 16;      --ink-900: rgb(var(--ink-900-rgb));
  --ink-800-rgb: 37 43 30;      --ink-800: rgb(var(--ink-800-rgb));
  --ink-700-rgb: 45 51 38;      --ink-700: rgb(var(--ink-700-rgb));
  --ink-600-rgb: 57 63 50;      --ink-600: rgb(var(--ink-600-rgb));
  --ink-500-rgb: 65 72 58;      --ink-500: rgb(var(--ink-500-rgb));
  --ink-400-rgb: 77 84 70;      --ink-400: rgb(var(--ink-400-rgb));
  --ink-350-rgb: 84 91 77;      --ink-350: rgb(var(--ink-350-rgb));
  --ink-300-rgb: 104 111 97;    --ink-300: rgb(var(--ink-300-rgb));
  --ink-100-rgb: 157 165 149;   --ink-100: rgb(var(--ink-100-rgb));

  /* Accent — dark olive. Deliberately darker than the teal it replaces:
     white-on-accent is 6.78:1, where the old teal CTA failed AA at 3.02:1. */
  --accent-rgb: 79 97 55;       --accent: rgb(var(--accent-rgb));
  --accent-hover-rgb: 67 83 48; --accent-hover: rgb(var(--accent-hover-rgb));
  --accent-mid-rgb: 74 91 51;   --accent-mid: rgb(var(--accent-mid-rgb));
  --accent-ink-rgb: 60 75 42;   --accent-ink: rgb(var(--accent-ink-rgb));
  --accent-soft-rgb: 226 236 215; --accent-soft: rgb(var(--accent-soft-rgb));

  /* Dark olive cannot carry a button on the dark band the way the mid-tone
     teal could, so the system gains a light olive for exactly that role. */
  --accent-on-dark-rgb: 174 194 148;   --accent-on-dark: rgb(var(--accent-on-dark-rgb));
  --accent-on-dark-2-rgb: 198 215 176; --accent-on-dark-2: rgb(var(--accent-on-dark-2-rgb));

  /* Signal — "reachable now" on the emergency band. Kept at the original
     lightness and chroma so it is just as loud, hue pulled to 142 so it
     reads as the bright end of our own green rather than a foreign one. */
  --signal-rgb: 137 239 126;    --signal: rgb(var(--signal-rgb));

  /* Surfaces — a deliberate 4-surface system + ink band */
  --s-white-rgb: 255 255 255;   --s-white: rgb(var(--s-white-rgb));
  --s-cool-rgb: 241 244 236;    --s-cool: rgb(var(--s-cool-rgb));
  --s-warm-rgb: 247 246 240;    --s-warm: rgb(var(--s-warm-rgb));
  --s-sink-rgb: 230 236 224;    --s-sink: rgb(var(--s-sink-rgb));
  --s-ink: var(--ink-800);

  /* Soft, layered shadows — tinted with the ink, as before */
  --shadow-sm: 0 1px 2px rgb(var(--ink-800-rgb) / .05), 0 3px 10px rgb(var(--ink-800-rgb) / .05);
  --shadow-md: 0 6px 16px rgb(var(--ink-800-rgb) / .07), 0 14px 34px rgb(var(--ink-800-rgb) / .07);
  --shadow-lg: 0 14px 30px rgb(var(--ink-800-rgb) / .09), 0 30px 70px rgb(var(--ink-800-rgb) / .10);

  /* Webflow primitives from site.css, remapped onto the tokens above so the
     builder-generated rules inherit the rebrand without editing site.css. */
  --primitive-color--primary-900: var(--ink-900);
  --primitive-color--primary-800: var(--ink-900);
  --primitive-color--primary-700: var(--ink-800);
  --primitive-color--primary-600: var(--accent-hover);
  --primitive-color--primary-500: var(--accent);
  --primitive-color--primary-400: var(--ink-350);
  --primitive-color--neutral-50: var(--s-warm);
  --primitive-color--neutral-100: var(--s-cool);
  --primitive-color--neutral-200: var(--s-sink);
  --primitive-color--neutral-300: var(--s-sink);
  --theme-color--success: var(--ink-900);

  /* site.css tints its shadows with the old teal; retint them with the ink. */
  --color-shadow--pramary-5: rgb(var(--accent-rgb) / .05);
  --color-shadow--primary-dark-10: rgb(var(--ink-800-rgb) / .10);
  --color-shadow--dark-80: rgb(var(--ink-900-rgb) / .80);
  --color-shadow--dark-0: rgb(var(--ink-900-rgb) / 0);

  /* Muted body text sitting on the dark footer band. */
  --on-dark-muted-rgb: 212 215 208; --on-dark-muted: rgb(var(--on-dark-muted-rgb));

  --r-lg: 24px;
  --ease: cubic-bezier(.22,.7,.24,1);
  /* Modern Boutique Dental Typography tokens */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --_font---font-family--primary: var(--font-body);
}

/* ---------- Typography (Modern Boutique Clinic) ---------- */
/* Plus Jakarta Sans: Clean, contemporary, welcoming & precise */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .hero-text-split, .hero-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.022em !important;
  font-weight: 600 !important;
  overflow: visible !important;
}
h1, .hero-title, .hero-text-split {
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  overflow: visible !important;
  padding-bottom: 0.15em !important;
}
h2 {
  line-height: 1.18 !important;
  letter-spacing: -0.022em !important;
  overflow: visible !important;
  padding-bottom: 0.08em !important;
}
h3 {
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  overflow: visible !important;
}

/* Ensure no text-split or mask wrappers cut off descenders like 'g', 'p', 'y' */
.hero-text-split,
.hero-text-split *,
h1 *,
h2 * {
  overflow: visible !important;
}

/* Inter: World-standard legibility for healthcare body text & tables */
body {
  font-family: var(--font-body) !important;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p, .p, li {
  font-family: var(--font-body);
  line-height: 1.65;
}

/* Badges & Section Tags */
.badge, .section_tag,
.hero-badge-kassen, .hero-badge-umzug, .hero-badge-kassen *, .hero-badge-umzug * {
  font-family: var(--font-display) !important;
}

/* UI Buttons & Interactive Navigation: Inter (Crisp, High-Legibility Modern Medical Standard) */
button, input, select, textarea,
.nav_link, .button, .btn, .hero_cta, .standort-btn,
.leistung-btn, .location-btn, .hub-btn, .rart-btn, .rhub-btn, .nf-btn,
.button_primary, .button_primary *, .button_text,
.hero-phone-highlight-btn, .hero-phone-label, .hero-phone-num {
  font-family: var(--font-body) !important;
}

.button_primary,
.button_primary .button_text,
.button_text {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  font-size: 15.5px !important;
}

/* ---------- Surfaces: consolidate the muddy tints ---------- */
.kassen-strip,
.standort-sec,
.section_einzugsgebiet { background: var(--s-cool) !important; }

.section_team.is-home,
.section_faq { background: var(--s-warm) !important; }

/* ---------- Service cards: unify + lift ---------- */
.service_item {
  background: var(--s-white) !important;       /* was inconsistent pastels */
  border: 1px solid rgb(var(--ink-800-rgb) / .07);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.service_item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.service-item_image { transition: transform .6s var(--ease); }
.service_item:hover .service-item_image { transform: scale(1.04); }

/* number [NN] -> clean icon chip */
.service-item_number.svc-ico {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--s-cool), var(--s-sink));
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .20);
}
.service-item_number.svc-ico svg { width: 26px; height: 26px; }

/* ---------- Interactive polish ---------- */
.button_primary {
  transition: transform .25s var(--ease), box-shadow .25s var(--ease),
              background-color .25s var(--ease) !important;
}
.button_primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

a:focus-visible, button:focus-visible, .button_primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Mobile polish ---------- */
@media (max-width: 768px) {
  body { line-height: 1.6; }
  html, body { overflow-x: hidden; }                 /* no accidental sideways scroll */
  .button_primary { min-height: 48px; }              /* comfortable tap targets */
  .navbar_link, .footer-menu_link {
    min-height: 40px; display: inline-flex; align-items: center;
  }
  h1 { font-size: clamp(32px, 8.6vw, 46px) !important; }
  h2 { font-size: clamp(26px, 6.6vw, 38px) !important; }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .service_item, .service-item_image, .button_primary { transition: none !important; }
  .service_item:hover { transform: none; }
}

/* ---------- Scroll reveal (bulletproof; content visible by default) ---------- */
/* Reveal elements carry an inline opacity:0 from the site builder. JS (see BaseLayout)
   detaches them from Webflow's scroll engine and reveals them: as they enter the
   viewport on desktop, and immediately on mobile. This class only supplies the easing;
   if JS never runs, the <noscript> rule in <head> forces the content visible. */
.rvl {
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1),
              transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .rvl { transition: none !important; }
}

/* The hero headline is split into per-letter spans by a builder script whose
   letter animation we intentionally disabled. Keep the letters visible so the
   headline always shows; the whole heading still fades in via its .rvl parent. */
.gsap_split_letter { opacity: 1 !important; transform: none !important; }

/* ---------- <picture> must not break existing height chains ---------- */
/* Images are served as WebP with a JPEG fallback, which means every <img> is
   now wrapped in a <picture>. Much of the layout CSS sizes the <img> against
   its parent (`.leistung-hero_img { height: 100% }` and friends), so the
   wrapper has to be a box of exactly the size the <img> previously resolved
   its percentages against — the image container itself.
   `display: contents` is NOT usable here: it removes the box altogether, and a
   percentage height then has no containing block and collapses to auto. */
picture {
  display: block;
  width: 100%;
  height: 100%;
}


/* ---------- site.css leftovers ----------
   A handful of rules in the builder export hardcode the old teal instead of
   going through --primitive-color--*, so the token remap above cannot reach
   them. Overriding them here keeps site.css untouched and this layer the one
   place the palette lives. */
.section_team .text-highlighted { color: var(--accent-on-dark-2) !important; }

.section_footer,
.section_footer .text-color-dark,
.section_footer p,
.section_footer div,
.section_footer a,
.section_footer .social_icon { color: var(--on-dark-muted) !important; }

.lead-form_input {
  color: var(--ink-900);
  background: var(--s-warm);
  border-color: var(--s-sink);
}
.lead-form_input::placeholder { color: var(--ink-100); }
.lead-form_sub,
.lead-form_note { color: var(--ink-300); }