/* =====================================================================
   LUX AQUA - de aquariumwereld binnen luxhelchteren.be
   Aquapalet (scherm): marine #0D1730, aqua diep #0C9494, aqua scherm #40D0C4
   Letters: Montserrat (koppen), Source Sans 3 (lopende tekst)
   ===================================================================== */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/Montserrat-wght-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/SourceSans3-wght-latin.woff2") format("woff2"); }

body.aqua {
  --marine: #0D1730;
  --marine-2: #0A1226;
  --deep: #061021;
  --aqua: #40D0C4;
  --aqua-deep: #0C9494;
  --aqua-ink: #E4F2F5;
  --aqua-soft: #A9C8D1;
  --aqua-muted: #7E9BA6;
  --aqua-line: rgba(64,208,196,.18);
  --font-head: "Montserrat", "Poppins", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  background: var(--marine);
  color: var(--aqua-soft);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
}
body.aqua h1, body.aqua h2, body.aqua h3, body.aqua h4 { font-family: var(--font-head); color: #fff; letter-spacing: -.01em; }
body.aqua h1 { font-weight: 800; }
body.aqua p { color: var(--aqua-soft); }
body.aqua strong { color: #fff; font-weight: 600; }
/* Tekstlinks worden aqua, knoppen niet: die houden hun eigen opschriftkleur.
   Zonder :not(.btn) wint deze regel het van .btn-aqua en staat er aqua tekst
   op een aqua knop, die pas leesbaar wordt zodra u er met de muis overgaat. */
body.aqua a:not(.btn) { color: var(--aqua); }
body.aqua a:not(.btn):hover { color: #fff; }
/* Marineblauw op marineblauw is onzichtbaar. In de aquawereld is de hoofdknop
   dus aqua. Staat bewust boven de regel voor .header-cta, die er later in dit
   bestand nog een witte knop van maakt. */
body.aqua .btn-primary { background: var(--aqua); color: var(--marine); box-shadow: 0 12px 30px -12px rgba(64,208,196,.7); }
body.aqua .btn-primary:hover { background: #7FEDE2; color: var(--marine); box-shadow: 0 0 0 3px rgba(64,208,196,.32), 0 16px 38px -12px rgba(64,208,196,.95); }
body.aqua .lead { color: #C9DEE4; font-weight: 300; }
body.aqua .eyebrow { color: var(--aqua); font-family: var(--font-head); font-weight: 600; }
body.aqua ::selection { background: var(--aqua); color: var(--marine); }
body.aqua :focus-visible { outline-color: var(--aqua); }

/* header en footer blijven de LUX 2.0-header, maar de sfeer wordt donker */
body.aqua .site-header { background: var(--marine); border-bottom-color: rgba(255,255,255,.1); }
body.aqua .brand-logo { filter: brightness(0) invert(1); }
body.aqua .main-nav a { color: #E4F2F5; }
body.aqua .main-nav a:hover { background: rgba(255,255,255,.08); }
body.aqua .main-nav a[aria-current="page"]:not(.nav-aqua) { background: rgba(255,255,255,.1); }
body.aqua .main-nav .nav-aqua { background: var(--aqua); color: var(--marine); box-shadow: none; }
body.aqua .main-nav .nav-aqua:hover, body.aqua .main-nav .nav-aqua[aria-current="page"] { background: #6BE0D6; color: var(--marine); }
body.aqua .header-cta { background: #fff; color: var(--marine); box-shadow: none; }
body.aqua .header-cta:hover { background: var(--aqua); color: var(--marine); }
body.aqua .nav-toggle { background: transparent; border-color: rgba(255,255,255,.2); }
body.aqua .nav-toggle-bar { background: #fff; }
body.aqua .mobile-menu { background: var(--marine-2); border-top-color: rgba(255,255,255,.08); }
body.aqua .mobile-links a { color: #fff; border-bottom-color: rgba(255,255,255,.08); }
body.aqua .mobile-links a small { color: var(--aqua-muted); }
body.aqua .mobile-aqua { color: var(--aqua) !important; }
body.aqua .mobile-address { color: var(--aqua-muted); }
body.aqua .social-row a { background: rgba(255,255,255,.08); color: #fff; }
body.aqua .btn-secondary { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.8); }
body.aqua .btn-secondary:hover { background: #fff; color: var(--marine); box-shadow: 0 0 0 3px rgba(255,255,255,.24), 0 16px 34px -14px rgba(0,0,0,.65); }
body.aqua .btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(64,208,196,.75); }
body.aqua .btn-ghost:hover { background: var(--aqua); color: var(--marine); border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(64,208,196,.3), 0 16px 34px -12px rgba(64,208,196,.85); }
body.aqua .sticky-bar { background: var(--marine-2); border-top-color: rgba(255,255,255,.1); box-shadow: none; }
body.aqua .sticky-bar a { color: #fff; }
body.aqua .sticky-bar a + a { border-left-color: rgba(255,255,255,.08); }
body.aqua .site-footer { background: var(--deep); }
body.aqua .crumbs, body.aqua .crumbs a { color: var(--aqua-muted); }
body.aqua .crumbs a:hover { color: #fff; }

/* knoppen in de aquawereld: altijd vol aqua, bij hover feller met een gloed erbij */
.btn-aqua { background: var(--aqua); color: var(--marine); box-shadow: 0 12px 30px -12px rgba(64,208,196,.7); }
.btn-aqua:hover { background: #7FEDE2; color: var(--marine); box-shadow: 0 0 0 3px rgba(64,208,196,.32), 0 16px 38px -12px rgba(64,208,196,.95); }

/* ---------- de duik: van licht naar diep water ---------- */
.dive { position: relative; overflow: hidden; isolation: isolate; }
.dive-surface { background: linear-gradient(180deg, #F4F6F9 0%, #E9EEF4 40%, #B9D7E5 75%, #4E9EC2 100%); height: clamp(90px, 16vw, 180px); position: relative; }
.dive-surface::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 60%; background: linear-gradient(180deg, rgba(13,23,48,0), var(--marine)); }
.dive-water { position: relative; background: radial-gradient(90% 55% at 50% 0%, rgba(64,208,196,.28), rgba(13,23,48,0) 70%), var(--marine); }
.caustics { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(64,208,196,.18), transparent 70%),
    radial-gradient(35% 28% at 75% 35%, rgba(12,148,148,.22), transparent 70%),
    radial-gradient(45% 30% at 50% 80%, rgba(64,208,196,.12), transparent 70%);
  background-size: 160% 160%; animation: caustics 18s ease-in-out infinite alternate; }
@keyframes caustics { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
.light-rays { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; mix-blend-mode: screen;
  background: repeating-linear-gradient(112deg, transparent 0 60px, rgba(180,240,235,.09) 60px 90px, transparent 90px 200px); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%); -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 70%); animation: rays 14s ease-in-out infinite alternate; }
@keyframes rays { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@media (prefers-reduced-motion: reduce) { .caustics, .light-rays { animation: none; } }

/* ---------- hero LUX AQUA: de foto stopt op de waterlijn ----------
   Vaste waterlijnopbouw uit het merkboek. Boven de lijn de foto, eronder marine.
   Het logo staat er middenop: LUX valt op de foto, AQUA op het marine eronder.
   De lijn ligt op 91,5 procent van de logohoogte, dus het logo schuift 8,5 procent
   van zijn eigen hoogte naar beneden zodat dat peil exact op de naad valt.        */
.aqua-hero { position: relative; }
.aqua-hero-beeld { position: relative; display: flex; align-items: flex-end; min-height: clamp(230px, 40vh, 480px); isolation: isolate; }
.aqua-hero-beeld > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; z-index: -2; }
.aqua-hero-beeld::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(13,23,48,.34) 0%, rgba(13,23,48,.12) 38%, rgba(13,23,48,.55) 78%, rgba(13,23,48,.86) 100%); }
/* de waterlijn zelf: de naad tussen foto en marine, van rand tot rand */
.aqua-hero-beeld::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: 1;
  background: linear-gradient(90deg, rgba(64,208,196,.25) 0%, var(--aqua) 22%, #C4FFF9 50%, var(--aqua) 78%, rgba(64,208,196,.25) 100%);
  box-shadow: 0 0 16px rgba(64,208,196,.95), 0 0 44px rgba(64,208,196,.5); }
.aqua-hero-merk { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; display: flex; align-items: flex-end; }
/* het logo zelf schuift 8,5 procent van zijn eigen hoogte omlaag, zodat het peil op 91,5 procent exact op de naad valt */
.aqua-hero-merk .aqua-logo-mark { display: block; line-height: 0; transform: translateY(8.5%); }
.aqua-hero-merk img { width: clamp(190px, 28vw, 330px); height: auto; filter: drop-shadow(0 6px 22px rgba(0,0,0,.6)); }
.aqua-hero-tekst { background: var(--marine); padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4.5rem); }
.aqua-hero h1 { font-size: clamp(2rem, 1.1rem + 4vw, 4.4rem); line-height: 1.02; margin-bottom: .35em; max-width: 19ch; text-wrap: balance; }
.aqua-hero .lead { max-width: 52ch; color: #C9DEE4; }
.aqua-hero .btn-row { margin-top: 1.75rem; }
/* ---------- secties ---------- */
body.aqua .section { position: relative; }
body.aqua .section-deep { background: var(--deep); }
body.aqua .section-glow { background: radial-gradient(60% 50% at 50% 0%, rgba(12,148,148,.22), transparent 70%), var(--marine); }
body.aqua .section-head { max-width: 760px; }

body.aqua .card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--aqua-soft); box-shadow: none; }
body.aqua a.card:hover, body.aqua .card.hoverable:hover { border-color: rgba(64,208,196,.5); box-shadow: 0 24px 60px -24px rgba(64,208,196,.35); transform: translateY(-4px); }
body.aqua .card p { color: var(--aqua-soft); }
body.aqua .card .link-arrow { color: var(--aqua); }
body.aqua .icon { background: rgba(64,208,196,.12); color: var(--aqua); }
body.aqua .chips a, body.aqua .chip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }
body.aqua .chips a:hover { border-color: var(--aqua); }
body.aqua .qa-item { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
body.aqua .qa-item .q { color: #fff; font-family: var(--font-head); }
body.aqua .qa-item .a { color: var(--aqua-soft); }
body.aqua .qa-item .link-arrow { color: var(--aqua); }
body.aqua .checks li::before { background: rgba(64,208,196,.15); }
body.aqua .checks li::after { border-color: var(--aqua); }
body.aqua .stat { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
body.aqua .stat-value { color: #fff; font-family: var(--font-head); }
body.aqua .stat-value small { color: var(--aqua); }
body.aqua .stat-label { color: var(--aqua-muted); }
body.aqua .faq details { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
body.aqua .faq summary { color: #fff; }
body.aqua .faq summary::after { border-color: var(--aqua); }
body.aqua .faq details[open] summary { border-bottom-color: rgba(255,255,255,.09); }
body.aqua .faq .faq-body { color: var(--aqua-soft); }
body.aqua .note { background: rgba(64,208,196,.1); border-color: var(--aqua); color: #E4F2F5; }
body.aqua .split img { box-shadow: 0 30px 70px -30px rgba(0,0,0,.8); }
body.aqua .steps li::before { background: var(--aqua); color: var(--marine); }
body.aqua .steps strong { color: #fff; }
body.aqua .link-arrow { color: var(--aqua); }
body.aqua .timeline::before { background: linear-gradient(var(--aqua), rgba(64,208,196,.15)); }
body.aqua .timeline li::before { background: var(--marine); border-color: var(--aqua); }
body.aqua .timeline .t-when { color: var(--aqua); }
body.aqua .cta-band { background: linear-gradient(135deg, #0F2A4A, var(--aqua-deep)); color: #E4F2F5; }
body.aqua .cta-band::before { background: radial-gradient(closest-side, rgba(64,208,196,.5), transparent); }
body.aqua .page-head { background: transparent; }
body.aqua .hours th { color: #fff; } body.aqua .hours td { color: var(--aqua-soft); } body.aqua .hours th, body.aqua .hours td { border-bottom-color: rgba(255,255,255,.1); }
body.aqua .review-card, body.aqua .social-card { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); color: #fff; }
body.aqua .social-card span { color: var(--aqua-muted); }
body.aqua .couriers li { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color: #fff; }

/* soortenraster: foto's van echte vissen */
.species { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.species figure { position: relative; border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.04); }
.species img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); }
.species.species-breed img { aspect-ratio: 4 / 3; } /* liggende tegels: een vis is breder dan hoog */
.species figure:hover img { transform: scale(1.04); }
.species figcaption { position: absolute; inset: auto 0 0 0; padding: 3rem 1rem 1rem; background: linear-gradient(to top, rgba(6,16,33,.96) 0%, rgba(6,16,33,.8) 45%, transparent 100%); color: #fff; font-family: var(--font-head); font-weight: 600; font-size: 1rem; margin: 0; }
.species figcaption small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--aqua-soft); font-size: .85rem; }

/* infrastructuurblok */
.infra { display: grid; gap: 1.25rem; }
.infra-item { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.25rem; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.infra-item .icon { margin: 0; }
.infra-item h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.infra-item p { margin: 0; font-size: 1rem; }
@media (min-width: 760px) { .infra { grid-template-columns: repeat(2, 1fr); } }

/* twee werelden: binnen en buiten */
.worlds { display: grid; gap: 1.25rem; }
.world { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 380px; display: grid; align-items: end; isolation: isolate; }
.world img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: transform 1s var(--ease); }
.world:hover img { transform: scale(1.03); }
.world::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6,16,33,.97) 0%, rgba(6,16,33,.9) 32%, rgba(6,16,33,.55) 62%, rgba(6,16,33,.25) 100%); }
.world-body { padding: clamp(1.25rem, 3vw, 2rem); }
.world-body .eyebrow { margin-bottom: .4rem; }
.world-body h3 { font-size: clamp(1.4rem, 1rem + 1.5vw, 2rem); }
.world-body p { color: #D8E8EC; max-width: 46ch; }
@media (min-width: 860px) { .worlds { grid-template-columns: 1fr 1fr; } .world { min-height: 480px; } }

/* rustige waterlijn als sectiescheiding */
.waterline { height: 2px; background: linear-gradient(90deg, transparent, var(--aqua), transparent); box-shadow: 0 0 16px rgba(64,208,196,.6); opacity: .8; }

/* galerij aqua */
body.aqua .gallery img { border-radius: var(--radius-sm); }

/* mobiel: de hero-tekst leesbaar houden */
@media (max-width: 640px) {
  .aqua-hero { min-height: 82vh; }
  .aqua-hero-media img { object-position: 60% 40%; }
}

/* getal en eenheid blijven samen op een regel */
.nowrap { white-space: nowrap; }

/* de merkzin onder de kop van LUX AQUA */
.aqua-claim { font-family: var(--font-head); font-weight: 600; font-size: clamp(1rem, .9rem + .5vw, 1.25rem); color: var(--aqua); letter-spacing: .01em; margin: -.4em 0 1.1em; text-shadow: 0 2px 14px rgba(0,0,0,.6); }

/* bronvermelding bij foto's die niet van ons zijn: verplicht bij CC BY */
.fotobron { margin-top: 1.25rem; font-size: .82rem; line-height: 1.5; color: var(--aqua-muted); }

/* het bestelblok in de aquawereld */
body.aqua .bestel { background: rgba(64,208,196,.1); border-color: var(--aqua); }
body.aqua .bestel .eyebrow { color: var(--aqua); }
body.aqua .bestel h3 { color: #fff; }
body.aqua .bestel p { color: var(--aqua-soft); }

/* ---------- de Zeven Weken Strategie ---------- */
.weken { list-style: none; counter-reset: none; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .weken { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .weken { grid-template-columns: repeat(4, 1fr); } }
.weken li { background: rgba(255,255,255,.05); border: 1px solid var(--aqua-line); border-left: 3px solid var(--aqua); border-radius: var(--radius-sm); padding: 1.1rem 1.25rem; }
.weken .week-nr { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--aqua); margin-bottom: .35rem; }
.weken h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.weken p { font-size: .98rem; color: var(--aqua-soft); }
.waarde-kop { margin-top: 2.75rem; margin-bottom: 1rem; }
/* brede inhoud schuift in haar eigen kader, de pagina zelf schuift nooit zijwaarts */
.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.waardetabel { width: 100%; border-collapse: collapse; min-width: 340px; background: rgba(255,255,255,.05); }
.waardetabel th, .waardetabel td { text-align: left; padding: .7rem 1.1rem; border-bottom: 1px solid var(--aqua-line); }
.waardetabel thead th { background: var(--deep); color: #fff; font-family: var(--font-head); font-size: .92rem; letter-spacing: .04em; }
.waardetabel tbody th { font-weight: 600; color: #fff; }
.waardetabel tbody td { color: var(--aqua); font-weight: 600; }
.waardetabel tbody tr:last-child th, .waardetabel tbody tr:last-child td { border-bottom: 0; }

/* ---------- het app-blok van LUX AQUA ---------- */
.app-klein { font-size: .95rem; color: var(--aqua-muted); margin-top: .9rem; }
.app-qr { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.app-qr img { width: min(100%, 260px); height: auto; background: #fff; padding: .9rem; border-radius: var(--radius-sm); box-shadow: 0 14px 40px -18px rgba(0,0,0,.8); }
.app-qr figcaption { font-size: .95rem; color: var(--aqua-soft); max-width: 26ch; }

/* ---------- social-blok en cookiemelding in de aquawereld ---------- */
body.aqua .social-band { background: var(--deep); color: var(--aqua-soft); }
body.aqua .social-band .eyebrow { color: var(--aqua); }
body.aqua .social-band p { color: var(--aqua-soft); }
body.aqua .social-icon { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); }
body.aqua .social-icon:hover { background: rgba(255,255,255,.24); border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(64,208,196,.24), 0 14px 30px -14px rgba(0,0,0,.7); }
body.aqua .social-icon-mark { background: #fff; color: var(--marine); }
body.aqua .social-icon-tekst span { color: var(--aqua-muted); }
body.aqua .cookiebalk { background: var(--marine-2); border-top-color: var(--aqua); }
body.aqua .cookiebalk h2 { color: #fff; }
body.aqua .cookiebalk p { color: var(--aqua-soft); }