/* =====================================================================
   THERALETIK STEGLITZ — globals.css
   Re-use lintas halaman: design tokens (Webflow Variables), reset,
   text/button styles, layout band, NAVBAR, HERO, FOOTER + CTA.
   Dipakai oleh: index / physiotherapie / spezialtherapien / ergotherapie.
   PART 1 (hex/px) hidup HANYA di :root; sisanya token + rem/clamp.
   ===================================================================== */

/* ============================ PART 1 — TOKENS ============================ */
:root {
  /* --- palette --- */
  --light-100:  #ffffff;
  --light-900:  #f0f6eb;
  --light-1000: #d9d9d9;
  --dark-100:   #b4b4b4;
  --dark-400:   #8c8c8c;
  --brand-200:  #6dad00;
  --brand-400:  #d3ff87;
  --brand-500:  #264424;

  /* alpha variants */
  --brand-o10: rgba(38,68,36,.10);
  --brand-o15: rgba(38,68,36,.15);
  --brand-o20: rgba(38,68,36,.20);
  --brand-o25: rgba(38,68,36,.25);
  --brand-o35: rgba(38,68,36,.35);
  --brand-o50: rgba(38,68,36,.50);
  --brand-o60: rgba(38,68,36,.60);
  --white-o05: rgba(255,255,255,.05);
  --white-o10: rgba(255,255,255,.10);
  --white-o20: rgba(255,255,255,.20);
  --white-o30: rgba(255,255,255,.30);
  --white-o60: rgba(255,255,255,.60);
  --white-o80: rgba(255,255,255,.80);
  --grey-o20:  rgba(157,157,157,.20);
  --black-o20: rgba(0,0,0,.20);
  --black-o30: rgba(0,0,0,.30);
  --black-o55: rgba(0,0,0,.55);
  --ink-o40:   rgba(23,41,22,.40);   /* mega-menu backdrop */
  --paper:     #fafcf8;              /* mega-menu / mobile panel bg */

  /* --- spacing (space/N → rem) --- */
  --sp-1:   .375rem;   /* 6  */
  --sp-3:   1rem;      /* 16 */
  --sp-4:   1.5rem;    /* 24 */
  --sp-5:   2rem;      /* 32 */
  --sp-7:   3rem;      /* 48 */
  --sp-8:   3.75rem;   /* 60 */
  --sp-9:   5rem;      /* 80 */
  --sp-10:  6.25rem;   /* 100 */
  --sp-11:  7.5rem;    /* 120 */
  --sp-200: 12.5rem;   /* 200 */
  /* fluid section rhythm: shrinks on mobile, capped at desktop value */
  --sp-sect:  clamp(3.75rem, 2rem + 7vw, 6.25rem);   /* ~100 */
  --sp-sect-lg: clamp(5rem, 2rem + 11vw, 12.5rem);   /* ~200 */
  --sp-sect-sm: clamp(3rem, 1.75rem + 5vw, 5rem);    /* ~80 */

  /* --- radii --- */
  --r-main:  1rem;        /* 16 */
  --r-large: 1.25rem;     /* 20 */
  --r-40:    2.5rem;      /* 40 */
  --r-100:   6.25rem;     /* 100 */
  --r-999:   62.5rem;     /* pill */
  --r-50:    3.144rem;    /* 50.3 */
  --r-60:    3.772rem;    /* 60.36 */

  /* --- borders --- */
  --bw:  .0625rem;   /* 1px */
  --bw2: .075rem;    /* ~1.2px */

  /* --- type scale --- */
  --fs-tiny:   .875rem;    /* 14 */
  --fs-large:  1.375rem;   /* 22 */
  --fs-h3:     clamp(2.25rem, 1.4rem + 2.6vw, 2.8125rem);  /* ~45 */
  --fs-h2:     clamp(2.1rem, 1.05rem + 3.8vw, 3.4375rem);  /* ~55 */
  --fs-h1:     clamp(2.6rem, 1.3rem + 4.6vw, 4.375rem);    /* ~70 */
  --fs-h4:     clamp(2rem, 1.3rem + 2vw, 2.5rem);          /* ~40 */
  --fs-display:clamp(3.1rem, 0.6rem + 8.7vw, 6.5625rem);   /* ~105 */
  --fs-display-sm:clamp(2.75rem, 1rem + 7vw, 5.5rem);      /* ~88 */

  --lh-tight: .9;
  --lh-snug:  1;
  --lh-h2:    1.1;
  --lh-body:  1.25;

  --font: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, system-ui, sans-serif;

  /* --- shadows / blur --- */
  --shadow-photo: 0 10px 46px 0 rgba(39,39,39,.30);
  --shadow-deco:  0 4px 4px 0 rgba(0,0,0,.25);
  --shadow-mega:  0 4px 24px 0 rgba(0,0,0,.32);
  --blur-card: 25px;
  --blur-15:   15px;
  --blur-12:   12px;
  --blur-10:   10px;

  /* --- layout band --- */
  --band: 90rem;                       /* 1440 frame */
  --site-margin: clamp(1.25rem, 5vw, 3rem);   /* 48 cap */
  --band-gutter: max(var(--site-margin), calc((100vw - var(--band)) / 2 + var(--site-margin)));
}

/* ============================ PART 2 — RESET / BASE ============================ */
/* NOTE (Webflow): element/pseudo selectors di bawah jadi custom-code embed saat convert. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-tiny);
  line-height: var(--lh-body);
  color: var(--brand-500);
  background: var(--light-100);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }

.skip_link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 100; padding: var(--sp-1) var(--sp-4);
  background: var(--brand-500); color: var(--light-100);
  border-radius: 0 0 var(--r-main) var(--r-main);
}
.skip_link:focus { transform: translate(-50%, 0); }

/* shared centred band */
.layout_wrap {
  width: 100%;
  max-width: var(--band);
  margin-inline: auto;
  padding-inline: var(--site-margin);
}

/* shared pill CTA (dark green on lime) — reusable button */
.svc_cta, .cta_btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; font-size: var(--fs-tiny);
  color: var(--brand-500);
  background: var(--brand-400);
  border-radius: var(--r-100);
  transition: transform .2s ease, filter .2s ease;
}
.svc_cta:hover, .cta_btn:hover { filter: brightness(1.06); transform: translateY(-.125rem); }
.svc_cta:focus-visible, .cta_btn:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: .25rem; }

/* ============================ NAVBAR ============================ */
.nav_wrap {
  position: fixed;
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: min(49.5rem, calc(100vw - 2 * var(--site-margin)));
  padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-4);
  background: var(--brand-o35);
  border: var(--bw) solid var(--white-o30);
  border-radius: var(--r-999);
  -webkit-backdrop-filter: blur(var(--blur-card));
  backdrop-filter: blur(var(--blur-card));
}
.nav_logo { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--light-100); }
.nav_logo_img { width: 2.553rem; height: 1.842rem; }
.nav_logo_text { font-weight: 500; font-size: var(--fs-tiny); }
.nav_menu { display: flex; align-items: center; }
.nav_link {
  padding: var(--sp-1) var(--sp-3);
  font-weight: 500; font-size: var(--fs-tiny);
  color: var(--white-o80);
  border-radius: var(--r-40);
  transition: color .2s ease, background .2s ease;
}
.nav_link:hover { color: var(--light-100); }
.nav_link.is-active { color: var(--brand-400); }
.nav_link:focus-visible { outline: var(--bw2) solid var(--white-o60); outline-offset: .125rem; }
.nav_cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; font-size: var(--fs-tiny);
  color: var(--light-100);
  background: var(--grey-o20);
  border-radius: var(--r-100);
  white-space: nowrap;
  transition: background .2s ease;
}
.nav_cta:hover { background: var(--white-o20); }
.nav_cta:focus-visible { outline: var(--bw2) solid var(--white-o60); outline-offset: .125rem; }
.nav_toggle { display: none; flex-direction: column; gap: .25rem; padding: var(--sp-3); border-radius: var(--r-100); }
.nav_toggle_bar { display: block; width: 1.25rem; height: .125rem; background: var(--light-100); border-radius: var(--r-999); }

/* Leistungen trigger + chevron */
.nav_drop { position: relative; display: flex; align-items: center; }
.nav_drop_trigger { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; }
.nav_drop_chev {
  width: .4375rem; height: .4375rem;
  border-right: var(--bw) solid currentColor; border-bottom: var(--bw) solid currentColor;
  transform: translateY(-.0625rem) rotate(45deg);
  transition: transform .2s ease;
}
.nav_drop.is-open .nav_drop_chev { transform: translateY(.0625rem) rotate(-135deg); }
/* inline submenu used on mobile only (desktop uses .megamenu) */
.nav_drop_menu { display: none; }

/* ============================ MEGA-MENU (Leistungen, desktop) ============================ */
.megamenu { position: fixed; inset: 0; z-index: 45; visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s; }
.megamenu.is-open { visibility: visible; opacity: 1; }
.megamenu_backdrop { position: absolute; inset: 0; background: var(--ink-o40); }
.megamenu_panel {
  position: absolute; top: 5.6875rem; left: 50%;
  transform: translateX(-50%) translateY(-.625rem);
  width: min(81.5625rem, calc(100vw - 2rem));
  display: flex; gap: .625rem;
  padding: var(--sp-3);
  background: var(--paper);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-mega);
  transition: transform .25s ease;
}
.megamenu.is-open .megamenu_panel { transform: translateX(-50%) translateY(0); }
.mega_col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: .625rem;
  background: var(--light-900);
  border: var(--bw) solid var(--brand-o20);
  border-radius: var(--r-large);
}
.mega_col_top { display: flex; flex-direction: column; gap: .75rem; }
.mega_col_title { font-weight: 500; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.01em; color: var(--brand-500); }
.mega_col_desc { font-weight: 500; font-size: var(--fs-tiny); color: var(--brand-o60); }
.mega_col_media { display: block; height: 14.375rem; border: var(--bw) solid var(--brand-o20); border-radius: var(--r-main); overflow: hidden; background: var(--dark-100); }
.mega_col_img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mega_col_media:hover .mega_col_img { transform: scale(1.04); }
.mega_col_list { display: flex; flex-direction: column; gap: var(--sp-1); }
.mega_col_link {
  display: block; padding: .375rem .5rem;
  font-weight: 500; font-size: 1rem; letter-spacing: -.01em;
  color: var(--brand-500); border-radius: var(--r-40);
  transition: background .2s ease;
}
.mega_col_link:hover { background: var(--brand-o10); }
.mega_col_link:focus-visible { outline: var(--bw2) solid var(--brand-500); outline-offset: -.125rem; }

/* ============================ HERO (shell + inner variant) ============================ */
.hero_sec {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  min-height: 57.625rem;          /* 922 */
  padding: 8.5rem var(--site-margin) var(--sp-11);
  overflow: hidden;
  isolation: isolate;
}
.hero_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero_scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 65%;
  background: linear-gradient(to bottom, transparent, var(--black-o55));
  -webkit-backdrop-filter: blur(var(--blur-10));
  z-index: -1;
}
.hero_inner {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-7);
  padding-inline: 0;
}
.hero_lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); max-width: 49.625rem; }
.hero_badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  background: var(--brand-o25);
  border-radius: var(--r-50);
}
.hero_badge_icon { width: 1.5rem; height: 1.5rem; }
.hero_badge_text { font-weight: 500; font-size: var(--fs-tiny); color: var(--light-100); }
.hero_title { color: var(--light-100); }
.hero_title_accent { color: var(--brand-400); }
.hero_text { max-width: 31.5rem; font-weight: 500; font-size: var(--fs-tiny); color: var(--light-100); }

.hero_card {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-4);
  width: 21.9375rem;            /* 351 */
  padding: var(--sp-4) var(--sp-3);
  background: var(--brand-o50);
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-large);
  -webkit-backdrop-filter: blur(var(--blur-15));
  backdrop-filter: blur(var(--blur-15));
}
.hero_card_head { display: flex; flex-direction: column; gap: var(--sp-4); }
.hero_card_title { color: var(--light-100); }
.hero_card_list { display: flex; flex-direction: column; gap: var(--sp-1); }
.hero_card_item { display: flex; align-items: center; justify-content: space-between; }
.hero_card_label { font-weight: 500; font-size: var(--fs-tiny); color: var(--light-100); transition: color .2s ease; }
a.hero_card_label:hover { color: var(--brand-400); }
a.hero_card_label:focus-visible { outline: var(--bw2) solid var(--white-o80); outline-offset: .125rem; }
.hero_card_icon { width: 1.5rem; height: 1.5rem; }
.hero_card_rule { height: var(--bw); background: var(--white-o20); }
.hero_card_btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 500; font-size: var(--fs-tiny); color: var(--light-100);
  background: var(--white-o10);
  border: var(--bw) solid var(--white-o20);
  border-radius: var(--r-100);
  transition: background .2s ease;
}
.hero_card_btn:hover { background: var(--white-o20); }
.hero_card_btn:focus-visible { outline: var(--bw2) solid var(--white-o80); outline-offset: .125rem; }

.hero_deco {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4rem;
  background: var(--light-100);
  border-radius: var(--r-40) var(--r-40) 0 0;
  box-shadow: var(--shadow-deco);
}

/* inner hero variant (sub-pages) */
.hero_sec.is-inner { justify-content: flex-end; }
.hero_inner.is-inner { align-items: flex-end; justify-content: flex-start; }
.hero_innerlead { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 84rem; }
.hero_innertitle { color: var(--light-100); }
.hero_innertext { max-width: 31.5rem; font-weight: 500; font-size: var(--fs-tiny); color: var(--light-100); }

/* ============================ FOOTER + CTA ============================ */
.footer_sec { background: var(--brand-500); border-radius: var(--r-40) var(--r-40) 0 0; padding-bottom: var(--sp-4); color: var(--light-100); overflow: hidden; }
.footer_wrap { display: flex; flex-direction: column; gap: var(--sp-8); padding-top: var(--sp-8); }

.cta_card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-5);
  min-height: 28.5rem;            /* 456 */
  padding: var(--sp-5);
  border: var(--bw) solid var(--white-o20);
  border-radius: var(--r-large);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}
.cta_bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta_scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--black-o30), var(--black-o30)), linear-gradient(to bottom, transparent 40%, var(--black-o20)); }
.cta_body { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); max-width: 37rem; }
.cta_text { display: flex; flex-direction: column; gap: var(--sp-1); }
.cta_title { color: var(--light-100); }
.cta_title_accent { color: var(--brand-400); }
.cta_lead { font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }

.footer_rule { width: 100%; height: var(--bw); margin: 0; border: 0; background: var(--white-o20); }

.footer_main { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-8); }
.footer_brand { display: flex; flex-direction: column; gap: var(--sp-4); width: 18.0625rem; }
.footer_logo { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--light-100); }
.footer_logo_img { width: 2.553rem; height: 1.842rem; }
.footer_logo_text { font-weight: 500; font-size: var(--fs-tiny); }
.footer_tagline { font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }

.footer_cols { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.footer_col { display: flex; flex-direction: column; gap: var(--sp-4); }
.footer_col_title { font-weight: 500; font-size: var(--fs-tiny); color: var(--light-100); }
.footer_col_list { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer_col_item { font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }
.footer_col_link { transition: color .2s ease; }
.footer_col_link:hover { color: var(--light-100); }
.footer_col_link:focus-visible { outline: var(--bw2) solid var(--white-o60); outline-offset: .125rem; }
.footer_col_addr { line-height: var(--lh-body); }

.footer_social { display: flex; align-items: center; gap: var(--sp-3); }
.footer_social_link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  background: var(--white-o10);
  border: var(--bw2) solid var(--white-o10);
  border-radius: var(--r-60);
  -webkit-backdrop-filter: blur(var(--blur-12));
  backdrop-filter: blur(var(--blur-12));
  transition: background .2s ease;
}
.footer_social_link.is-bare { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.footer_social_link:hover { background: var(--white-o20); }
.footer_social_link:focus-visible { outline: var(--bw2) solid var(--white-o60); outline-offset: .125rem; }
.footer_social_icon { width: 1.25rem; height: 1.25rem; }
.footer_social_icon.is-lg { width: 3rem; height: 3rem; }

.footer_top { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--sp-3); }
.footer_top_label { font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }
.footer_top_btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: var(--white-o10);
  border: var(--bw) solid var(--white-o10);
  border-radius: var(--r-50);
  -webkit-backdrop-filter: blur(var(--blur-10));
  backdrop-filter: blur(var(--blur-10));
  transition: background .2s ease, transform .2s ease;
}
.footer_top_btn:hover { background: var(--white-o20); transform: translateY(-.125rem); }
.footer_top_btn:focus-visible { outline: var(--bw2) solid var(--white-o60); outline-offset: .125rem; }
.footer_top_icon { width: .875rem; height: .875rem; }

.footer_legal { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.footer_legal_copy { font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }
.footer_legal_links { display: flex; align-items: center; gap: var(--sp-1); font-weight: 500; font-size: var(--fs-tiny); color: var(--white-o60); }
.footer_legal_link { transition: color .2s ease; }
.footer_legal_link:hover { color: var(--light-100); }
.footer_legal_link:focus-visible { outline: var(--bw2) solid var(--white-o60); outline-offset: .125rem; }

/* ============================ RESPONSIVE (shared) ============================ */
@media (max-width: 60rem) {
  .megamenu { display: none; }
  .nav_toggle { display: flex; background: var(--grey-o20); transition: background .2s ease; }
  .nav_toggle_bar { transition: transform .2s ease, opacity .2s ease; }
  .nav_wrap.is-open .nav_toggle_bar:nth-child(1) { transform: translateY(.375rem) rotate(45deg); }
  .nav_wrap.is-open .nav_toggle_bar:nth-child(2) { opacity: 0; }
  .nav_wrap.is-open .nav_toggle_bar:nth-child(3) { transform: translateY(-.375rem) rotate(-45deg); }

  /* white panel revealed by the hamburger */
  .nav_menu { display: none; }
  .nav_wrap.is-open .nav_menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: calc(100% + var(--sp-3)); left: 0; right: 0;
    background: var(--paper);
    border-radius: var(--r-large);
    overflow: hidden;
  }
  /* rows */
  .nav_link, .nav_drop_trigger {
    width: 100%; justify-content: space-between;
    padding: .875rem var(--sp-3);
    font-size: 1rem; color: var(--brand-500);
    border-radius: 0;
    border-bottom: var(--bw) solid var(--brand-o10);
  }
  .nav_link:hover, .nav_drop_trigger:hover { color: var(--brand-500); background: var(--brand-o10); }
  .nav_link.is-active { color: var(--brand-500); }
  /* Leistungen expandable row */
  .nav_drop { flex-direction: column; align-items: stretch; }
  .nav_drop_chev { width: .5rem; height: .5rem; transform: rotate(-45deg); }
  .nav_drop.is-open .nav_drop_chev { transform: rotate(45deg); }
  .nav_drop_menu { display: none; }
  .nav_drop.is-open .nav_drop_menu { display: block; }
  .nav_drop_link {
    display: block; width: 100%;
    padding: .8125rem var(--sp-3) .8125rem var(--sp-7);
    font-size: 1rem; color: var(--brand-o60);
    border-bottom: var(--bw) solid var(--brand-o10);
    transition: color .2s ease, background .2s ease;
  }
  .nav_drop_link:hover { color: var(--brand-500); background: var(--brand-o10); }
}

@media (max-width: 48rem) {
  .hero_sec { min-height: auto; padding-top: 7rem; }
  .hero_inner { flex-direction: column; align-items: stretch; gap: var(--sp-5); }
  .hero_card { width: 100%; }
  .footer_main { flex-direction: column; gap: var(--sp-5); }
  .footer_top { position: static; }
  .footer_cols { gap: var(--sp-5); }
}

@media (max-width: 30rem) {
  .footer_cols { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .svc_cta, .cta_btn, .voice_arrow, .praxis_arrow, .footer_top_btn { transition: none; }
}