@charset "UTF-8";
* {box-sizing:border-box; }

/* scroll-padding-top: ankerlinks niet onder de vaste menubalk (.topnav, 78–85px hoog) laten verdwijnen, plus wat lucht */
html{line-height:1.5;-webkit-text-size-adjust:100%;scroll-padding-top:96px;scroll-behavior:smooth;
  background:var(--color-bg-white)}
@font-face{font-family:"Effra";font-style:normal;font-weight:400 750;font-display:swap;src:url("../fonts/EffraVF_WBasic_Wght.woff2?v=ec07516e") format("woff2-variations");unicode-range:U+20-7E,U+A0-FF,U+131,U+152-153,U+160-161,U+178,U+17D-17E,U+192,U+218-21B,U+2C6,U+2DA,U+2DC,U+2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2039-203A,U+2044,U+20AC,U+2122,U+2212}
/* Terugval voor browsers zonder variabele fonts: losse Regular- en Bold-bestanden */
@supports not font-tech(variations){
  @font-face{font-family:"Effra";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Effra_WBasic_Rg.woff2?v=f0e9b526") format("woff2");unicode-range:U+0000-00FF,U+0100-017F,U+0300-036F,U+2000-206F}
  @font-face{font-family:"Effra";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Effra_WBasic_Bd.woff2?v=bc46db60") format("woff2");unicode-range:U+0000-00FF,U+0100-017F,U+0300-036F,U+2000-206F}
}
@font-face{font-family:"Effra Fallback";font-weight:400;src:local("Arial"),local("ArialMT");size-adjust:94.92%;ascent-override:97.77%;descent-override:27.39%;line-gap-override:0%}
@font-face{font-family:"Effra Fallback";font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT");size-adjust:92.11%;ascent-override:100.75%;descent-override:28.23%;line-gap-override:0%}

:root{--font-text:"Effra","Effra Fallback",system-ui,Arial,sans-serif;
  --font-size-p:clamp(1rem,1vw + 0.5rem,1.25rem);
  --font-size-h1:clamp(2rem,2.5vw + 0.8rem,2.5rem);--font-size-h2:clamp(1.6rem,1.8vw + 0.5rem,1.9rem);--font-size-h3:clamp(1.3rem,1.3vw + 0.5rem,1.5rem);
  --font-size-tagline:clamp(1rem,1vw + 0.7rem,1.6rem);--font-size-hero-h1:clamp(2rem,3vw + 1rem,2.75rem);--font-size-course-title:clamp(1.2rem,1vw + 0.7rem,1.6rem);--font-size-footer:clamp(0.8rem,1vw + 0.5rem,1.2rem);--font-size-langnav:0.95rem;--font-size-lang-icon:1.1rem;--font-size-course-meta:0.95rem;--font-size-hero-p:1.125rem;
  --color-text:#282828;--color-text-muted:#555;--color-text-secondary:#333;--color-text-tertiary:#666;
  --color-head:#274C77;--color-link:#1f5c99;--color-link-hover:#163f6b;
  --color-bg-white:#fff;--color-bg-light:#f8f6f2;--color-bg-footer:#333;--color-footer-text:#fff;
  --color-hero-grad-1:#dbe6f2;--color-hero-grad-2:#eff4f9;--color-hero-grad-3:#fff;
  --color-lang-bg:#f8f8f8;
  --color-topnav-bg:#E9ECEF;--color-topnav-border:#E2E6EA;--color-topnav-text:#333;
  --color-border-card:#e3e6ea;--color-border-card-hover:#d5dbe0;--color-border-btn:#b8c5d6;
  --color-btn-primary-bg:#274C77;--color-btn-bg-hover:#e0f0ff;
  --accent-strong:#DA6C4F;
  --color-focus:#2563eb;
  --quicklinks-bg:#274C77;--quicklinks-text:#fff;--quicklinks-border:#1f3d60;--quicklinks-bg-hover:#1a3553;
  --spacing-xxs:0.25rem;--spacing-xs:.5rem;--spacing-sm:.75rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:2.5rem;
  --padding-md:0.5rem 1rem;--padding-hero:3rem 1.5rem;--padding-btn:0.75rem 1rem;
  --border-width-thin:1px;--border-width-medium:2px;--border-radius-sm:4px;--border-radius-md:8px;--border-radius-lg:12px;
  --shadow-subtle:0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm:0 1px 2px rgba(31,61,91,0.05);
  --shadow-md:0 2px 6px rgba(31,61,91,0.08);
  --shadow-lg:0 4px 14px rgba(31,61,91,0.12);
  --shadow-card:0 4px 12px rgba(0,0,0,0.06);
  --transition-fast:transform 0.15s ease,box-shadow 0.15s ease,border-color 0.15s ease;
  --max-width-text:65ch;
  /* Taalkleuren (zelfde als betacursus): bovenrand taalblokken startpagina, Chinese lijn bovenaan */
  --accent-en:#a33a52;--accent-nl:#c4581f;--accent-zh-hans:#1f9e7c;--accent-zh-hant:#b08642}
body,html{font-family:var(--font-text);margin:0;color:var(--color-text);font-size:100%;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;font-optical-sizing:auto;transition:background-color 0.2s,color 0.2s}
body{display:flex;flex-direction:column;min-height:100vh;letter-spacing:normal}
main{flex:1}
section{margin-bottom:2rem}

p,li,ul,dd{font-size:var(--font-size-p);margin:var(--spacing-md) 0;font-weight:400;letter-spacing:0}
strong{font-weight:600}
h1,h2,.brand{font-weight:600;font-family:var(--font-text);font-optical-sizing:auto;letter-spacing:0}
h2,.brand{margin:0.6em 0 0.4em;color:var(--color-head);font-size:var(--font-size-h2);line-height:1.2}
h1{font-weight:750;font-size:var(--font-size-h1);line-height:1.15;text-align:center;text-wrap:balance}
h3{font-size:var(--font-size-h3);font-weight:550;line-height:1.3;margin:0.9rem 0 0.4rem}
a{color:var(--color-link);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;background:transparent;font-weight:500;letter-spacing:0}
a:hover{color:var(--color-link-hover);text-decoration-thickness:var(--border-width-medium);text-underline-offset:5px;font-weight:500}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}
::selection{background:var(--color-head);color:#fff}
.container{width:100%;padding-right:var(--spacing-md);padding-left:var(--spacing-md);margin-right:auto;margin-left:auto}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:768px){.container{max-width:720px}}
@media (min-width:992px){.container{max-width:960px}}
@media (min-width:1200px){.container{max-width:1140px}}
@media (min-width:1400px){.container{max-width:1320px}}
.intro{text-align:center;padding:var(--spacing-xl) var(--spacing-md) var(--spacing-md)}
.intro h1{font-weight:750;font-size:var(--font-size-h1);margin-bottom:var(--spacing-sm)}
.intro .tagline{font-weight:500;font-size:var(--font-size-tagline);color:var(--color-text-muted)}
img{max-width:100%;height:auto;display:block;shape-margin:0.75rem}
.langnav{display:flex;justify-content:flex-end;align-items:center;background-color:var(--color-lang-bg);padding:var(--padding-md);gap:0.5rem;font-size:var(--font-size-langnav)}
.langnav .lang-icon{font-size:var(--font-size-lang-icon);margin-right:var(--spacing-xxs);color:var(--color-text-tertiary)}
/* Wereldbol vóór de taalkeuze: SVG in de tekstkleur (was het emoji 🌐, dat per apparaat anders oogt) */
.langnav .lang-icon::before{content:"";display:inline-block;width:1em;height:1em;vertical-align:-0.15em;background-color:currentColor;-webkit-mask: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='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20a14.5 14.5 0 0 0 0-20M2 12h20'/%3E%3C/svg%3E") center/contain no-repeat;mask: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='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20a14.5 14.5 0 0 0 0-20M2 12h20'/%3E%3C/svg%3E") center/contain no-repeat}
.langnav a{font-weight:500;display:inline-block;padding:0.35rem 0.6rem;border-radius:6px;text-decoration:none;color:var(--color-topnav-text)}
.langnav a:hover,.langnav a.active{background:rgba(0,0,0,0.06);color:var(--color-link-hover)}
.langnav a.active{font-weight:600}
/* bolletje in de taalkleur (zelfde als betacursus), ook bij de actieve taal */
.langnav a[lang]::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;margin-right:0.4em;vertical-align:middle}
.langnav a[lang="en"]::before{background:var(--accent-en)}
.langnav a[lang="nl"]::before{background:var(--accent-nl)}
.langnav a[lang="zh-Hans"]::before{background:var(--accent-zh-hans)}
.langnav a[lang="zh-Hant"]::before{background:var(--accent-zh-hant)}
.topnav{position:sticky;top:0;z-index:1000;background:var(--color-topnav-bg);padding:var(--padding-md);display:flex;
  align-items:center;gap:var(--spacing-lg);border-bottom:var(--border-width-thin) solid var(--color-topnav-border)}
.topnav-menu{display:flex;list-style:none;margin:0;padding:0;align-items:center;gap:var(--spacing-lg);
  justify-content:flex-start}
.topnav-menu li{margin:0}
.topnav-menu a{font-weight:500;color:var(--color-topnav-text);text-decoration:none;padding:0.5rem 0.75rem;border-radius:8px;display:block;transition:background-color 0.2s,color 0.2s}
.topnav-menu a:hover{background:rgba(0,0,0,0.06);color:var(--color-link-hover)}
.topnav-menu a:active{background:rgba(0,0,0,0.12);color:var(--color-topnav-text);font-weight:600}
.topnav-menu a[aria-current="page"]{background:rgba(0,0,0,0.12);font-weight:600}
/* Mobiel: geen hamburger, de menu-items staan zichtbaar onder de naam in twee kolommen (zoals betacursus);
   de balk is dan niet sticky, anders blijft hij een groot deel van het scherm bezetten */
@media (max-width:768px){
  html{scroll-padding-top:1rem}
  .topnav{position:static;flex-direction:column;align-items:stretch;gap:var(--spacing-xs)}
  .topnav .brand{align-self:center;padding:0}
  .topnav-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-xs)}
  .topnav-menu a{text-align:center;background:rgba(255,255,255,0.7);min-height:44px;
    display:flex;align-items:center;justify-content:center}
}
@media (max-width:768px) and (prefers-color-scheme:dark){.topnav-menu a{background:rgba(255,255,255,0.06)}}
.brand{font-size:calc(var(--font-size-h2) * 1.2);color:var(--color-btn-primary-bg);text-decoration:none;font-weight:700;letter-spacing:0.05em;margin:0;padding:var(--spacing-sm) 0;display:inline-block}
/* beeldmerk (2026-11-08): facetruit met wereldbol, images/epikouria-mark.svg; het woord blijft Effra-tekst */
.brand::before{content:"";display:inline-block;width:1.15em;height:1.15em;margin-right:0.4em;
  vertical-align:-0.22em;background:url("../images/epikouria-mark.svg") center/contain no-repeat}
.brand:hover{opacity:0.8;transform:translateY(-1px);transition:opacity 0.2s ease,transform 0.2s ease}
.hero{position:relative;overflow:hidden;background:radial-gradient(circle at top left,var(--color-hero-grad-1) 0%,var(--color-hero-grad-2) 40%,var(--color-hero-grad-3) 100%);border-radius:var(--border-radius-md);padding:var(--padding-hero);margin-bottom:var(--spacing-xl);text-align:center;box-shadow:var(--shadow-md)}
.hero::before,.lang-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;background-repeat:repeat;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero>*{position:relative;z-index:1}
/* Chinese woorden in de taalkop niet midden in het woord afbreken */
.lang-title [lang^="zh"]{white-space:nowrap}
.hero h1{font-weight:750;font-size:var(--font-size-hero-h1);line-height:1.2;margin:0 0 var(--spacing-md);color:var(--color-head)}
.hero p{font-weight:400;font-size:var(--font-size-hero-p);line-height:1.6;margin:0 auto var(--spacing-xl);max-width:var(--max-width-text);color:var(--color-text-secondary)}
.btn{font-weight:600;display:inline-block;padding:var(--padding-btn);border-radius:var(--border-radius-md);text-decoration:none;border:var(--border-width-thin) solid transparent;transition:background-color 0.25s,color 0.25s,border-color 0.25s,box-shadow 0.25s,transform 0.08s;letter-spacing:0}
.btn-primary{background:var(--quicklinks-bg);color:var(--quicklinks-text);border-color:var(--quicklinks-border);box-shadow:var(--shadow-sm)}
.btn.btn-primary:hover,.btn.btn-primary:focus,.btn.btn-primary:focus-visible{background:var(--quicklinks-bg-hover);border-color:var(--quicklinks-border);color:var(--quicklinks-text);box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.btn:hover,.btn:focus{background:var(--color-btn-bg-hover);color:var(--color-head);border-color:var(--color-border-btn)}
.btn-secondary{background:transparent;color:var(--color-head);border-color:var(--quicklinks-bg)}
.btn.btn-secondary:hover,.btn.btn-secondary:focus-visible{background:var(--color-btn-bg-hover);color:var(--color-head);border-color:var(--quicklinks-bg);transform:translateY(-2px)}
.intro-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-lg);margin:var(--spacing-lg) 0 0}
table th{font-weight:600}
table td{font-weight:400}
footer{background-color:var(--color-bg-footer);color:var(--color-footer-text);font-size:var(--font-size-footer);text-align:center;display:block;position:static;padding:var(--spacing-lg) 0;font-optical-sizing:auto}
footer p{margin:0}
footer .container{display:grid;gap:var(--spacing-lg);grid-template-columns:1.2fr 2fr;align-items:start}
footer .brand{color:var(--color-footer-text)}
.footer-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-lg);text-align:left}
.footer-col h2{margin:0 0 0.75rem;line-height:1.3;text-align:start;padding-bottom:0.4rem;font-size:1.05rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:#fff;border-bottom:2px solid rgba(255,255,255,0.18)}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col a{display:inline-block;color:#cfd8dc;text-decoration:none;padding:0.25rem 0;border-radius:6px;transition:color 0.2s,background-color 0.2s}
.footer-col a:hover{color:#fff;background:rgba(255,255,255,0.08)}
/* korte omschrijving onder de projecten */
.footer-desc{display:block;margin:-0.1rem 0 0.35rem;font-size:0.875em;line-height:1.35;color:#b0b8bc}
footer .legal{grid-column:1/-1;text-align:center;margin-top:var(--spacing-md);font-size:var(--font-size-footer);color:#cfd8dc}
@media (max-width:768px){
  footer .container{grid-template-columns:1fr}
  .footer-nav{grid-template-columns:1fr 1fr}}
.course-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);margin:var(--spacing-sm) 0 var(--spacing-xl)}
@media (min-width:680px){.course-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.course-grid{grid-template-columns:repeat(3,1fr)}}
.course-card{display:flex;flex-direction:column;height:100%;border:var(--border-width-thin) solid var(--color-border-card);border-radius:var(--border-radius-md);padding:var(--spacing-md);background:var(--color-bg-white);box-shadow:var(--shadow-subtle);transition:var(--transition-fast)}
.course-card:hover,.course-card:focus-within{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--color-border-card-hover)}
.course-logo{display:block;width:160px;height:100px;margin:0 auto 1rem;border-radius:8px;background:#fff;box-shadow:0 2px 8px #0000000f;overflow:hidden;position:relative}
.course-logo img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.course-body{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs)}
.course-title{font-weight:600;font-size:var(--font-size-course-title);margin:0}
.course-meta{font-weight:500;color:var(--color-text-tertiary);font-size:var(--font-size-course-meta);margin:0 0 var(--spacing-xxs)}
.course-text{font-weight:400;margin:0}
.course-actions{margin-top:auto}
.lang-list{columns:2;column-gap:var(--spacing-md);margin:var(--spacing-sm) 0 var(--spacing-xxs)}
@media (max-width:520px){.lang-list{columns:1}}
@media (min-width:768px){.course-logo{width:180px;height:110px}}
@media (min-width:1200px){.course-logo{width:200px;height:120px}}
@media (prefers-color-scheme:dark){
  html{color-scheme:dark light}
  :root{--accent-en:#e8829a;--accent-nl:#f0955c;--accent-zh-hans:#4fd9ac;--accent-zh-hant:#d9b873;
    --quicklinks-bg:#3a6ea5;--quicklinks-border:#4f82b8;--quicklinks-bg-hover:#2c5783;
    --color-text:#e0e0e0;--color-text-muted:#aaa;
    --color-text-secondary:#ccc;
    --color-text-tertiary:#999;--color-head:#6ba3d4;
    --color-link:#89cff0;--color-link-hover:#5fb8e8;
    --color-bg-white:#1a1a1a;--color-bg-light:#2a2a2a;
    --color-bg-footer:#1a1a1a;--color-lang-bg:#2a2a2a;
    --color-topnav-bg:#2a2a2a;--color-topnav-border:#3a3a3a;
    --color-topnav-text:#e0e0e0;--color-border-card:#3a3a3a;
    --color-border-card-hover:#4a4a4a;
    --color-border-btn:#4a6080;--color-btn-bg-hover:#213040;
    --color-btn-primary-bg:#6ba3d4;--color-focus:#93c5fd;
    --shadow-subtle:0 1px 2px rgba(255,255,255,0.04);--shadow-sm:0 1px 2px rgba(255,255,255,0.06);
    --shadow-md:0 2px 6px rgba(255,255,255,0.08);--shadow-lg:0 4px 14px rgba(255,255,255,0.12);
      --shadow-card:0 4px 12px rgba(255,255,255,0.07);
    --color-hero-grad-1:#17233a;--color-hero-grad-2:#141a24;--color-hero-grad-3:#1a1a1a;}
  .topnav-menu a,
  .langnav a{font-weight:600}
  .langnav a:hover,.langnav a.active{background:rgba(255,255,255,0.10)}
  .topnav-menu a:hover{background:rgba(255,255,255,0.10)}
  .topnav-menu a:active,.topnav-menu a[aria-current="page"]{background:rgba(255,255,255,0.16)}
  .hero::before,.lang-section::before{filter:invert(1);opacity:.6}
}

@media print{
  *{background:#fff!important;color:#000!important;box-shadow:none!important}
  .topnav,.langnav,.skip-link{display:none!important}
  footer{border-top:1px solid #ccc;margin-top:1.5rem;padding-top:.5rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}
/* ==== Soort link zichtbaar maken (uitleg vs. link) ====
   extern ↗ (ook projectlinks in footer) · e-mail ✉ · PDF "PDF · grootte"; interne links blijven gewoon onderstreept */
main a[href^="http"]:not([href*="epikouria.nl"]):not(.course-logo)::after,
.footer-col a[href^="http"]::after{content:"";
  display:inline-block;
  width:0.72em;
  height:0.72em;
  margin-inline-start:0.2em;
  vertical-align:0.05em;
  background-color:currentColor;
  -webkit-mask: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center/contain no-repeat}
.icon-badge-mail::before,
main a[href^="mailto:"]::before{content:"";
  display:inline-block;
  width:0.95em;
  height:0.95em;
  margin-inline-end:0.3em;
  vertical-align:-0.12em;
  background-color:currentColor;
  -webkit-mask: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' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: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' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/contain no-repeat}
main a[data-size]:not(.doc-card)::after{content:"PDF · " attr(data-size);
  display:inline-block;
  margin-inline-start:0.4em;
  padding:0.05em 0.45em;
  border-radius:999px;
  background:var(--color-btn-bg-hover);
  color:var(--color-head);
  font-size:0.72em;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
  vertical-align:0.1em;
  text-decoration:none}


/* Ankers (#contact, #licentie) niet onder de sticky .topnav laten vallen */
main [id]{scroll-margin-top:5.5rem}
@media (max-width:768px){main [id]{scroll-margin-top:1rem}}

/* Regelval: geen los woord op de laatste regel, koppen gelijk verdeeld (longhand: laat white-space/nowrap ongemoeid) */
p,li,dd,td,th,blockquote,figcaption{text-wrap-style:pretty}
h1,h2,h3,h4,dt,summary{text-wrap-style:balance}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== Verfraaiing 2026-11-08: minder vlak (zelfde vormen als betacursus/deltacursus, eigen kleuren) ==== */
/* band = Epikouria-blauw, accent = oranje van het ruitje; streep = de drie projecten (DOTA, Betacursus, Deltacursus) */
:root{--band:#274c77;
  --intro-tint:#4a86c5;
  --band-accent:var(--accent-strong);
  --page-bg:var(--color-bg-white);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --stripe:linear-gradient(90deg,#1f766e 0 33.34%,#1f5276 33.34% 66.67%,#1f7643 66.67%)}
@media (prefers-color-scheme:dark){
  :root{--band:#3a6ea5;--intro-tint:#3a6ea5}
}
body{overflow-x:clip}

/* 1. Kopband op de subpagina's: vlak over de volle breedte, zacht verloop en korrel, oranje streepje */
.page-band{margin:0 calc(50% - 50vw) var(--spacing-lg);
  padding:clamp(1.5rem,3.5vw,2.75rem) max(1rem,calc(50vw - 50%)) clamp(1.25rem,3vw,2.25rem);
  background:
    var(--noise) repeat 0 0/160px 160px,
    radial-gradient(ellipse at top left,
      color-mix(in srgb,var(--band) 18%,var(--page-bg)) 0%,
      color-mix(in srgb,var(--band) 6%,var(--page-bg)) 55%,
      var(--page-bg) 100%);
  border-bottom:1px solid color-mix(in srgb,var(--band) 18%,transparent)}
.page-band h1{margin:0}
.page-band h1::after,
.intro h1::after{content:"";
  display:block;
  width:3.5rem;
  height:4px;
  margin:0.7rem auto 0;
  border-radius:2px;
  background:var(--band-accent)}

/* Startpagina: de intro als paneel, zoals de hero op betacursus */
.intro{margin-top:var(--spacing-lg);
  padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,3rem);
  border-radius:16px;
  background:
    var(--noise) repeat 0 0/160px 160px,
    radial-gradient(circle at top left,
      color-mix(in srgb,var(--intro-tint) 24%,var(--page-bg)) 0%,
      color-mix(in srgb,var(--intro-tint) 8%,var(--page-bg)) 45%,
      color-mix(in srgb,var(--accent-strong) 6%,var(--page-bg)) 100%);
  box-shadow:var(--shadow-lg)}

/* 2. Koppen in main: kort, dik oranje streepje */
main h2::after{content:"";
  display:block;
  width:2.75rem;
  height:4px;
  margin-top:0.4rem;
  border-radius:2px;
  background:var(--band-accent)}
.projects h2::after{margin-inline:auto}

/* 3. Streep in de drie projectkleuren boven de footer */
footer{position:relative;padding-top:calc(var(--spacing-lg) + 6px)}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--stripe)}

/* 4. Tekstpagina (Over ons): smallere kolom */
.page-prose{max-width:min(100%,54rem)}

/* Betacursus-kaart (cursussen): alleen het beeldmerk, de naam staat eronder als kop */
.course-logo img[src*="betacursus-mark"]{padding:12px 0}