/* Opperdash website: huisstijl en opmaak (waarden overgenomen van het Odoo-ontwerp) */

@font-face { font-family: "Teko"; src: url("../fonts/teko-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/lato-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --rood: #ED1C29;
  --rood-donker: #BD2126;
  --groen: #DCE8D3;
  --olijf: #5D8139;
  --indigo: #19194f;
  --nacht: #010723;
  --wit: #FFFEFB;
  --inkt: #292A2A;
  --tekst: #212529;
  --oranje: #EC9A29;
  --max: 1140px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 14px;
  --header-h: 78px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Lato", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: var(--tekst);
  background: var(--wit);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }

/* Koppen: Teko licht voor grote titels, vet voor kleinere */
h1, h2, h3, .kop {
  font-family: "Teko", sans-serif;
  text-transform: uppercase;
  margin: 0 0 .35em;
  color: var(--tekst);
}
h1 { font-size: clamp(3.6rem, 8vw, 6.4rem); font-weight: 600; line-height: .88; }
h2 { font-size: clamp(2.6rem, 5vw, 3.64rem); font-weight: 600; line-height: .9; }
h2.zwaar { font-size: clamp(2.3rem, 4.4vw, 3.1rem); font-weight: 700; }
h3 { font-size: 1.63rem; font-weight: 700; line-height: .95; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sectie { padding: clamp(56px, 8vw, 80px) 0; }
.sectie--groen { background: var(--groen); }
.sectie--indigo { background: var(--indigo); color: var(--wit); }
.sectie--indigo h1, .sectie--indigo h2, .sectie--indigo h3 { color: var(--wit); }
.midden { text-align: center; }
.visueel-verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--wit); padding: 8px 12px; }

/* Knoppen */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Teko", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  padding: 15px 34px 13px;
  border: 1px solid var(--indigo);
  border-radius: 8px;
  color: var(--indigo);
  background: transparent;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.knop--klein { font-size: 23px; padding: 11px 26px 9px; border-radius: 6px; }
.knop:hover, .knop:focus-visible { background: var(--indigo); color: var(--wit); }
.knop--vol { background: var(--indigo); color: #fff; }
.knop--vol:hover, .knop--vol:focus-visible { background: var(--rood); border-color: var(--rood); color: var(--wit); }
.knop--licht { border-color: var(--groen); color: var(--groen); }
.knop--licht:hover, .knop--licht:focus-visible { background: var(--groen); border-color: var(--groen); color: var(--indigo); }
.knop--rood { background: var(--rood); border-color: var(--rood); color: var(--groen); }
.knop--rood:hover, .knop--rood:focus-visible { background: #c91823; border-color: #c91823; color: var(--groen); }
.knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.midden .knoppen { justify-content: center; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--indigo);
  height: var(--header-h);
}
.header__binnen {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
}
.nav { display: flex; gap: 14px; white-space: nowrap; }
.nav a, .mobiel-menu__links a {
  font-family: "Teko", sans-serif;
  font-size: clamp(20px, 1.75vw, 28px);
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.55);
  transition: color .15s ease-in-out;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"],
.mobiel-menu__links a:hover, .mobiel-menu__links a[aria-current="page"] { color: rgba(255,255,255,.9); }

/* Taalkeuze */
.talen { display: flex; align-items: center; gap: 2px; margin-right: 14px; }
.talen a {
  font-family: "Teko", sans-serif; font-size: 20px; line-height: 1; letter-spacing: .02em;
  color: rgba(255,255,255,.55); text-decoration: none;
  padding: 8px 6px 5px; border-radius: 4px; min-width: 32px; text-align: center;
  transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
.talen a:hover, .talen a:focus-visible { color: #fff; }
.talen a[aria-current="true"] { color: var(--indigo); background: var(--groen); }
.logo { justify-self: center; position: relative; top: 36px; display: inline-flex; }
.logo img {
  height: 60px; width: auto;
  transition: transform .30s cubic-bezier(.2,.85,.28,1.2);
  transform-origin: center center;
  will-change: transform;
}
.logo:hover img, .logo:focus-visible img { transform: rotate(-7deg); }
.header__rechts { justify-self: end; display: flex; align-items: center; }
.header .knop {
  font-size: 22px; line-height: 1.4; padding: 6px 12px;
  border-color: var(--groen); color: var(--groen); border-radius: 4px;
}
.header .knop:hover, .header .knop:focus-visible { background: var(--groen); color: var(--indigo); }
.menu-knop { display: none; background: none; border: 0; padding: 0; width: 44px; height: 44px; cursor: pointer; color: var(--groen); align-items: center; justify-content: center; }
.menu-knop svg { width: 30px; height: 30px; }
.menu-knop .icoon-dicht { display: none; }
.menu-knop[aria-expanded="true"] .icoon-open { display: none; }
.menu-knop[aria-expanded="true"] .icoon-dicht { display: block; }
.mobiel-menu { display: none; }

@media (max-width: 1100px) {
  :root { --header-h: 64px; }
  .nav, .header__rechts .talen { display: none; }
  .menu-knop { display: inline-flex; justify-self: start; margin-left: -8px; }
  .logo { grid-column: 2; top: 18px; }
  .logo img { height: 46px; }
  .header .knop { font-size: 20px; padding: 5px 12px 3px; }
  .mobiel-menu[data-open="true"] {
    display: flex; flex-direction: column; justify-content: flex-start;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--indigo); overflow-y: auto;
    padding: 48px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  }
  .mobiel-menu__links { display: flex; flex-direction: column; gap: 4px; }
  .mobiel-menu__links a { font-size: 40px; line-height: 1.15; }
  .talen--mobiel { margin: auto 0 0; padding-top: 32px; gap: 8px; }
  .talen--mobiel a { font-size: 24px; padding: 10px 14px 7px; min-width: 52px; border: 1px solid rgba(220,232,211,.35); }
  .talen--mobiel a[aria-current="true"] { border-color: var(--groen); }
  body.menu-open { overflow: hidden; }
}
@media (max-width: 420px) {
  .header .knop { font-size: 18px; padding: 4px 10px 2px; }
  .logo img { height: 38px; }
  .logo { top: 16px; }
  .mobiel-menu__links a { font-size: 34px; }
}

/* Home intro */
.intro {
  background: var(--indigo);
  color: var(--wit);
  text-align: center;
  min-height: clamp(560px, calc(92svh - var(--header-h)), 960px);
  display: flex; align-items: center;
  padding: 120px 0 80px;
}
.intro .container { width: 100%; }
.intro__woordmerk { width: min(760px, 88%); margin: 0 auto; }
.intro__lijn { width: 120px; height: 3px; background: var(--rood); margin: 36px auto; border: 0; }

/* Foto-hero (paginatop) */
.hero {
  position: relative;
  min-height: clamp(440px, 80vh, 760px);
  display: flex; align-items: flex-end;
  color: var(--wit);
  background: var(--inkt);
  overflow: hidden;
}
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(0,0,0,.55)); }
.hero__tekst { position: relative; z-index: 1; padding-bottom: clamp(40px, 7vw, 80px); max-width: 760px; margin-left: 0; }
.hero .container { max-width: var(--max); margin: 0 auto; }
.hero h1 { color: var(--wit); }
.hero p { max-width: 620px; color: #fff; }
.hero--midden { align-items: center; text-align: center; }
.hero--midden .hero__tekst { padding-bottom: 0; max-width: none; }
.hero--midden p { margin-left: auto; margin-right: auto; }

/* Volledige foto zonder tekst */
.beeld { height: clamp(320px, 75vh, 760px); overflow: hidden; }
.beeld img { width: 100%; height: 100%; object-fit: cover; }

/* Tekst + beeld */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo--omgekeerd .duo__beeld { order: 2; }
.duo__beeld img { width: 100%; border-radius: var(--radius); object-fit: cover; aspect-ratio: 3 / 2; }
.duo__beeld--hoog img { aspect-ratio: 2 / 3; max-height: 640px; }
.duo__tekst .knoppen { margin-top: 24px; }
@media (max-width: 800px) {
  .duo { grid-template-columns: 1fr; }
  .duo--omgekeerd .duo__beeld { order: 0; }
}

/* Tweekoloms kop + tekst */
.kopblok { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.kopblok h2 { font-size: clamp(3rem, 6.5vw, 4.5rem); font-weight: 600; margin: 0; }
@media (max-width: 800px) { .kopblok { grid-template-columns: 1fr; } }

/* Lopende band */
.band { background: var(--indigo); color: var(--groen); overflow: hidden; white-space: nowrap; padding: 14px 0 8px; }
.band__spoor { display: inline-flex; animation: band 32s linear infinite; }
.band span { font-family: "Teko", sans-serif; font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.6rem); text-transform: uppercase; white-space: pre; }
@keyframes band { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Testimonial */
.citaat { max-width: 760px; margin: 0 auto; text-align: center; }
.citaat img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; }
.citaat__naam { font-weight: 700; margin: 0; }
.citaat__functie { margin: 0 0 24px; }
.citaat__functie a { color: var(--indigo); }
.citaat blockquote { margin: 0; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.4; }

/* Stappen */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 40px 0 48px; }
.stap { text-align: center; }
.stap__nr { font-family: "Teko", sans-serif; font-weight: 700; font-size: 2.1rem; line-height: .9; color: var(--rood); margin-bottom: 8px; }
@media (max-width: 800px) { .stappen { grid-template-columns: 1fr; gap: 28px; } }

/* Voordelen */
.voordelen { list-style: none; padding: 0; margin: 32px 0 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 40px; }
.voordelen li { flex: 0 1 calc((100% - 80px) / 3); min-width: 240px; }
.voordelen li strong { display: block; font-family: "Teko", sans-serif; font-weight: 600; font-size: 1.7rem; text-transform: uppercase; color: var(--indigo); line-height: 1.1; margin-bottom: 4px; }
.voordelen li strong::before { content: "✓ "; color: var(--rood); }

/* Praktische info */
.praktisch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.praktisch__blok { background: var(--wit); border-radius: var(--radius); padding: 24px; }
.praktisch__blok h3 { margin-bottom: .4em; }
.praktisch__blok ul { margin: 0; padding-left: 1.1em; }
.praktisch__blok li { margin-bottom: .35em; }

/* Veelgestelde vragen */
.faq { max-width: 820px; margin: 32px auto 0; }
.faq details { border-bottom: 1px solid rgba(33,37,41,.15); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: "Teko", sans-serif; font-size: 1.6rem; font-weight: 500; line-height: 1.1; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary { transition: color .2s ease; }
.faq summary:hover, .faq summary:focus-visible { color: var(--indigo); }
.faq summary::after {
  content: "+"; color: var(--rood); font-weight: 700; flex: 0 0 auto;
  display: inline-block; transition: transform .35s cubic-bezier(.2,.85,.28,1.4);
}
.faq details[open] summary::after { transform: rotate(45deg) scale(1.15); }
.faq details p { margin: 12px 0 0; transform-origin: top left; }
.faq details[open] p { animation: faqPop .42s cubic-bezier(.2,.85,.28,1.25) both; }
.faq details.sluit p { animation: faqSluit .2s ease-in both; }
.faq details.sluit summary::after { transform: none; }
@keyframes faqPop {
  0% { opacity: 0; transform: translateY(-10px) scale(.94); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes faqSluit {
  to { opacity: 0; transform: translateY(-8px) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .faq details[open] p, .faq details.sluit p { animation: none; }
  .faq summary::after { transition: none; }
}

/* Formulieren */
.formulier { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.formulier .vol { grid-column: 1 / -1; }
.formulier label { display: block; font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
.formulier input, .formulier textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 10px 12px; border: 1px solid rgba(33,37,41,.25); border-radius: 8px; background: #fff; color: var(--tekst);
}
.formulier input:focus, .formulier textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(25,25,79,.15); }
.formulier textarea { min-height: 150px; resize: vertical; }
.verplicht { color: var(--rood); }
.verborgen { position: absolute; left: -9999px; }
@media (max-width: 640px) { .formulier { grid-template-columns: 1fr; } }

.contactinfo a { color: var(--indigo); font-weight: 700; }
.contact-logo { width: 220px; margin: 0 auto 24px; }

/* Footer */
.footer { background: var(--nacht); color: #fff; padding: 64px 0 40px; }
.footer__raster { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; align-items: start; }
.footer h2 { font-family: "Teko", sans-serif; font-size: 26px; font-weight: 700; line-height: .9; color: var(--wit); margin: 0 0 14px; }
.footer p { margin: 0 0 .6em; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: var(--groen); }
.footer__logolink { display: inline-block; }
.footer__logolink:hover { opacity: .85; }
.footer__logo { width: 252px; margin-bottom: 16px; }
.social { display: flex; gap: 2px; margin-left: -11px; }
.social a { display: inline-flex; padding: 11px; color: var(--groen); transition: transform .22s ease; }
.social a:hover { transform: translateY(-2px); color: var(--groen); }
.social svg { width: 22px; height: 22px; fill: currentColor; }
.footer__onder { margin-top: 40px; }
.footer__onder a { color: var(--oranje); font-weight: 700; }
.footer__onder a:hover { color: var(--oranje); text-decoration: underline; }
@media (max-width: 800px) {
  .footer__raster { grid-template-columns: 1fr; text-align: center; }
  .footer__logo { margin: 0 auto 16px; }
  .social { justify-content: center; }
  .footer__onder { text-align: center; }
}

/* Kleine hulpklassen */
.knoppen--midden { justify-content: center; }
.kop-klein { font-size: clamp(2rem, 4vw, 2.36rem) !important; }
.citaat__noot { margin-top: 14px; font-size: 14px; opacity: .6; }
.sectie--vol { min-height: 60vh; display: flex; align-items: center; }
.sectie--vol .container { width: 100%; }

/* Tablet */
@media (max-width: 1024px) {
  .hero { min-height: clamp(420px, 70vh, 640px); }
  .beeld { height: clamp(300px, 60vh, 560px); }
}

/* Mobiel: tekst gecentreerd zoals in het Odoo-ontwerp, formulieren en vragen links */
@media (max-width: 768px) {
  body { font-size: 17px; }
  main h1, main h2, main h3, main p, main .duo__tekst, main .kopblok { text-align: center; }
  main .knoppen { justify-content: center; }
  main .formulier, main .formulier * { text-align: left; }
  main .praktisch__blok, main .praktisch__blok *, main .faq, main .faq * { text-align: left; }
  main .formulier .midden { text-align: center; }

  .sectie { padding: 56px 0; }
  .intro { min-height: calc(86svh - var(--header-h)); padding: 88px 0 56px; }
  .intro__lijn { margin: 28px auto; }
  h1 { font-size: clamp(3rem, 14vw, 4rem); }
  .voordelen { gap: 22px; margin: 24px 0 32px; }
  .voordelen li { text-align: center; }
  .hero { min-height: 72svh; align-items: flex-end; text-align: center; }
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.1) 20%, rgba(0,0,0,.65)); }
  .hero__tekst { padding-bottom: 44px; max-width: none; }
  .hero p { margin-left: auto; margin-right: auto; font-size: 17px; }
  .hero--midden { align-items: center; }
  .beeld { height: 46svh; min-height: 260px; }
  .duo { gap: 28px; }
  .duo__beeld img { border-radius: 12px; }
  .duo__beeld--hoog img { aspect-ratio: 4 / 5; max-height: 520px; }
  .kopblok { gap: 20px; }
  .kopblok h2 { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .band { padding: 10px 0 5px; }
  .band span { font-size: 1.6rem; }
  .citaat img { width: 96px; height: 96px; }
  .citaat blockquote { font-size: 1.25rem; }
  .stappen { margin: 28px 0 36px; }
  .praktisch { gap: 14px; margin-top: 24px; }
  .praktisch__blok { padding: 20px; }
  .faq summary { font-size: 1.35rem; }
  .faq details { padding: 16px 0; }
  .knop { min-height: 44px; }
  .footer { padding: 48px 0 calc(32px + env(safe-area-inset-bottom)); }
  .footer__raster { gap: 32px; }
  .footer__logo { width: 200px; }
}

@media (max-width: 480px) {
  .formulier { gap: 16px; }
  .contact-logo { width: 180px; }
}

@media (max-width: 360px) {
  .logo img { height: 31px; }
  .logo { top: 14px; }
  .header .knop { font-size: 16px; padding: 3px 8px 1px; }
  h1 { font-size: 2.6rem; }
  .knop { font-size: 23px; padding: 12px 24px 10px; }
  .knop--klein { font-size: 21px; padding: 10px 20px 8px; }
  .mobiel-menu__links a { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band__spoor { animation: none; }
  .logo img, .social a { transition: none; }
}

/* Cookiebanner */
.cookiebanner {
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  max-width: 460px; background: var(--wit); color: var(--tekst);
  border-radius: 14px; border: 1px solid rgba(25,25,79,.12);
  box-shadow: 0 16px 40px rgba(1,7,35,.25);
  padding: 20px 22px 18px;
}
.cookiebanner[hidden] { display: none; }
.cookiebanner p { font-size: 15px; line-height: 1.45; margin: 0 0 14px; }
.cookiebanner__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.cookiebanner .knop { font-size: 20px; padding: 9px 20px 7px; min-height: 0; }
.footer__onder .footer__cookies { color: rgba(255,255,255,.75); font-weight: 400; }
.footer__onder .footer__cookies:hover { color: var(--groen); text-decoration: underline; }
@media (max-width: 600px) {
  .cookiebanner { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; padding: 18px; }
  .cookiebanner p, main .cookiebanner p { text-align: left; }
  .cookiebanner__knoppen .knop { flex: 1; }
}

/* Topbar (zoals in Odoo): extra links links, sociale media rechts */
.topbar { background: var(--inkt); color: var(--wit); }
.topbar__binnen { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 var(--gutter); }
.topbar__links { display: flex; gap: 18px; }
.topbar__links a {
  position: relative; color: var(--wit); text-decoration: none;
  font-size: 13px; font-weight: 700; line-height: 1; padding: 4px 0;
}
.topbar__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--wit); transform: scaleX(0); transform-origin: left center; transition: transform .28s ease;
}
.topbar__links a:hover::after, .topbar__links a:focus-visible::after, .topbar__links a[aria-current="page"]::after { transform: scaleX(1); }
.topbar__social { display: flex; gap: 2px; }
.topbar__social a { display: inline-flex; padding: 6px 7px; color: var(--wit); transition: transform .22s ease; }
.topbar__social a:hover { transform: translateY(-2px); }
.topbar__social svg { width: 15px; height: 15px; fill: currentColor; }
.mobiel-menu__extra { display: none; }
@media (max-width: 1100px) {
  .topbar { display: none; }
  .mobiel-menu[data-open="true"] .mobiel-menu__extra { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .mobiel-menu__extra a { color: rgba(255,255,255,.7); font-size: 17px; font-weight: 700; text-decoration: none; }
  .mobiel-menu__extra a[aria-current="page"], .mobiel-menu__extra a:hover { color: #fff; }
}

/* FAQ-pagina */
.faq-pagina { max-width: 860px; }
.faq__groep { font-size: clamp(2rem, 4vw, 2.6rem); margin: 48px 0 0; }
.faq__groep:first-child { margin-top: 0; }
.faq-pagina .faq { margin-top: 12px; }