/* =====================================================================
   Huisartsenpraktijk & Apotheek Blokzijl
   Stylesheet — kleurenpalet afgeleid uit het praktijklogo
   Fris · clean · professioneel
   ===================================================================== */

/* ------------------------------------------------------------------ */
/* 1. Design tokens                                                    */
/* ------------------------------------------------------------------ */
:root {
  /* Merkkleuren uit logo */
  --blue:        #015C82;   /* hoofdkleur — vertrouwen */
  --blue-700:    #02485F;   /* donkerder */
  --blue-900:    #062F3D;   /* zeer donker, footer */
  --blue-50:     #E9F2F6;   /* lichte tint achtergrond */
  --blue-100:    #D5E7EE;

  --orange:      #E89A3F;   /* warm accent */
  --orange-600:  #D27F22;
  --orange-50:   #FCF1E2;

  --teal:        #57B4A3;   /* fris / gezondheid */
  --teal-600:    #3E9A89;
  --teal-50:     #E8F5F2;

  --red:         #C23A30;   /* spoed (spaarzaam) */
  --red-600:     #A82E26;
  --red-50:      #FBEAE8;

  /* Neutralen */
  --ink:         #14323B;   /* koppen */
  --body:        #46595F;   /* lopende tekst */
  --muted:       #6E8087;   /* secundair */
  --line:        #E2EBEF;   /* randen / scheidingen */
  --surface:     #F3F8FA;   /* alternatieve sectie-achtergrond */
  --surface-2:   #ECF3F6;
  --white:       #FFFFFF;

  /* Typografie */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Maatvoering */
  --container: 1180px;
  --radius:    18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  /* Schaduwen */
  --shadow-sm: 0 1px 2px rgba(6,47,61,.06), 0 2px 6px rgba(6,47,61,.05);
  --shadow:    0 8px 24px rgba(6,47,61,.08);
  --shadow-lg: 0 18px 48px rgba(6,47,61,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ */
/* 2. Reset & base                                                     */
/* ------------------------------------------------------------------ */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }

body {
  font-family: var(--font-body);
  color: var(--body);
  background: var(--white);
  line-height: 1.7;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--blue); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--orange-600); }

ul { list-style: none; padding: 0; }

h1,h2,h3,h4 {
  font-family: var(--font-head);
  color: var(--ink);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.01em;
}

strong { color: var(--ink); font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--teal); color: #fff; }

/* ------------------------------------------------------------------ */
/* 3. Layout helpers                                                   */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }
.section--surface { background: var(--surface); }
.section--blue { background: var(--blue); color: #cfe6ef; }

.grid { display: grid; gap: 28px; }
@media (min-width: 720px)  { .grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 760px)  { .grid-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 960px)  { .grid-4 { grid-template-columns: repeat(4,1fr); } }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color:#fff; }

/* ------------------------------------------------------------------ */
/* 4. Section headers                                                  */
/* ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-head);
  font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--orange); border-radius: 2px;
}
.section-head { max-width: 660px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
.section-head p { margin-top: 16px; font-size: 1.08rem; color: var(--muted); }

.section--blue .eyebrow { color: var(--teal); }
.section--blue h2 { color: #fff; }
.section--blue .section-head p { color: #bcd9e4; }

/* ------------------------------------------------------------------ */
/* 5. Buttons                                                          */
/* ------------------------------------------------------------------ */
.btn {
  --bg: var(--blue); --fg: #fff; --bd: var(--blue);
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  line-height: 1; padding: 15px 26px;
  background: var(--bg); color: var(--fg);
  border: 1.5px solid var(--bd); border-radius: var(--radius-pill);
  cursor: pointer; transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--fg); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary { --bg: var(--orange); --bd: var(--orange); --fg:#fff; }
.btn-primary:hover { --bg: var(--orange-600); --bd: var(--orange-600); }

.btn-blue { --bg: var(--blue); --bd: var(--blue); }
.btn-blue:hover { --bg: var(--blue-700); --bd: var(--blue-700); }

.btn-outline { --bg: transparent; --fg: var(--blue); --bd: var(--blue-100); box-shadow: none; }
.btn-outline:hover { --bg: var(--blue-50); --fg: var(--blue); --bd: var(--blue); }

.btn-white { --bg:#fff; --fg: var(--blue); --bd:#fff; }
.btn-white:hover { --fg: var(--blue-700); }

.btn-ghost-light { --bg: transparent; --fg:#fff; --bd: rgba(255,255,255,.45); box-shadow:none; }
.btn-ghost-light:hover { --bg: rgba(255,255,255,.12); --fg:#fff; --bd:#fff; }

.btn-lg { padding: 17px 32px; font-size: 1.04rem; }

.btn-link {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-head); font-weight: 600; color: var(--blue);
}
.btn-link svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.btn-link:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------------ */
/* 6. Top utility bar                                                  */
/* ------------------------------------------------------------------ */
.topbar {
  background: var(--blue-900);
  color: #b9d4de;
  font-size: .86rem;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 42px; padding-block: 6px;
}
.topbar a { color: #d6e7ee; }
.topbar a:hover { color: #fff; }
.topbar__group { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.topbar__item { display: inline-flex; align-items: center; gap: .5em; }
.topbar__item svg { width: 15px; height: 15px; color: var(--teal); }
.topbar__spoed {
  display:inline-flex; align-items:center; gap:.5em;
  background: var(--red); color:#fff; padding: 4px 12px; border-radius: var(--radius-pill);
  font-weight: 600;
}
.topbar__spoed svg { width: 14px; height: 14px; color:#fff; }
.topbar__spoed:hover { color:#fff; background: var(--red-600); }
@media (max-width: 760px) { .topbar__hide-sm { display: none; } }

/* ------------------------------------------------------------------ */
/* 7. Header / navigation                                              */
/* ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(16,42,51,.02);
}
/* backdrop-filter makes the header a containing block for the fixed mobile
   drawer; disable it while the drawer is open so the drawer fills the viewport */
body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }

.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 84px;
}
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }

.nav__menu { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .4em;
  font-family: var(--font-head); font-weight: 600; color: var(--ink);
  padding: 10px 14px; border-radius: 10px; font-size: calc(.96rem + 2px);
  background: none; border: 0; cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav__link:hover { color: var(--blue); background: var(--blue-50); }
.nav__item--current > .nav__link { color: var(--blue); }
.nav__link svg.caret { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease); }
.nav__item:hover .nav__link svg.caret { transform: rotate(180deg); }

/* dropdown */
.nav__sub {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 248px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; color: var(--body); font-weight: 500; font-size: .95rem;
}
.nav__sub a:hover { background: #F8FBFC; color: var(--blue); }
.nav__sub a .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); flex: none; }

/* Praktijk teal / Apotheek oranje accent (alleen desktop) */
@media (min-width: 1200px) {
  .nav__item--praktijk > .nav__link { color: var(--teal-600); }
  .nav__item--apotheek > .nav__link { color: var(--orange-600); }
  .nav__item--praktijk > .nav__link:hover { background: var(--teal-50); }
  .nav__item--apotheek > .nav__link:hover { background: var(--orange-50); }
}

.nav__cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__cta-mobile { display: none; }

/* Header-knoppen — exacte ontwerp-2 stijl, uitsluitend binnen de header */
.site-header .btn {
  font-weight: 700; font-size: .97rem; gap: 10px; padding: 14px 22px;
}
.site-header .btn svg { width: 18px; height: 18px; }
.site-header .btn-primary { --bg: var(--blue); --fg: #fff; --bd: var(--blue); box-shadow: 0 10px 24px rgba(1,92,130,.22); }
.site-header .btn-primary:hover { --bg: var(--blue-700); --bd: var(--blue-700); }
.site-header .btn-outline { --bg: transparent; --fg: var(--ink); --bd: var(--line); box-shadow: none; }
.site-header .btn-outline:hover { --bg: transparent; --fg: var(--blue); --bd: var(--blue); }

/* hamburger */
.nav-toggle {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line);
  background: #fff; border-radius: 12px; cursor: pointer; position: relative; padding: 0; margin: 0;
}
.nav-toggle span {
  position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: var(--ink); border-radius: 2px; transform: translate(-50%,-50%);
  transition: .25s var(--ease);
}
.nav-toggle span:nth-child(1) { transform: translate(-50%,-7px); }
.nav-toggle span:nth-child(3) { transform: translate(-50%,5px); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translate(-50%,-50%) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translate(-50%,-50%) rotate(-45deg); }

.nav-backdrop {
  position: fixed; inset: 0; background: rgba(16,42,51,.4);
  opacity: 0; visibility: hidden; transition: .25s var(--ease); z-index: 90;
}
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }

/* mobile drawer */
@media (max-width: 1199px) {
  .nav { height: 72px; }
  .nav__cta { display: none; }
  .nav-toggle { display: block; }
  .nav__menu {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(360px, 86vw);
    background: #fff; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 90px 18px 28px; margin: 0; box-shadow: var(--shadow-lg);
    transform: translateX(100%); transition: transform .3s var(--ease);
    overflow-y: auto; z-index: 95;
  }
  body.nav-open .nav__menu { transform: translateX(0); }
  body.nav-open { overflow: hidden; }
  .nav__item { width: 100%; }
  .nav__link { width: 100%; justify-content: space-between; font-size: 1.05rem; padding: 14px 12px; }
  .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 6px 14px;
    padding: 0 0 0 8px; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .nav__item.open .nav__sub { max-height: 420px; }
  .nav__item:hover .nav__link svg.caret { transform: none; }
  .nav__item.open .nav__link svg.caret { transform: rotate(180deg); }
  .nav__cta-mobile {
    display: flex; flex-direction: column; gap: 10px; margin-top: 18px;
    padding-top: 18px; border-top: 1px solid var(--line);
  }
  .site-header .nav__cta-mobile .btn { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 8. Hero                                                             */
/* ------------------------------------------------------------------ */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 600px at 88% -10%, var(--teal-50), transparent 60%),
    linear-gradient(180deg, var(--blue-50), #fff 78%);
  overflow: hidden;
}
.hero__inner {
  display: grid; gap: 40px; align-items: center;
  padding-block: clamp(40px, 6vw, 84px) clamp(48px, 6vw, 88px);
}
@media (min-width: 940px) {
  .hero__inner { grid-template-columns: 1.05fr .95fr; gap: 56px; }
}
.hero__pill {
  display: inline-flex; align-items: center; gap: .6em;
  background: #fff; border: 1px solid var(--blue-100); color: var(--blue);
  padding: 8px 16px; border-radius: var(--radius-pill); font-weight: 600; font-size: .9rem;
  box-shadow: var(--shadow-sm); margin-bottom: 22px;
}
.hero__pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }
.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.08;
}
.hero h1 .accent { color: var(--blue); }
.hero__lead { margin-top: 20px; font-size: 1.14rem; max-width: 30em; color: var(--body); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__meta {
  display: grid; grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 28px; row-gap: 22px; align-items: start; margin-top: 34px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
/* telefoonnummers blijven nowrap; de spoedomschrijving mag afbreken naar de volgende regel */
.hero__meta .hero__meta-item b { white-space: nowrap; }
.hero__meta [data-open-status] { white-space: nowrap; justify-self: start; align-self: center; }
.hero__meta-item { display: flex; align-items: center; gap: 12px; }
.hero__meta-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--white); box-shadow: var(--shadow-sm);
  color: var(--blue);
}
.hero__meta-ic svg { width: 20px; height: 20px; }
.hero__meta-item b { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1rem; }
.hero__meta-item span { font-size: .88rem; color: var(--muted); }

/* hero visual */
.hero__visual { position: relative; }
.hero__photo {
  position: relative; border-radius: 26px; overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 4/4.3; background: var(--blue-100);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__blob {
  position: absolute; inset: auto -28px -26px auto; width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle at 30% 30%, var(--teal), var(--blue)); opacity: .12;
  border-radius: 46% 54% 60% 40%/ 50% 42% 58% 50%; z-index: -1; filter: blur(2px);
}
/* Decoratieve blokjes achter de foto (zoals ontwerp 2): warm bruin/oranje + groen/teal */
.hero__accent { position:absolute; left:-18px; top:34px; width:78px; height:78px; border-radius:18px; background:var(--teal); }
.hero__accent--teal { left:auto; right:-16px; bottom:60px; top:auto; background:var(--orange); width:56px; height:56px; border-radius:14px; }
/* Laad-effect: bruin blokje schuift omhoog, groen blokje naar beneden */
@keyframes accent-up   { from { transform: translateY(26px); }  to { transform: translateY(0); } }
@keyframes accent-down { from { transform: translateY(-26px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
  .hero__accent        { animation: accent-up   1.7s var(--ease) .15s both; }
  .hero__accent--teal  { animation: accent-down 1.7s var(--ease) .15s both; }
}
.hero__card {
  position: absolute; left: -22px; bottom: 30px;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px; max-width: 270px;
  border: 1px solid var(--line);
}
.hero__card .ic { width: 44px;height:44px;border-radius: 12px; display:grid;place-items:center; color:#fff; flex:none; background: var(--teal); }
.hero__card .ic svg { width: 22px; height: 22px; }
.hero__card b { font-family: var(--font-head); color: var(--ink); display:block; font-size: .98rem; }
.hero__card span { font-size: .85rem; color: var(--muted); }
@media (max-width: 540px) { .hero__card { display: none; } }

/* ------------------------------------------------------------------ */
/* 9. Quick-action tiles                                               */
/* ------------------------------------------------------------------ */
.quick {
  position: relative; z-index: 3; margin-top: 0;
  background: var(--surface);
  padding: clamp(40px, 6vw, 72px) 0;
}
.quick__grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .quick__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 940px) { .quick__grid { grid-template-columns: repeat(4,1fr); } }

.qcard {
  background: #fff; background-clip: padding-box; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 22px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  position: relative; overflow: hidden;
}
.qcard::after {
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background: var(--c, var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.qcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.qcard:hover::after { transform: scaleX(1); }
.qcard__ic {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c, var(--teal)) 14%, #fff);
  color: var(--c, var(--teal));
}
.qcard__ic svg { width: 26px; height: 26px; }
.qcard h3 { font-size: 1.12rem; }
.qcard p { font-size: .92rem; color: var(--muted); flex: 1; }
.qcard .btn-link { font-size: .92rem; }

/* ------------------------------------------------------------------ */
/* 10. Spoed / emergency band                                          */
/* ------------------------------------------------------------------ */
/* Spoed-sectie: opmaak gelijk aan ontwerp 2 (witte kaart, rode linkerrand-accent) */
.spoed {
  border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: var(--radius); background: #fff;
  padding: clamp(24px,3vw,36px); display: grid; gap: 26px;
}
@media (min-width: 860px) { .spoed { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.spoed__icon {
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-head); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem;
  color: var(--red-600); margin-bottom: 12px;
}
.spoed__icon svg{width:18px;height:18px;}
.spoed h2 { color: var(--ink); font-size: clamp(1.5rem,2.6vw,2rem); }
.spoed p { color: var(--body); margin-top: 12px; }
.spoed__nums { display: grid; gap: 12px; }
.spoed__num {
  display:flex; align-items:center; gap:14px; padding: 16px 18px;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.spoed__num:hover { border-color: var(--red); transform: translateY(-2px); }
.spoed__num .big { display:block; font-family:var(--font-head); font-weight:800; font-size:1.2rem; line-height:1.1; color: var(--ink); }
.spoed__num small { display:block; color: var(--muted); font-size:.85rem; }
.spoed__num svg { width: 24px; height: 24px; color: var(--red); flex:none; }

/* ------------------------------------------------------------------ */
/* 11. Welkom / intro split                                            */
/* ------------------------------------------------------------------ */
.split { display: grid; gap: clamp(34px,5vw,64px); align-items: center; }
@media (min-width:900px){ .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media{ order: 2; } }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; }
.split__media .badge-float {
  position:absolute; right: -16px; bottom: -16px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow: var(--shadow-lg); padding: 16px 20px; text-align:center;
}
.split__media .badge-float b { font-family:var(--font-head); font-size:1.6rem; color: var(--blue); display:block; line-height:1; }
.split__media .badge-float span { font-size:.82rem; color: var(--muted); }
.split h2 { font-size: clamp(1.6rem,3.4vw,2.4rem); }
.split p { margin-top: 16px; }
.feature-list { display: grid; gap: 14px; margin-top: 26px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .tick {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--teal-50); color: var(--teal-600);
}
.feature-list .tick svg { width: 16px; height: 16px; }
.feature-list b { color: var(--ink); font-family: var(--font-head); }

/* ------------------------------------------------------------------ */
/* 12. Diensten cards                                                  */
/* ------------------------------------------------------------------ */
.dienst {
  background:#fff; background-clip: padding-box; border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
  height: 100%; position: relative; overflow: hidden;
}
.dienst::after {
  content:""; position:absolute; left:0; top:0; height:4px; width:100%;
  background: var(--c-fg, var(--blue)); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.dienst:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.dienst:hover::after { transform: scaleX(1); }
.dienst__ic {
  width: 58px; height: 58px; border-radius: 16px; display:grid; place-items:center; margin-bottom: 18px;
  background: var(--c-bg, var(--blue-50)); color: var(--c-fg, var(--blue));
}
.dienst__ic svg { width: 28px; height: 28px; }
.dienst h3 { font-size: 1.18rem; margin-bottom: 8px; }
.dienst p { font-size: .96rem; color: var(--muted); }

/* ------------------------------------------------------------------ */
/* 13. Team                                                            */
/* ------------------------------------------------------------------ */
.team-grid { display:grid; gap: 22px; grid-template-columns: repeat(2,1fr); }
@media (min-width: 680px){ .team-grid { grid-template-columns: repeat(3,1fr);} }
@media (min-width: 980px){ .team-grid { grid-template-columns: repeat(4,1fr);} }
.member {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 26px 20px; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.avatar {
  width: 124px; height: 124px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 700;
  font-size: 2.3rem; color:#fff; letter-spacing: .02em;
  position: relative; overflow: hidden;
}
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; transform: scale(1.04); }
.member h3 { font-size: 1.05rem; }
.member .role { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.member .days { font-size: .8rem; color: var(--teal-600); margin-top: 8px; font-weight: 600; }

/* avatar color variants */
.av-blue   { background: linear-gradient(135deg, var(--blue), var(--blue-700)); }
.av-orange { background: linear-gradient(135deg, var(--orange), var(--orange-600)); }
.av-teal   { background: linear-gradient(135deg, var(--teal), var(--teal-600)); }
.av-red    { background: linear-gradient(135deg, var(--red), var(--red-600)); }

/* ------------------------------------------------------------------ */
/* 14. Openingstijden + locatie                                        */
/* ------------------------------------------------------------------ */
.info-grid { display: grid; gap: 28px; }
@media (min-width: 900px){ .info-grid { grid-template-columns: 1fr 1fr; } }

.panel {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: clamp(24px,3vw,34px); box-shadow: var(--shadow-sm); height:100%;
}
.panel h3 { font-size: 1.3rem; display:flex; align-items:center; gap:.5em; margin-bottom: 18px; }
.panel h3 svg { width: 22px; height: 22px; color: var(--teal-600); }

.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 13px 4px; border-bottom: 1px dashed var(--line); }
.hours tr:last-child td { border-bottom: 0; }
.hours td:first-child { color: var(--ink); font-weight: 600; font-family: var(--font-head); }
.hours td:last-child { text-align: right; color: var(--body); }
.hours .closed { color: var(--muted); }
.hours .open-now { color: var(--teal-600); font-weight: 600; }

/* Live open/dicht-badge in de paneelkop (zoals ontwerp 2) */
.status {
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--font-head); font-weight:700; font-size:.78rem;
  padding:5px 12px; border-radius: var(--radius-pill); white-space:nowrap;
}
.status::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; flex:none; }
.status.is-open { background: var(--teal-50); color: var(--teal-600); }
.status.is-closed { background: var(--red-50); color: var(--red-600); }

.addr-list { display: grid; gap: 18px; }
.addr {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
}
.addr svg { width: 22px; height: 22px; color: var(--blue); flex: none; margin-top: 3px; }
.addr b { font-family: var(--font-head); font-weight: 500; color: var(--ink); }
.addr span { display:block; color: var(--muted); font-size: .94rem; }
.addr .tag { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color: var(--teal-600); font-weight:700; }

.map-embed {
  border:0; width:100%; height: 100%; min-height: 320px; border-radius: var(--radius);
  filter: grayscale(.15);
}
.map-wrap { border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); border:1px solid var(--line); }

/* ------------------------------------------------------------------ */
/* 15. Apotheek highlight                                              */
/* ------------------------------------------------------------------ */
.apo {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(120deg, var(--blue-700), var(--blue));
  color: #d7ebf2; box-shadow: var(--shadow);
}
.apo__inner { display:grid; gap: 0; align-items: stretch; }
@media (min-width: 880px){ .apo__inner { grid-template-columns: 1.05fr .95fr; } }
.apo__body { padding: clamp(28px,4vw,52px); }
.apo .eyebrow { color: var(--teal); }
.apo h2 { color:#fff; font-size: clamp(1.6rem,3.2vw,2.3rem); }
.apo p { margin-top: 14px; color:#bcdbe6; }
.apo__points { display:grid; gap: 12px; margin: 24px 0 30px; }
.apo__points li { display:flex; gap:12px; align-items:flex-start; }
.apo__points svg { width: 22px; height:22px; color: var(--teal); flex:none; }
.apo__media { min-height: 260px; position: relative; }
.apo__media img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; }

/* ------------------------------------------------------------------ */
/* 16. Nieuws                                                          */
/* ------------------------------------------------------------------ */
.news {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm); display:flex; flex-direction: column; height:100%;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.news:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news__top { padding: 24px 24px 0; }
.news__date {
  display:inline-flex; align-items:center; gap:.5em; font-size:.8rem; font-weight:600;
  color: var(--teal-600); text-transform: uppercase; letter-spacing:.08em;
}
.news__date svg{width:14px;height:14px;}
.news h3 { font-size: 1.15rem; margin: 12px 0; }
.news p { font-size:.95rem; color: var(--muted); padding: 0 24px; }
.news__foot { margin-top: auto; padding: 18px 24px 24px; }
.news__tag {
  position:absolute; margin: 16px; top:0; left:0; background:#fff; color: var(--blue);
  font-size:.75rem; font-weight:700; padding: 5px 12px; border-radius: var(--radius-pill);
}
.news__media { aspect-ratio: 16 / 10; overflow: hidden; }
.news__media img { width:100%; height:100%; object-fit: cover; transition: transform .45s var(--ease); }
.news:hover .news__media img { transform: scale(1.05); }

/* ------------------------------------------------------------------ */
/* 17. CTA band                                                        */
/* ------------------------------------------------------------------ */
.cta {
  background:
    radial-gradient(800px 400px at 15% 120%, rgba(87,180,163,.4), transparent 60%),
    linear-gradient(120deg, var(--blue-900), var(--blue-700));
  color:#cfe6ef; border-radius: var(--radius); text-align:center;
  padding: clamp(40px,6vw,72px) clamp(24px,5vw,64px);
  box-shadow: var(--shadow); position: relative; overflow:hidden;
}
.cta h2 { color:#fff; font-size: clamp(1.7rem,3.6vw,2.5rem); max-width: 18em; margin-inline:auto; }
.cta p { margin-top: 14px; color:#bcdbe6; max-width: 40em; margin-inline:auto; }
.cta__actions { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top: 30px; }

/* ------------------------------------------------------------------ */
/* 18. Footer                                                          */
/* ------------------------------------------------------------------ */
.footer { background: var(--blue-900); color: #9fc0cd; padding-top: clamp(48px,6vw,80px); }
.footer a { color:#c2dbe4; }
.footer a:hover { color:#fff; }
.footer__grid { display:grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 680px){ .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 980px){ .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.footer__brand img { height: 50px; background:#fff; padding: 8px 12px; border-radius: 12px; }
.footer__brand p { margin-top: 18px; font-size:.95rem; max-width: 30ch; }
.footer h4 { color:#fff; font-size: 1rem; margin-bottom: 18px; letter-spacing:.02em; }
.footer__links { display:grid; gap: 11px; font-size:.95rem; }
.footer__contact { display:grid; gap: 14px; font-size:.95rem; }
.footer__contact .row { display:flex; gap:12px; align-items:flex-start; }
.footer__contact svg { width:18px;height:18px;color: var(--teal); flex:none; margin-top:3px; }
.footer__contact b { color:#fff; font-family:var(--font-head); display:block; }
.footer__bottom {
  margin-top: clamp(40px,5vw,64px); border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0 30px; font-size: .85rem; color:#7ea3b1;
  display:flex; flex-wrap:wrap; gap: 10px 24px; justify-content: space-between; align-items:center;
}
.footer__bottom a { color:#9fc0cd; }
.footer__social { display:flex; gap: 10px; }
.footer__social a {
  width: 38px;height:38px;border-radius:50%; display:grid;place-items:center;
  background: rgba(255,255,255,.08); color:#cfe6ef;
}
.footer__social a:hover { background: var(--teal); color:#fff; }
.footer__social svg { width:18px;height:18px; }

/* ------------------------------------------------------------------ */
/* 19. Page hero (subpaginas)                                          */
/* ------------------------------------------------------------------ */
.page-hero {
  background:
    radial-gradient(900px 500px at 90% -30%, var(--teal-50), transparent 60%),
    linear-gradient(180deg, var(--blue-50), #fff);
  padding: clamp(36px,5vw,68px) 0 clamp(40px,5vw,72px);
  border-bottom: 1px solid var(--line);
}
.breadcrumb { display:flex; gap:.5em; align-items:center; font-size:.88rem; color: var(--muted); margin-bottom: 16px; }
.breadcrumb svg { width: 14px; height:14px; opacity:.6; }
.page-hero h1 { font-size: clamp(2rem,4.4vw,3rem); max-width: 16em; }
.page-hero p { margin-top: 16px; font-size: 1.1rem; max-width: 48em; color: var(--body); }
.page-hero__grid { display:grid; gap: clamp(24px,4vw,52px); align-items:center; }
@media (min-width: 900px){ .page-hero__grid { grid-template-columns: 1.08fr .92fr; } }
.page-hero__media img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius: var(--radius); box-shadow: var(--shadow); display:block; }
@media (min-width: 900px){ .page-hero__media img { aspect-ratio:4/3; } }

/* anchored sections offset for sticky header */
.anchor { scroll-margin-top: 120px; }

/* prose blocks on subpages */
.prose h3 { font-size: 1.35rem; margin-bottom: 10px; }
.prose h4 { font-size: 1.08rem; margin: 22px 0 6px; }
.prose p { margin-bottom: 14px; }
.prose ul.bullets { display:grid; gap: 10px; margin: 14px 0; }
.prose ul.bullets li { display:flex; gap:12px; align-items:flex-start; }
.prose ul.bullets svg { width:20px;height:20px;color:var(--teal-600);flex:none;margin-top:4px; }
.callout {
  border-left: 4px solid var(--orange); background: var(--orange-50);
  padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 20px 0;
}
.callout.teal { border-color: var(--teal); background: var(--teal-50); }
.callout.blue { border-color: var(--blue); background: var(--blue-50); }
.callout p:last-child { margin-bottom: 0; }

/* ============================================================
   "Openingstijden & locaties" — opmaak gelijk aan ontwerp 2.
   Scoped via .oh2 zodat de rest van ontwerp 1 onaangeroerd blijft.
   ============================================================ */
.oh2.section--surface { background: #F8FBFC; }
.oh2 .section-head h2 { font-family: var(--font-head); }
.oh2 .info-grid { gap: 24px; }
/* één overgebleven paneel (bijv. alleen Openingstijden): gecentreerd i.p.v. halve breedte */
@media (min-width:900px){
  .oh2 .info-grid:has(> .panel:only-child){ grid-template-columns:minmax(0,620px); justify-content:center; }
}
.oh2 .panel { border-radius: 20px; padding: clamp(24px,3vw,36px); box-shadow: none; height: auto; }
.oh2 .panel__title {
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-head); font-weight:800; color:var(--ink);
  font-size:1.22rem; margin-bottom:20px;
}
.oh2 .panel__title svg { width:24px; height:24px; color:var(--blue); flex:none; }
.oh2 .hours td { padding:13px 0; border-bottom:1px solid var(--line); font-size:.98rem; }
.oh2 .hours tr:last-child td { border-bottom:0; }
.oh2 .hours td:first-child { font-family:var(--font-body); font-weight:400; color:var(--body); }
.oh2 .hours td:last-child { text-align:right; font-family:var(--font-head); font-weight:600; color:var(--ink); }
.oh2 .hours .closed { color:var(--muted); font-weight:500; }
.oh2 .callout { margin:0; border:0; border-radius:14px; padding:16px 18px; font-size:.95rem; color:var(--body); }
.oh2 .callout.teal { background:var(--teal-50); }
.oh2 .mt-s { margin-top:18px; }
.oh2 .addr { display:flex; gap:13px; align-items:flex-start; padding:14px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; }
.oh2 .addr:last-of-type { border-bottom:0; }
.oh2 .addr > svg { width:22px; height:22px; color:var(--blue); flex:none; margin-top:3px; }
.oh2 .addr .tag { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-600); margin-bottom:3px; }
.oh2 .addr b { display:block; font-family:var(--font-head); color:var(--ink); }
.oh2 .addr span { display:block; font-size:.92rem; color:var(--muted); }
.oh2 .map-wrap { border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:none; }
.oh2 .map-embed { width:100%; border:0; display:block; height:auto; min-height:230px; filter:none; border-radius:0; }

.step-list { counter-reset: step; display:grid; gap: 16px; }
.step-list li { display:flex; gap:16px; align-items:flex-start; }
.step-list li::before {
  counter-increment: step; content: counter(step);
  width: 36px;height:36px;border-radius:50%; flex:none; display:grid;place-items:center;
  background: var(--blue); color:#fff; font-family:var(--font-head); font-weight:700;
}

/* contact form */
.form-grid { display:grid; gap: 18px; }
@media (min-width:620px){ .form-grid .row2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; } }
.field label { display:block; font-family:var(--font-head); font-weight:600; color:var(--ink); margin-bottom:7px; font-size:.95rem; }
.field input, .field textarea, .field select {
  width:100%; font: inherit; color: var(--ink);
  padding: 13px 15px; border:1.5px solid var(--line); border-radius: var(--radius-sm); background:#fff;
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50);
}
.field textarea { resize: vertical; min-height: 130px; }

/* ------------------------------------------------------------------ */
/* 20. Reveal on scroll                                                */
/* ------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
/* Snelkoppelingen: blok 1 & 2 vliegen van links in, blok 3 & 4 van rechts */
@media (prefers-reduced-motion: no-preference) {
  .quick__grid > .reveal { transform: translateX(-56px); }
  .quick__grid > .reveal:nth-child(n+3) { transform: translateX(56px); }
  .quick__grid > .reveal.in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ */
/* 21. Misc utilities                                                  */
/* ------------------------------------------------------------------ */
.text-center { text-align:center; }
.mt-0 { margin-top:0; }
.muted { color: var(--muted); }
.chip {
  display:inline-flex;align-items:center;gap:.5em; font-size:.82rem;font-weight:600;
  padding:6px 13px;border-radius:var(--radius-pill); background: var(--blue-50); color: var(--blue);
}
.divider { height:1px; background: var(--line); border:0; margin: clamp(40px,6vw,72px) 0; }
.lead { font-size: 1.14rem; color: var(--body); }

/* ============================================================
   ONTWERP DEFINITIEF — afwijkingen t.o.v. ontwerp 1
   1) Titels in Fraunces (lettertype + grotere maat, zoals ontwerp 3)
   2) Overlappende kleinere hero-foto over de teamfoto
   ============================================================ */
h1, h2, .hero h1, .section-head h2, .oh2 .section-head h2{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500; letter-spacing:-.02em;
}
.hero h1{ font-size:clamp(2.8rem,6vw,4.7rem); line-height:1.04; }
.hero h1 .accent{ font-style:italic; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3.2rem); line-height:1.06; }

/* overlappende sub-foto in de hero (zoals ontwerp 3) — iets lager zodat het logo op het bord vrijkomt */
.hero__sub{
  position:absolute; left:-26px; bottom:-58px; width:44%; aspect-ratio:1/1.08;
  border:5px solid #fff; border-radius:22px; overflow:hidden;
  box-shadow:var(--shadow-lg); z-index:3;
}
.hero__sub img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:560px){ .hero__sub{ width:48%; left:0; bottom:-18px; } }

/* ---- Extra wijzigingen ontwerp definitief ---- */
/* 1) donkerblauwe topbalk verwijderen */
.topbar{ display:none; }

/* 2) zoom-effect op de foto's (bij hover) */
.split__media, .apo__media, .news__media{ overflow:hidden; }
/* hoeken afgerond houden tijdens het inzoomen (clip op de container i.p.v. op de foto) */
.split__media{ border-radius: var(--radius); transform: translateZ(0); }
/* media met overstekende badge: badge mag buiten de foto uitsteken; alleen de foto wordt geklemd */
.split__media--badge{ overflow: visible; border-radius: 0; transform: none; }
.split__media--badge .split__frame{ border-radius: var(--radius); overflow: hidden; transform: translateZ(0); box-shadow: var(--shadow); }
.split__media--badge .split__frame img{ display: block; width: 100%; border-radius: inherit; box-shadow: none; }
.split__media img, .apo__media img, .news__media img,
.hero__sub img, .hero__photo img, .avatar img{ transition:transform .6s var(--ease); }
.split__media:hover img, .apo__media:hover img, .news__media:hover img{ transform:scale(1.07); }
.hero__sub:hover img{ transform:scale(1.08); }
.hero__photo:hover img{ transform:scale(1.08); }
.member:hover .avatar img{ transform:scale(1.12); }
/* teamfoto iets minder verzadigd + licht opgelicht, zonder flets te worden */
.hero__photo img{ filter: saturate(.88) brightness(1.05); }

/* teamfoto korter: ~150px van de bovenkant bijgesneden */
.hero__photo{ aspect-ratio: 16/10; }
/* op desktop: fotohoogte = breedte*10/16 + 60px (exact 60px hoger, op elke breedte) */
@media (min-width: 940px){
  .hero__visual{ container-type: inline-size; }
  .hero__photo{ aspect-ratio: auto; height: calc(100cqi * 10 / 16 + 60px); }
}
.hero__photo img{ object-position: center 100%; transform: scale(1.045); }
.hero__photo:hover img{ transform: scale(1.09); }
/* beeldvak op desktop omhoog, zodat de fotobovenkant gelijk loopt met de kop */
@media (min-width: 940px){ .hero__visual{ margin-top: -50px; } }

/* twee kleinere foto's onder de teamfoto (stijl à la ontwerp 3) */
.hero__duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.hero__mini{ position:relative; margin:0; border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/3; background:var(--blue-100);
  transform:translateZ(0); /* eigen laag → afgeronde hoeken blijven clippen tijdens zoom */ }
.hero__mini img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; transition:transform .6s var(--ease); }
.hero__mini:hover img{ transform:scale(1.07); }
/* zachte schaduw achter de foto's bij hover */
.hero__photo, .hero__mini{ transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.hero__photo:hover, .hero__mini:hover{ box-shadow: 0 26px 60px -20px rgba(2,30,45,.30); }
.hero__mini figcaption{ position:absolute; left:12px; bottom:12px; z-index:2;
  font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:.85rem; letter-spacing:0;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 10px 24px -14px rgba(2,30,45,.4); }
/* klikbare 'Eigen apotheek'-pill, linkt naar de apotheekpagina */
.hero__mini figcaption.hero__mini-cap{ padding:0; transition:background .25s var(--ease), color .25s var(--ease); }
.hero__mini figcaption.hero__mini-cap a{ display:inline-flex; align-items:center; gap:.4em; padding:7px 14px; color:inherit; text-decoration:none; border-radius:inherit; }
.hero__mini figcaption.hero__mini-cap a svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.hero__mini figcaption.hero__mini-cap:hover{ background:var(--blue); color:#fff; }
.hero__mini figcaption.hero__mini-cap:hover a svg{ transform:translateX(4px); }
/* klikbare pill op de teamfoto, linkt naar het teamsegment */
.hero__photo-cap{ position:absolute; left:16px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:600; color:var(--ink); font-size:.85rem; letter-spacing:0;
  padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  box-shadow:0 10px 24px -14px rgba(2,30,45,.4);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease); }
.hero__photo-cap svg{ width:15px; height:15px; transition:transform .35s var(--ease); }
.hero__photo-cap:hover{ background:var(--blue); color:#fff; transform:translateY(-2px); }
.hero__photo-cap:hover svg{ transform:translateX(4px); }
/* lichte witte sluier over de hero-foto's, verdwijnt bij hover */
.hero__photo::after, .hero__mini::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:rgba(255,255,255,.2); pointer-events:none; transition:opacity .45s var(--ease);
}
.hero__photo:hover::after, .hero__mini:hover::before{ opacity:0; }
/* zelfde sluier op de nieuwsfoto's, verdwijnt bij hover over de kaart */
.news__media{ position:relative; }
.news__media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:rgba(255,255,255,.2); pointer-events:none; transition:opacity .45s var(--ease);
}
.news:hover .news__media::after{ opacity:0; }
/* decoratieve rondjes bij de hero */
/* groen rondje: links naast de 'Persoonlijk consult'-foto, komt van boven binnen */
.hero__accent{
  border-radius:50%; background:color-mix(in srgb, var(--teal) 50%, transparent);
  width:60px; height:60px;
  top:80%; left:-32px; right:auto; bottom:auto; margin-top:-30px;
}
/* rood rondje (logo-rood): rechtsboven naast de teamfoto, komt van rechts binnen */
.hero__accent--teal{
  border-radius:50%; background:color-mix(in srgb, var(--red) 50%, transparent);
  width:84px; height:84px;
  top:-20px; right:-66px; bottom:auto; left:auto; margin-top:0;
}
@keyframes circ-from-top   { from{ transform:translateY(-48px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes circ-from-right { from{ transform:translateX(56px);  opacity:0 } to{ transform:translateX(0); opacity:1 } }
@media (prefers-reduced-motion: no-preference){
  .hero__accent       { animation: circ-from-top   1.7s var(--ease) .2s backwards; }
  .hero__accent--teal { animation: circ-from-right 1.7s var(--ease) .2s backwards; }
  /* dynamisch: rondjes schuiven uit elkaar bij hover over één van de 3 foto's */
  .hero__accent, .hero__accent--teal{ transition: transform .45s var(--ease); }
  .hero__visual:has(.hero__photo:hover, .hero__mini:hover) .hero__accent{ transform: translate(-40px, 32px); }
  .hero__visual:has(.hero__photo:hover, .hero__mini:hover) .hero__accent--teal{ transform: translate(40px, -32px); }
}

/* 3) titels van de 4 tegels in Fraunces, fors groter */
.qcard h3, .dienst h3{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.425rem; line-height:1.1; letter-spacing:-.01em; }
/* nieuws-titels ook in Fraunces (eigen grootte behouden) */
.news h3{ font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.28rem; line-height:1.15; letter-spacing:-.01em; }

/* teamgedeelte: ring om de avatar, naam in Fraunces, dagen als pill */
.avatar{ border:3px solid #fff; box-shadow:0 0 0 2px var(--blue-100), var(--shadow-sm); }
.member:hover .avatar{ box-shadow:0 0 0 2px var(--blue), var(--shadow); }
.member h3{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.member .days{
  display:inline-block; margin-top:11px; font-size:.76rem; font-weight:600; letter-spacing:0;
  color:var(--blue); background:var(--blue-50); padding:4px 13px; border-radius:999px;
}
/* kleine groene + rode cirkel achter de avatar, verschijnen bij hover */
.member{ position:relative; }
.avatar{ position:relative; z-index:1; }
.member::before, .member::after{
  content:""; position:absolute; z-index:0; border-radius:50%; pointer-events:none;
  opacity:0;
}
/* groen (kleiner), linksONDER — gelijke, kleine marge tot de foto als rood */
.member::before{
  width:28px; height:28px; top:130px; left:calc(50% - 76px);
  background:color-mix(in srgb, var(--teal) 55%, transparent);
}
/* rood (zelfde grootte als groen), rechtsBOVEN — gelijke, kleine marge tot de foto */
.member::after{
  width:28px; height:28px; top:18px; left:calc(50% + 48px);
  background:color-mix(in srgb, var(--red) 55%, transparent);
}
/* bij hover: één keer vanachter de foto uitschuiven (meteen zichtbaar) en vroeg wegfaden */
@keyframes bloom-green{
  0%   { opacity:1; transform: translate(32px,-28px) scale(.5); }
  22%  { opacity:1; transform: none; }
  59%  { opacity:1; transform: none; }
  100% { opacity:0; transform: none; }
}
@keyframes bloom-red{
  0%   { opacity:1; transform: translate(-32px,28px) scale(.5); }
  22%  { opacity:1; transform: none; }
  59%  { opacity:1; transform: none; }
  100% { opacity:0; transform: none; }
}
.member:hover::before{ animation: bloom-green 1.35s var(--ease) forwards; }
.member:hover::after { animation: bloom-red   1.35s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce){
  .member:hover::before, .member:hover::after{ animation:none; opacity:1; transform:none; }
}
/* smalle telefoons (2-koloms): cirkels weglaten, te weinig ruimte naast de kaart */
@media (max-width: 679px){ .member::before, .member::after{ display:none; } }

/* CTA-achtergrond gelijk aan ontwerp 2: diagonale blauwe gradient + twee zachte cirkels */
.cta{ background: linear-gradient(135deg, var(--blue), var(--blue-700)); }
/* footer: lichte variant (lichte achtergrond, donkere tekst) + zachte gradient & cirkels */
.footer{
  color: var(--body); border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
  background:
    radial-gradient(820px 420px at 88% -20%, var(--teal-50), transparent 60%),
    linear-gradient(180deg, #fff, var(--surface));
}
.footer::before{ content:""; position:absolute; top:-120px; right:-80px; width:340px; height:340px; border-radius:50%; background: rgba(87,180,163,.12); }
.footer::after{ content:""; position:absolute; bottom:-140px; left:-70px; width:300px; height:300px; border-radius:50%; background: rgba(1,92,130,.06); }
.footer .container{ position:relative; z-index:1; }
.footer a{ color: var(--body); }
.footer a:hover{ color: var(--blue); }
.footer h4{ color: var(--ink); font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.3rem; letter-spacing:-.01em; }
.footer__brand img{ background: transparent; padding: 0; }
.footer__contact b{ color: var(--ink); }
.footer__bottom{ border-top-color: var(--line); color: var(--muted); }
.footer__bottom a{ color: var(--body); }
.footer__social a{ background: var(--blue-50); color: var(--blue); }
.footer__social a:hover{ background: var(--teal); color:#fff; }
.cta::before{ content:""; position:absolute; top:-80px; right:-60px; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.06); }
.cta::after{ content:""; position:absolute; bottom:-90px; left:-40px; width:260px; height:260px; border-radius:50%; background:rgba(87,180,163,.18); }
.cta h2, .cta p, .cta__actions{ position:relative; z-index:1; }
/* telefoonknop in de CTA: witte achtergrond, blauwe tekst (zoals ontwerp 2) */
.cta__actions .btn-primary{ --bg:#fff; --bd:#fff; --fg:var(--blue); }
.cta__actions .btn-primary:hover{ --bg:#fff; --bd:#fff; --fg:var(--blue-700); }

/* paneltitel in Fraunces waar gewenst (o.a. "Stuur ons een bericht" op contact) */
.panel h3.is-serif{ font-family:"Fraunces", Georgia, serif; font-weight:600; letter-spacing:-.01em; }

/* Openingstijden & locaties: dikgedrukte tekst terug naar medium (500) */
.oh2 .panel__title{ font-family:"Fraunces", Georgia, serif; font-weight:600; letter-spacing:-.01em; }
.oh2 .hours td:last-child{ font-weight:500; }
.oh2 .addr .tag{ font-weight:500; }
.oh2 .addr b{ font-weight:500; }
.oh2 .callout strong, .oh2 .callout b{ font-weight:500; }

/* spoed: volledige-breedte band in licht rood (zelfde tint als .qcard__ic op een rode tegel) */
.spoed-band{ background: color-mix(in srgb, var(--red) 14%, #fff); }
.spoed-band .spoed{ background:transparent; border:0; border-radius:0; padding:0; }
.spoed-band .spoed__num{ background:#fff; border-color:#fff; }

/* sectiekoppen in het aanmeldformulier (praktijkpagina) */
.form-grid .form-section{ font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.18rem; color:var(--ink); letter-spacing:-.01em; margin:22px 0 8px; }
.form-grid .form-section:first-child{ margin-top:0; }

/* 3-koloms rij in formulieren (aanmeldformulier, brede kaart) */
.form-grid .row3{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:620px){ .form-grid .row3{ grid-template-columns:1fr 1fr; } }
@media (min-width:880px){ .form-grid .row3{ grid-template-columns:1fr 1fr 1fr; } }

/* uitlijning: label-regel en invoer-regel gelijk per rij, ook bij labels van verschillende lengte (subgrid) */
@media (min-width:620px){
  .form-grid .row2{ grid-template-rows:auto auto; row-gap:7px; align-items:start; }
  .form-grid .row2 > .field{ display:grid; grid-template-rows:subgrid; grid-row:span 2; }
  .form-grid .row2 > .field > label{ margin-bottom:0; }
}
@media (min-width:880px){
  .form-grid .row3{ grid-template-rows:auto auto; row-gap:7px; align-items:start; }
  .form-grid .row3 > .field{ display:grid; grid-template-rows:subgrid; grid-row:span 2; }
  .form-grid .row3 > .field > label{ margin-bottom:0; }
}

/* hero-afbeelding subpaginas: inzoomen bij hover, afgeronde hoeken behouden (clip op container) */
.page-hero__media{ border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transform: translateZ(0); }
.page-hero__media img{ box-shadow: none; transition: transform .6s var(--ease); }
.page-hero__media:hover img{ transform: scale(1.06); }

/* Apotheek hero: foto even breed als de split-foto's eronder (verticaal uitlijnen) */
@media (min-width:900px){
  .page-hero--apotheek .page-hero__grid{ grid-template-columns:1fr 1fr; column-gap:clamp(34px,5vw,64px); }
}
/* eerste sectie na de apotheek-hero: zelfde afstand tot de scheidingslijn als erboven */
.page-hero--apotheek + .section{ padding-top:72px; }

/* Apotheek: bezorgschema in twee losse groene blokken */
.bezorg-day{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:12px 0 0; padding:14px 18px; }
.bezorg-day b{ color:var(--ink); font-family:var(--font-head); font-weight:600; }
.bezorg-day span{ color:var(--body); text-align:right; }

/* Gezondheidsinformatie-artikel: 'Bijgewerkt'-meta met icoon naast de tekst */
.article-meta span { display: inline-flex; align-items: center; }
.article-meta svg { flex: none; }

/* Contactkaarten: MijnGezondheid.net als subtiele label-link onder de titel */
.qcard__portal {
  display: inline-flex; align-items: center; gap: 6px; align-self: start;
  margin: -6px 0 2px;
  font-family: var(--font-head); font-weight: 500; font-size: .82rem;
  letter-spacing: .015em; color: var(--teal-600); text-decoration: none;
  transition: color .2s var(--ease);
}
.qcard__portal svg { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.qcard__portal:hover { color: var(--teal); }
.qcard__portal:hover svg { transform: translate(2px, -2px); }