/* Overgenomen uit de bestaande site (modul-2.html) */

  #access-gate{
    position:fixed; inset:0; background:#FFFBF9; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-family:'Manrope',sans-serif; gap:14px; text-align:center; padding:20px;
  }
  #access-gate .spinner{
    width:36px; height:36px; border-radius:50%; border:4px solid #F6C9D6; border-top-color:#F4914A;
    animation:spin 0.8s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  #access-gate p{ color:#7A5C63; font-size:14px; margin:0; }


  :root{
    --blush:#FDEDF1;
    --blush-deep:#F6C9D6;
    --rose:#E8879F;
    --rose-dark:#C85D78;
    --orange:#F4914A;
    --orange-dark:#D96B2B;
    --ink:#3A2A2E;
    --ink-soft:#7A5C63;
    --paper:#FFFBF9;
    --line:#F0D9DF;
    --radius:18px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Manrope',sans-serif;
    font-weight:800;
    letter-spacing:-0.01em;
    color:var(--ink);
    margin:0;
  }
  a{color:var(--rose-dark);}
  .hero{
    background:linear-gradient(135deg,var(--blush) 0%, var(--blush-deep) 55%, #FBD9C4 100%);
    padding:44px 20px 56px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";
    position:absolute;
    right:-60px; top:-60px;
    width:220px; height:220px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(244,145,74,0.55), rgba(244,145,74,0) 70%);
  }
  .hero-inner{position:relative; z-index:1; max-width:640px; margin:0 auto;}
  .eyebrow{
    display:inline-block;
    font-size:12.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:var(--orange);
    color:#fff;
    padding:5px 12px;
    border-radius:999px;
    font-weight:700;
    margin-bottom:14px;
  }
  .hero h1{font-size:28px; line-height:1.15; margin-bottom:8px;}
  .hero p{font-size:15.5px; color:var(--ink-soft); margin:0; line-height:1.5;}
  .progress-pill{
    margin-top:20px;
    display:flex; align-items:center; gap:10px;
    font-size:13px; color:var(--ink-soft); font-weight:500;
  }
  .progress-track{
    flex:1; height:8px; background:#fff; border-radius:999px; overflow:hidden;
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .progress-fill{height:100%; width:14.3%; background:linear-gradient(90deg,var(--rose),var(--orange)); border-radius:999px;}
  .modnav{
    max-width:640px; margin:-28px auto 0; padding:0 20px;
    position:relative; z-index:2;
  }
  .modnav-scroll{
    display:flex; gap:8px; overflow-x:auto; padding:10px 12px;
    background:var(--paper); border-radius:16px; box-shadow:0 6px 20px rgba(200,93,120,0.15);
    -ms-overflow-style:none; scrollbar-width:none;
  }
  .modnav-scroll::-webkit-scrollbar{display:none;}
  .modchip{
    flex:0 0 auto;
    width:34px; height:34px;
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
    background:#F5EDEC; color:#C9AEB3;
    cursor:pointer;
    text-decoration:none;
  }
  .modchip.active{
    background:linear-gradient(135deg,var(--rose),var(--orange));
    color:#fff;
  }
  main{max-width:640px; margin:0 auto; padding:28px 20px 80px;}
  section{margin-bottom:34px;}
  .section-head{display:flex; align-items:baseline; gap:10px; margin-bottom:14px;}
  .section-num{
    font-family:'Manrope',sans-serif; font-weight:700; font-size:13px;
    color:var(--orange-dark); background:#FDE7D6; padding:3px 9px; border-radius:8px;
  }
  .section-head h2{font-size:19px;}
  .section-sub{font-size:13px; color:var(--ink-soft); margin-top:2px;}
  .card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px;}
  .vocab-row{display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line);}
  .vocab-row:last-child{border-bottom:none;}
  .audio-btn{
    flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    background:var(--blush-deep); border:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--rose-dark); font-size:14px;
  }
  .audio-btn[disabled]{background:#F2EEED; color:#C7BEBB; cursor:not-allowed;}
  .vocab-text{flex:1;}
  .vocab-nl{font-weight:700; font-size:15px;}
  .vocab-pl{font-size:13px; color:var(--ink-soft);}
  .vocab-pron{font-size:12px; color:var(--rose-dark); font-style:italic; margin-top:1px;}

  .audio-block{
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,var(--blush),#fff);
    border:1px solid var(--line); border-radius:14px;
    padding:10px 12px; margin-bottom:12px;
  }
  .audio-block.disabled{background:#F7F3F2; opacity:0.75;}
  .play-btn{
    flex:0 0 auto; width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg,var(--rose),var(--orange)); color:#fff;
    border:none; font-size:14px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .audio-block.disabled .play-btn{background:#D8CFCD; cursor:not-allowed;}
  .audio-label{flex:1; font-size:13px; font-weight:600; color:var(--ink);}
  .audio-block.disabled .audio-label{color:var(--ink-soft); font-weight:500;}
  .download-btn{
    flex:0 0 auto; width:34px; height:34px; border-radius:50%;
    background:#fff; border:1px solid var(--line); color:var(--rose-dark);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background 0.15s, color 0.15s;
  }
  .download-btn:hover{background:var(--rose); color:#fff; border-color:var(--rose);}
  .download-btn svg{display:block;}
  .audio-block.disabled .download-btn{display:none;}
  .dialogue-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px;}
  .line{display:flex; gap:8px; margin-bottom:10px; align-items:flex-start;}
  .line .who{
    flex:0 0 auto; width:26px; height:26px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:11px; font-weight:700; color:#fff; font-family:'Manrope',sans-serif;
    margin-top:2px;
  }
  .line.p1 .who{background:var(--orange);}
  .line.p2 .who{background:var(--rose);}
  .line p{margin:0; font-size:14.5px; line-height:1.4;}
  .grammar-block{margin-bottom:14px;}
  .grammar-block h3{font-size:15px; margin-bottom:6px; color:var(--rose-dark);}
  .grammar-block p{font-size:14px; line-height:1.55; margin:0 0 8px;}
  table.gram{width:100%; border-collapse:collapse; font-size:13.5px; margin-top:6px;}
  table.gram th,table.gram td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--line);}
  table.gram th{color:var(--ink-soft); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
  .exercise{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:12px;}
  .exercise-title{font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; margin-bottom:8px; color:var(--ink);}
  .exercise ol,.exercise ul{margin:0; padding-left:20px; font-size:14px; line-height:1.7;}
  .exercise p{font-size:13.5px; line-height:1.6; margin:0 0 6px;}
  .reveal-btn{
    margin-top:10px; background:var(--blush-deep); color:var(--rose-dark);
    border:none; border-radius:999px; padding:8px 14px; font-size:13px; font-weight:700;
    font-family:'Manrope',sans-serif; cursor:pointer;
  }
  .reveal-btn:hover{background:var(--rose); color:#fff;}
  .answer-box{
    display:none; margin-top:10px; padding:10px 12px;
    background:#FFF6EE; border:1px dashed var(--orange); border-radius:10px;
    font-size:13.5px; line-height:1.6; color:var(--ink);
  }
  .answer-box.show{display:block;}
  .final-key{background:linear-gradient(135deg,var(--blush) 0%, #fff 60%); border:1px solid var(--line); border-radius:var(--radius);}
  .final-key summary{
    cursor:pointer; font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;
    padding:16px; list-style:none; display:flex; justify-content:space-between; align-items:center;
  }
  .final-key summary::-webkit-details-marker{display:none;}
  .final-key summary::after{content:"▾"; color:var(--rose-dark);}
  .final-key[open] summary::after{content:"▴";}
  .final-key .key-body{padding:0 16px 16px; font-size:13.5px; line-height:1.8;}
  .final-key .key-body b{color:var(--rose-dark);}
  footer{text-align:center; padding:26px 20px 40px; font-size:12px; color:var(--ink-soft);}
  .task-box{background:linear-gradient(135deg,#FFF3E9,#FDEDF1); border-radius:var(--radius); padding:16px;}
  .task-box ul{margin:8px 0 0; padding-left:20px; font-size:14px; line-height:1.7;}
  textarea.answer-input{
    width:100%; margin-top:10px; border-radius:10px; border:1px solid var(--line);
    padding:10px; font-family:'Manrope',sans-serif; font-size:13.5px; resize:vertical; min-height:70px;
  }
  @media (prefers-reduced-motion: reduce){ *{transition:none !important;} }

  /* ---- NAV ---- */
  .navbar{
    position:sticky; top:0; z-index:50;
    background:rgba(255,251,249,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px;
  }
  .navbar img{height:24px; display:block;}
  .nav-toggle{
    width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
    background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px; cursor:pointer;
  }
  .nav-toggle span{width:15px; height:2px; background:var(--ink); border-radius:2px;}
  .nav-menu{
    display:none; position:fixed; inset:0; z-index:9998;
    background:var(--paper);
    flex-direction:column;
  }
  .nav-menu.open{display:flex;}
  .nav-menu-header{
    display:flex; align-items:center; justify-content:space-between; padding:12px 20px;
    border-bottom:1px solid var(--line);
  }
  .nav-menu-header img{height:24px;}
  .nav-close{
    width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
    background:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer;
  }
  .nav-links{display:flex; flex-direction:column; padding:20px;}
  .nav-links a{padding:15px 4px; font-size:18px; font-weight:700; border-bottom:1px solid var(--line);}
  .nav-links a:last-child{border-bottom:none;}