/* ==========================================================================
   ZOEF huisstijl voor Enfold (child theme)
   Kleuren en fonts: zie huisstijlboekje. Alle ZOEF-klassen beginnen met z-
   ========================================================================== */

@font-face { font-family: 'Bricolage Grotesque'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/dm-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/caveat-latin-600-normal.woff2') format('woff2'); }

:root {
  --z-ink: #141614;
  --z-ink-2: #2E332E;
  --z-lime: #A6E07C;
  --z-lime-2: #94D167;
  --z-paper: #F6F5EF;
  --z-white: #FFFFFF;
  --z-forest: #3F7A2E;
  --z-muted: #3E433D;
  --z-soft: #C9CCC6;
  --z-grey: #4F554E;
  --z-line: #E6E6DE;
  --z-stone: #E9E8E0;
  --z-font-d: 'Bricolage Grotesque', 'Arial Black', system-ui, sans-serif;
  --z-font-b: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --z-font-h: 'Caveat', 'Comic Sans MS', cursive;
  --z-radius: 28px;
}

/* ---------- Basis ---------- */
html body#top, #top #wrap_all, #top #main, #top .main_color { background-color: var(--z-paper); }
#top, #top body, #top p, #top li, #top input, #top textarea, #top select, #top button, #top .avia_textblock, #top .av-main-nav, #top .toggler, #top .toggle_content {
  font-family: var(--z-font-b);
}
#top .main_color, #top .main_color p, #top .main_color li { color: var(--z-ink); }
#top .main_color p, #top .main_color li { font-size: 17px; line-height: 1.55; }
#top h1, #top h2, #top h3.z-d, #top .z-d {
  font-family: var(--z-font-d); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; text-transform: none; text-wrap: balance; color: inherit; margin: 0;
}
#top h1 { font-size: clamp(44px, 7vw, 92px); }
#top h2 { font-size: clamp(34px, 4.6vw, 60px); }
#top h3 { font-family: var(--z-font-b); font-weight: 700; font-size: 21px; line-height: 1.3; letter-spacing: 0; text-transform: none; margin: 0; color: inherit; }
#top .main_color a { color: var(--z-ink); }
#top .main_color a:hover { color: var(--z-forest); }
#top .avia_textblock p { margin: 0; }
#top :focus-visible { outline: 3px solid var(--z-forest); outline-offset: 3px; }

/* Pagina's zonder titelbalk en zonder zijbalk: inhoud volle breedte */
#top.page .title_container { display: none; }

/* ---------- Secties (Enfold Color Section + extra klasse) ---------- */
#top .avia-section.z-sec { border: 0; }
#top .avia-section.z-sec .content, #top .avia-section.z-sec .sidebar { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
#top .avia-section.z-tight .content { padding-top: 0; }
#top .avia-section.z-hero .content { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
#top .z-paper { background-color: var(--z-paper); }
#top .z-white { background-color: var(--z-white); }
#top .z-ink { background-color: var(--z-ink); }
#top .z-lime { background-color: var(--z-lime); }
#top .z-ink, #top .z-ink p, #top .z-ink li, #top .z-ink h1, #top .z-ink h2, #top .z-ink h3 { color: var(--z-white); }
#top .z-ink a:not(.z-btn) { color: var(--z-lime); }
#top .z-ink .z-muted, #top .z-ink .z-lead { color: var(--z-soft); }
#top .avia-section.z-sec .container .av-content-full > .flex_column, #top .avia-section.z-sec .entry-content-wrapper { gap: 0; }

/* ---------- Typografische accenten ---------- */
#top .z-lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--z-muted); max-width: 60ch; }
#top .z-muted { color: var(--z-muted); }
#top .z-eyebrow { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--z-forest); }
#top .z-ink .z-eyebrow { color: var(--z-lime); }
#top .z-hand { font-family: var(--z-font-h); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; color: var(--z-forest); }
#top .z-ink .z-hand { color: var(--z-lime); }
#top .z-brush, #top .z-brush-ink {
  display: inline-block; padding: 0.04em 0.28em 0.12em; transform: rotate(-2deg);
  clip-path: polygon(1% 14%, 7% 3%, 31% 8%, 56% 0, 81% 6%, 99% 1%, 97% 42%, 100% 90%, 71% 97%, 41% 91%, 13% 100%, 2% 89%, 0 52%);
}
#top .z-brush, #top .z-ink .z-brush { background: var(--z-lime); color: var(--z-ink); }
#top .z-brush-ink { background: var(--z-ink); color: var(--z-white); }
#top .z-stack { display: flex; flex-direction: column; gap: 20px; }
#top .z-stack-lg { display: flex; flex-direction: column; gap: 32px; }
#top .z-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
#top .z-head { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }

/* ---------- Knoppen ---------- */
#top .z-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 17px/1 var(--z-font-b); text-decoration: none; border: 2px solid transparent; cursor: pointer; }
#top .z-btn-ink, #top .main_color .z-btn-ink { background: var(--z-ink); color: var(--z-white); }
#top .z-btn-ink:hover { background: var(--z-ink-2); color: var(--z-white); }
#top .z-btn-lime, #top .main_color .z-btn-lime, #top .z-ink .z-btn-lime { background: var(--z-lime); color: var(--z-ink); }
#top .z-btn-lime:hover { background: var(--z-lime-2); color: var(--z-ink); }
#top .z-btn-line { border-color: currentColor; color: inherit; background: transparent; }
#top .z-ink .z-btn-line { color: var(--z-white); }

/* ---------- Iconen (lijniconen als CSS-masker, blijven heel in de editor) ---------- */
#top .zi { display: inline-block; width: 26px; height: 26px; background-color: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: middle; font-size: 0; line-height: 0; flex-shrink: 0; }
.zi-euro { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 6.5A7 7 0 1 0 17 17.5M4 10h9M4 14h9'/%3E%3C/svg%3E"); }
.zi-pin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.zi-wrench { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-.5-.5-2.5z'/%3E%3C/svg%3E"); }
.zi-bolt { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.zi-phone { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.zi-lock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.5-2'/%3E%3C/svg%3E"); }
.zi-check { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.zi-clock { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.zi-battery { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='18' height='10' rx='2'/%3E%3Cpath d='M22 11v2M6 10v4M10 10v4'/%3E%3C/svg%3E"); }
.zi-bike { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='16' r='3.5'/%3E%3Ccircle cx='18' cy='16' r='3.5'/%3E%3Cpath d='M6 16l4-8h5l3 8M10 8l2 8'/%3E%3C/svg%3E"); }
.zi-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.zi-search { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.zi-tiktok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12a4 4 0 1 0 4 4V3c.5 2.5 2.5 4.5 5 5'/%3E%3C/svg%3E"); }
.zi-insta { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
#top .z-btn .zi { width: 18px; height: 18px; }
#top .z-icon-dot { width: 52px; height: 52px; border-radius: 999px; background: var(--z-lime); color: var(--z-ink); display: grid; place-items: center; flex-shrink: 0; }
#top .z-icon-sq { width: 52px; height: 52px; border-radius: 16px; background: var(--z-ink); color: var(--z-lime); display: grid; place-items: center; }

/* ---------- Grids en kaarten ---------- */
#top .z-grid { display: grid; gap: 24px; }
#top .z-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
#top .z-cols-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
#top .z-cols-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
#top .z-card { background: var(--z-white); border-radius: var(--z-radius); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; position: relative; }
#top .z-white .z-card { background: var(--z-paper); }
#top .z-card.z-dark { background: var(--z-ink); }
#top .z-card.z-dark, #top .z-card.z-dark p, #top .z-card.z-dark h3, #top .z-card.z-dark li { color: var(--z-white); }
#top .z-card.z-dark .z-muted { color: var(--z-soft); }
#top .z-card .z-btn { margin-top: auto; }
#top .z-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
#top .z-price strong { font-family: var(--z-font-d); font-weight: 800; font-size: clamp(52px, 6vw, 72px); letter-spacing: -0.03em; line-height: 1; }
#top .z-price span { color: var(--z-grey); font-size: 18px; }
#top .z-dark .z-price strong { color: var(--z-lime); }
#top .z-dark .z-price span { color: var(--z-soft); }
#top .z-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#top .z-checks li { margin: 0; color: var(--z-muted); }
#top .z-checks li::before { content: "✓  "; font-weight: 700; color: var(--z-forest); }
#top .z-dark .z-checks li, #top .z-ink .z-checks li { color: var(--z-soft); }
#top .z-dark .z-checks li::before, #top .z-ink .z-checks li::before { color: var(--z-lime); }
#top .z-rule { height: 1px; background: var(--z-line); border: 0; margin: 4px 0; }
#top .z-dark .z-rule { background: var(--z-ink-2); }
#top .z-tag { position: absolute; right: 24px; top: -16px; font-weight: 700; font-size: 16px; }

/* ---------- Stappen ---------- */
#top .z-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
#top .z-steps li { display: flex; gap: 18px; align-items: flex-start; margin: 0; }
#top .z-num { flex-shrink: 0; width: 56px; height: 56px; border-radius: 999px; background: var(--z-lime); color: var(--z-ink); font-family: var(--z-font-d); font-weight: 800; font-size: 26px; display: grid; place-items: center; }
#top .z-big-num { font-family: var(--z-font-d); font-weight: 800; font-size: 84px; line-height: 1; color: var(--z-lime); -webkit-text-stroke: 2px var(--z-ink); }
#top .z-dark .z-big-num { -webkit-text-stroke: 0; }

/* ---------- Hero ---------- */
#top .z-facts { display: flex; flex-wrap: wrap; gap: 16px 32px; padding-top: 8px; }
#top .z-facts div { display: flex; flex-direction: column; }
#top .z-facts strong { font-family: var(--z-font-d); font-weight: 800; font-size: 28px; }
#top .z-facts span { font-size: 15px; color: var(--z-grey); }
#top .z-hero-media { position: relative; }
#top .z-hero-media .avia-image-container, #top .z-hero-media .avia-image-container-inner, #top .z-hero-media .av-image-caption-overlay-center { width: 100%; }
#top .z-hero-media img, #top img.z-hero-img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; object-position: center 20%; border-radius: 32px; }
#top .z-sticker { position: absolute; right: -10px; top: -14px; z-index: 2; width: clamp(104px, 11vw, 136px); aspect-ratio: 1; border-radius: 999px; background: var(--z-lime); color: var(--z-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: rotate(10deg); font-size: 14px; font-weight: 500; line-height: 1.2; text-align: center; }
#top .z-sticker strong { font-family: var(--z-font-d); font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; }
#top .z-photo img, #top img.z-photo { width: 100%; object-fit: cover; border-radius: var(--z-radius); }
#top .z-photo .avia-image-container-inner, #top .z-photo .avia_image { border-radius: var(--z-radius); overflow: hidden; }

/* ---------- Quote ---------- */
#top .z-quote { background: var(--z-ink); color: var(--z-white); border-radius: 32px; padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px 48px; align-items: center; grid-template-columns: 1fr; margin: 0; }
@media (min-width: 760px) { #top .z-quote { grid-template-columns: 220px 1fr; } }
#top .z-quote img { width: 100%; max-width: 240px; aspect-ratio: 1; object-fit: cover; border-radius: 24px; }
#top .z-quote blockquote { margin: 0; padding: 0; border: 0; font-family: var(--z-font-d); font-weight: 800; font-size: clamp(30px, 3.6vw, 48px); line-height: 1.1; letter-spacing: -0.02em; color: var(--z-white); }
#top .z-quote blockquote span { color: var(--z-lime); }
#top .z-quote p { color: var(--z-soft); margin-top: 16px; }
#top .z-quote p strong { color: var(--z-white); }

/* ---------- Tabel ---------- */
#top .z-table-wrap { overflow-x: auto; border: 1px solid var(--z-line); border-radius: 20px; }
#top .z-table-wrap table { width: 100%; border-collapse: collapse; margin: 0; background: transparent; }
#top .z-table-wrap th, #top .z-table-wrap td { text-align: left; padding: 16px 20px; border: 0; border-top: 1px solid var(--z-line); font-size: 17px; background: transparent; color: var(--z-ink); }
#top .z-table-wrap thead th { border-top: 0; background: var(--z-paper); font-weight: 700; }

/* ---------- FAQ (Enfold Toggles met klasse z-faq) ---------- */
#top .z-faq .single_toggle { background: var(--z-white); border-radius: 18px; margin-bottom: 12px; border: 0; }
#top .z-faq .toggler { border: 0; background: transparent; font-weight: 700; font-size: 19px; padding: 22px 70px 22px 24px; color: var(--z-ink); }
#top .z-faq .toggle_icon { right: 24px; left: auto; width: 36px; height: 36px; border-radius: 999px; background: var(--z-lime); border: 0; top: 50%; transform: translateY(-50%); }
#top .z-faq .toggle_icon .vert_icon, #top .z-faq .toggle_icon .hor_icon { border-color: var(--z-ink); }
#top .z-faq .toggle_wrap { border: 0; background: transparent; }
#top .z-faq .toggle_content { padding: 0 24px 22px; border: 0; color: var(--z-muted); }

/* ---------- Rekenhulp ---------- */
#top .z-calc { background: var(--z-ink); color: var(--z-white); border-radius: 32px; padding: clamp(24px, 4vw, 48px); display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { #top .z-calc { grid-template-columns: 1fr 400px; } }
#top .z-calc h2, #top .z-calc label { color: var(--z-white); }
#top .z-seg { display: flex; gap: 10px; flex-wrap: wrap; }
#top .z-seg button { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--z-lime); background: transparent; color: var(--z-white); font: 700 16px var(--z-font-b); cursor: pointer; }
#top .z-seg button[aria-pressed="true"] { background: var(--z-lime); color: var(--z-ink); }
#top .z-calc input[type=range] { width: 100%; accent-color: var(--z-lime); height: 32px; padding: 0; border: 0; background: transparent; }
#top .z-calc-out { background: var(--z-lime); color: var(--z-ink); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 8px; }
#top .z-calc-out strong { font-family: var(--z-font-d); font-size: clamp(56px, 7vw, 80px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

/* ---------- Formulieren (Enfold Contact Form met klasse z-form) ---------- */
#top .z-form input[type=text], #top .z-form input[type=email], #top .z-form input[type=tel], #top .z-form textarea, #top .z-form select {
  min-height: 54px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #CFD0C6; background: var(--z-white); color: var(--z-ink); font: 400 17px var(--z-font-b);
}
#top .z-form label { font-weight: 700; font-size: 15px; color: inherit; }
#top .z-form input[type=submit] { min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--z-ink); color: var(--z-white); font: 700 17px var(--z-font-b); cursor: pointer; }
#top .z-ink .z-form input[type=submit] { background: var(--z-lime); color: var(--z-ink); }
#top .z-ink .z-form input[type=text], #top .z-ink .z-form input[type=email] { background: #1F231F; border-color: #4A4F4A; color: var(--z-white); }
#top .z-ink .z-form label { color: var(--z-white); }

/* ---------- Locaties ---------- */
#top .z-hubs { display: flex; flex-direction: column; gap: 12px; }
#top .z-hub { background: var(--z-white); border-radius: 20px; padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; }
#top .z-hub.z-active { background: var(--z-ink); }
#top .z-hub.z-active, #top .z-hub.z-active p { color: var(--z-white); }
#top .z-hub .z-top { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; font-size: 18px; }
#top .z-hub .z-open { font-size: 14px; color: var(--z-forest); white-space: nowrap; }
#top .z-hub.z-active .z-open { color: var(--z-lime); }
#top .z-hub small { font-size: 15px; color: var(--z-grey); }
#top .z-hub.z-active small { color: var(--z-soft); }
#top .z-search { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 18px; border-radius: 16px; background: var(--z-white); border: 1.5px solid #CFD0C6; margin-bottom: 12px; }
#top .z-search input { border: 0; outline: 0; flex: 1; min-width: 0; font: 400 17px var(--z-font-b); background: transparent; margin: 0; padding: 0; box-shadow: none; }
#top .z-map { position: relative; min-height: 520px; border-radius: 32px; overflow: hidden; background: #E3E8DD; }
#top .z-map i { position: absolute; display: block; }
#top .z-map .w { background: #CFDFE6; }
#top .z-map .r { background: var(--z-white); }
#top .z-map .p { background: #CFDDBF; border-radius: 14px; }
#top .z-pin { position: absolute; width: 32px; height: 32px; border-radius: 999px; background: var(--z-ink); border: 3px solid var(--z-white); display: grid; place-items: center; }
#top .z-pin::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--z-lime); }
#top .z-chip { position: absolute; padding: 7px 13px; border-radius: 999px; background: var(--z-white); color: var(--z-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
#top .z-chip.z-dark { background: var(--z-ink); color: var(--z-white); }

/* ---------- Diversen ---------- */
#top .z-ph { border-radius: 20px; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, #EDEDE5 0 12px, #E4E4DA 12px 24px); display: grid; place-items: center; color: var(--z-grey); font-weight: 700; font-size: 15px; }
#top .z-pain { display: flex; flex-direction: column; gap: 12px; }
#top .z-pain .z-said { background: var(--z-stone); border-radius: 20px; padding: 20px 22px; color: var(--z-muted); }
#top .z-pain .z-fix { background: var(--z-white); border: 2px solid var(--z-ink); border-radius: 20px; padding: 20px 22px; flex: 1; }
#top .z-pain .z-fix.z-lime-bg { background: var(--z-lime); border-color: var(--z-lime); }
#top .z-qr { width: 200px; aspect-ratio: 1; border-radius: 24px; background: var(--z-white); border: 3px solid var(--z-ink); display: grid; place-items: center; font-weight: 700; color: var(--z-grey); text-align: center; padding: 12px; }
#top .z-cta h2 { max-width: 20ch; }
#top .z-bar { height: 6px; width: 80px; border-radius: 3px; background: var(--z-lime); display: block; }

/* ---------- Telefoon-mockup ---------- */
#top .z-phone { width: min(300px, 100%); aspect-ratio: 300 / 610; margin-inline: auto; padding: 11px; border-radius: 46px; background: #000; border: 1px solid var(--z-ink-2); }
#top .z-phone .z-screen { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #E3E8DD; }
#top .z-phone .z-sheet { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--z-white); color: var(--z-ink); border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
#top .z-phone .z-fake-btn { min-height: 44px; border-radius: 999px; background: var(--z-ink); color: var(--z-white); font-weight: 700; display: grid; place-items: center; }
#top .z-phone .z-pill { position: absolute; left: 16px; top: 24px; background: var(--z-white); color: var(--z-ink); border-radius: 999px; padding: 6px 12px; font-family: var(--z-font-d); font-weight: 800; font-size: 14px; }

/* ---------- Header (Enfold) ---------- */
#top #header_main, #top #header .header_bg, #top .av_header_transparency #header_main { background-color: var(--z-ink); border-color: var(--z-ink); }
#top #header .av-main-nav > li > a, #top #header .av-main-nav > li > a .avia-menu-text { color: var(--z-white); font-family: var(--z-font-b); font-weight: 500; font-size: 16px; text-transform: none; letter-spacing: 0; }
#top #header .av-main-nav > li > a:hover .avia-menu-text { color: var(--z-lime); }
#top #header .av-main-nav > li.current-menu-item > a .avia-menu-text { background: var(--z-lime); color: var(--z-ink); font-weight: 700; padding: 10px 16px; border-radius: 999px; }
#top #header .av-main-nav > li > a .avia-menu-fx { display: none; }
#top #header .av-main-nav > li.av-menu-button > a .avia-menu-text { border: 2px solid var(--z-lime); background: transparent; color: var(--z-lime); border-radius: 999px; padding: 10px 20px; font-weight: 700; }
#top #header .av-main-nav > li.av-menu-button > a:hover .avia-menu-text { background: var(--z-lime); color: var(--z-ink); }
#top #header .av-hamburger-inner, #top #header .av-hamburger-inner::before, #top #header .av-hamburger-inner::after { background-color: var(--z-white); }
#top #header .av-hamburger.is-active .av-hamburger-inner { background-color: transparent; }
#top #header .logo img { max-height: 40px; width: auto; }
#top .av-burger-overlay-bg { background: var(--z-ink); opacity: 0.98; }
#top #av-burger-menu-ul li a { color: var(--z-white); font-family: var(--z-font-b); font-weight: 500; }
#top #av-burger-menu-ul li a:hover { color: var(--z-lime); }

/* ---------- Footer-pagina ---------- */
#top .z-footer .z-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px; }
#top .z-footer h4 { font-family: var(--z-font-b); font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--z-lime); margin: 0 0 14px; }
#top .z-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
#top .z-footer ul li { margin: 0; }
#top .z-footer a { color: var(--z-white); text-decoration: none; }
#top .z-footer a:hover { color: var(--z-lime); }
#top .z-footer .z-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--z-ink-2); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; color: #A3A8A2; }
#top .z-footer .z-bottom a { color: #A3A8A2; }
#top .z-social { display: flex; gap: 10px; }
#top .z-social a { width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid #4A4F4A; display: grid; place-items: center; }
#top .z-social .zi { width: 20px; height: 20px; }
#top .z-logo img { height: 34px; width: auto; }

/* ---------- Landingspagina (template Blank) ---------- */
#top .z-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }